Дизайн интерфейса, дизайн навигации и информационный дизайн

Метрики успешности

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

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

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

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

К другим метрикам успешности относятся:

§ общее количество просмотренных страниц сайта

§ количество запросов определенной страницы сайта

§ количество повторных заходов на сайт

§ прохождение определенного коридора страниц на сайте

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

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

Определение компоновки

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

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

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

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

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

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

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

Соглашения

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

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

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

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

Дизайн интерфейса

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

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

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

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

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

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

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

Дизайн навигации

Дизайн навигации на любом сайте должен одновременно решать три задачи:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Информационный дизайн

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

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

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

Прототипы страниц

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

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

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

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

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