Freeartists статьи и рецензии о технологиях
Удобство использования форм
Об удобстве использования и доступности форм было написано уже немало статей. И большинство из них стоят потраченного на их прочтение времени. Тем не менее, на просторах интернета существует огромное количество форм, которые невозможно заполнить или ими неудобно пользоваться. Чтобы исправить эту ситуацию я решил написать чек-лист по формам, выполнив который, вы сможете гарантировать, что ваши формы не будут вызывать ненависть к вам у пользователей.
Помните, что удачно заполненная форма, это новый заказ, новый постоянный посетитель, довольный пользователь и в конечном итоге прибыль.
Все данные, введенные пользователем, должны быть сохранены
Большинство разработчиков уже усвоили это простое правило, и при неправильном заполнении формы восстанавливают значения полей, которые пользователь заполнил. Но почему-то забывают делать это для неправильно заполненных полей и полей типа пароль. Почему, указав некорректный адрес электронной почты, я должен заново вводить пароль? Или, почему, допустив ошибку в поле «логин», я должен заполнять его заново, вместо того, чтобы исправить ошибку, удалив лишний символ?
Итак: всегда сохраняйте данные, введенные пользователем, в полном объеме.
Исключение: если в форме есть поле уникальное для каждой попытки заполнить форму (например CAPTCHA), то это поле нужно очистить.
В полном объеме информируйте пользователя о допущенных им ошибках
Тихую ненависть вызывают такие сообщения об ошибках, как: «Некоторые поля формы заполнены неправильно» или «Ограничения 1 и 2 не соблюдены». Не заставляйте пользователя разгадывать ребус.
В заголовке формы выведите сообщение об ошибке и список полей заполненных неправильно, выделите сообщение цветом (красным) и стилем (размером или насыщенностью текста). Подсветите неправильно заполненные поля формы красным фоном, под каждым неправильно заполненным полем разместите текст с описанием ошибки. Текст должен не констатировать факт ошибки, а помогать ее исправить. Например: не «неправильный адрес электронной почты», а «в поле адрес электронной почты должен присутствовать символ „@“, например: mail@freeartists.ru».
Если форма была заполнена правильно, сообщите об этом пользователю и направьте его дальше. Не оставляйте пользователя на пол пути.
Итак: пользователь должен видеть, что допустил ошибку; неправильно заполненные поля должны быть выделены; текст сообщения об ошибки должен быть однозначной инструкцией по ее исправлению.
Валидация форм
Если результат отправки данных формы на сервер вызовет запуск длительного или необратимого процесса обязательно валидируйте такую форму перед выполнением. Кроме валидации формы на сервере имеет смысл валидировать ее и на клиенте. Многие разработчики проверяют на клиенте только соответствие полей формы некоторым правилам и ограничениям, используя регулярные выражения или другие методики. Но они не могут проверить свободно ли такое «имя пользователя» или достаточно ли у пользователя средств на счету. Такие задачи легко решаются на клиенте с помощью технологии AJAX.
Проверяя правильность заполнения формы на клиенте помогите пользователю исправить ошибки, ставя фокус в первое неправильно заполненное поле. А после исправления первой ошибки переведите фокус на следующее неправильно заполненное поле.
Итак: алгоритм, внешний вид и код результата проверки формы на клиенте и на сервере должны быть абсолютно одинаковыми.
CAPTCHA или как не выплеснуть вместе с водой младенца
Наверное, все читатели видели CAPTCHA, которую не может прочесть даже человек с абсолютным зрением. Возникает вопрос зачем защищать форму от роботов так, что ее не может заполнить человек? Я уже не говорю, о том, что в мире полно людей с нарушениями зрения. Тем не менее сделать хорошую CAPTCHA очень просто:
- Делайте CAPTCHA длиной 4 символа и сообщайте это пользователю.
- Используйте только цифры и сообщайте это пользователю (введите четырехзначное число на картинке).
- Не используйте фон близкий к цвету надписи, а также не используйте сочетание цветов фона и надписи, недоступные людям страдающим дальтонизмом. Цвета текста и фона должны быть контрастными.
- Делайте CAPTCHA достаточно большой, например, 150*70 px.
- Используйте префикс из случайной строки в параметре name тега input CAPTCHA (
<input tape="text" name="captcha-3241" size="4" maxlength="4" />) это нужно для того, чтобы браузер не заполнял поле CAPTCHA из ранее запомненных значений. - Дайте пользователю альтернативу. Это может быть звуковая CAPTCHA, возможность cгенерировать CAPTCHA заново или отправить текст CAPTCHA на электронную почту и т. д.
- Не генерируйте CAPTCHA заново, при неправильном заполнении формы. В этом случае не забудьте восстановить значение ранее заполненное пользователем.
Подумайте а нужна ли вам CAPTCHA вообще? Например если пользователь уже авторизован его нет смысла проверять.
Правильное оформление форм
Вообще-то этот раздел следовало поставить в начало статьи, так как вместо того, чтобы объяснять пользователю где он ошибся, следует так оформлять формы, чтобы в них не возможно было допустить ошибку.
Обязательные поля
Выделяйте обязательные поля красной звездочкой (*) после подписи к полю. К этому символу все привыкли и прекрасно знают его назначение. Другие способы выделения обязательных полей скорее всего буду не очевидны для пользователей. Также можно добавить подсказку (<span title="обязательно заполните это поле">*</span>).
Оформление и группировка элементов формы
Используйте стандартное оформление элементов формы. Пользователи привыкли к оформлению принятому в их ОС или ПО. Не надо шокировать пользователей собственным творчеством.
Располагайте подписи и поля ввода к ним таким образом, чтобы пользователем было очевидно, к какому полю относится подпись. Для этого расстояние между подписью и полем ввода должно быть в два или более раз меньше, чем расстояние до соседних элементов формы. Не бойтесь белого пространства, чем его больше, тем лучше.
Группируйте близкие по смыслу поля формы используя теги fieldset и label.
Кнопка «отправить» или аналогичная по смыслу должна находиться в левом нижнем углу формы и должна быть заметно оформлена, используйте для нее зеленый цвет или другие способы оформления, показывающие пользователю ее «положительные» качества. Кнопка «отменить» должна быть на одном уровне с остальными кнопками, всегда самой правой и значительно отстоять от них. Используйте для ее оформления красный цвет. Она должна быть антонимом кнопки «отправить».
Кодирование форм
Используйте конструкцию «<label for="field-id">Подпись <input id="field-id" /></label>» для того, чтобы, при клике на подпись, фокус переходил на поле ввода.
Подсвечивайте поля ввода, находящиеся в фокусе (input:focus{background:#ffc}).
Обязательно указывайте параметры size и maxlength для тега input. В качестве значения параметра size используйте среднестатистическую длину для этого поля, а для maxlength максимально допустимую длину этого поля в базе данных.
Выбирайте общеупотребительные названия для полей ввода (name), тогда браузер клиента будет заполнять их автоматически (mail, а не pochta).
Избегайте повторной отправки формы, при обновлении страницы. Обычно это делается через редирект.
Используйте AJAX для автоматического заполнения зависимых полей.
Заполняйте поля ввода значениями по умолчанию, если заранее знаете, какой будет ответ пользователя. Например, в поле «Я согласен с условиями» можно поставить галочку по умолчанию.
Избегайте задавать пользователю лишние вопросы, задавайте только необходимые для совершения действия. Например, информацию о себе пользователь может заполнить и после регистрации, если его действительно заинтересует ваш сервис.
Постарайтесь обойтись без форматов. Например, пользователь должен ввести номер своего телефона, допустим мы ожидаем от него такую строку 74957978889, а он привык писать телефон так — 8 (495) 797-88-89. Что мешает написать регулярное выражение, которое принимало бы данные в том формате, в котором удобно пользователю, а сохранять данные в удобном для вас формате? Если же это не возможно, покажите пользователю нужный формат на примере.
Если пользователи регулярно совершают одну и туже ошибку и вы не можете исправить форму, чтобы они не допускали эту ошибку, напишите для них подсказку. Это может быть знак вопроса, оформленный, как ссылка, при клике на которой будет всплывать подсказка с подробной инструкцией по заполнению этого поля.
Подписи к полям ввода
Убедитесь, что пользователи однозначно понимают смысл вопросов. На одном проекте в форме регистрации было поле с подписью «адрес почты», половина пользователей вписывало в него свой почтовый адрес (Москва, Красная пл., д. 1). И очень удивлялась, когда система сообщала, что в поле «адрес почты» должен быть символ «@».
Ни в коем случае не используйте сленг.
Оформление страниц с формой
Если данная страница создана исключительно для заполнения формы, удалите с нее все лишние элементы. Это могут быть баннеры, информеры, новости и т. д. Ничто не должно отвлекать пользователя.
Ставьте фокус в первое поле формы, перемещение фокуса, при табуляции, должно соответствовать визуальному порядку элементов формы на странице.
Форма должна находится до «сгиба».
Тренируйтесь на кошках
Проверьте вашу форму на себе, заполните ее пару раз. Вы сразу увидите качество вашей работы. Протестируйте форму на потенциальных клиентах, если у вас есть такая возможность. Сделав это, вы найдете узкие места, в которых пользователи делают ошибки.
Подобное тестирование это повод задуматься насколько вы отличаетесь от ваших пользователей…
P.S.
Помните, что эти правила не догмы и в них есть исключения. Руководствуйтесь здравым смыслом и заботьтесь о пользователях.
Все выше перечисленное можно применять не только к web-формам, но и к другим интерфейсам.
Очень полезно! Многое из предложенного применил, а точнее исправил.
11 января 2009, 15:15> Исключение: если в форме есть поле уникальное для каждой попытки заполнить форму (например CAPTCHA), то это поле нужно очистить.
Если веб-клиент один раз правильно прошел «тест отделяющий машин от людей», нахера давать ему этот тест второй раз?
12 января 2009, 3:18У кого-то один раз видел правильную реализацию — капчу спрашивали один раз, все остальные делают указанную вами ахинею.
Captcha, 5-ый пункт: «Используйте префикс из случайной строки в параметре name тега input CAPTCHA».
Есть более простой вариант — добавить аттрибут autocomplete=»off» к элементу input. Он «нестандартный», валидацию не проходит. Зато работает.
12 января 2009, 8:47Дело вкуса, конечно, но я предпочитаю придерживаться web-стандартов.
12 января 2009, 10:06Спасибо за проведенную систематизацию, кое-что знал, кое-что узнал, — будем делать формы более удобными.
12 января 2009, 18:45примеры капч
http://www.suggestusability.com/2007/08/few-irritating-captchas-image.html
мне больше нравится гугл вариант
22 января 2009, 2:47