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

WIZARDS (МАСТЕРА)

Проблема

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

Решение

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

Рис. 5.32. Авиакомпания British Airways с помощью мастера настройки помогает пользователям совершить бронирование

Зачем

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

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

Как

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

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

Рис. 5.33. В мастере настроек приложения TurboTax используются действия Back (Назад) и Continue (Продолжить), с помощью которых пользователи могут выполнять свои задачи

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

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

Количество этапов мастера настроек должно быть ограниченным

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

Четко обозначайте этапы мастера настроек

Каждый этап мастера настроек должен быть представлен либо в виде набора горизонтально расположенных этапов или вкладок (рис. 5.35), либо в виде вертикально расположенного списка или содержания. Последний вариант предпочтительнее, если один или несколько этапов содержат подэтапы. Тесты мастеров настроек настольных приложений показали, что вертикальное расположение этапов мастера эффективнее и удобнее, чем горизонтальное расположение (Wickham et al., 2002). Однако для вертикального расположения требуется дополнительное пространство, поэтому им, возможно, придется пожертвовать, чтобы поместился контент каждого из этапов.

Рис. 5.35. В приложении Washington Mutual этапы процесса открытия счета показаны над формой, горизонтально

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

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

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

Обобщайте информацию на последней странице мастера

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

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

Добавляйте как можно больше установок по умолчанию

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

Четко указывайте, насколько пользователь приблизился к своей цели

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

Рис. 5.38. На сайте Progressive показано, на каком этапе находятся пользователи, какие этапы они выполнили, а какие этапы остались

Уберите из мастера лишние ссылки и кнопки

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

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

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

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

Рис. 5.39. На сайте TurboTax Online пользователи могут сохранить свою информацию и вернуться к тому этапу мастера, на котором они остановились

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

Поскольку мастера настройки (WIZARDS) – это всего лишь способ представления длинных и/или многоэтапных форм, с этим шаблоном связаны такие шаблоны, как SMART DEFAULTS, REQUIRED FIELD INDICATORS, FORGIVING FORMAT, INPUT HINTS/ PROMPTS, ERROR MESSAGES и другие, имеющие отношение к формам (см. главу 2).

Глава 6
Поиск и фильтрация

Введение

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

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

Вне зависимости от предложенного поискового механизма пользователи извлекут выгоду от получения руководства по совершенствованию поиска и формулированию лучших запросов (SEARCH TIPS).

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

Из-за вопроса производительности и для того, чтобы не перегружать пользователей слишком большим количеством данных, результаты поиска обычно отображаются в подмножествах размером от 10 до 20 на странице, между которыми пользователи могут перемещаться, используя такие инструменты управления, как вперед, назад, в начало, в конец и т. д. (PAGINATION). Альтернативный развивающийся метод – непрерывная прокрутка (CONTINUOUS SCROLLING), который также отображает за раз подмножество результатов, но вместо инструментов управления постраничным выводом информации он представляет дополнительные результаты поиска, когда пользователи прокручивают просматриваемую страницу ниже отображаемых результатов. Оба подхода обращаются к общей проблеме в поиске – слишком большому количеству результатов поиска.

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

Оба механизма исключают данные в результатах поиска, не подходящие под выбранные фильтры или ограничения. Различие в том, что пользователям, использующим фильтрацию (FILTERING), предлагаются варианты сокращения, при использовании которых все еще отображаются независимые результаты поиска. Многоаспектный поиск (FACETED SEARCH), в свою очередь, является динамичным, и варианты сокращения, предлагаемые пользователям, извлекаются из самих результатов поиска и продолжают обновляться, когда пользователи сужают далее список результатов.

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

SIMPLE SEARCH (ПРОСТОЙ ПОИСК)

Проблема

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

Решение

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

Рис. 6.1. Простой поисковый блок на Dig позволяет пользователям искать информацию, используя ключевые слова

Зачем

Когда пользователи точно знают, что именно они ищут, поиск оказывается более быстрым и эффективным способом достичь результата, чем навигация по иерархии приложения; обычно это именуется как известно-предметный поиск. Даже когда поиск не отправляет пользователей напрямую к искомым данным, он позволяет пропустить несколько уровней навигации и попасть в точку, от которой можно пройти оставшуюся иерархию и быстро попасть к нужным данным. Также пользователи не знакомы с такими концепциями поиска, как логические операторы[10]10
  Логические запросы выражаются в словах и фразах и комбинируются с операторами, такими как AND, OR, NOT, XOR и т. д.


[Закрыть] (Нилсен, 1997), им гораздо удобнее использовать простые его разновидности – поиск по ключевым словам и расширенный поиск (Spink et al., 2001; см. шаблон ADVANCED SEARCH далее в этой главе).

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

Как

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

Разместите поиск в соответствующем месте

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

• справа сверху страницы;

• сверху страницы в зоне «шапки» или прямо под ней (свойственно таким порталам, как Yahoo! MSN и iGoogle);

• слева сверху, над опциями просмотра (например, над списком товарных категорий в интернет-магазинах).

(а)

(б)

(в)

Рис. 6.2. Типичное расположение поисковых зон: в правом – верхнем углу (а), в центре, рядом с «шапкой» (б), в левом – верхнем углу, над опциями просмотра (в)

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

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

Задайте охват поиска

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

(а)

(б)

(в)

Рис. 6.3. Amazon использует выпадающее меню для того, чтобы позволить пользователям ограничить охват поиска до категории (а). Ask и Yahoo! позволяют пользователям задать охват поиска путем отображения категорий как иконок (б) или панелеобразных ссылок (в)

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

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

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

Рис. 6.4. CNET использует кнопку «Go» для инициализации поиска и метку «Поиск» перед полем ввода текста для поиска

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

Рис. 6.5. Home Depot размещает подсказку в поисковом поле, чтобы указать пользователям, что они могут в него вводить

Предлагайте эффективные ключевые слова

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

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

Поддерживайте сложный поиск в поле простого поиска

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

Рис. 6.7. Nabble, веб-приложение для форумов, предлагает пользователям специфический язык поиска, позволяющий им вводить точные запросы. Например, для поиска исключительно в форуме «Apache» пользователи могут включить «forum: Apache» в свой запрос

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

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