Читать книгу: «Шаблоны проектирования веб-приложений»

Посвящается

Моей маленькой принцессе Суми

Благодарность

Выражаю искреннюю благодарность следующим людям:

• техническим редакторам – Венди Каслман, Дэвиду Дику, Каарен Хэнсон, Арни Лунду и Дейву Роджерсу – за потраченное время, хорошие советы и полезные комментарии. Их вдумчивые предложения в несколько раз улучшили эту книгу. Однако если в книге остались какие-либо ошибки или слабые места, это моя ответственность и, очевидно, результат того, что я невнимательно следовал их советам;

• Лену Бисли – за помощь в проведении исследования, а также помощь в редактировании многочисленных черновых вариантов каждой главы книги;

• команде издательства Elsevier: Мэри Джеймс, моему издателю, за проявленное терпение во время дискуссий со мной, а также за то, что помогала мне следовать намеченному пути и соблюдать сроки; Денис Пенроуз и Диане Серра, за то, что предоставили мне возможность написать книгу на ту тему, которая мне столь интересна; а также технологической группе, включая выпускающего редактора Джоди Аллен и корректора Деборе Прато, за их отличную корректуру и верстку книги;

• клиентам, коллегам и друзьям, которые наставляют, направляют, выслушивают и поддерживают меня;

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

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

Паван Вора

Об авторе

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

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

Он издал и провел множество уроков и корпоративных практических тренингов по проектированию интернет-сайтов, веб-приложений и шаблонам проектирования в США и по всему миру.

Паван Вора получил степень магистра, а затем и степень доктора наук в сфере промышленного строительства (в Государственном университете Нью-Йорка в Буффало). Степень бакалавра в сфере промышленного строительства и машиностроения он получил в Техническом институте юбилея Королевы Виктории в Мумбае, Индия.

Глава 1
Введение

Введение

Все чаще компьютерные приложения разрабатываются на основе веб-технологий, и к ним можно получить доступ с помощью веббраузеров (например, Internet Explorer, Firefox, Safari и Opera). Обычно такие приложения называются веб-приложениями, или размещаемыми приложениями (hosted applications) – приложениями, в основе которых лежит модель программного обеспечения как услуги (SaaS)¹ или облачные вычисления (cloud computing)². Эти веб-приложения отличаются от более традиционных веб-сайтов в том смысле, что их предназначение – помочь пользователям в выполнении таких задач, как отправка электронных писем, бронирование авиабилетов, поиск домов, оплата счетов, перевод денег, покупка продуктов, рассылка приглашений и т. п. (рис. 1.1–1.4). Веб-сайты, напротив, ориентированы на контент и разрабатываются для поиска и ознакомления с достаточно статической информацией (рис. 1.5).

Рис. 1.1. Пользователи могут настроить свою электронную почту как в этом примере с Yahoo! Mail, и то же самое можно сделать и в таких клиентских приложениях, как Microsoft Outlook, Mozilla Thunderbird и Eudora

Рис. 1.2. Пользователи могут искать варианты туристических путевок и осуществлять бронирование билетов с помощью веб-приложений, таких как Expedia

Рис. 1.3. Пользователи могут найти продающийся дом, узнать его стоимость и увидеть, какие еще дома выставлены на продажу в этом районе. Все это можно сделать на таких сайтах, как Zillow.com

Рис. 1.4. Пользователи могут совершать покупки на таких сайтах, как Buy.com

Рис. 1.5. Ознакомиться со статической информацией о компании Ultragrain и ее товарах можно на сайте этой компании (www.ultragram.com)

Достоинства веб-приложений

Популярность веб-приложений объясняется тем, что они обладают рядом достоинств. Эти достоинства описаны в данном разделе (Baxley, 2003; Turnbull, 2006).

Простота доступа

В большинстве случаев единственный вид программного обеспечения, который необходим для того, чтобы получить доступ и пользоваться веб-приложениями, – это браузер, такой как Internet Explorer, Firefox, Safari и Opera. Чтобы пользоваться веб-приложениями, пользователям не нужно скачивать и устанавливать дополнительное программное обеспечение, хотя в некоторых случаях все же приходится загружать вспомогательные приложения или плагины, такие как Adobe Flash, Java, Microsoft Silverlight и т. д., чтобы получить доступ ко всем частям веб-приложения.

Более того, так как и приложение, и информация хранятся на серверах поставщика, а не на пользовательских компьютерах, пользователи могут получить доступ к веб-приложениям из практически любого места, где есть подключенный к Интернету компьютер, на котором установлен браузер. Благодаря удаленному хранению данных, пользователи могут делиться информацией и сотрудничать друг с другом; например, они могут совместно пользоваться закладками приложений, такими как Delicious (www.delicious.com) и Furl (www.furl.net), и удаленно совместно работать над одними и теми же документами, применяя повышающие эффективность работы приложения, такие как Google Docs and Spreadsheets (docs.google.com) и Zoho (www.zoho.com).

Простота применения

Веб-приложения также популярны среди бизнесменов и разработчиков программного обеспечения, поскольку их можно дорабатывать, обновлять и отлаживать удаленно, при этом пользователям не приходится их устанавливать (или переустанавливать). С этим связано очередное достоинство веб-приложений – их поведение не зависит от операционной системы, установленной на компьютере пользователя. Один и тот же вариант приложения может использоваться практически любым пользователем, вместо того, чтобы создавать отдельные версии приложения для Windows, Macintosh OS X, GNU/Linux и других операционных систем.

«Обученный» базовый контингент пользователей

Развитие и распространение Интернета (от 16 миллионов пользователей в декабре 1995 года до почти 1,5 миллиардов пользователей в июне 2008 года согласно данным сайта Internet World Stats www.internetworldstats.com) способствовало тому, что взаимодействие в сети Интернет стало привычным для огромного количества пользователей. Большинство пользователей Интернета сейчас знакомы с терминологией веб-браузеров, например, домашняя страница, назад, вперед, избранное, гиперссылки, кнопки подтверждения и т. д. Принимая во внимание все это и учитывая тот факт, что для пользования веб-приложениями не нужны замысловатые установки, осталось очень мало преград для их использования (или, по крайней мере, для того, чтобы хотя бы с ними ознакомиться). Более того, многими популярными веб-приложениями теперь можно пользоваться бесплатно или бесплатно с ними ознакомиться.

Надежность и высокий уровень развития связности сети и веб-технологий

Раньше существенным препятствием для развития веб-приложений являлась ненадежность связности сети и очень нестабильная поддержка веб-стандартов – а именно, HTML, CSS и JavaScript – в веббраузерах. Теперь ситуация изменилась. Поддержка веб-стандартов становится все существеннее, а их несовместимость с браузерами, доводившая раньше разработчиков до отчаяния, уменьшается. Кроме того, связность сети и широкополосный доступ становятся все надежнее, все распространеннее и дешевле в использовании. Согласно результатам исследования Website Optimization, процент домов в США, имеющих широкополосный доступ в Интернет, в марте 2008 года вырос до 57 %, а для активных пользователей сети Интернет он составил 90 % (www.websiteoptimization.com/bw/0807/). Это послужило надежной основой для появления визуальных средств разработки и инфраструктур, способствующих развитию веб-приложений.

Трудности в разработке интерфейсов для веб-приложений

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

«Слабо связанная» веб-архитектура

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

Загрузка каждой новой страницы или обновление страницы сопровождается приемлемыми задержками, связанными с необходимостью установить соединение, отправкой ответа на запрос, получением страницы и перезагрузкой страницы в браузере. Все это может показаться пользователям веб-приложений довольно скачкообразным и нестабильным. Например, пользователю, который просматривает данные, структурированные в виде иерархического дерева, возможно, придется ждать после каждого клика, пока узел отсчета будет дополнен или удален на перезагружаемой странице и можно будет увидеть изменения. Хотя эта проблема в большей степени связана с применением технологий создания сценариев, такими как JavaScript и богатые веб-приложения (Rich Internet Applications, см. главу 8), с ней часто сталкиваются пользователи при работе с большинством веб-приложений.

Ограниченный набор средств управления, или виджетов, для поддержки архитектуры приложения

В текущей версии стандарта HTML (версия 4.01) поддержка средств управления ограничивается текстовыми окнами, зависимыми клавишами, флажками, раскрывающимися списками и командными или управляющими кнопками. Эта версия не поддерживает сложные взаимодействия, типичные для клиентских приложений, таких как регуляторы прокрутки, календари, экспертные системы, закладки, панели инструментов, перетаскивание, плавающие панели, диалоговые окна, контекстно-зависимые меню и т. д., которые встречаются даже в базовых клиентских приложениях. Хотя подобные элементы управления можно разработать с помощью сценариев JavaScript и каскадных таблиц стилей (Cascading Style Sheets, CSS), недостаток изначальной поддержки привел к появлению разнообразных способов их реализации, обладающих неполным функционалом.

Несогласованные способы взаимодействия

Как базовая технологическая архитектура Интернета, так и ограниченный набор доступных элементов управления затрудняют создание таких способов взаимодействия пользователя с веб-приложением, которые были бы на уровне со способами взаимодействия в клиентских приложениях. Кроме этого поскольку большинство веб-приложений разработано так, чтобы с ними можно было работать через браузер, способы взаимодействия и оформление нельзя спроектировать так, чтобы они подходили ко всем операционным системам; например, закладки в интерфейсе Macintosh OS X Aqua внешне выглядят совершенно иначе, нежели закладки в интерфейсе Windows Vista (рис. 1.6).

(а)

(б)

Рис. 1.6. Закладки в интерфейсе Macintosh OS X Aqua (a) и в интерфейсе

Хотя сравнительно свободная среда проектирования Интернета предоставляет разработчикам простор для творчества, она также приводит к многообразию и неоднородности пользовательских интерфейсов и способов, что во многих случаях вызывает определенные трудности для пользователей. Сложности связаны с тем, что пользователи сталкиваются с различными вариантами интерфейсов и способов взаимодействия, каждый из которых обладает собственной терминологией для названия объектов, действий и изображений, объединенных в одном и том же приложении (см. Тидвелл, 2008). На рисунке 1.7 показан пример изменения названия закладки в Zoho Notes (веб-приложение для записей, похожее на Microsoft OneNote) и Zoho Sheet (веб-приложение для работы с таблицами, похожее на Microsoft Excel). Чтобы изменить название закладки в Zoho Notes, пользователи должны дважды щелкнуть по названию закладки, после чего появится диалоговое окно Rename (Переименовать). Чтобы изменить название закладки в Zoho Sheet, пользователи должны щелкнуть правой кнопкой мыши по закладке и выбрать пункт Rename (Переименовать), который откроет всплывающее окно, позволяющее пользователю сменить имя; при этом с помощью двойного щелчка мыши можно выделить текст и заменить его своим.

(a)

(б)

Рис. 1.7. Два различных способа взаимодействия пользователя с системой для смены названия закладки в Zoho Notes (a) и в Zoho Sheet (б)

Примечание

HTML5 будет поддерживать дополнительные элементы формы, которые на данный момент входят в спецификацию Web Forms 2.0, разработанную консорциумом World Wide Web Consortium (W3C) (www.w3.org/TR/web-forms-2/). Эта новая версия предоставит дополнительные элементы управления (например, элемент <datalist> для создания комбинированных окон и элемент <output> для того, чтобы показывать значения, производные от других элементов управления), а также в ней появятся расширения для существующих элементов управления (например, <inputtype="date"/>, <input type="email"/> и др.), что немного облегчит разработку вебприложений. Браузер Opera (версия 9 и выше) сегодня поддерживает Web Forms 2.0 и предоставляет хорошую базу для разработки интерактивных прототипов.

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

Однако применить эти принципы для разработки удобных в использовании веб-приложений не так уж и просто. Принципы разработки обладают ограниченной эффективностью, поскольку они часто предлагают высокоуровневые принципы (например, сделать видимым системный статус; использовать распознавание вместо повторного вызова; предотвращение ошибок) или предоставляют очень узкоспециализированные инструкции (например, выровнять заголовки таблиц относительно выравнивания данных в таблице). С другой стороны, руководства по стилю оформления фокусируются на создании имиджа и аспектах визуального проектирования и обычно предназначены для определенной платформы (например, Macintosh OS X Aqua и Windows Vista) или для приложений, разработанных определенной корпорацией (например, руководство по графическому пользовательскому интерфейсу браузера от компании Oracle: «Oracle Browser Look and Feel [BLAF] Guidelines», 2004), и вовсе необязательно предоставляют подробные инструкции для разработки удобных средств взаимодействия.

Руководства по разработке и стилю оформления обычно довольно объемные и сложные в использовании, поскольку для реализации одного способа взаимодействия обычно необходимо, чтобы разработчики пользовательского интерфейса ознакомились с несколькими пунктами документа. Например, руководство по проектированию пользовательских интерфейсов от компании Apple: «Human Interface Guidelines» – документ объемом почти в 400 страниц, и чтобы создать диалоговое окно с элементами управления, разработчику пришлось бы ознакомиться с несколькими пунктами части номер 3, называющейся: «Part III: The Aqua Interface» (рис. 1.8), которая содержит примерно 250 страниц, посвященных этому вопросу.

Рис. 1.8. Раздел «Часть III: Аквавзаимодействие» в «Руководстве по проектированию пользовательских интерфейсов» от компании Apple составляет примерно 250 из 400 страниц документа

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

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

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

Упоминание о шаблонах впервые появилось применительно к архитектуре в работах Кристофера Александра и его коллег: «Язык шаблонов» (Alexander et al., 1977) и «Извечный путь строительства» (Alexander, 1979). Они объясняют суть шаблонов следующим образом:

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

Alexander et al., 1977, стр. x

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

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

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

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

• Возможность многократного применения и согласованные интерфейсы. Формирование библиотеки допускающих многократное применение элементов пользовательского интерфейса также может способствовать разработке согласованных интерфейсов приложений. Особенно это удобно для больших корпораций, в которых много рассредоточенных проектных групп, где решения для одной и той же проблемы могут применяться различными проектными группами, что приводит к несогласованности интерфейсов, разработанных одной и той же компанией. Благодаря каталогизации и обмену информацией о шаблонах проекта, группы могут повысить согласованность, предсказуемость, простоту и удобство использования своих проектов (Leacock et al., 2005) и могут сформировать корпоративную память об опыте проектирования (Borchers, 2001).

• Общий, совместно используемый язык. Шаблоны помогают поддерживать и совершенствовать обмен информацией между членами команды с различной специализацией благодаря развитию общего языка или терминологии при объяснении и обсуждении проектных решений (Borchers, 2001; Erickson, 2000). Это очень важно, поскольку проектировщики пользовательского интерфейса часто работают в междисциплинарных группах, в состав которых входят также разработчики, специалисты в прикладных областях и пользователи или представители пользователей, а в этих группах обычно отсутствует общая терминология для обмена идеями и мнениями по поводу проекта.

• Эффективное средство обучения и справочное руководство. Для опытных проектировщиков шаблоны также могут быть эффективным средством предоставления инструкций для тех, кто не получил формального образования в области проектирования (Chen, 2003). При наличии наглядных и текстовых описаний неопытным проектировщикам интерфейсов легче увидеть примеры успешного применения шаблонов.

• Удобные в применении веб-приложения. В конечном итоге, поскольку шаблоны основаны на успешном опыте применения, их использование может сделать веб-приложения удобными в применении, потому как способы взаимодействия, лежащие в основе шаблонов, знакомы пользователям.

Документирование шаблонов

Важно, чтобы шаблоны были документально оформлены, чтобы из этой документации можно было понять, что они собой представляют, почему они работают и как они должны применяться для решения проблемы проектирования, чтобы получить вышеупомянутые преимущества. Однако интересен тот факт, что не существует какого-либо «шаблона» для документирования шаблонов (см. главу 13). Авторы шаблонов применяют различные подходы, начиная с тех, кто основывается на более описательном повествовании в духе Кристофера Александра (Borchers, 2001; Graham, 2003; van Duyne et al., 2002, 2006), заканчивая теми, кто следует более структурированному, хотя и минималистическому, подходу (Laasko, 2003); Тидвелл, 2008; www.welie.com) ⁴.

В этой книге представлен довольно краткий обзор шаблонов. В частности, в описание каждого шаблона входит:

• Название шаблона. Короткий заголовок, описывающий проектное решение. По примеру других наборов шаблонов названия шаблонов написаны ЗАГЛАВНЫМИ БУКВАМИ, чтобы они выделялись среди остального текста. В тексте приведены названия шаблонов на английском языке, а в конце книги вы найдете список всех шаблонов на английском языке и смысловой перевод в скобках (русские названия шаблонов не утверждены).

• Проблема. Краткое описание проблем(ы) проектирования, которую решает шаблон, и описание сопутствующих трудностей проектирования и альтернативных вариантов, с которыми сталкиваются проектировщики пользовательских интерфейсов.

• Решение. Ключевое проектное решение проблемы. Это краткое описание решения (т. е. шаблона), которое сопровождается примером (т. е. наглядным изображением), иллюстрирующим его применение для веб-приложения.

• Зачем. Логическое обоснование эффективности проекторного решения.

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

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

Структурирование шаблонов в этой книге

Шаблоны в этой книге структурированы по главам следующим образом.

Глава 2: Формы. Формы являются отличительной чертой вебприложений. Именно с помощью элементов формы, таких как текстовые окна, раскрывающиеся меню, зависимые кнопки, флажки и прочие, пользователи вводят информацию и взаимодействуют с веб-приложениями. В этой главе рассказывается о шаблонах, связанных с разработкой форм для веб-приложений и обеспечивающих заполнение формы таким образом, чтобы оно не было трудоемким занятием, а также чтобы эти формы помогали пользователям достигать своих целей. Это такие шаблоны, как CLEAR BENEFITS, SHORT FORMS, LOGICAL GROUPING, LABEL ALIGNMENT, REQUIRED FIELD INDICATORS, SMART DEFAULTS, FORGIVING FORMAT, KEYBOARD NAVIGATION, INPUT HINTS/ PROMPTS, ACTION BUTTONS и ERROR MESSAGES.

Глава 3: Аутентификация пользователя. Веб-приложения осуществляют взаимно однозначное взаимодействие с пользователями и сохраняют информацию о конкретных пользователях. Для этого требуется, чтобы пользователи создавали учетную запись и получали к ней доступ с помощью уникальных учетных данных. В этой главе описываются шаблоны проектов, имеющие отношение к доступу и завершению работы с веб-приложениями, включая REGISTRATION, CAPTCHA, LOG IN, LOG OUT, AUTOMATIC LOGOUT и FORGOT USERNAME/ PASSWORD.

Глава 4: Главная страница приложения. Важный для проектировщиков вопрос – что пользователь увидит или на какую страницу будет направлен, когда он входит в свою учетную запись в приложении? В этой главе описаны шаблоны, которыми могут воспользоваться проектировщики при направлении посетителей на эту «главную» страницу приложения, сюда относятся INBOX, CONTROL PANEL, DASHBOARD, PORTAL, PERSONALIZATION, CUSTOMIZATION и BLANK SLATE.

Глава 5: Навигация. Навигация – это то, как пользователи работают с веб-приложением. Если процесс навигации спроектирован удачно, он становится прозрачным (т. е. незаметным для пользователя) и пользователи могут быстро осуществить свои задачи, не прибегая к ненужному поиску с возвратом. В центре внимания этой главы – шаблоны проектирования навигационных систем, такие как PRIMARY NAVIGATION, SECONDARY NAVIGATION, UTILITY NAVIGATION, FACETED NAVIGATION, SUPPLEMENTARY NAVIGATION, TAG CLOUDS, BREADCRUMBS и WIZARDS.

Глава 6: Поиск и фильтрация. Для большинства веб-приложений получение информации только с помощью навигационных систем может быть затруднительным и нанести ущерб удобству и простоте использования. По этой причине информация в веб-приложении доступна для поиска, чтобы пользователи могли быстро и эффективно найти то, что им нужно. Кроме тех случаев, когда критерии поиска очень особые, пользователи, скорее всего, получат большое количество результатов. Проектировщики должны предоставлять пользователям возможность с помощью механизмов фильтрации сократить список результатов до удобного в обработке набора вариантов. В этой главе рассказывается о шаблонах проектирования, связанных с поиском и фильтрацией информации в веб-приложениях, сюда относится SIMPLE SEARCH, PARAMETRIC SEARCH, ADVANCED SEARCH, SEARCH TIPS, SEARCH RESULTS, SORTING, PAGINATION, CONTINUOUS SCROLLING, FILTERING, FACETED SEARCH и SAVED SEARCHES.

Глава 7: Списки. Списки применяются для того, чтобы представить пользователям несколько элементов. Способ этого представления может быть различным, в зависимости от того, какие именно элементы должны быть представлены. В этой главе рассказывается о шаблонах проектирования для различных типов списков, а именно SIMPLE LIST, TABULAR LIST, HIERARCHICAL LIST, EVENT LIST, TIMELINES, IMAGE LIST/ GRID, MAPS, LIST ACTIONS и LIST UTILITY FUNCTIONS.

Глава 8: Богатые веб-приложения. Богатые веб-приложения (RIA) предоставляют такую же ответную реакцию и интерактивность, что и настольные клиентские приложения, поскольку пользователям не приходится ждать, пока основные данные на странице обновляются и пока вносятся изменения в оформление; по этой причине результаты их действий можно увидеть немедленно. В этой главе рассказывается о часто применяющихся шаблонах проектирования для богатых веб-приложений, к которым относятся RICH-TEXT EDITOR, RICH FORM, AUTOSUGGEST/ AUTOCOMPLETION, EDIT-IN-PLACE, OVERVIEW-PLUS-DETAIL, DYNAMIC QUERYING, LIVE PREVIEW, DRAG-AND-DROP, SLIDER, ANIMATIONS/TRANSITIONS, DELAY/PROGRESS INDICATOR, SPOTLIGHT/YELLOW-FADE и CAROUSEL

Глава 9: Социальные приложения. Современная тенденция в сфере веб-приложений – это разработка социальных приложений, которые не просто способствуют тому, чтобы пользователи вносили свой вклад и выкладывали свой контент (например, фотографии, видео, закладки и т. д.), но также развивают взаимодействие и помогают создавать сообщества. В этой главе рассказывается о шаблонах проектирования, которые были созданы на основе подобных социальных приложений, включая ADD/UPLOAD CONTENT, TAGGING, RATING, REVIEWS, VOTE TO PROMOTE, USER PROFILE, REPUTATION, DISCOVER NETWORK MEMBERS, FRIEND LIST, GROUPS/SPECIAL INTEREST COMMUNITY, MESSAGING, PRESENCE INDICATOR, SHARING и COLLABORATION.

Глава 10: Интернационализация. Интернационализация вебприложений является важным шагом к локализации – в данном случае к адаптации этих приложений к определенному региону или языку. Это помогает сократить усилия, необходимые для последующей локализации, и избавляет от необходимости разрабатывать отдельные региональные и языковые версии приложений. В этой главе рассказывается о шаблонах проектирования, которые помогают сделать приложение в достаточной степени универсальным и адаптируемым на первых этапах разработки, сюда относятся EXTENSIBLE DESIGN, DATE FORMAT, TIME FORMAT, NUMBER FORMAT, CURRENCY AND CURRENCY FORMAT, GLOBAL GATEWAY и LANGUAGE SELECTOR.

Глава 11: Доступность. Шаблоны проектирования, о которых говорится в этой главе, помогают сделать веб-приложения доступными и поддерживающими рекомендации и правила доступности информации в Интернете, например, правила, сформулированные на консорциуме W3C; к этим шаблонам относятся PROGRESSIVE ENHANCEMENT, SEMANTIC MARKUP, UNOBTRUSIVE STYLE SHEETS, UNOBTRUSIVE JAVASCRIPT, ACCESSIBLE FORMS, ACCESSIBLE IMAGES, ACCESSIBLE TABLES, ACCESSIBLE NAVIGATION и ACCESSIBLE ALTERNATIVE.

Глава 12: Визуальное проектирование. Визуальное проектирование веб-приложений сильно влияет на то, насколько полезным пользователи считают это приложение. Эта глава посвящена тем шаблонам проектирования, которые определяют, как выглядят и какое впечатление производят веб-приложения; сюда относятся LIQUID-WIDTH LAYOUT, FIXED-WIDTH LAYOUT, PROGRESSIVE LAYOUT, GRID STRUCTURE, VISUAL HIERARCHY, HIGHLIGHT и ICONS.

Глава 13: Библиотеки шаблонов. Несмотря на популярность шаблонов и библиотек шаблонов, в настоящее время еще не достигнуто соглашения о том, как шаблоны должны документироваться, соблюдаться и распространяться. По этой причине в данной главе представлен «шаблон» библиотеки шаблонов и показаны ее ключевые элементы, а также предложены лучшие варианты ее расширения.

Глава 14: Помощь. Несмотря на то что при соблюдении основных принципов, процессов и шаблонов проектирования создается удобный и эффективный в применении интерфейс, необходимо предоставить помощь, доступную на каждом этапе взаимодействия пользователя с системой. В главе перечислены шаблоны проектирования, связанные с предоставлением помощи в веб-приложениях, к ним относятся CONTEXTUAL HELP, FREQUENTLY ASKED QUESTIONS, APPLICATION HELP, GUIDED TOURS, HELP WIZARDS, HELP COMMUNITY и CLICK-TO-CHAT.

Примечание

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

Применение шаблонов в этой книге

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

Рассматривайте шаблоны, описанные в этой книге, как рекомендации, а не как конкретные точные проектные решения, и применяйте их, если только они подходят для решения вашей проблемы. Не применяйте шаблон для решения проблемы, только чтобы его применить! Как обозначил Грэхэм (Graham, 2003): «Шаблоны – это абстрактные, ключевые решения проблем, которые возникают в различных контекстах… Практическое применение данного решения может приобретать различные формы в различных приложениях. Поэтому шаблоны не являются готовыми к применению решениями». Поэтому сосредоточьте внимание на сущности шаблона и затем подумайте, как этот шаблон может помочь решить проблему, поскольку шаблоны указывают не на одно-единственное решение, а скорее на стратегию решения проблемы.

Глава 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.

Таблица 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).

Глава 3
Аутентификация пользователя

Введение

Когда веб-приложение предполагает взаимно однозначное взаимодействие с пользователем и сохранение персональных данных о пользователе, возникает необходимость, чтобы пользователи создавали учетную запись (REGISTRATION) и выбирали уникальные учетные данные для доступа к веб-приложению. При регистрации пользователи в некоторых случаях должны ввести набор буквенно-цифровых символов с искаженного изображения, чтобы предотвратить рассылку спама, а также подтвердить, что они являются людьми, а не компьютерными программами (CAPTCHA, Completely Automated Public Turing test to tell Computers and Humans Apart, – Полностью автоматизированный публичный тест Тьюринга для различения компьютеров и людей).

Когда созданы уникальные учетные данные, пользователи могут идентифицироваться (LOG IN) и получить доступ к своей личной информации. После входа в систему и выполнения необходимых заданий пользователям во многих случаях необходимо выйти из приложения таким образом, чтобы неавторизованные пользователи не могли получить доступ и изменить информацию из их учетной записи (LOG OUT). Во многих приложениях предусмотрен автоматический выход из системы, если пользователь какое-то время неактивен (AUTOMATIC LOGOUT).

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

REGISTRATION (РЕГИСТРАЦИЯ)

Проблема

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

Решение

Отложите регистрацию на самый последний момент и позвольте пользователям изучить приложение, чтобы они в полной мере оценили все преимущества создания учетной записи. Кроме того, если пользователи готовы отказаться от ряда удобств, дайте им возможность совершить операцию, не регистрируясь. На сайте Topix.net значительно увеличилось количество и качество сообщений, когда для того, чтобы оставить сообщение в форуме, сайт перестал требовать от пользователей зарегистрироваться (Blake, 2006). Когда регистрация неизбежна, четко обозначьте преимущества регистрации и узнавайте у пользователей только ту информацию, которая необходима для создания учетной записи (рис. 3.1).

Рис. 3.1. У сервиса Crazy Egg одна из самых простых и коротких регистрационных форм. Для регистрации пользователь должен просто указать свой электронный адрес и пароль, и согласиться с условиями использования и политикой конфиденциальности

Зачем

В большинстве случаев создание учетной записи в приложении не входит в задачи пользователей. Обычно в их задачу входит покупка товара, выкладывание информации, оплата счетов и т. д. Предложение создать учетную запись или зарегистрироваться обычно отвлекает пользователей от их основной задачи и прерывает их взаимодействие с системой. По этой причине регистрацию нужно откладывать на самый последний момент. Этот подход часто практикуется в приложениях для электронной коммерции (например, Amazon, Buy.com), информационных порталах (например, Yahoo! MSN, Morningstar) и приложениях для информационного обмена (например, Flickr, YouTube, SlideShare), где пользователь может изучить контент, не создавая учетную запись. Только когда пользователи хотят совершить покупку, добавить контент, оставить комментарий или изменить внешний вид приложения, эти приложения требуют, чтобы пользователи зарегистрировались. По этой причине поздняя регистрация позволяет пользователям оценить все преимущества приложения и лучше осознать необходимость и достоинства создания учетной записи.

Как

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

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

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

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

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

Рис. 3.3. На сайте Papa John в регистрационной форме объясняется, почему пользователи должны указать свой возраст: потому что им должно быть больше 13 лет для того, чтобы они могли сделать заказ

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

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

Применяйте полностью автоматизированный публичный тест (CAPTCHA), чтобы зарегистрироваться мог только человек

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

Рис. 3.4. Для регистрации на сервисе Nabble пользователи должны пройти автоматизированный CAPTCHA-тест

Автоматизированный тест CAPTCHA требует от пользователей, чтобы они ввели в специально отведенное поле символы с искаженного изображения, которое содержит буквы и/или числа. Способность верно определить символы искаженного изображения выступает в качестве доказательства того, что форму заполняет человек, а не программа (см. далее шаблон CAPTCHA).

Хотя тест CAPTCHA применяется все чаще, пользователям приходится прикладывать дополнительные усилия на то, чтобы ввести эту информацию. Калбуччи (Calbucci, 2008) обнаружил, что когда на сайте Sampa (www.sampa.com) убрали тест CAPTCHA при регистрации, количество зарегистрировавшихся увеличилось на 9,2 %.

Попробуйте применить «ленивую» регистрацию

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

Чтобы процесс регистрации был максимально эффективным, даже когда он отложен на потом, можно воспользоваться подходом «ленивой» регистрации, т. е. собирать информацию о пользователе из файлов cookie его браузера во время работы с приложением. Как утверждает Махемофф (Mahemoff, 2006):

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

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

Попробуйте обойтись без регистрации

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

Рис. 3.5. На сайте Office Depot пользователи могут совершить покупку без регистрации. Также пользователям сообщается, что они смогут создать учетную запись во время оплаты

Четко обозначьте преимущества регистрации

Если невозможно отложить регистрацию в приложении, четко обозначьте все преимущества регистрации (рис. 3.6).

Рис. 3.6. На сайте сервиса Netflix не просто перечислены преимущества регистрации, но также на этой же самой странице объяснено, как сервис функционирует. Пользователи могут пройти по специальной ссылке и подробнее ознакомиться с тем, как выбирать фильмы, или с предложением воспользоваться бесплатным тестовым периодом; более того, на сайте Netflix указан номер телефона, по которому можно позвонить, если возникли вопросы

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

Рис. 3.7. Сервис Basecamp (от 37Signals) предлагает пользователям тур по приложению, чтобы они смогли оценить его функционал и преимущества. Пользователи могут создать бесплатную пробную учетную запись, чтобы получить возможность самостоятельно изучить приложение. Хотя при бесплатной регистрации пользователь лишен ряда возможностей, ему проще увидеть все преимущества регистрации

Попробуйте предоставить пользователям возможность воспользоваться системами «унифицированной идентификации»

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

OpenID – это открытый стандарт, который позволяет пользователям создавать и применять пару имя пользователя и пароль для входа в любое веб-приложение, поддерживающее OpenID; для получения более подробной информации зайдите на сайт www.openid.net. Таким образом, разрешив поддержку OpenID, вы либо устраните необходимость регистрации либо по крайней мере сократите количество данных, которые должен предоставить пользователь для создания учетной записи (рис. 3.8). Поскольку не все пользователи зарегистрированы в OpenID, обеспечивать нормальный процесс регистрации все равно необходимо.

Рис. 3.8. На сайте Ma.gnolia пользователи могут пройти стандартную регистрацию и выбрать себе имя пользователя и пароль, а также воспользоваться системой OpenID

Подтверждайте регистрацию

При необходимости требуйте от пользователей подтверждения регистрации, чтобы препятствовать мошенничеству. Обычно для этого на указанный во время регистрации электронный адрес отправляется письмо, содержащее ссылку для подтверждения. Только после того как пользователи проходят по этой ссылке (или вставляют регистрационный URL-адрес в адресную строку браузера), их регистрация считается завершенной. Чтобы письмо случайно не потерялось, предлагайте пользователям проверить папку со спамом (рис. 3.9).

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

Развейте сомнения пользователей по поводу конфиденциальности

Пользователи могут сомневаться, стоит ли им регистрироваться, потому что им неизвестно, как будет использована их личная информация. Чтобы развеять подобные сомнения, напишите несколько слов по поводу конфиденциальности (например, «Ваша информация не будет продана или разглашена») и сразу за этим разместите ссылку на подробную политику конфиденциальности (рис. 3.10).

Рис. 3.10. В регистрационной форме сайта Prosper кратко описана политика конфиденциальности, а также указана ссылка на более подробную информацию о политике конфиденциальности

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

В веб-приложениях с повышенным уровнем безопасности (например, в приложениях, связанных с финансами) используйте контрольные вопросы (рис. 3.11). Впоследствии с помощью контрольных вопросов можно идентифицировать пользователей, забывших свою регистрационную информацию (см. далее в этой главе шаблон FORGOT USERNAME/PASSWORD).

Рис. 3.11. При создании учетной записи на сайте CapitalOne пользователь должен указать контрольный вопрос

Согласие

Убедите пользователей согласиться получать рассылку от компании, которой принадлежит данное приложение (рис. 3.12).

Рис. 3.12. На сайте Evite пользователям четко предлагается получать рассылку с информацией о вечеринках и идеях для отдыха

Это первый шаг на пути к тому, чтобы отправленное пользователю электронное сообщение отвечало требованиям закона CAN-SPAM⁵. Лучший способ это сделать – дважды разместить предложение, и если пользователь соглашается, ему приходит письмо, содержащее ссылку для подтверждения, по которой он должен пройти, чтобы подтвердить свое согласие.

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

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

Возвращайте пользователей обратно к тому шагу, на котором их прервали

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

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

Во многих веб-приложениях регистрация – это первая форма, с которой сталкиваются пользователи. Чтобы взаимодействие пользователя с приложением было успешным, важно придерживаться шаблонов, описанных в главе 2 – CLEAR BENEFITS, SHORT FORMS, REQUIRED FIELD INDICATORS и ERROR MESSAGES. Когда пользователи видят регистрационную форму, важно, чтобы у них была возможность войти в систему (LOG IN), поскольку они могли зарегистрироваться ранее. Кроме того, поскольку процесс регистрации нередко сопровождается тестом CAPTCHA, придерживайтесь рекомендаций из следующего шаблона.

CAPTCHA (ПОЛНОСТЬЮ АВТОМАТИЗИРОВАННЫЙ ПУБЛИЧНЫЙ ТЕСТ)

Проблема

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

Решение

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

Рис. 3.13. Тест CAPTCHA на странице регистрации Yahoo!

Распознавание искаженного изображения выступает в качестве подтверждения того, что пользователь – это человек, а не машина, поскольку автоматически распознать искаженное изображение компьютерной программе довольно сложно. Этот метод называется тест CAPTCHA (от англ. Completely Automated Public Turing test to tell Computers and Humans Apart – Полностью автоматизированный публичный тест Тьюринга для различения компьютеров и людей (von Ahn, Blum, and Langford, 2004)⁶.

Зачем

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

Как

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

Рис. 3.14. Примеры изображений CAPTCHA

Относительно недавно некоторые сайты стали использовать в тесте CAPTCHA простые математические задачи, такие как 2+4 или 4x2, которые пользователи должны решить (рис. 3.15).

Рис. 3.15. Два примера использования математических задач в качестве теста CAPTCHA

Позволяйте пользователям менять изображение CAPTCHA

Некоторые изображения CAPTCHA могут показаться пользователям слишком искаженными, чтобы можно было распознать определенные символы (например, цифру 1 можно перепутать со строчной буквой l, а цифру 9 – со строчной g). По этой причине у пользователей должна быть возможность изменить изображение CAPTCHA, щелкнув мышью по ссылке «обновить» или «изменить» (рис. 3.16).

Рис. 3.16. Сервис Nabble предоставляет пользователям возможность изменить изображение CAPTCHA

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

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

Рис. 3.17. На сервисе Gmail пользователям предлагается и визуальный, и звуковой тест CAPTCHA

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

Тесты CAPTCHA часто применяются во время регистрации, поскольку большинство приложений пытаются избежать регистрации, произведенной программами-пауками (REGISTRATION). Также этот тест часто применяется в форумах и блогах, где пользователи могут оставлять комментарии или участвовать в жизни сообщества (см шаблон GROUPS/SPECIAL INTEREST COMMUNITY в главе 9).

LOG IN (ВХОД В СИСТЕМУ)

Проблема

Пользователям необходимо идентифицироваться для того, чтобы они могли получить доступ к информации в своей учетной записи и/или увидеть адаптированную или персонализированную версию веб-приложения. Например, пользователям нужно проверить свою почту (Hotmail, Yahoo! Mail), зайти в свою учетную запись в приложении для электронной коммерции (Amazon, Dell) и посмотреть статус заказа или увидеть адаптированную версию информационного портала (My Yahoo! iGoogle).

Решение

Попросите пользователей идентифицироваться с помощью своих уникальных идентификаторов (например, имя пользователя или электронный адрес) и пароля, который они либо сами выбрали при регистрации, либо получили от системного администратора. Для получения доступа к веб-приложению также могут применяться системы унифицированной идентификации, такие как OpenID или Windows CardSpace (рис. 3.18). Кроме того, чтобы упростить доступ к приложению, попробуйте предложить пользователям, чтобы приложение запомнило их регистрационную информацию.

(а)

(б)

Рис. 3.18. Сервис Basecamp позволяет пользователям войти в систему с помощью того имени пользователя и пароля, которые они выбрали во время регистрации (a), или с помощью OpenID (б). Пользователи также могут согласиться, чтобы приложение запомнило их данные для входа

Зачем

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

Как

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

Пароль должен выводиться на экран в зашифрованном виде

Для поля ввода пароля применяйте HTML-тег <input type="password" />. В этом случае веб-браузер будет выводить пароль на экран в виде звездочек или точек. Однако поскольку пользователь не может увидеть, что он ввел, в случае ошибки идентификации удаляйте введенные пользователем символы из поля для пароля. Кроме того, в том случае, если регистр имеет значение, просите пользователя проверить, не нажата ли клавиша Caps Lock.

В случае необходимости предлагайте безопасную идентификацию

Предоставляя пользователям доступ к личной информации, которая конфиденциальна по своей природе, обезопасьте процесс идентификации с помощью передачи информации по протоколу SSL (от англ. Secure Sockets Layer – уровень защищенных сокетов). Также сообщите пользователям, что они входят в систему с помощью безопасного протокола (рис. 3.19). Так пользователи будут больше доверять веб-приложению.

Рис. 3.19. На сайте Amazon пользователям сообщается, что они входят в систему через защищенный сервер

Предлагайте пользователям возможность зарегистрироваться

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

Рис. 3.20. Сайт Target предлагает пользователям возможность зарегистрироваться на странице идентификации (т. е. входа)

Предоставьте пользователям возможность восстановить забытые регистрационные данные

Пользователи часто забывают свои реквизиты для входа в систему, особенно в тех случаях, когда они редко пользуются приложением. Помогите пользователям восстановить забытые регистрационные данные, предоставив им возможность воспользоваться опцией «Забыли пароль?» и/или «Забыли имя пользователя или пароль?» (рис. 3.21); см. шаблон FORGOT USERNAME/PASSWORD далее в этой главе.

Рис. 3.21. На сайте Yahoo! под кнопкой «Войти» («Sign in») расположена ссылка «Забыли имя пользователя или пароль?» («Forget your ID or password?»), а новым пользователям предлагается зарегистрироваться, пройдя по ссылке «Регистрация»(«Sign up»)

Для повышения уровня безопасности продумайте двухступенчатую систему идентификации

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

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

(а)

(б)

Рис. 3.22. На сайте компании Advanta пользователей после входа в систему просят подтвердить свою идентичность (a), задавая им один из контрольных вопросов, которые они создали во время регистрации (б). Им также предоставляется возможность зарегистрировать компьютер, с которого они заходят на сайт, и в будущем избежать дополнительного этапа идентификации

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

Единый вход (единая идентификация)

Многие веб-приложения, особенно межкорпоративные (экстрасеть) и корпоративные (интрасеть), позволяют пользователям получать доступ к одному или нескольким связанным между собой приложениям. Такие дополнительные приложения должны поддерживать технологию единого входа (ее часто называют SSO), так чтобы пользователи могли входить в систему, используя те же регистрационные данные, которые они используют для идентификации в других приложениях. Пользователи должны беспрепятственно перемещаться между приложениями, и у них должно создаваться впечатление, как будто они пользуются одним и тем же приложением. Например, если пользователь вошел в свою учетную запись в Google Mail, он не должен снова проходить идентификацию для того, чтобы получить доступ к дополнительным приложениям, таким как Google Calendar и Google Documents.

Попробуйте предоставить пользователям возможность пользоваться системами «универсальной идентификации»

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

(а)

(б)

Рис. 3.23. На сайте IconBuffet пользователи могут пройти как стандартную идентификацию (a), так и с помощью системы OpenID (б)

Сохраняйте данные для входа в систему

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

1. Запомнить и имя пользователя, и пароль (рис. 3.24). Так полностью устраняется необходимость проходить идентификацию, если пользователь входит в систему с того же самого компьютера. Поскольку файлы cookies, необходимые для того, чтобы запомнить регистрационные данные, хранятся на компьютере, с которого пользователь выходит в систему, пользователю не нужно проходить идентификацию, если он использует тот же компьютер, до тех пор, пока файлы cookie не истекут или не будут удалены. Из соображений безопасности можно задать такие настройки, что срок действия функции «запомнить меня» будет истекать через определенный промежуток времени, например, две недели или 30 дней.

Рис. 3.24. Gmail предлагает пользователям возможность запомнить их регистрационные данные

2. Запомнить только имя пользователя (рис. 3.25). В этом случае пользователю все же придется вводить пароль при входе в систему, однако не нужно вводить имя пользователя. Приложения для электронной коммерции (например, Amazon) обычно применяют именно этот подход, и пользователям для совершения покупки нужно ввести пароль.

Рис. 3.25. На сайте компании Dominos пользователю предлагается сохранить на своем компьютере свое имя пользователя

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

Подтверждайте идентификацию

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

Рис. 3.26. Gmail отображает электронный адрес пользователя и ссылку Sign out (Выйти) в верхнем правом углу страницы, чтобы обозначить, что пользователь успешно вошел в систему

Блокирование учетной записи

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

Рис. 3.27. На сайте банка Washington Mutual указывается, что учетная запись будет блокирована после четырех неудачных попыток войти в систему

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

Когда пользователей просят пройти идентификацию, часто оказывается, что они забыли свои регистрационные данные (FORGOT USERNAME/PASSWORD). Кроме того, если пользователь еще не создал учетную запись, ему нужно предложить это сделать (REGISTRATION).

Шаблон LOG IN почти всегда сопровождается шаблоном LOG OUT, чтобы пользователи могли сознательно завершить сессию работы с приложением.

LOG OUT (ВЫХОД ИЗ СИСТЕМЫ)

Проблема

После входа в систему и выполнения необходимых задач пользователь может захотеть завершить сессию работы с веб-приложением. Это может произойти по ряду причин, чтобы:

• предотвратить несанкционированный доступ к его личной информации;

• выйти из одной учетной записи и зайти под другим именем;

• обозначить, что он выполнил все свои задачи и ему больше не нужен доступ к приложению.

Решение

Предоставьте пользователям возможность завершить сессию путем выхода из системы (рис. 3.28).

Рис. 3.28. Сервис CitiCards предлагает ссылку Log Out (Выход), чтобы пользователи могли завершить сессию

Зачем

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

Как

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

Рис. 3.29. На сайте Buy.com пользователь может пойти по ссылке Not имя пользователя? Click here (Вы не имя пользователя ? Щелкните здесь), чтобы выйти из одной учетной записи и зайти под другим именем

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

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

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

Подтверждайте выход из системы

Информируйте пользователей о том, что они вышли из системы. Подтверждение может быть представлено в виде:

• Специальной страницы «Вы вышли из системы», на которой пользователи могут выбрать, куда им перейти дальше.

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

• Версии страницы для неавторизованных пользователей (это типично для информационных порталов, таких как Yahoo! MSN, iGoogle и т. д.).

• Сочетания этих вариантов – например, специальная страница, автоматически перенаправляющая пользователя на другую страницу через определенный промежуток времени (рис. 3.30).

(а)

(б)

Рис. 3.30. Специальная страница портала Yahoo! на которой пользователю сообщается, что он вышел из системы (a). Спустя короткий промежуток времени, пользователи перенаправляются на версию страницы для неавторизованных посетителей (б)

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

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

Шаблон LOG OUT дополняет шаблон LOG IN, поскольку если для доступа к приложению пользователь должен войти в систему, обычно ему также предоставляется возможность выйти из системы.

AUTOMATIC LOGOUT (АВТОМАТИЧЕСКИЙ ВЫХОД)

Проблема

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

Решение

Если пользователь неактивен определенный промежуток времени (например, 15–45 минут), завершайте его сеанс работы выходом из системы (рис. 3.31).

Рис. 3.31. На сайте банка Washington Mutual пользовательская сессия автоматически прекращается, если пользователь неактивен 15 минут. Также пользователю предлагается ссылка для повторной авторизации, чтобы ему проще было начать новую сессию

Зачем

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

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

Как

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

Рис. 3.32. На сайте Bellco, когда лимит времени сеанса заканчивается, пользователи получают предупреждение, а также возможность продолжить текущую сессию. Также пользователи информируются о том, как можно изменить время ожидания

Когда превышается лимит времени сеанса, довольно часто происходит следующее:

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

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

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

Сохраняйте информацию пользователя

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

Предоставьте пользователям возможность менять лимит времени сеанса

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

Рис. 3.33. В приложении Rally Community Edition пользователи могут устанавливать продолжительность времени сеанса вплоть до четырех часов. По умолчанию лимит времени сеанса составляет один час

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

AUTOMATIC LOGOUT – это аварийная мера на тот случай, когда пользователь забывает выйти из системы, и это угрожает конфиденциальности его личной информации. Возможно, пользователям неизвестно, как выйти из системы, поскольку соответствующая опция скрыта или расположена не там, где ее ожидает увидеть пользователь (LOG OUT).

FORGOT USERNAME/PASSWORD (ЗАБЫТЫ ИМЯ ПОЛЬЗОВАТЕЛЯ/ПАРОЛЬ)

Проблема

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

Решение

Предоставьте пользователям возможность вспомнить или восстановить забытые данные для входа (рис. 3.34).

Рис. 3.34. Сервис Gmail предлагает ссылку I cannot access my account (Я не могу получить доступ к аккаунту)

Зачем

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

Как

Рядом со входом в систему разместите ссылку «Забыли свой ID (или пароль)» (рис. 3.35); если в качестве логина используется электронный адрес пользователя, достаточно ссылки «Забыли пароль».

Рис. 3.35. Сайт корпорации Capital One. Под кнопкой Log In (Вход) расположены ссылки Forgot your user ID (Забыли свой ID) и Forgot your password (Забыли свой пароль)

Отправляйте пароль на электронный адрес, указанный при регистрации

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

(а)

(б)

Рис. 3.36. Сайт Agile Commons после подтверждения электронного адреса отправляет на него ссылку для смены пароля (a). Пройдя по ссылке, пользователь попадает на страницу смены пароля (б)

Подтвердите идентичность пользователя с помощью контрольных вопросов

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

Рис. 3.37. На сайте компании Advanta, занимающейся выпуском кредитных карт, прежде чем сменить ID пользователя и его пароль, пользователю задают несколько вопросов для идентификации

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

Когда пользователю предлагают войти в систему, он может понять, что забыл свой логин и/или пароль. По этой причине рядом с полями, запрашивающими регистрационные данные (LOG IN), необходимо поместить ссылку для их восстановления.

Глава 4
Главная страница приложения

Введение

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

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

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

• INBOX, где пользователь может найти список элементов для просмотра или обработки.

• CONTROL PANEL – панель управления, которая выступает в качестве страницы запуска функций приложения.

• DASHBOARD – информационная панель для беглого осмотра самых важных показателей эффективности.

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

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

При проектировании веб-приложений часто не продумывают, что увидят новые пользователи (BLANK SLATE). Этот аспект особенно важен в тех приложениях, в которые пользователи должны внести определенные данные.

INBOX (ВХОДЯЩИЕ)

Проблема

Важно, чтобы пользователи знали, над чем они должны работать, и о том, что произошло со времени их последнего входа в приложение.

Решение

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

Рис. 4.1. Инструмент NetResults Tracker показывает разработчикам, когда они входят в систему, список ошибок и улучшений

Зачем

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

Как

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

Рис. 4.2. Пользователь видит свои входящие письма, как только входит в свою учетную запись в приложении Gmail. Новые входящие письма выделены полужирным шрифтом

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

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

Рис. 4.3. Сервис Remember The Milk предоставляет пользователям возможность устанавливать напоминания на каждый день, а также отображает, сколько минут осталось до того момента, когда задание должно быть выполнено. Пользователи могут получать напоминания по электронной почте, интернет-пейджеру и СМС на мобильный телефон

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

Шаблон INBOX обычно задействует списки. Это могут быть как списки TABULAR LIST, так и IMAGE LIST/GRID. Кроме того, как и другие списки, эти часто нужно сортировать (SORTING) и фильтровать (FILTERING), чтобы пользователям было проще найти релевантную информацию (см. главу 7, в которой подробно рассказывается о списках).

CONTROL PANEL (ПАНЕЛЬ УПРАВЛЕНИЯ)

Проблема

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

Решение

Покажите пользователям страницу, на которой представлены все доступные функции приложения, любой из которых он сможет быстро воспользоваться (рис. 4.4).

Рис. 4.4. Хостинговая компания 1&1 предоставляет пользователям возможность доступа с панели управления ко всем функциям работы с их учетными записями. Поскольку функций достаточно много, они разделены на две группы: Administration (Администрирование) и Account (Учетная запись)

Зачем

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

Как

Создайте «загрузочную» страницу, с которой пользователи смогут получать доступ ко всем возможностям приложения или к миниприложениям. Панели управления обладают звездообразной (hub-and-spoke) структурой пользовательского интерфейса (Baxley, 2003; Tidwell, 2008), когда одна центральная страница предоставляет пользователям доступ к автономным мини-приложениям. Таким образом, пользователи могут зайти в мини-приложение, выполнить свою задачу и вернуться на центральную страницу для выполнения другой задачи с помощью другого мини-приложения.

Панели управления обладают несколькими сходствами с домашними страницами информационных порталов:

• они формируют представление о возможностях приложения и предоставляют быстрый доступ к его основному функционалу;

• они определяют общий макет проектирования страниц приложения: их оформление, расположение, поисковые возможности и т. д.;

• они информируют пользователей о новых возможностях и функциях.

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

Рис. 4.5. В приложении Dell на странице My Account (Моя учетная запись) располагается краткая сводка информации об учетной записи. Эта страница выступает в качестве загрузочной страницы, предоставляющей доступ к информации пользователя, такой как сохраненные товары, купоны на скидку, корзина, статус заказа и т. д.

Выделяйте элементы, на которые нужно обратить внимание

Как и INBOX, шаблон CONTROL PANEL используется для информирования пользователей и привлечения их внимания к изменениям в функционале и контенте приложения. Как только пользователь зашел на страницу с панелью управления, необходимо направить его к тем элементам, которым он должен уделить внимание. Поскольку может оказаться, что пользователь этого не ожидает, используйте выделяющиеся уведомления и оповещения. Хороший пример уведомления – это сообщение о запланированном простое приложения, хотя это сообщение должно размещаться также и на странице входа. Если элементы служат только для информирования (т. е. оповещения) и не требуют от пользователей каких-либо действий, предоставьте пользователям возможность их проигнорировать.

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

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

DASHBOARD (ИНФОРМАЦИОННАЯ ПАНЕЛЬ)

Проблема

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

Решение

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

(а)

(б)

Рис. 4.6. На политической информационной панели портала Yahoo! которая посвящена выборам 2008, представлена наглядная информация о текущем статусе каждого кандидата (a). Кроме того, пользователи могут щелкать по кандидатам и получать подробную информацию о них, включая предварительное количество собранных голосов, привлеченные денежные средства и т. д. (б)

Зачем

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

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

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

Как

Информационные панели обычно выполняют три важных для пользователей функции.

1. Они отслеживают и контролируют важные показатели.

2. Они производят анализ для определения тенденций и особых ситуаций.

3. Они сообщают о полученных данных, чтобы можно было определить диагноз и выбрать необходимые корректировочные меры.

Рис. 4.7. Способы представления данных

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

Рис. 4.8. Информационная панель сервиса Google Analytics задействует ряд способов представления данных, передающих показатели производительности интернет-сайта. Один из применяемых способов – это график тренда, показывающий «Обзор посетителей» (Visitors Overview), также используются числа и спарклайны для представления «Пользования сайтом» (Site Usage) и таблица для отображения «Обзора контента» (Content Overview)

Способы обозначения особых ситуаций должны соответствовать заданиям пользователей

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

Рис. 4.9. Способы визуализации информационной панели

Показывайте информацию в контексте

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

• Растет показатель или падает.

• Наблюдается тенденция увеличения или снижения (и является ли она желательной или нет).

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

• Достиг ли показатель желаемого уровня и т. д.

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

Рис. 4.10. Сервис Chart Chooser от Juice Analytics помогает определить подходящий тип диаграммы в зависимости от того, что пользователь хочет отразить с помощью этой диаграммы, например, сравнение, распределение, структуру, тенденцию, соотношение или табличные данные. Кроме того, пользователь может скачивать соответствующие шаблоны Excel и PowerPoint. (Источник: www.juiceanalytics.com/chartchooser/.)

Отображайте всю необходимую информацию на одном экране

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

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

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

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

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

Рис. 4.11. На информационной панели сервиса Mint пользователи могут посмотреть свои активы, задолженности, предупреждения и финансовую смету. Пользователи могут щелкать по определенным участкам для получения более подробной информации – например, пользователь может щелкнуть по ссылке «American Express Green Card» и посмотреть список транзакций на сумму $29 (в примере)

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

Пользователи могут захотеть скачать данные информационной панели на свой компьютер для проведения дальнейшего их анализа и/или обмена ими с другими. Для этого можно разрешить такие действия, как скачивание подробного отчета в формате PDF, Excel или XML, или отправка электронного письма другим пользователям (рис. 4.12; см. шаблон LIST UTILITY FUNCTIONS в главе 7).

Рис. 4.12. Информационная панель сервиса Google Analytics позволяет пользователям экспортировать данные в форматах PDF и XML, а также пользователи могут отправлять информационную панель другим пользователям по электронной почте

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

Эффективная информационная панель выкладывается затем, чтобы привлечь внимание пользователя в первую очередь к самой важной деловой информации (см. шаблон VISUAL HIERARCHY в главе 12).