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

Подчеркивание невозможно для элемента input type="button", поскольку теги HTML недействительны в пределах значения его атрибута, где указывается текст управляющей кнопки.

INPUT HINTS/PROMPTS (ПОДСКАЗКИ ПРИ ВВОДЕ/ПРИГЛАШЕНИЕ К ВВОДУ)

Проблема

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

Решение

Предоставьте пользователям необходимые подсказки, объяснения или инструкции, и покажите им, как они должны вводить данные (рис. 2.27). В тех ситуациях, когда данные могут быть введены несколькими способами, применяйте шаблон FORGIVING FORMAT (о котором упоминалось ранее).

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

Зачем

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

Как

Существует несколько способов, как предоставить пользователям подсказки и инструкции (рис. 2.28):

Рис. 2.28. При заполнении регистрационной формы Windows Live пользователи получают инструкции по вводу пароля, альтернативного электронного адреса и секретного вопроса. Кроме того, когда пользователи приступают к заполнению поля, им предоставляется дополнительная информация и возможность получить помощь, пройдя по специальной ссылке

• Предоставьте примеры, как можно ввести данные. Например, если в поле ввода электронного адреса можно ввести несколько адресов, покажите пример того, как несколько введенных электронных адресов разделены запятыми или другим разделительным знаком.

• Покажите, какие форматы приемлемы для таких данных, как даты, номера телефонов, номера кредитных карт и т. д. Для дат покажите допустимые форматы следующим образом: мм/дд/гг, дд/мм/гг или мм/дд/гггг; для номеров телефонов в России покажите формат ввода как xxx-xxx-xxxx и т. д.).

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

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

Попробуйте использовать динамические контекстуальные подсказки

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

Рис. 2.29. На сайте Wufoo подсказки появляются как при наведении указателя мыши на поле, так и когда пользователь начинает вводить данные

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

Текстовые поля не должны быть длиннее (или короче), чем ожидаемая длина вводимых данных; когда нельзя точно предугадать длину данных, поле должно быть достаточно длинным, чтобы в него поместилась большая часть данных. Размер поля может служить скрытой подсказкой для пользователя, с помощью которой он сможет определить размер данных, которые нужно ввести. Например, если пользователь собирается ввести свой номер телефона, а текстовое поле рассчитано на семь символов, большинство пользователей поймет, что код города вводить не нужно. Кроме того, если в базе данных сохраняется всего семь цифр номера телефона, необходимо сделать так, чтобы не только текстовое поле отображало семь символов, но и возможный объем вводимых данных был ограничен семью символами. Это можно осуществить с помощью 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 – отправить

Зачем

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

Как

Применяйте управляющие кнопки (или изображения, напоминающие кнопки) для отправки заполненной формы. Кроме того, убедитесь, что они визуально выделяются больше, чем кнопки с второстепенными действиями, такими как «Отменить», «Вернуться» и т. д. Сделав второстепенные кнопки менее заметными, вы уменьшите вероятность их случайного выбора и возникновения ошибки (Wroblewski, 2008).

В последнее время все чаще второстепенные действия представлены в виде ссылок, чтобы они меньше выделялись (рис. 2.31). Однако исследование движений глаз, проведенное Врублевски (Wroblewski, 2008), не выявило никаких преимуществ этого подхода по сравнению с тем, когда второстепенные действия представлены в виде управляющих кнопок (даже так же выделенных, как и кнопки для первостепенных действий); количество ошибок при обоих этих подходах не различалось.

Рис. 2.31. В приложении Dell основное действие оформления заказа (Checkout) представлено в виде кнопки, а второстепенное действие продолжения покупок (Continue Shopping) представлено в виде ссылки

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

Названия кнопок должны быть понятными и лаконичными

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

• Использование «Убрать» и «Удалить». Используйте название «Удалить», если данные будут удаляться окончательно и не будет возможности внести вместо них другие данные. При этом используйте название «Убрать», если данные удаляются только из этого контекста, но доступны в других контекстах. Например, во время отправки электронного письма для того, чтобы удалить документ из списка приложений, используйте название «Убрать приложение» или «Убрать». А чтобы удалить сообщение из списка сообщений, используйте «Удалить сообщение» или «Удалить».

• Использование «Добавить» и «Новое». Используйте название «Новое» при создании абсолютно новой записи (или элемента данных). Используйте название «Добавить» при выборе или соотнесении существующего элемента данных с другими элементами данных. Например, чтобы создать новую пользовательскую учетную запись, используйте название «Новый пользователь» или «Новое», а чтобы создать новый список дел, используйте «Добавить новый список дел» или «Добавить».

Рис. 2.32. На сайте Expedia кнопкам присвоены такие метки, которые описывают действия, например, Search for flights (Найти авиабилет) и Search for flights + hotels (Найти авиабилет + отель)

Выравнивайте первостепенные управляющие кнопки относительно полей для ввода данных

Выравнивайте первостепенные управляющие кнопки относительно полей для ввода данных (рис. 2.33). Исследование движений глаз, проведенное Врублевски (Wroblewski) и Этре (Etre) в 2007 году, показало, что выравнивание управляющих кнопок относительно полей для ввода данных приводит к сокращению времени заполнения формы, поскольку так пользователям проще заполнять форму.

Рис. 2.33. На странице входа в учетную запись сервиса Basecamp первостепенное действие Sign In (Войти) выровнено относительно элементов формы

Предоставьте пользователям возможность выполнять первостепенное действие путем нажатия на клавишу Enter

Первостепенное действие формы должно выполняться по умолчанию, если пользователи нажимают клавишу Enter. Это особенно важно при заполнении тех форм, которые содержат всего одно поле для ввода, например, «Поиск». Эту задачу можно выполнить с помощью HTML следующим образом:

<input type="submit" value="Coxpaнить изменения” />