Элементы пользовательского интерфейса для ввода кода активации - PullRequest
1 голос
/ 28 января 2010

У меня есть небольшая проблема с удобством использования, на которую я хотел бы обратить внимание.

Начальная страница моего сайта содержит две группы элементов управления: одну для входа в систему, другую для активации новыми пользователями.

Проблема с последним. Когда пользователи регистрируются в службе, они получают код активации в виде XXXX-XXXX-XXXX-XXXX. На данный момент они должны ввести это в четыре отдельных текстовых поля. Хотя я добавил к этому некоторый javascript, чтобы автоматически перемещать их назад и вперед между текстовыми полями, как если бы это был один элемент управления (который работает довольно хорошо), проблема в том, что у него нет способа вставить в него свои данные и как немного боли.

Теперь это не огромная проблема, но потенциально это означает, что люди, впервые знакомые с моим сайтом, немного разочаровывают и вынуждены перепрыгивать назад и вперед между электронным письмом, содержащим их код активации, и моей страницей. Это явно не оптимально.

В этот момент вы, вероятно, думаете, что очевидным ответом было бы ввести код активации в одно текстовое поле. И вы были бы правы, но я потеряю одну очень важную вещь, если я сделаю это: я потеряю ключевой визуальный дифференциатор между одной формой и другой, который автоматически сообщает пользователю, какую форму он должен использовать, не читая ничего и не имея необходимости анализировать муравейник Как и в настоящий момент, фактически на странице есть две дырки различной формы, и данные пользователей, очевидно, будут соответствовать только одному из них, так что, в некоторой степени, форма их не составляет никакого труда.

Итак, есть ли у кого-нибудь хорошие решения для этого? Единственное ограничение - мне нужно хранить все элементы управления на одной странице.

Заранее спасибо за любую помощь.

Edit:

Спасибо за весь вклад, каждый из которых был ценным. В настоящее время я думаю, что лучшее решение - это не одно, а объединение различных подходов, чтобы сделать все это более полезным.

Исходя из этого, вот что я собираюсь сделать, основываясь на всех ваших предложениях:

  • В письме о покупке установите ссылку на начальную страницу, так что это содержит код активации в Строка запроса. Настройте начальную страницу проверить это и отправить их Прямо на. Это, вероятно, означает, что подавляющее большинство пользователей даже не увидеть начальную страницу, но там будет все еще будут случаи, когда люди получают их коды другими способами и будут должен вводить их напрямую
  • Преобразовать четыре текстовых поля в одно текстовое поле с «XXXX-XXXX-XXXX-XXXX» в качестве встроенного этикетка.
  • Настройка параметров входа в систему для пересылки на любого пользователя, который ошибочно входит их код активации здесь, не выводя их на экран ошибки.

И я не знаю, почему я не включил его в первую очередь, но вот URL для всех, кто хочет взглянуть на текущую реализацию (вам придется извиниться тот факт, что это по-итальянски, но это должно быть довольно просто, что к чему).

Дали ответ Брайану, в котором содержится большая часть того, что я собираюсь использовать. Если бы у меня была необходимая репутация, я бы проголосовал за все ваши ответы, поскольку все они помогли. Еще раз спасибо.

Ответы [ 3 ]

1 голос
/ 28 января 2010

Несколько простых опций:

  1. Вы можете сохранить их на одной физической странице, просто измените строку запроса при отправке кода активации. Скрыть один набор элементов управления, если строка запроса доступна. Если вам нужно отобразить оба раздела, то выделите серым один раздел на основе информации строки запроса.

  2. Изменить элемент управления, чтобы иметь одно текстовое поле, но включить "XXXX-XXXX-XXXX-XXXX" в качестве текста по умолчанию в активации нового пользователя. Если пользователь нажимает на текстовое поле, удалите текст, чтобы он не включал текст подсказки с кодом активации. Люди увидят текст по умолчанию и будут тяготеть к нему, если ожидают этого паттерна. Люди, входящие в систему, увидят текст по умолчанию и заблокируют его.

1 голос
/ 29 января 2010

Похоже, у вас проблема с тем, что пользователи путают два текстовых поля, но тогда вы усугубляете ситуацию, разделяя одно текстовое поле на четыре.Например, автоматическое переключение между полями плохо подходит для использования - см. Комментарии и ответы на « Перемещение фокуса, когда поле ввода текста достигает максимальной длины ».

Предполагая, что это негипотетическая проблема, и вы действительно заметили, что люди используют неправильное поле, вам нужно найти другое решение для пользователей, которые путают поля:

  • Используйте краткие метки полей.Пометьте поле «Код активации», а не «Введите свой шестнадцатизначный код активации, разделенный тире, из электронного письма, которое мы отправили вам при регистрации». Текст, необходимый для объяснения того, где можно получить код активации, должен быть после .текстовое поле.

  • Используйте текстовый или графический дизайн на внешней стороне текстового поля, чтобы указать, что оно имеет четыре подстроки.Например, поместите «XXXX-XXXX-XXXX-XXXX» под текстовым полем.

  • Удалите все посторонние элементы со страницы - чем больше графических и текстовых помех на странице, тем меньше будут заметны различия между двумя текстовыми полями.

  • Сделайте так, чтобы не имело значения, какое текстовое поле используют пользователи.Если строка, введенная в текстовом поле «Имя пользователя», не соответствует ни одному имени пользователя, посмотрите, соответствует ли она какому-либо коду активации, и наоборот.

  • Устранить текстовое поле с кодом активации.Вместо этого при отправке запроса на активацию включите URL-адрес регистрации, в котором в качестве параметра указан код активации (подробности см. В bryanjonker ).

Извините, вероятно, это должен быть комментарий, а не ответ, но он не подходит.

1 голос
/ 28 января 2010

Вы можете написать в JavaScript функцию onpaste, которая разбивает вставленную строку на блоки 4character, и они записывают их в соответствующие текстовые поля через dom.

...