Глава 2
Формы
Введение
Формы являются отличительной чертой веб-приложений. С помощью элементов формы (например, текстовые поля, раскрывающиеся и прокручиваемые списки, переключатели, флажки и управляющие кнопки) веб-приложения позволяют пользователям выполнять такие задачи, как покупка товаров и услуг, бронирование авиабилетов, поиск местоположения, загрузка и выкладывание фотографий и т. д. Чтобы пользователи могли успешно выполнить свои задачи, важно, чтобы формы не были сложными и были спроектированы так, чтобы:
• их цель была ясна (CLEAR BENEFITS);
• они запрашивали только минимальную необходимую релевантную информацию (SHORT FORMS);
• их структура четко передавала взаимоотношения между элементами формы (LOGICAL GROUPING);
• метки и соответствующие элементы формы были выровнены, чтобы усовершенствовать процесс просмотра (LABEL ALIGNMENT);
• они четко указывали, что должен сделать пользователь (REQUIRED FIELD INDICATORS, INPUT HINTS/PROMPTS);
• они сводили к минимуму объем данных, которые должен ввести пользователь, и не требовали от пользователей дважды вводить одну и ту же информацию (SMART DEFAULTS);
• процесс заполнения формы был результативным (SMART DEFAULTS, FORGIVING FORMAT, KEYBOARD NAVIGATION);
• они четко указывали, как выполнить задание (ACTION BUTTONS);
• они давали пользователям четкие инструкции в случае возникновения ошибки (ERROR MESSAGES).
Хотя выбор подходящих элементов (например, когда использовать флажки, а когда – переключатели) крайне важен для создания удобной в использовании формы, здесь мы об этом говорить не будем, поскольку уже существуют отличные источники, посвященные этому вопросу; например, работа Мейхью (Mayhew, 1991), Галитца (Galitz, 2002), «Руководство по проектированию пользовательских интерфейсов» от компании Apple (2007) и руководство по разработке интерфейса от Windows Vista («User Experience Guidelines», 2007).
Однако важно помнить, что веб-приложения создаются с помощью HTML и предоставляют не все способы управления, доступные для популярных платформ, таких как Windows или Macintosh. В частности, процесс взаимодействия в веб-приложениях ограничивается следующими элементами формы: текстовые поля (в одну строку или состоящие из нескольких строк), переключатели, флажки, раскрывающиеся списки, прокручиваемые списки, кнопки (включая кнопки с изображением) и особый элемент управления для просмотра файлов. К недостающим элементам управления относятся, например, управление прокруткой, комбинированное окно, элемент управления «дерево» и вкладки. Хотя эти элементы управления можно внедрить с помощью сложных комбинаций HTML, каскадных таблиц стилей CSS и сценариев JavaScript, это всего лишь обходные пути решения проблемы, поскольку в данном случае эти элементы не являются частью основного языка разметки.
CLEAR BENEFITS (ЧЕТКИЕ ПРЕИМУЩЕСТВА)
Увидев форму, пользователи могут не понять, как ее заполнение и отправка поможет им выполнить свои задачи и достичь своих целей.
При разработке четко обозначайте преимущества заполнения и отправки форм. Это особенно важно, когда пользователи создают новые учетные записи (т. е. в регистрационных формах), которые являются первым этапом получения доступа к возможностям веб-приложений (рис. 2.1).
Рис. 2.1. Социальная сеть LinkedIn четко перечисляет преимущества регистрации в пункте LinkedIn helps you (LinkedIn поможет вам)
Возможно, пользователи не хотят заполнять форму и предоставлять личную информацию, пока не поймут, какие преимущества они получат в этом случае и как это поможет им в достижении целей. Кроме того, они могут быть обеспокоены вопросами конфиденциальности, если не будут знать, как их личная информация будет использована. Четкое обозначение преимущества и объяснение пользователям, что нет причин волноваться по поводу конфиденциальности, – это первые шаги к тому, чтобы пользователи не отказывались от заполнения форм.
Пользователи должны быть осведомлены о преимуществах заполнения формы, даже если это форма содержит всего одно поле для заполнения, например как форма подписки на электронную новостную рассылку (рис. 2.2).
Рис. 2.2. Сайт UIE перечисляет преимущества подписки на свою электронную новостную рассылку, «UIEtips»
Объясняйте преимущества регистрации в регистрационных формах
Когда незарегистрированный пользователь просматривает регистрационную форму, вам предоставляется прекрасная возможность рассказать ему о преимуществах регистрации. Это облегчает принятие решения, регистрироваться ему или нет (рис. 2.3).
Рис. 2.3. Сайт Blockbuster перечисляет преимущества регистрации на Blockbuster.com и предлагает «бесплатный» пробный период каждому регистрирующемуся
Объясняйте преимущества, прежде чем перенаправлять пользователей на форму
Во многих случаях пользователей приходится перенаправлять на форму. Если они не знают о преимуществах, они могут не щелкнуть по ссылке или кнопке, ведущей их к форме. Поэтому очень важно, чтобы преимущества заполнения формы были обозначены до того, как пользователи увидят саму форму. Один из способов это осуществить – это поставить информативные метки на ссылки, например «Перевести деньги» или «Оплатить счета», вместо стандартных меток, таких как «Узнать больше» или «Продолжить». Хотя преимущества могут быть пользователям и непонятны, это помогает сообщить им о том, какое действие будет следующим (рис. 2.4).
Рис. 2.4. Сервис Plaxo размещает описание преимуществ регистрации рядом с кнопкой регистрации, и, что весьма оригинально, сайт предоставляет пользователям возможность узнать больше, посмотрев демонстрационный или обучающий ролик
Все чаще веб-приложения предоставляют такие возможности и преимущества, которые сложно описать в нескольких предложениях. Или даже когда преимущества очевидны, пользователи могут захотеть узнать больше о том, как получить эти преимущества при использовании приложения. Чтобы дать подробные объяснения, предложите пользователям узнать больше о работе веб-приложения, и они станут меньше беспокоиться по поводу заполнения необходимых форм (рис. 2.5 и 2.6).
Рис. 2.5. Сайт Prosper (где можно дать или взять взаймы деньги) предоставляет информацию о том, как можно взять или дать деньги в долг с помощью ссылок How to borrow (Как взять в долг) и How to lend (Как дать взаймы)
Рис. 2.6. Помимо перечисления преимуществ ведения блога (описание своих мыслей, получение комментариев и т. д.) сайт Blogger предоставляет информацию о ведении блога с помощью функции Take a Quick Tour(Короткий тур)
Для многих сложных веб-приложений и тех, где пользователь должен внести предоплату, попробуйте предоставить пользователям возможность воспользоваться интерактивным чатом CLICK-TO-CHAT (см. главу 14), который позволит им задавать вопросы непосредственно квалифицированному представителю компании.
SHORT FORMS (КОРОТКИЕ ФОРМЫ)
Чем больше сведений о себе указывают пользователи, тем легче их понять и оптимизировать приложение, чтобы оно больше отвечало их потребностям и предоставляло более релевантную и персонализированную информацию. Однако объемные формы увеличивают возможность, что пользователи не заполнят форму или предоставят недостоверную информацию.
Делайте формы как можно короче (рис. 2.7). Не выясняйте у пользователей информацию, которая «может пригодиться» в будущем. Если дополнительные поля могут предоставить полезную информацию и их нельзя убрать, сделайте их необязательными и соответствующим образом обозначьте (см. далее в этой главе шаблон REQUIRED FIELD INDICATORS).
Рис. 2.7. Для регистрации на сайте Crazy Egg пользователи должны заполнить всего три поля и принять условия использования и политику конфиденциальности. Более того, благодаря объединению формы с соответствующими преимуществами, пользователи точно знают, чего им ожидать
Исследование, проведенное Relevant Ads, показало, что более короткие формы чаще заполняются (рис. 2.8). Сократив формы, можно также сократить вероятность возникновения ошибок, поскольку пользователям приходится иметь дело с меньшим количеством элементов формы. В дальнейшем это увеличивает шансы успешного заполнения формы, которое приводит к более высокому показателю эффективности.
Рис. 2.8. В исследовании, проведенном Relevant Ads, показатель эффективности падал с увеличением количества полей в форме
Подумайте, насколько важен каждый элемент формы, и что будет, если не включать его в форму. Помимо этого подумайте, придется ли пользователям прилагать большие усилия, чтобы предоставить информацию. Если пользователям приходится задумываться о том, как ответить на вопрос в форме, рассматривайте это как препятствие заполнению формы, и позаботьтесь о том, чтобы убрать этот вопрос. Самая известная «простая» форма – это, вероятно, форма Google, которая находится на странице поиска и просто предоставляет поле для ввода текста и кнопку поиска (рис. 2.9).
Рис. 2.9. Форма поиска у Google самая простая и короткая. Хотя в нее входит кнопка I'm Feeling Lucky (Мне повезет!), большинство людей обычно вводят ключевые слова и щелкают по кнопке Google Search (Поиск в Google) или нажимают клавишу Enter на клавиатуре
Сервис Jottit предоставляет еще один пример самой короткой и, возможно, самой эффективной формы (рис. 2.10). Чтобы создать интернет-страницу, пользователи просто печатают в поле ввода то, что они хотят разместить на своей странице и щелкают по кнопке «Create a page».
(а)
(б)
Рис. 2.10. На сайте Jottit, чтобы создать веб-страницу, пользователи просто вводят текст и щелкают по кнопке Create a page (Создать страницу) (a). Тогда пользователи получают свою интернет-страницу и возможность ее редактирования (б)
Разделяйте объемные формы на несколько страниц с более короткими формами
Группируйте информацию в большой форме так, чтобы у каждой группы была своя задача, и выкладывайте элементы формы, относящиеся к каждой группе, на отдельной странице (рис. 2.11). Помимо этого расставляйте группы в таком порядке, чтобы самая важная и необходимая информация располагалась вначале, а дополнительная информация – после нее.
Рис. 2.11. На сайте Meebo регистрационная форма разделена на несколько страниц. Самая важная часть формы располагается вначале, а на остальных страницах пользователи могут установить дополнительные настройки своей учетной записи и указать свои предпочтения
Разделение формы ускоряет процесс заполнения каждой страницы, и пользователям такая форма может показаться короче, чем если разместить ее целиком на одной странице.
Когда формы максимально сокращены, пусть они кажутся еще более простыми для заполнения. Это можно сделать, указав пользователям, какая информация обязательна (REQUIRED FIELD INDICATORS), сгруппировав и расположив в логическом порядке элементы формы (LOGICAL GROUPING) и сообщив пользователям о преимуществах заполнения формы (CLEAR BENEFITS). Помимо этого попробуйте применить шаблон WIZARDS в формах, которые разделены на несколько страниц (см. главу 5).
LOGICAL GROUPING (ЛОГИЧЕСКОЕ ГРУППИРОВАНИЕ)
Чтобы достичь результата, пользователям приходится заполнять довольно большие формы. Однако разработчикам хотелось бы, чтобы пользователям казалось, что форму легко заполнить и чтобы они охотно ее заполняли.
Группируйте элементы формы так, чтобы пользователям было понятно, какие данные нужно предоставлять в той или иной части формы (например, адрес доставки, платежная информация и т. д.; рис. 2.12).
Рис. 2.12. Yahoo! разделяет элементы регистрационной формы на логические группы, благодаря чему создается впечатление, что форму можно легко и быстро заполнить
Благодаря распределению информации по группам, так, чтобы пользователи могли четко понимать, для каких целей служит информация из каждой группы и какие элементы формы относятся к той или иной группе, формы кажутся легче для заполнения. Пускай лучше пользователям форма представляется состоящей из небольшого количества групп, чем из большого количества отдельных элементов.
Объедините элементы формы в группы в зависимости от их функций, например, адрес доставки, адрес выставления счета, контактная информация и т. д. Убедитесь, что порядок расположения элементов в каждой группе соответствует представлению пользователей о том, в каком порядке нужно вводить информацию. Например, для пользователей из США расположите элементы формы, относящиеся к информации об адресе, так, чтобы сначала нужно было вводить название улицы и дом, затем город, а только затем название штата и индекс, или, например, при создании учетной записи, сначала просите ввести имя пользователя (или адрес электронной почты), а затем пароль (рис. 2.13).
Рис. 2.13. Форма оформления заказа на сайте Apple кажется удобной для заполнения, во-первых, благодаря тому, что она разделена на несколько страниц, а во-вторых, благодаря логической группировке элементов на каждой странице
Разделив элементы формы на группы, расположите их в том порядке, который соответствует задачам пользователей и системным требованиям. Например, на странице оформления заказа лучше сначала задавать вопросы, касающиеся адреса доставки, поскольку эту информацию можно использовать при подсчете транспортных сборов и стоимости доставки так, чтобы на странице совершения платежа пользователям можно было показать итоговую стоимость и предоставить возможность указать, что адрес выставления счета совпадает с адресом доставки (рис. 2.14).
Рис. 2.14. Приложение Dell, как и многие другие приложения для электронной коммерции, отображает информацию о доставке и о платежах отдельно друг от друга, чтобы формы казались короче и пользователи уделяли отдельное внимание каждой порции информации
При группировке элементов формы можно разделить форму на множество страниц, чтобы она казалась короче (SHORT FORMS), или структурировать ее так, чтобы данные, внесенные в начале формы, при необходимости автоматически вносились повторно в последующих частях формы (SMART DEFAULTS), и пользователям не приходилось возвращаться к ранее введенной информации.
LABEL ALIGNMENT (ВЫРАВНИЕ МЕТОК)
Между метками и соответствующими элементами формы должна быть отчетливо видна связь, чтобы облегчить заполнение формы и сократить количество ошибок при вводе информации.
Существуют три неплохих варианта расположения меток по отношению к элементам формы: над элементом, с выравниванием левой границы метки относительно элемента; слева, с выравниванием левой границы метки относительно других меток; и слева, с выравниванием правой границы метки относительно других меток (рис. 2.15).
(а)
(б)
(в)
Рис. 2.15. Во многих случаях метки располагаются а) над элементами формы; б) выровнены по левому краю и в) выровнены по правому краю
Чем быстрее пользователи могут соотнести метку с соответствующим элементом формы, тем быстрее они смогут заполнить форму. Изучив движения глаз, Пензо (Penzo, 2006) обнаружил, что пользователям достаточно просто соотнести метку с элементом формы, если метки расположены любым из способов, показанных на рис. 2.15.
Однако результаты изучения движений глаз показали, что когда метки полей выровнены по левому краю, большие расстояния между некоторыми метками и соответствующими им полями ввода (возникающие, поскольку метки обладают различной длиной – например, сравните «Название компании» и «Город») приводят к тому, что у пользователей уходит больше времени на зрительное восприятие формы. По сравнению с выравниванием по левому краю, при выравнивании по правому краю общее количество исправлений в 2 раза меньше, что значительно сокращает усилия, которые должен приложить пользователь для заполнения формы.
В этом же исследовании описаны преимущества размещения меток полей над элементами формы; при таком расположении меток формы заполняются быстрее всего. Недостатком в данном случае является то, что при таком расположении меток требуется дополнительное вертикальное пространство. Однако если форму нужно перевести на несколько языков, благодаря такому расположению сохраняется внешнее единообразие оформления, поскольку одни и те же метки при переводе на другие языки могут обладать разной длиной. При размещении меток над элементами формы для меток остается достаточно места, не зависимо от изменения их длины (см. шаблон EXTENSIBLE DESIGN в главе 10).
Чтобы правильно соотнести метки с соответствующими элементами формы (для языков с письменностью в направлении слева направо), разместите метки либо слева, либо над элементами управления (Penzo, 2006; Wroblewski, 2008). При размещении меток полей слева от элементов формы выровняйте метки по правому краю так, чтобы они находились близко друг к другу (рис. 2.16).
Рис. 2.16. На сайте PriceGrabber метки расположены слева от элементов формы, но выровнены относительно них по правому краю
При размещении меток над элементами формы важно, чтобы визуально метка одного элемента формы находилась на достаточном расстоянии от предыдущего элемента (Penzo, 2006). Врублевски (Wroblewski, 2008) советует, чтобы расстояние составляло примерно 50 %-75 % высоты отдельного поля для ввода данных. Помимо этого Пензо (Penzo, 2006) советует применять метки с неформатированным шрифтом вместо меток с жирным шрифтом, поскольку жирный шрифт несколько сложнее воспринимать (рис. 2.17).
Рис. 2.17. На сайте Basecamp над полями расположены метки с неформатированным текстом
Встраиваемые метки допустимы в формах, в которых совсем немного полей ввода (обычно одно), и в тех случаях, когда большинство пользователей должны знать, какие данные им нужно вводить, например, на рис. 2.18 это ключевые слова поиска. Поскольку встраиваемые метки сами находятся внутри поля и пользователю приходится их удалять, их не видно, когда пользователи ввели данные в это поле. Поэтому они неудобны в больших формах или в тех случаях, когда маловероятно, что пользователи знают, какие данные они должны ввести.
(а)
(б)
Рис. 2.18. На сайте Apple в поле поиска используются встраиваемые метки (a). Метка исчезает, когда пользователь щелкает по полю поиска или начинает вводить искомые слова (б)
Обычно в формах метки сопровождаются индикаторами обязательной к заполнению информации (REQUIRED FIELD INDICATORS).
REQUIRED FIELD INDICATORS (ИНДИКАТОРЫ ОБЯЗАТЕЛЬНЫХ ПОЛЕЙ)
Чтобы выполнить задание, пользователи должны предоставить определенную информацию. Например, при создании учетной записи в большинстве случаев пользователи должны указать электронный адрес и пароль. Однако для усовершенствования процесса взаимодействия в формах могут присутствовать дополнительные вопросы, на которые пользователи могут не захотеть отвечать или ответы на которые им могут быть на данный момент неизвестны. Если не заполнены обязательные поля, пользователи могут получить сообщение об ошибке, и у них уйдет больше времени на заполнение формы.
Четко укажите обязательную информацию в форме, чтобы пользователи могли ее успешно ее заполнить и чтобы уменьшить вероятность появления сообщения «заполнены не все обязательные поля» (рис. 2.19).
Рис. 2.19. На сайте Dominos обязательные поля обозначены красными звездочками, так пользователю становится понятно, что номер мобильного телефона вводить необязательно. Также указано, какие преимущества пользователь получит, если укажет свой мобильный телефон
Указание обязательных полей не только экономит время, которое пользователи тратят на то, чтобы решить, какую информацию они должны предоставить, но также экономит время, которое у них отнимают сообщения об ошибке в случае, если не все поля заполнены, и которое уходит на то, чтобы заполнить форму заново.
В веб-приложениях необходимые для заполнения поля часто обозначаются звездочками (обычно красными). Использование красных звездочек эффективно потому, что они понятны даже людям с нарушением восприятия цветов. Не рекомендуется использовать другие виды индикации (например, использовать красный и жирный шрифт для меток полей), поскольку часто именно таким образом указаны ошибки на странице. Помимо этого программы экранного доступа могут не уловить изменение цвета, а также люди с нарушенным цветовым зрением могут не различить обязательные и дополнительные поля.
Хотя могут быть и другие учитывающие перечисленные выше нюансы способы указать обязательные поля, красные звездочки все же предпочтительны, поскольку большинство пользователей привыкло видеть именно их при указании обязательных полей; цвет звездочек может варьироваться в зависимости от фона страницы.
Совет
Пользователи знают, что на странице регистрации обязательно вводить имя пользователя и пароль. Поэтому не обязательно указывать их как обязательные.
Расшифруйте значение индикаторов обязательных полей
Хотя большинство пользователей Интернета понимают, что красная звездочка рядом с меткой поля указывает на то, что это поле является обязательным, в некоторых веб-приложениях этот символ указывает на дополнительные поля. Поэтому следует внести ясность и указать наверху формы, что поля, отмеченные звездочкой (*), обязательны.
Размещайте индикаторы обязательных полей одинаково во всех формах
На данный момент не существует рекомендаций по поводу того, как лучше располагать индикаторы обязательных полей относительно меток полей; их можно расположить в любом месте: после метки, перед меткой, перед полем для ввода данных и после него.
Однако предположив, что при заполнении формы глаза пользователя направлены больше на элементы формы, имеет смысл расположить индикаторы обязательных полей как можно ближе к элементам формы. Помимо этого, если располагать эти индикаторы в одном и том же месте, пользователи смогут быстро просматривать формы и определять, какие поля являются обязательными. Можно расположить индикаторы обязательных полей слева от элементов формы, при этом метки будут расположены слева от них и выровнены по правому краю (см. рис. 2.19). Для меток, находящихся над элементами формы, расположите индикаторы обязательных полей слева от меток (рис. 2.20), поскольку так они будут ближе как к меткам полей, так и к элементам формы, где посетитель вводит или выбирает данные; если разместить их слева от элементов формы, их можно будет перепутать с флажками или зависимыми кнопками.
Рис. 2.20. На сайте TravelPost указатели на обязательные поля находятся слева от меток, расположенных над элементами формы. Однако обратите внимание, что в метках используется полужирный шрифт, что не рекомендуется, поскольку выделенные жирным шрифтом метки увеличивают время на заполнение формы (Penzo, 2006)
Не указывайте дополнительные поля
В случаях если форма содержит меньше дополнительных полей, чем обязательных, иногда, чтобы избежать скопления символов, отмечают дополнительные поля вместо обязательных. Это неудачное решение. Поскольку пользователи привыкли использовать веб-приложения, в основной части которых применяются индикаторы обязательных полей, они, скорее всего, будут воспринимать отмеченные поля как обязательные или, по меньшей мере, такое обозначение внесет путаницу.
Объясняйте, для чего необходимо предоставлять конфиденциальную информацию
Если вам необходимо получить личную информацию, например дата рождения пользователя, пол или раса, четко обозначьте, почему эта информация вам необходима. Кроме этого предоставьте ссылку на «Политику конфиденциальности», где пользователи смогут узнать, каким образом их информация будет использоваться.
Даже если в форме четко указаны обязательные поля, проектировщики все равно должны стремиться максимально сократить общее количество полей в форме – как дополнительных, так и обязательных (SHORT FORMS). Кроме того, если пользователь не заполняет обязательное поле, покажите ему сообщение на той же самой странице, на которой он не заполнил одно из обязательных полей (ERROR MESSAGES).
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, как показано в примере:
<input type="text" name="fieldname" id="fieldname" tabindex="110" />
Это необходимо в большинстве случаев, когда формы расположены в несколько колонок и важно, чтобы клавиша Tab перемещала курсор к следующему по логике элементу формы, а не просто слева направо или сверху вниз – в порядке, в котором расположены элементы формы в HTML коде.
Примечание
Значением атрибута tabindex может быть число от 1 до 32 767. При кодировании формы и применении атрибута tabindex увеличьте значение tabindex на 10. Если возникает необходимость изменить форму и вставить один или несколько элементов между существующими элементами формы, можно использовать числа между существующими значениями tabindex, это не повлияет остальные элементы формы.
Будьте внимательны при установке курсора в первом поле формы
Когда первоочередной задачей для пользователей является заполнение формы (например, при поиске, регистрации, входе в учетную запись и т. д.), обычно допускается, чтобы при загрузке страницы курсор располагался в первом поле – так, чтобы пользователи могли сразу приступить к заполнению формы. Однако избегайте размещения курсора в каком-либо поле формы на тех страницах, на которых располагаются навигационные элементы, позволяющие пользователям перейти к другим частям приложения, или на страницах, содержащих необходимый для чтения контент (например, инструкции по заполнению формы или сообщения об ошибках). Автоматическое размещение курсора в таких случаях может сделать страницу непригодной для пользователей, у которых установлена программа экранного доступа, поскольку они, скорее всего, не увидят информацию, расположенную выше данного поля формы.
Попробуйте настроить горячие клавиши
Разработайте горячие клавиши для приложений, которые будут часто использоваться и основным приоритетом которых будет эффективность взаимодействия (например, приложения для поддержки покупателей). Горячие клавиши можно разработать на основе HTML с помощью атрибута accesskey, как в следующем примере:
<input type="button" value="buttonName" accesskey="k" />
Благодаря спецификации атрибута accesskey, пользователи смогут переходить к тому или иному элементу формы при нажатии клавиши Alt (или Ctrl (Mac)) плюс той буквы или цифры, которая указана в атрибуте accesskey.
При создании горячих клавиш важно не создавать и не переопределять горячие клавиши, которые часто используются в браузерах. Список этих горячих клавиш приведен в табл. 2.1.
Предоставление пользователям возможности пользоваться клавиатурой для навигации не только помогает быстро заполнить форму, но также необходимо для того, чтобы веб-страницы были доступными (см. шаблон ACCESSIBLE FORMS в главе 11).
Примечание
Чтобы пользователям было известно о существовании горячих клавиш, подчеркните соответствующие клавиши с помощью таблицы стилей.
В случае с управляющими кнопками для этого необходимо применить элемент button так, как показано в следующем примере:
<style type="text/css">
quick-key {
text-decoration: underline;
}
</style>
<button type="button" accesskey="k"><span class="quick-key">K</span>ey Button</button>
В этом случае кнопка выглядит следующим образом, а пользователи могут нажать Alt (или Ctrl) +k на клавиатуре, чтобы ей управлять:
Подчеркивание невозможно для элемента 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нить изменения” />
или
<button type="submit">Coxpaнить изменения</button>
Будьте внимательны при отключении первостепенного действия
В коротких формах иногда допустимо отключить кнопку первостепенного действия до тех пор, пока пользователи не заполнят необходимые поля (рис. 2.34). Этот способ дает возможность избежать тех ошибок, которые вызваны невнимательной отправкой не до конца заполненной формы. Однако такой подход может оказаться неподходящим для больших или сложных форм, поскольку пользователи могут не понять, почему первостепенное действие невозможно выполнить. Они могут прийти к ошибочному выводу, что форма работает неверно и отказаться от ее заполнения.
Рис. 2.34. На сайте Campfire кнопка Sign me up… (Зарегистрировать меня) отключена до тех пор, пока все поля не будут заполнены
После первого щелчка отключайте управляющую кнопку
Выполнение одного и того же действия несколько раз (при повторном нажатии управляющей кнопки) может привести к нежелательным последствиям. Например, неоднократное нажатие на управляющую кнопку может привести к тому, что заказ будет размещен несколько раз. В таких случаях отключайте управляющую кнопку или скрывайте ее и заменяйте такой надписью, как «Обработка…» или «Пожалуйста, подождите…». Так пользователи удостоверятся, что их действие подтверждено и веб-приложение ждет ответа (рис. 2.35).
Рис. 2.35. На сайте компании Advanta кнопка Continue (Продолжить) заменяется текстом Please Wait… (Пожалуйста, подождите), чтобы пользователи знали, что они успешно выполнили действие и приложение ждет ответа
Уберите кнопки сброса
Кнопка «Сброс» возвращает форму к ее исходному состоянию. Если пользователи начинают заполнять форму с чистого листа, то, щелкнув по кнопке «Сброс», они удалят все введенные данные, а если они вносили изменения в уже заполненную ранее форму, то, щелкнув по кнопке «Сброс», они отменят все свои изменения. Отменить эту операцию невозможно. По этой причине не стоит использовать кнопку «Сброс» (Nielsen, 2000).
Чтобы форма была отправлена, обычно ее необходимо каким-либо образом подтвердить. Если форме было отказано в подтверждении, пользователи должны быть проинформированы о причинах отказа. Обычно это можно осуществить с помощью шаблона ERROR MESSAGES.
ERROR MESSAGES (СООБЩЕНИЯ ОБ ОШИБКАХ)
Ошибки неизбежны, даже если приложение спроектировано самым удобным образом. Даже если метки и инструкции очень понятные и четкие, не все пользователи смогут успешно и точно заполнить форму с первого раза. Особенно распространены следующие ошибки:
• Отсутствующие данные. Когда пользователь не заполняет одно или несколько обязательных полей.
• Неверный формат. Когда пользователь вводит данные в неверном формате – например, неверный тип данных (цифры вместо букв), неверное количество символов (либо больше, либо меньше, чем необходимо), неверный формат даты, неверно записаны дробные числа и т. д.
• Недействительная информация. Когда предоставленная информация неверна – например, неверное имя пользователя и пароль, при указании временного промежутка дата «до» стоит перед датой «с» и т. д.
Покажите пользователям сообщение об ошибке, в котором будут четко обозначены причины и инструкции по их устранению. Помимо этого сообщения об ошибке должны отображаться на одной странице с формой и при этом должны сохраняться данные, которые ввел пользователь (рис. 2.36). У этого подхода два несомненных достоинства.
Рис. 2.36. Adobe Buzzword демонстрирует сообщение об ошибке над полями ввода данных
1. Пользователи могут перечитывать сообщение во время исправления ошибки.
2. Пользователям не приходится повторно вводить верные данные.
Когда хорошо продумана система исправления ошибок, пользователи могут быстро все исправить и при этом не будут отвлекаться от своего основного задания (или цели).
Самое главное – пользователь должен узнать об ошибке немедленно. Привлеките его внимание к ошибке, выделив ярким цветом либо фон, либо цвет сообщения. Помимо выделения цветом попробуйте добавить предупреждающую иконку (или любую другую соответствующую иконку), чтобы привлечь внимание пользователя к сообщению об ошибке и/или тому элементу формы, в котором эта ошибка произошла (рис. 2.37).
Рис. 2.37. В регистрационной форме на сайте банка Washington Mutual четко обозначается, когда происходит ошибка, и для привлечения внимания пользователей к ошибке используется предупреждающая иконка
Предоставьте пользователю инструкции по устранению ошибки
Это можно сделать в простой форме – попросить пользователей выполнить какой-либо определенное простое действие (например, «Повторно введите имя пользователя и пароль. Затем нажмите на кнопку “Войти”») или предложить способ исправления ошибки (например, «При вводе имени пользователя учитывается регистр клавиатуры. Проверьте, не нажата ли клавиша Caps Lock»).
Сообщения об ошибке должны отображаться на одной странице с формой
Веб-приложения, в которых сообщения об ошибке отображаются на отдельных страницах, принуждают пользователей к тому, чтобы прежде, чем вернуться на страницу с ошибкой, он запомнил, в чем заключается ошибка, и инструкции по ее исправлению. Это довольно непросто, если на странице несколько ошибок, поскольку для исправления ошибок пользователям придется несколько раз переключаться между страницами. Если сообщения об ошибке отображаются на одной странице с формой, пользователю не придется переключаться между страницами, что значительно упростит процесс исправления ошибок.
Сохраняйте информацию, введенную пользователем
Важно, чтобы введенные пользователем данные не были потеряны при появлении сообщения об ошибке. Пользователей раздражает необходимость вводить одну и ту же информацию несколько раз, и это может привести к тому, что они откажутся от заполнения формы (рис. 2.38).
Рис. 2.38. В сервисе SugarSync во время появления сообщения об ошибке информация, введенная пользователем, сохраняется. Допускается удалить пароль, поскольку он в любом случае не виден пользователю
Укажите на «проблемные» зоны
Помимо отображения сообщений об ошибках четко укажите те элементы формы, которые вызвали ошибки. Это особенно важно в больших формах, где пользователям приходится искать, какой элемент формы вызвал ошибку (рис. 2.39).
Рис. 2.39. В сервисе Highrise сообщение об ошибке отображается на той же самой странице и четко указывает, что необходимо сделать, чтобы ее исправить
Хотя сообщения об ошибках являются важной частью проектирования формы, необходимо сделать все возможное, чтобы ошибки предотвратить. Для этого можно четко указать обязательные поля (REQUIRED FIELD INDICATORS), предоставить необходимые инструкции по форматированию и типу данных (INPUT HINTS/PROMPTS), с помощью настроек по умолчанию свести к минимуму количество вводимых пользователем данных (SMART DEFAULTS), а также позволить пользователям вводить данные в свободном формате (FORGIVING FORMAT).