Проектирование пользовательского опыта: мега-гид по навигации сайта

Posted on by riasevastopol

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

Проектирование сотрудничества с любым типом меню включает шесть ответственных качеств:

1. Знаки
2. Целевые области
3. Акты сотрудничества
4. Уровни
5. Размещение элементов
6. Функциональный контекст

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

  • Пользователь неизменно прав, либо из-за чего так принципиально важно уделять внимание UX в 2015 году?

1. Знаки

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

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

Значок треугольника

Перевернутый треугольник рядом с соответствующим пунктом меню — самый несложный метод указать на выпадающее меню и выделить его среди остальных ссылок.

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

Значок «+»

Еще один вероятный знак для раскрывающегося меню — это символ «+». Обратите внимание, что Nike применяет смешанную символику: стрелку — для главного меню, и «+» — для динамического навигационного меню, расположенного слева (не смотря на то, что стрелку возможно отыскать и тут).

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

Значок «гамбургер»

Три горизонтальные линии, в большинстве случаев, обозначают навигационное меню, в особенности на сайтах с адаптивным дизайном, к примеру, Nokia:

Тут необходимо подчеркнуть пара серьёзных моментов. Во-первых, «гамбургер» (совершенно верно так же, как решетка меню либо буллет) говорит об определенном типе следования элементов — в этом случае вертикально, в столбик. надписи значка и Сочетание треугольника «Меню» более универсально: в любое время возможно поменять схему размещения элементов навигации, не меняя иконку.

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

Последовательное применение знаков

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

Обратите внимание на непоследовательность применения знаков на иллюстрации ниже. Три линии в верхнем правом углу говорят о главном раскрывающееся меню. Подобный «гамбургер» в центре уже относится к пунктам «Взглянуть фото» (View Photo) и «Взглянуть данные о питании» (View nutrition info).

Геофильтр отмечен перевернутым треугольником, а подразделы «Напитки» (Drinks) и «Еда» (Food) — знаком «+».

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

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

Во-вторых, многоуровневый раздел, к примеру, «Продукты» (Products) — в полной мере возможно расширен посредством подкатегорий. Исходя из этого знак треугольника оптимальнееприменить как раз к нему, дабы выделить его среди одноуровневых вкладок (к примеру, страницы «О компании»).

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

  • ТОП-10 неточностей информационной архитектуры сайтов

2. Целевые области

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

Четкость текста

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

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

Размер целевой области

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

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

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

Недочёт большой целевой области в том, что она «съедает» пространство экрана и может нарушить визуальный баланс интерфейса. Но, даже в том случае, если у вас в запасе имеется большое количество свободного места, совсем необязательно расширять таргеты по максимуму — взаимнооднозначной корреляции между удобством и размером области ее применения нет.

Зависимость юзабилити от размера целевой области: с какого-либо момента предстоящее повышение бессмысленно

В случае если расширить мелкую область на 10%, это даст ощутимый эффект. Но в случае если раздувать «» и без того громадную область — ничего хорошего вы не извлечете.

Последовательность размещения

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

Один из видов многоуровневой навигации, создающей рассогласование таргетов — положенное меню. Во положенном меню подкатегории появляются под родительской категорией, образуя новую целевую область:

Более эргономичный метод отображения многоуровневых категорий — раскрывающиеся (fly-out) либо скользящие (sliding) подменю.

Но, и у одноуровневого каталога смогут оказаться непоследовательные, рассогласованные целевые области, в особенности в то время, когда пользователь пробует закрыть меню: активные пункты меню сдвигают кликабельную область. На следующем примере иконки «Закрыть» не видно, в то время, когда открыто меню.

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

  • Юзабилити: раскрывающееся меню в контексте сложных целевых страниц

3. Акты сотрудничества

Акт сотрудничества (Interaction Event) — это воздействие, которое совершает пользователь, дабы начать сотрудничество с интерфейсом. Самые популярные операции с навигационным меню:

  • наведение и перемещение курсора,
  • клики,
  • прокрутка (скроллинг),
  • печатание (ввод с клавиатуры).

наведение и Перемещение курсора

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

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

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

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

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

Следующий момент — всплывающие подсказки. Кое-какие UX-дизайнеры предлагают применять их для расшифровки опций. Но стоит признать: всплывающие описания не очень действенны в навигационном меню.

Для происхождения подсказки требуется передвинуть курсор, исходя из этого пользователи сталкиваются со следующими неудобствами:

  1. Потому, что подсказки появляются только при наведении курсора, об их существовании сложно додуматься.
  2. Затрудняется обзор смежных элементов.
  3. Опять поднимается вопрос о времени, достаточном для отображения подсказки: в случае если его мало, визитёры не успеют прочесть, в случае если через чур много — ознакомление с каждым описанием превратится в достаточно изнурительную процедуру.
  4. Как следствие, сравнить пункты меню при необходимости будет непросто.
  5. Этот прием не работает на сенсорных экранах.

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

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

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

  • Юзабилити сайта: что такое прямой и последовательный доступ?

Клики

Вызов выпадающего меню и подменю при помощи кликов, а не перемещением курсора, будет стандартом в UX. Это дает следующие преимущества:

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

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

Прокрутка (скроллинг)

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

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

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

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

Печатание (ввод с клавиатуры)

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

На следующем примере представлено мобильное приложение с новейшим методом выбора, которую UX-дизайнеры назвали поиском. Но, это не приводит к, потому, что «Фильтр» и «Поиск» — схожие понятия.

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

В случае если контента на странице большое количество, имеет суть поделить категорию на подкатегории либо применять динамические фильтры — как в этом же приложении:

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

  • Из-за чего хорошая навигация действеннее функции поиска на сайте?

4. Уровни

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

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

Кое-какие десктопные версии сайтов содержат больше пунктов меню, чем мобильные

Разработчики мобильной версии Microsoft.Com пошли методом удаления первого уровня меню (Windows, Office, Devices и т.д). В следствии оказался через чур долгий перечень:

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

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

Уровни на мобильных устройствах

Раскрывающиеся подменю прекрасно смотрятся на громадных экранах, где большое количество свободного пространства:

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

На этом примере меню обозначено кнопкой и соответствующей надписью «

Неизменно стоит выбирать знаки, релевантные существующей анимации на сайте. Разработчики Сони правильно выбрали знак «

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

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

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

Уровни и мега-меню

Мега-меню — это еще один метод задействовать многоуровневую навигацию. Но кроме того в этом элементе рекомендуется в один момент отображать содержимое не более одной категории.

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

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

Динамические фильтры

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

Альтернатива — выпадающее меню, которое не загромождает интерфейс:

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

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

Боковое размещение фильтров, со своей стороны, делает их через чур незаметными, не смотря на то, что и смещает выговор с интерфейса на продукт:

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

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

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

Стоит уделить время и визуализации фильтра. Пара нужных советов:

  1. В случае если параметры фильтра взаимоисключающие, применяйте радиокнопки (radio buttons), вкладки либо ясно оформите их в виде пунктов в выпадающем меню.
  2. В случае если параметры свободны друг от друга, применяйте чекбоксы.
  3. В случае если параметры измеряемые (вес, длительность, цена, расстояние), применяйте ползунок (slider), как продемонстрировано ниже.

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

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

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

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

Хлебные крошки

«Хлебные крошки» визуализируют текущее положение пользователя на сайте:

HomeAppliancesCookingMicrowavesBuild-In Microwaves

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

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

Представьте переход на сайт из поисковых машин, как прыжок с парашютом с приземлением в малоизвестном лесу. И внезапно вы видите указатель: «Романовский лесКоломнаМосковская областьРоссияконтинент Евразия». Согласитесь, ориентироваться в незнакомом пространстве стало бы намного легче.

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

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

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

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

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

  • Организация контента на веб-ресурсе: плоская иерархия vs глубокая иерархия

Мега-сайты

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

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

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

На примере ниже все мини-сайты владеют собственным визуальным стилем, но их сотрудничество между собой прекрасно продумано:

Следующий вариант менее успешный — разобраться в структуре ресурса сложнее:

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

  • Секреты юзабилити: отличие между навигацией сайта и информационной архитектурой

5. Размещение элементов

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

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

Случайные статьи:

Бизнес-планирование турпродукта, туристического маршрута, сопутствующих услуг. Мастер-класс


Подборка похожих статей:

riasevastopol

More Posts