Ваша мышка проехала метров
До скидки 5% осталось м
Ваш промокод на скидку

Юзабилити веб-форм. Часть 2

19.11.2019

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

1. Текст

Пояснения. Если форма проста для понимания, то достаточно будет нескольких слов. Например, форма запроса телефона или почты. Но иногда пояснения просто необходимы, чтобы устранить двусмысленность. Например, в форме ниже указаны пояснения и для тех, кто уже зарегистрирован на сайте, и для тех, кто регистрацию не прошел. Верхний регистр. Форма, приведенная ниже, сложна к заполнению из-за большого количества полей. Помимо этого пояснения к каждому полю написаны в верхнем регистре. Barnes and Noble Form Форму более легко читать и воспринимать, если верхний регистр используется только для выделения заглавных букв. В противном случае форма будет выглядеть крайне непрофессиональна.

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

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

2. Поля ввода

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

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

Ограничение формата полей ввода. Если вам нужно ограничить формат данных, вводимых пользователями, сделайте это так, чтобы не раздражать пользователей. Например, вместо отображения MM/DD/YYYY рядом с текстовым полем для даты рассмотрите возможность использования трех раскрывающихся полей или элемент управления календарем. Обязательные и необязательные поля. Четко различайте, какие поля ввода могут быть оставлены  пустыми, а какие нет. Например, поставьте звездочку рядом с полями, обязательными к заполнению.

3. Основные и второстепенные действия

Основные действия - это ссылки и кнопки в форме, которые выполняют основные функции: "Сохранить" и "Отправить". Вторичные действия, такие как "Назад" и "Отмена" имеют нежелательные последствия. Поэтому используйте, по возможности, только первичные действия. Если вы должны включить дополнительные действия, придавайте им меньший визуальный вес.

4. Помощь

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

5. Сообщения

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

Заключение

Надеемся, наш гайд по юзабилити веб-форм поможет вам создать идеальную веб-форму, которую будет приятно и легко заполнять.