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

BLANK SLATE (ЧИСТЫЙ ЛИСТ)

Проблема

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

Решение

На чистой странице ответьте на вопросы, которые могут появиться у новых пользователей, например, вопросы о том, как начать работу, что делать дальше и как будет выглядеть страница после заполнения данными (37signals, 2006). Для этого можно предложить пользователям обучающие руководства и пояснительные тексты и/или показать снимок экрана с типичной страницей, наполненной контентом (рис. 4.32).

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

Зачем

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

Чистая страница должна выполнять несколько функций: формировать адекватные ожидания, стимулировать деятельность, знакомить пользователя с тем, как будет в конечном итоге выглядеть страница, и производить позитивное первое впечатление от приложения (Hoekman, 2008; 37signals, 2006).

Как

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

Рис. 4.33. На чистой странице приложения Box.net пользователям предлагается несколько способов начала работы (например, создать новую папку, создать новую общую папку). Также пользователям предлагается опция Watch video demo (Посмотреть демонстрационный ролик)

Эти действия могут сопровождаться сообщениями, объясняющими пользователям, почему они не видят никакого контента. Например, сервис Basecamp показывает такие сообщения, как «Создать первую панель для записей по данному проекту», под словом «первая» подразумевается, что пользователи еще не создали ни одной панели для записей (рис. 4.34).

Рис. 4.34. Сервис Basecamp показывает сообщение Create the first writeboard for this project (Создать первую панель для записей по данному проекту), чтобы обозначить, что пользователь еще не создал ни одной панели для записей. Также пользователи могут увидеть, что собой представляют панели для записей, и посмотреть демонстрационный ролик (который длится приблизительно 2 минуты), чтобы получить о них больше информации

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

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

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

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

Рис. 4.35. Сервис Blinksale показывает пример в виде тусклого снимка экрана с отметкой Example (Пример)

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

Если пользователи должны выполнить определенные задания, прежде чем начать работать с веб-приложением, предоставьте им возможность воспользоваться подсказками на начальном этапе настройки. Например, в приложении для работы с финансами пользователям может быть предложено создать счет (рис. 4.36).

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

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

Шаблон BLANK SLATE обеспечивает необходимое руководство для новых пользователей приложения, чтобы они быстро могли включиться в работу. Необходимость помогать пользователям не исчезает, когда они наладили взаимодействие с приложением и внесли необходимые данные. Необходимо продолжать помогать пользователям в течение всего процесса их взаимодействия с приложением, применяя для этого шаблоны CONTEXTUAL HELP, FREQUENTLY ASKED QUESTIONS и APPLICATION HELP, о которых будет рассказано в главе 14, и шаблон INPUT HINTS/PROMPTS, описанный в главе 2.

Глава 5
Навигация

Введение

Процесс проектирования навигации заключается в создании связей между различными частями приложения (т. е. контентом и функционалом) и применение их иерархической структуры для эффективного и результативного выполнения пользовательских задач. Сюда относится структурирование, маркирование и презентация контента и функционала. Данная глава посвящена шаблонам, имеющим отношение к типам навигационных систем и их презентации; чтобы узнать о структурировании и маркировании навигационных систем, см. работы Морвиля и Розенфельда (Morville and Rosenfeld, 2006), Кальбаха (Kalbach, 2007) и Флеминга (Fleming, 1998).

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

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

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

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

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

PRIMARY NAVIGATION (ОСНОВНАЯ НАВИГАЦИЯ)

Проблема

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

Решение

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

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

Зачем

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

Как

Поместите основную навигацию либо горизонтально наверху страницы, либо вертикально вдоль правой или левой стороны страницы. В веб-приложениях чаще всего основная навигация располагается горизонтально (рис. 5.2); Адкиссон (Adkisson, 2002) выяснил, что в 87 % (65 из 73 сайтов) приложений для электронной коммерции основная навигация размещается наверху страницы.

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

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

Однако в случае расположения основной навигации по горизонтали, сокращается количество навигационных опций, отображающихся на экране до начала горизонтальной прокрутки. Чтобы избежать горизонтальной прокрутки, в веб-приложениях часто прибегают к опции «еще» (или «more») (представленной в виде стрелки), чтобы пользователи могли просмотреть дополнительные варианты для навигации (рис. 5.3); это напоминает панели инструментов в настольных приложениях, таких как Microsoft Word, Firefox и пр. В таблице 5.1 обобщены преимущества и недостатки горизонтального и вертикального размещения основной навигации.

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

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

Таблица 5.1. Преимущества и недостатки горизонтального и вертикального размещения основной навигации

Основная навигация должна визуально выделяться

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

Рис. 5.4. В приложении Plaxo основная навигация четко выделяется на странице

Выделяйте выбранную опцию навигации

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

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

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

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

Рис. 5.6. На сайте сети магазинов Gap, как только пользователь приступает к процессу оформления покупки, убираются все виды навигации (за исключением тех, которые необходимы для совершения покупки). На данном сайте для отображения опции входа в учетную запись, оформления доставки, оплаты и т. д. используется «гармошка»[7]7
  При оформлении в виде «гармошки» пользователь не может просматривать контент нескольких опций одновременно. При щелчке по одной из опций ее контент разворачивается, а контент других вариантов – наоборот, закрывается. Такой стиль оформления напоминает навигацию по вкладкам, поскольку в обоих случаях можно просматривать опции только по очереди. Главное различие заключается в визуальном оформлении и в том, что в случае с «гармошкой» при отображении контента каждой навигационной опции применяется анимационный эффект «скольжения».


[Закрыть]

С помощью результативного маркирования создайте верный «запах» информации

Метки для основной навигации очень важны при создании верного «запаха» информации в приложении. Понятие «запаха» информации происходит из «информационно-продовольственной теории» (information foraging theory), объясняющей механизмы, используемые при поиске информации (Chi et al., 2000; Pirolli and Card, 1999). Согласно этой теории, из множества вариантов пользователи выбирают тот, в котором присутствует наиболее выраженный ориентир, или «запах», с помощью которого они могут приблизиться к желаемой информации. Применительно к основной навигации, если метки навигационных опций не содержат выраженного «запаха», пользователю будет не только сложнее определить, какую опцию выбрать, но он может выбрать неверную опцию, что приводит к безрезультативному взаимодействию и неприятному опыту работы с приложением.

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

Примечание

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

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

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

SECONDARY NAVIGATION (ВСПОМОГАТЕЛЬНАЯ НАВИГАЦИЯ)

Проблема

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

Решение

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

Рис. 5.7. В приложении Rally вторичная навигация расположена под выбранной опцией основной навигации. Хотя это нетипично, в приложении Rally пользователи могут добавлять свои собственные опции вторичной навигации

Зачем

Навигация в большинстве веб-приложений спроектирована таким образом, чтобы поддерживать их иерархическую структуру[8]8
  Это не исключает других подходов к навигации, таких как быстрые ссылки на родственные элементы, алфавитные указатели, навигационные цепочки и т. д. (см. шаблон SUPPLEMENTARY NAVIGATION далее в этой главе). Однако иерархическую структуру проще понять, поскольку она представляет хорошо известный способ организации информации. По этой причине для структурирования информации предпочтительно применять иерархический подход (Morville and Rosenfeld, 2006).


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

Как

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

Рис. 5.8. На сайте сети магазинов Gap навигация оформлена в виде перевернутой английской буквы L: основная навигация располагается горизонтально наверху страницы, а вторичная навигация – вертикально, по левому краю

Чаще всего вторичная навигация размещается вертикально, по левому или правому краю страницы, этот вариант предпочтителен, когда все опции вторичной навигации не помещаются на страницу при горизонтальном размещении, или когда помимо вторичной навигации существуют последующие уровни навигации. Благодаря вертикальному расположению вторичной навигации, на странице можно уместить все навигационные опции каждого из иерархических уровней навигации. Хотя способ оформления навигации в виде перевернутой буквы L, т. е. размещение вторичнои навигации слева на странице, а основной навигации наверху, является довольно типичным, Кальбах и Бозеник (Kalbach and Bosenick, 2003) не нашли никаких преимуществ такого способа оформления по сравнению с размещением навигации справа на странице. При отображении многоуровневых иерархических структур навигация довольно часто показана в виде обладающего древоподобнои структурой списка с отступом (рис. 5.9).

Рис. 5.9. На сайте сети магазинов Wal-Mart используется древообразная схема навигации для второго и третьего уровней вторичной навигации

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

(а)

(б)

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

Преимущество меню заключается в том, что они не занимают дополнительного пространства и позволяют пользователям изучить приложение, не выбирая ни одной из опций основной навигации. Однако меню обладает и некоторыми недостатками. В первую очередь, пользователи предпочитают видеть сразу все варианты, а не скрытые раскрывающиеся меню. Бернард и Хэмблин (Bernard and Hamblin, 2003) обнаружили, что горизонтальное расположению меню воспринимается негативно по сравнению с вертикальным расположением, а также при таком расположении на поиск необходимой опции уходит больше времени. Кроме того, меню могут вызывать затруднения для пользователей, использующих вспомогательные технологии (например, программы для чтения экрана), если эти меню активируются при наведении на них курсора мыши. Чтобы они были доступнее, они должны активироваться щелчком мыши, а опции навигации должны открываться клавишами клавиатуры. Также они могут вызывать путаницу в тех случаях, когда отсутствует контекст выбранной опции; в определенной степени эта проблема решается с помощью навигационных цепочек (см. шаблон BREADCRUMBS далее в этой главе).

Выделяйте выбранные опции основной и вторичной навигации

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

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

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