Шаблоны проектирования веб-приложений. Паван Вора

Чтение книги онлайн.

СКАЧАТЬ размеры полей ввода текста с ожидаемым объемом вводимых данных

      Текстовые поля не должны быть длиннее (или короче), чем ожидаемая длина вводимых данных; когда нельзя точно предугадать длину данных, поле должно быть достаточно длинным, чтобы в него поместилась большая часть данных. Размер поля может служить скрытой подсказкой для пользователя, с помощью которой он сможет определить размер данных, которые нужно ввести. Например, если пользователь собирается ввести свой номер телефона, а текстовое поле рассчитано на семь символов, большинство пользователей поймет, что код города вводить не нужно. Кроме того, если в базе данных сохраняется всего семь цифр номера телефона, необходимо сделать так, чтобы не только текстовое поле отображало семь символов, но и возможный объем вводимых данных был ограничен семью символами. Это можно осуществить с помощью HTML следующим образом:

      <input type="text" size="7" maxlength="7" />

      В данном примере элемент size="7" контролирует длину текстового поля, а элемент maxlength="7" ограничивает количество символов, которые может ввести пользователь, до семи.

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

Связанные шаблоны проектирования

      Сокращение количества ошибок является важным аспектом проектирования результативных форм. Чтобы свести к минимуму ошибки пользователей и сократить время, которое уходит на заполнение формы, применяйте помимо шаблона INPUT HINTS/PROMPTS также такие шаблоны, как REQUIRED FIELD INDICATORS, FORGIVING FORMAT и SMART DEFAULTS.

      ACTION BUTTONS (КНОПКИ ДЕЙСТВИЙ)

Проблема

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

Решение

      Предоставьте пользователям возможность отправить форму с помощью управляющей кнопки; также эти кнопки часто называют командными кнопками (Galitz, 2002). Применяйте такие метки, которые будут четко описывать действие кнопки, например «Сохранить изменения», «Зарегистрироваться», «Войти» и т. д. Кроме того, основная управляющая кнопка на странице должна быть выделяющейся, чтобы пользователи ее не пропустили (рис. 2.30).

      Рис. 2.30. В этой форме на сайте LinkedIn четко указано основное действие Send – отправить

Зачем

      Кнопки обычно отождествляются с выполнением каких-либо действий, например отправкой заполненной формы, что отличает их от ссылок, которые предоставляют возможность перемещаться между страницами. Благодаря их форме (выпуклые, похожи на настоящие кнопки), на кнопки хочется «нажать» или «щелкнуть» по ним. Кроме того, поскольку пользователи встречаются с кнопками в настольных клиентских приложениях, кнопки предоставляют хорошую возможность выбора способа выполнения СКАЧАТЬ