SMART DEFAULTS («УМНЫЕ» ЗНАЧЕНИЯ ПО УМОЛЧАНИЮ)

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

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

Рис. 2.21. В сервисе Basecamp по умолчанию задана сегодняшняя дата в поле When's it due? (Когда будет готово) и данные о зарегистрированном пользователе в поле Who's responsible? (Кто отвечает?), а также установлен флажок Email 48-hours before it's due (Напомнить мне по электронной почте за 48 часов до того, как срок истечет), чтобы упростить процесс добавления новой задачи

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

Значения по умолчанию выполняют еще одну функцию: у пользователей появляется пример, какие данные и в каком формате они должны вводить, что сокращает вероятность возникновения ошибки при вводе данных (van Duyne et al., 2006).

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

Настройки по умолчанию можно применить и к последовательности выполнения заданий; например, если пользователь выполнил задание А и, скорее всего, далее он приступит к выполнению задания Б, направьте пользователей непосредственно на страницу выполнения задания Б (рис. 2.22).

Рис. 2.22. В сервисе Basecamp для усовершенствования процесса смены заданий применяются настройки по умолчанию. Когда пользователи создают список заданий («To-do»), на странице отображается форма Enter a to-do item (Введите задание), и пользователям не приходится щелкать по элементу Add a To-Do (Добавить задание)

Не применяйте значения по умолчанию для персональной информации

Для персональной информации, такой как пол, обращение, возраст, раса и т. д., не применяйте значения по умолчанию, поскольку это может показаться оскорбительным некоторым пользователям или будет воспринято как пристрастность. Например, если установить пол – мужской или женский – по умолчанию, у пользователей может возникнуть ощущение, что вы пристрастны; то же самое произойдет, если вы установите по умолчанию обращение Господин или Госпожа.

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

Не устанавливайте по умолчанию значения там, где предоставлена возможность выбора

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

Разумные настройки по умолчанию являются еще одним способом упрощения и сокращения формы (SHORT FORMS). Кроме того, они уменьшают вероятность возникновения ошибки и появления сообщений об ошибке (ERROR MESSAGES).

FORGIVING FORMAT (ВЕЛИКОДУШНЫЙ ФОРМАТ)

В формах пользователям часто приходится предоставлять такую информацию, как номера телефонов, номера банковских карт, даты и т. д., а подобную информацию можно вводить в различных форматах. Например, пользователь может по-разному ввести телефонный номер: без пробелов (например, 3035555555), разделив цифры пробелами или дефисами (например, 303 555 5555 или 303-555-5555), или разделив цифры иным образом (например (303) 555-5555). Даже когда у пользователей есть пример, они все равно могут ввести данные не в том формате. Сообщение об ошибке может замедлить процесс заполнения формы и оттолкнуть пользователей, если несколько элементов формы обладают жесткими требованиями к формату.

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

Рис. 2.23. На сайте канала погоды пользователи могут ввести индекс или название своего города, чтобы узнать информацию о погоде. Для этого используется только одно поле для ввода текста вместо двух отдельных

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

Продумайте альтернативные способы ввода данных и затем доработайте приложение так, чтобы оно принимало эти варианты и верно их интерпретировало. Для допускающих двоякое толкование данных предоставьте пользователям возможность выбрать из нескольких вариантов, так чтобы у них не возникло ощущения, будто они допустили ошибку и чтобы они чувствовали, что успешно продвигаются вперед (рис. 2.24). Также можно предложить пользователям выбор из нескольких вариантов (рис. 2.25; см. также шаблон AUTOSUGGEST/ AUTOCOMPLETION в главе 8).

Рис. 2.24. На сайте Expedia пользователям предлагается выбрать один аэропорт из нескольких вариантов, когда введенные данные (в данном примере Сан-Франциско) могут трактоваться по-разному

Рис. 2.25. На сайте Kayak применяется шаблон AUTOSUGGEST/ AUTOCOMPLETION, предлагающий пользователю выбор из нескольких вариантов, чтобы сократить количество возможных ошибок

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

Даже если приложение разработано таким образом, что допустимы различные форматы, продемонстрируйте пользователям пример хотя бы одного приемлемого формата (см. шаблон INPUT HINTS/PROMPTS далее в этой главе). Такие инструкции помогают пользователям избавиться от сомнений по поводу надлежащего способа ввода данных.

Различные способы форматирования вводимых данных – это лишь один из способов уменьшить количество ошибок при вводе и упростить процесс заполнения формы. Ошибки при вводе можно сократить также с помощью предоставления необходимых инструкций по форматированию (INPUT HINTS/PROMPTS) и предоставив пользователю возможность выбрать из нескольких вариантов (см. шаблон AUTOSUGGEST/ AUTOCOMPLETION в главе 8).

KEYBOARD NAVIGATION (УПРАВЛЕНИЕ КЛАВИАТУРОЙ)

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

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

Рис. 2.26. В этом примере пользователи могут перемещаться по форме с помощью клавиши Tab, а также переходить от закладки к закладке с помощью сочетаний клавиш. Например, на вкладку Billing Address (Адрес для выставления счета) можно перейти, нажав сочетание Alt+3 (Windows) или Ctrl+3 (Mac)

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

Разрешите навигацию с помощью клавиатуры во всех формах, т. е. пользователи должны получить возможность заполнять формы, даже если они будут использовать только клавиатуру, либо только мышь. Уделите особенное внимание процессу перемещения между полями. По умолчанию веб-браузеры предоставляют возможность перемещаться между элементами страницы (вкладками, элементами формы и ссылками) в зависимости от того порядка, в котором они расположены в HTML-коде. На самых хорошо организованных страницах проектировщикам не приходится указывать порядок перемещения. Однако в тех случаях, когда HTML-код не соответствует последовательности смены заданий пользователя (т. е. тому порядку, в котором пользователь будет заполнять форму), замените заданный по умолчанию порядок перемещения с помощью атрибута tabindex, как показано в примере:

Это необходимо в большинстве случаев, когда формы расположены в несколько колонок и важно, чтобы клавиша Tab перемещала курсор к следующему по логике элементу формы, а не просто слева направо или сверху вниз – в порядке, в котором расположены элементы формы в HTML коде.

Будьте внимательны при установке курсора в первом поле формы

1

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

2

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

3

После выхода работы Кристофера Александра в сфере архитектуры, понятие шаблонов было популяризировано и стало применяться в области программного обеспечения. Этому способствовала также работа Эрика Гаммы, Ричарда Хелма, Ральфа Джонсона и Джона Влиссидеса (часто эту группу называют GoF, от англ. Gang of Four – «банда четырех»): «Приемы объектно-ориентированного проектирования. Паттерны проектирования» (Питер, 2007). Впоследствии шаблоны также стали популярны в области взаимодействия компьютера и человека, этому способствовали работы Тидвелла (Tidwell, www.designinginterfaces.com), Уэли (Welie, www.welie.com), Борчерса (Borchers, 2001), Грэхэма (Graham, 2003) и Ван Дюйна (Van Duyne et al., 2002, 2006).

4

Чтобы упорядочить разнообразие и несогласованность форм используемых шаблонов и чтобы найти способ объединения шаблонов и их языков от разных авторов в особые тематические коллекции шаблонов, участники конференции CHI 2003 предложили язык разметки на основе XML под названием Pattern Language Markup Language (PLML; произносится как «пэл-мэл»). Чтобы получить больше информации, см. работу Финчера (Fincher, 2003).