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

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

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

Рис. 13.11. В библиотеке шаблонов проектирования Yahoo! организация шаблонов основана на пользовательских задачах, а сами шаблоны располагаются в алфавитном порядке (когда пользователь выбирает пункт меню «see all…» рядом с заголовком «Recent Patterns»)

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

Рис. 13.12. В библиотеке шаблонов проектирования пользовательского интерфейса, а также на сайте шаблонов UI (www.ui-patterns.com) используются эскиз, имя шаблона и краткое описание, чтобы упростить пользователям поиск нужного шаблона

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

Рис. 13.13. Сайт «Информационные шаблоны проектирования» (www.infodesignpatterns.com) делает поиск нужных шаблонов простым, разрешая пользователям фильтровать их по категориям, например, Display Patterns (Шаблоны дисплея), Behavior Patterns (Шаблоны поведения) и Interaction Patterns (Шаблоны взаимодействия)

Разрешайте и поощряйте участие

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

(а)

(б)

(в)

Рис. 13.14. Библиотеки шаблонов могут поощрять участие других пользователей несколькими способами: сайт UI-шаблонов позволяет пользователям оценивать полезность шаблона голосованием «хорошо» (Thumbs-up) или «плохо» (Thumbs-down) (а), на сайте веб-шаблонов UC Berkeley пользователи могут оставлять комментарии и код (б), а «Фабрика шаблонов UI» приглашает пользователей обменяться идеями и предложить свои шаблоны на форуме «Pattern Ideas» (в)

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

Хорошим примером является «Фабрика шаблонов UI». На этом сайте пользователи могут вносить свой вклад в примеры шаблонов, которые использует группа Flickr. Пользователи могут присоединиться к сообществу Flickr (UIPatternFactory.com) и скачивать скриншоты, отмечать их именами шаблонов и предлагать их на включение вместе с другими примерами в данный шаблон (рис. 13.15). Кроме того, необходимо признать, что участие пользователей происходит не только ради признания их вклада, но также и служит стимулом для содействия других пользователей.

Рис. 13.15. Группа UIPatternFactory.com на сайте Flickr позволяет пользователям добавлять свои скриншоты для любого существующего шаблона

Чтобы гарантировать, что заинтересованные пользователи смогут оставаться в курсе изменений, предложите им функцию RSS-рассылок (рис. 13.16).

Рис. 13.16. На сайте Welie.com пользователи могут подписаться на RSS-рассылку и быть в курсе всех изменений

Установите процесс управления библиотеками шаблонов

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

Процесс должен отображать, как шаблон движется от наброска или стадии предложения к стадии утверждения, как участники присылают отзывы, как разрешаются разногласия, как каждое предложение будет утверждено и т. д. (рис. 13.17) (Crumlish, 2008; Malone et al., 2005). Если программные компоненты были включены в шаблон, то важно, чтобы процессы просмотра кода и тестирование также были включены.

Рис. 13.17. Технологическая последовательность библиотеки шаблонов, используемая Yahoo! (Источник: Malone et al., 2005.)

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

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

Используйте технологию Вики для разработки библиотек шаблонов

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

Рис. 13.18. Майкл Мехемофф (Michael Mahemoff) поддерживает сайт AjaxPatterns.org, содержащий библиотеку связанных с Ajax шаблонов, как и Вики

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

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

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

Изучайте следующие библиотеки шаблонов проектирования пользовательского интерфейса для вдохновения:

• Библиотека шаблонов проектирования с открытым исходным кодом Fluid: www.uidesignpatterns.org.

• Коллекция шаблонов интерактивного проектирования Дженнифер Тидвелл: www.designinginterfaces.com.

• Веб-сайт о шаблонах проектирования Мартина Ван Уили (Martijn van Welie): www.welie.com.

• UI-шаблоны проектирования Sakai: bugs.sakaiproject.org/confluence/display/DESPAT/Home.

• Библиотека шаблонов UC Berkeley: groups.ischool.berkeley.edu/ui_designpatterns/webpatterns2/webpattems/home.ph.

• Фабрика шаблонов UI: www.uipatternfactory.com.

• UI-шаблоны, библиотека шаблонов проектирования пользовательского интерфейса: www.ui-patterns.com.

• Библиотека шаблонов проектирования Yahoo!: developer.yahoo.com/ypatterns/.

Глава 14
Помощь

Введение

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

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

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

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

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

CONTEXTUAL HELP (КОНТЕКСТНАЯ ПОДСКАЗКА)

Проблема

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

Решение

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

Рис. 14.1. Ресурс Dell включает в себя справку, предлагая ссылку Help Me Choose (Помощь в выборе) на конфигурацию системы, когда пользователи делают свой выбор при настройке

Зачем

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

Как

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

• всплывающие подсказки или строки-подсказки;

• ссылка «Что это такое?» для получения информации;

• встроенные подсказки.

Всплывающие подсказки

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

Рис. 14.2. При наведении указателя мыши на название изображения в сервисе Flickr появляется подсказка Click to edit (Нажмите для редактирования)

Что это такое?

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

(а)

(б)

Рис. 14.3. В онлайн-сервисе Apple Store при конфигурации Mac после нажатия на ссылку Learn more (Подробнее) (а) появляется подробная информация о соответствующем варианте, которая находится ниже ссылки (б). Пользователи могут нажать на ссылку Learn more (Подробнее) снова, чтобы скрыть ее

Встроенные подсказки

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

Рис. 14.4. На сайте NextTag в регистрационной форме используются статические подсказки

(а)

(б)

(в)

Рис. 14.5. На сайте Digg используются динамические подсказки в регистрационной форме. Подсказки скрыты (а), пока пользователи не активизируют элемент формы (б) (в данном случае, Choose a Username (Выберите имя пользователя)). Когда пользователи снимают активизацию элемента формы или активизируют другой элемент, подсказка пропадает (в)

Используйте справку по приложению в зависимости от контекста

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

Рис. 14.6. Программа QuickBooks Online включает в себя справку по приложению и в качестве контекстной подсказки тоже. В зависимости от того, в каком месте приложения находятся пользователи, щелчок по ссылке Help (Справка) отображает соответствующий раздел справки по приложению в отдельном окне

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

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

FREQUENTLY ASKED QUESTIONS (ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ)

Проблема

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

Решение

Создайте страницу для ответа на часто задаваемые вопросы пользователей (FAQ, Frequently Asked Questions). Важно, чтобы вопросы, перечисленные в данном разделе, были действительно «часто» задаваемыми вопросами и упорядочены таким образом, чтобы ответы на общие вопросы были впереди ответов на углубленные вопросы (рис. 14.7).

Рис. 14.7. Часто задаваемые вопросы на сайте Digg. Щелчок мышью по вопросу расширяет область ниже, открывая ответ

Зачем

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

Как

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

(а)

(б)

(в)

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

Разделите на категории длинные списки часто задаваемых вопросов

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

Рис. 14.9. Сервис Flickr объединил вопросы в такие категории, как General Flickr Questions (Общие вопросы по Flickr), Free Accounts (Бесплатные учетные записи), Upgrading and Gifts (Модернизация и подарки) и т. д.

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

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