x
 
Евгений Казаков
19 апреля 2010

Здравствуйте.

Хотелось бы разобраться с вопросом выделения обязательных полей на форме.

  • Есть форма из нескольких десятков полей. Часть полей обязательна для заполнения. Правильность заполнения части полей проверяется Яваскриптом. Как лучше всего сообщить пользователю о том, что поле:
  • должно быть заполнено;
  • заполнено правильно;
  • заполнено неправильно?


Евгений!

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

Разделение на обязательные и необязательные поля пришло в интернет вместе с маркетингом. В формы регистрации стали пихать поля, которые якобы помогают составлять портрет пользователя и рассчитывать хитроумную статистику. Как только первая форма на каком-нибудь Хотмейле ушла за второй экран (что немыслимо для диалоговых окон «настольных» приложений), стало ясно, что без красных звёздочек * рядом с обязательными полями нормальному человеку через анкету не прорваться.

В итоге звёздочки стали удобным ориентиром для быстрого ввода бессмыслицы типа sdfgh или 1111. Тогда хитроумные программисты придумали валидацию, или проверку заполнения, чтобы например в поле ввода электронной почты непременно потребовать собаку и правильно прописанные домены. Помехи пользователю — это неэффективный путь.

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

Скорее необязательные поля требуют специальной пометки, чем обязательные.

За всеми этими рассуждениями стоит простой принцип — не просить у пользователя ничего лишнего, если нам самим от него что-нибудь нужно. Апофеоз бюрократического идиотизма — обязательные поля в форме жалобы. «Ваше мнение очень важно для нас. Расскажите, как улучшить наш сервис, только не забудьте указать ваши фамилию, имя, отчество, номер паспорта, адрес прописки, адрес электронной почты, номер мобильного и девичью фамилию матери».

P. S.

Я ничего не имею против пометки ошибочно заполненных полей.


Поделиться
Отправить

Комментарии

Денис Братчук
20 апреля 2010

Обязательное (но не заполненное) и неправильно заполненное поля обозначают примерно одно и то же.

Мне нравится использовать форму логина на Rackspace Cloud:
https://manage.rackspacecloud.com/pages/Login.jsp
используется стандартное цветовое кодирование (красный — ошибка, зелёный — всё нормально);

требуемое, но не заполненное поле обозначается неподвижным красным квадратом, а неправильно заполненное — мигающим, привлекая больше внимания;

сами квадраты сбоку от полей похожи на общепринятые «звёзды», обозначающие требуемые поля.


Впрочем, не уверен, что это будет так же хорошо работать для более объёмных форм.

Константин Дубина
20 апреля 2010

Есть вещи, которые требуют проверки: длина номера, адрес эл.почты (хотя бы на то, что он написан латиницей) и т. д.

На мой взгляд, приятнее всего подсказывать о неправильности заполнения красным названием поля и подсказкой. Если поле заполнено верно, то зелёный — ни к чему.

Сергей Шейпак
20 апреля 2010

Полагаю, что Евгений задавал вопрос про специфические формы — «Есть форма из нескольких десятков полей. Часть полей обязательна для заполнения».

Есть один проект, в котором около тридцати различных форм, на каждой расположено до 40-50 полей, а кроме того до 8 вложенных форм, каждая из которых также может иметь до 8-10 полей.

Банальный пример: Форма директора организации.

В определённых случаях требуется обязательное заполнение сведений об образовании и о родственниках (это две подформы). Большая вероятность того, один и тот же оператор столкнётся с тем, что в одном случае для Иванова заполнение подформ обязательно, а для Сидорова — нет. Т. е. рефлекс как у собаки Павлова — вводить «qwweqwre» в поле «Фамилия» выработать невозможно. Кроме того, оператор головой отвечает за то, что он вводит, так что валидность и достоверность входных данных архиважна.

Более того, на форме присутствуют динамические элементы, меняющие признак «обязательное»/«не обязательное«/»недоступное» в зависимости от того, что оператор вводит/выбирает в текущий момент.

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

Таким образом, оператор сразу видит тот минимум, который ему нужно заполнить, чтобы утвердить форму. И, соотвественно, при неверно введённых данных он сразу видит ошибки.

Антон Симонов
21 апреля 2010

Динамические подсказки типа «представьтесь, пожалуйста», расположенные под полями формы обладают неприятным свойством: все поля, что идут ниже, начинают прыгать вниз-вверх; поле ввода уезжает из-под курсора; внезапно может появиться полоса прокрутки (если форма еле-еле помещалась в страницу без прокрутки и тут появилась еще одна строчка). А оставлять пустое место, имея в виду все эти сервисные сообщения не всегда удобно из-за экономии места.

Илья Наринский
21 апреля 2010

Антон, нежелательное пустое место, прыгающие поля и т. п. — всё это вопрос реализации.

Женя Бакст
22 апреля 2010

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

Александр Благочевский
9 мая 2010

Я просто хотел бы показать вам эту картинку. Скриншот вот отсюда: http://supajam.com/register/index


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

13 5 Иногда люди, когда пытаются оценить, насколько выгодно расположены элементы на форме, рисуют линию, по которой якобы глаз скользит 2 10




Недавно всплыло

Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 5 Это какие‑то другие пиксели? Как они соотносятся? 2 Без стоп-слов текст мне кажется сухим, чёрствым, грубым и резким 33 В Сафари появилось распознавание текста на картинках. Иногда текст странно выделяется и копируется. Что поделать? 2