• ДИЗАЙН-АРТЕЛЬ •
In English

2 полезных правила дизайна веб-форм

Зачем делать форму более эффективной, ненавязчивой и юзер-френдли? Чтобы пользователю для достижения цели заполнения формы пришлось сделать как можно меньше движений. В одних случаях количество движений обратно-пропорционально вероятности успешного завершения работы с формой. В случаях, где пользователь все равно дойдет до конца, уменьшение мельтешения и кол-ва требуемых движений является проявлением уважения ко времени пользователя. Гибкость условий валидации (проверки на правильность заполнения полей) служит тем же идеалам.

Итак. Рекомендую учитывать два простых правила, исходя из убеждения, что чем меньше работы мы оставляем пользователю, и чем меньше мелькаем лишней информацией, тем лучше:
1) нет необязательным полям,
2) валидация должна происходить в реальном времени, быть гибкой и интуитивно понятной.

Как это сделать:

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

2 правила дизайна веб-форм

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

Теги: Совет, Процесс

или через RSS и не пропустите постов с фотоотчетами, работами новых артистов, дизайн-обзорами рекламы, упаковки, сайтов, логотипов, открыток и плакатов, обзорами полезных программ и приложений, новостями моей работы и советами дизайнерам.