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

UTILITY NAVIGATION (СЛУЖЕБНАЯ НАВИГАЦИЯ)

Проблема

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

Решение

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

Рис. 5.11. В приложении Snapfish функции служебной навигации разделены на log out (выход), help (помощь), your cart (ваша корзина) и your account (ваша учетная запись) – они располагаются в верхнем правом углу страницы

Зачем

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

Как

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

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

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

Рис. 5.12. На сайте Buy.com для корзины используется специальная иконка, а опция View Cart (Просмотреть корзину) выделена оранжевым цветом, отличающим ее от других опций навигации

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

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

Рис. 5.13. В приложении Rally Agile Pro пользователи могут перемещаться между рабочими пространствами, выбирая другое рабочее пространство из раскрывающегося списка в области служебной навигации

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

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

Включите в служебную навигацию возможность выбора языка

Веб-приложения, поддерживающие несколько языков, обычно включают в себя возможность смены языка (или страны), эта возможность реализована в виде навигационной опции (рис. 5.15; см. шаблон LANGUAGE SELECTOR из главы 10).

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

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

Описанные здесь опции служебной навигации являются «глобальными» по своей природе (т. е. они применимы ко всей странице в целом) и размещаются в области заголовка. Однако некоторые служебные функции по природе своей «локальны» и применимы только к контенту страницы: это такие функции, как экспортировать в Excel или XML, распечатать, отправить другу электронным письмом и т. д., – они располагаются рядом с тем контентом, к которому относятся (см. шаблон LIST UTILITY FUNCTIONS в главе 7). Кроме того, к опциям служебной навигации относится возможность смены языка или страны (см. шаблоны LANGUAGE SELECTOR и GLOBAL GATEWAY в главе 10).

FACETED NAVIGATION (МНОГОАСПЕКТНАЯ НАВИГАЦИЯ)

Проблема

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

Решение

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

(а)

(б)

Рис. 5.16. На сайте Wine.com применяется многоаспектная навигация. При каждом выборе остается все меньше доступных аспектов, подходящих под определенные признаки оставшихся элементов. Таким образом, навигационные опции в разделе (a) Красное вино (Red Wine) ⇒ Cabernet Sauvignon отличаются от навигационных опций в разделе (б) Белое вино (White Wine) ⇒ Cabernet Sauvignon ⇒ $20–$40 (диапазон цен)

Зачем

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

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

Как

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

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

(а)

(б)

Рис. 5.18. В Приложении NexTag аспекты располагаются слева (a), а в приложении CNet они размещены наверху страницы (б)

Сообщайте пользователям о том, что они выбрали

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

Рис. 5.19. В приложении Wine.com выбор пользователя отображается в виде навигационной цепочки над списком элементов. Пользователи также могут увидеть выбранные ими опции слева на странице, где их выбор выделен среди других вариантов. Кроме того, чтобы использовать вариант «Home» («Дом»), который чаще всего встречается в навигационных цепочках, на сайте Wine.com используется вариант «Start Over» («Начать»). Благодаря этому пользователю проще начать пользоваться приложением, а также подобное решение помогает избежать путаницы, возникающей при использовании ссылки с меткой «Home» («Дом»)

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

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

SUPPLEMENTARY NAVIGATION (ДОПОЛНИТЕЛЬНАЯ НАВИГАЦИЯ)

Проблема

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

Решение

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

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

Зачем

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

Как

Ниже приводится несколько способов реализации дополнительной навигации в веб-приложениях и предоставления прямого доступа к контенту или функционалу приложения.

Указатели

Указатели представляют собой алфавитные или пронумерованные списки элементов приложения или его категорий.

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


[Закрыть].

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

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

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

Рекомендации

Рекомендации – это еще один способ ознакомить пользователей с новым контентом. В основу рекомендаций может быть положена информация о предыдущем поиске или покупках пользователя и/или об аналогичном поведении пользователей с похожими интересами и профилями (т. е. совместная фильтрация), как показано на рис. 5.22 (см. шаблон PERSONALIZATION в главе 4).

Рис. 5.22. На сайте Amazon пользователям предложены рекомендации под заголовком Customers Who Bought This Item Also Bought (Покупатели, выбравшие этот товар, также купили), благодаря чему легче искать новые товары

Родственные элементы

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

Рис. 5.23. В приложении OfficeDepot пользователям показываются родственные элементы

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

В соответствии со своим названием дополнительная навигация дополняет, а не замещает основную навигацию (PRIMARY NAVIGATION) и вторичную навигацию (SECONDARY NAVIGATION). Кроме того, поскольку с помощью дополнительной навигации можно обойти иерархическую навигационную структуру, реализация шаблона навигационная цепочка (BREADCRUMBS) может помочь пользователям в понимании того, в какой точке структуры приложения они находятся. Облака тегов (TAG CLOUDS) – это еще один вид дополнительной навигации, который можно применять в тех приложениях, контент в которые добавляется пользователями.

TAG CLOUDS (ОБЛАКА ТЕГОВ)

Проблема

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

Решение

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

Рис. 5.24. В приложении Last.fm применяются облака тегов для отдельных элементов (например, для музыкальных стилей, исполнителей или альбомов)

Зачем

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

Эта связующая навигация поддерживает три способа изучения информации (Smith, 2007):

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

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

Рис. 5.25. В приложении NexTag облака тегов отображают, какие элементы чаще всего ищут пользователи

3. Фильтрация. Каждая метка в облаке тегов может использоваться как фильтр и позволяет пользователям просматривать только те элементы, которые отмечены данным тегом.

Кроме того, поскольку тегировать элемент могут несколько пользователей, облака тегов являются наглядным обзором – семантической картой видов – тегированных элементов (Rivadeneira et al., 2007), а в некоторых случаях и всего приложения в целом (рис. 5.26).

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

Как

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

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

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

В зависимости от задач пользователя определите порядок тегов

Теги в облаке тегов обычно расположены в алфавитном порядке. Благодаря этому тег быстрее найти, особенно если количество тегов увеличивается (Halvey and Keane, 2007). Однако в работе Ривандейра и др. (Rivadeneira et al., 2007) представлено доказательство того, что, когда в задачу пользователей входит составление мнения о человеке, расставившем теги, лучше располагать теги в зависимости от их частотности, а не в алфавитном порядке. В приложениях, где задачи пользователей могут быть разнообразными, возможно, стоит позволить пользователям расположить теги несколькими различными способами (рис. 5.28).

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

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

Облака тегов не должны использоваться как единственное средство навигации по веб-приложению. Они должны дополняться основной навигацией (PRIMARY NAVIGATION) и вторичной навигацией (SECONDARY NAVIGATION).

Примечание

При задании размера шрифта для тегов в каскадных таблицах стилей (CSS) используйте относительные единицы «em», проценты или «ex» (вместо «px» или «pt»), чтобы облака тегов были доступнее. Так пользователи смогут изменить размер текста на странице браузера, и это не повлияет на значение и популярность тегов, обозначенные размером шрифта.

BREADCRUMBS (НАВИГАЦИОННАЯ ЦЕПОЧКА)

Проблема

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

Решение

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

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

Зачем

Хотя существует несколько вариантов воплощения навигационных цепочек, например, навигационная цепочка местоположения, навигационная цепочка пути и навигационная цепочка категории. Самый популярный и рекламируемый специалистами в области простоты и удобства пользования приложением тип – это навигационная цепочка местоположения (Instone, 2002; Nielsen, 2007; Spool, 2005). Указывая относительное местоположение текущей страницы в структуре приложения, навигационная цепочка местоположения помогает пользователям сориентироваться и понять иерархическую структуру приложения. Более того, благодаря ссылке на родительские страницы, навигационная цепочка выполняет важную, хотя и второстепенную, навигационную функцию, предоставляя пользователям более быстрый способ возвращения на предыдущую страницу в иерархии приложения.

Как

На каждой странице приложения отобразите навигационную цепочку местоположения, указав положение текущей страницы в иерархической структуре приложения, начиная с домашней страницы. Кроме того, предоставьте пользователям возможность быстро перейти к любой странице в данной структуре, вставив в навигационную цепочку ссылку на каждую страницу (кроме ссылки на текущую страницу). Многие навигационные цепочки местоположения не показывают текущую страницу. Однако некоторые эксперты по удобству и простоте пользования приложением рекомендуют включить текущую страницу в навигационную цепочку (Instone, 2002; Круг, 2008; Nielsen, 2007).

Типы навигационных цепочек

Инстоун (Instone, 2002) выделяет следующие типы навигационных цепочек:

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

Одним из подвидов навигационной цепочки местоположения является навигационная цепочка предпросмотра (look-ahead breadcrumbs, LAB), разработанная Тенгом (Teng, 2003). Для каждой страницы (кроме текущей) в навигационной цепочке местоположения включен раскрывающийся список ссылок на страницы этого же уровня в иерархической структуре.

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

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

• Навигационная цепочка категории (Attribute breadcrumbs). Множество крупных сайтов, где на одну и ту же страницу можно попасть различными способами (например, сайт Amazon), используют опции, схожие с навигационными цепочками, которые описывают метаинформацию о текущей странице в иерархии сайта (рис. 5.30).

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

Разграничьте элементы навигационной цепочки специальным символом

Разграничьте элементы навигационной цепочки специальным символом, чтобы предложить вариант навигационного пути. Наиболее распространенный символ для разграничения – это стрелка вправо (>). Колтер (Colter et al., 2002) обнаружил, что 47,10 % приложений, использующих навигационные цепочки, использовали разграничитель >. Эйри (Aery, 2007) утверждает, что использование знака > еще более распространено среди сайтов, занимающихся электронной коммерцией (63,5 %). К другим распространенным разграничительным символам относятся символы /, ;, |, » и →. Стрелки наиболее предпочтительны, поскольку они четко указывают направление движения, и пользователи знакомы с их значением (например, Yahoo!).

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

Чаще всего навигационные цепочки располагаются под заголовком страницы, рядом с ее названием. Если основная навигация и/или поле для поиска встроены в заголовок страницы, поместите навигационную цепочку под ними (рис. 5.31). Если навигация расположена вертикально, слева на странице, то навигационную цепочку можно поместить справа от нее. Размещение навигационной цепочки под заголовком удобнее для пользователей, чем если разместить ее наверху страницы (Lida and Chaparro, 2003).

Рис. 5.31. В приложении Yahoo! Answers навигационная цепочка расположена прямо под заголовком и полем для поиска

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

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

Элементы навигационной цепочки должны выглядеть как ссылки

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

Навигационная цепочка не должна бросаться в глаза

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

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

Навигационные цепочки должны выделяться меньше других важных элементов страницы, таких как название страницы, основная навигация (PRIMARY NAVIGATION) и вторичная навигация (SECONDARY NAVIGATION) (см. шаблон VISUAL HIERARCHY в главе 12).