Пт, 5/04/19 – 9:26 | 2 комментария

Эта статья о том, что для успеха Landing Page важна не только визуальная привлекательность. От лендингов ждут высоких конверсий. Эффективность лендингового сайта особенно …

Читать статью »
Дизайн

Секреты веб-дизайна, примеры стильных сайтов

Тренды / ТОП

Топ лучших идей, новые тенденции и тренды WEB’а

Маркетинг

Статьи о маркетинге сайтов, примеры эффективности

Свой сайт

Как создать, оформить, сделать сайт лучше

Шаблоны сайтов

Обзоры шаблонов: лучшие темы для сайта

Главная » Дизайн

Навигация по сайту: дизайн и юзабилити

28 ноября 2013 Один комментарий

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

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

Размещение навигационных элементов

Убедитесь в единообразии вашего сайта по стилю / виду пользовательского интерфейса / управлению. Ваш посетитель не знающий «куда бы еще пойти» сэкономит свое драгоценное время, будет легко ориентироваться на сайте и наверняка это оценит (+1 к юзабилити).

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

  1. Понятность
  2. Легкость
  3. Минимальное чувство разочарования

Заметная очевидность – это норма. Недопустима ситуация, когда посетитель не догадывается о кликабельности элементов первичной (меню) или вторичной (прямой переход к страницам) навигации. Одним словом:

Не вынуждайте пользователя приспосабливаться к интерфейсу – возвращаться назад, теряя время в поисках…

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

Текстовые ссылки: преимущества и ошибки

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

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

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

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

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

Упрощаем пользовательский интерфейс

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

Интуитивный & быстрый UI: для высокой конверсии сайта необходим удобный интерфейс аккаунта. Многие включают дополнительные возможности для пользователей, прошедших регистрацию или создавших аккаунт. Иногда это порождает проблемы. Различия в интерфейсе / навигации для авторизованных (получивших доступ к бонусам, сервисам) и остальных, может разочаровывать и служить препятствием. Логичным будет упростить интерфейс, избавившись от излишеств в выборе опций.

Контрасты в цветовой схеме

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

Решения с выпадающим меню

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

Выпадающее меню создается для повышения возможностей выбора. Но посетитель решивший сделать переход по клику, вдруг натыкается на дополнительные разделы, подразделы, опции, миниатюры Drop-Down Меню. Часто теряется в нем – так называемый парадокс выбора. В итоге пользователь упускает страницы с важными материалами, довольствуясь более узкоспециализированной информацией, полученной из всего этого многообразия. Получается, что вы не сумели заинтересовать целевого посетителя, даже при наличии полезного контента. Прежде всего, спросите себя: а нужно ли выпадающее меню действительно?

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

Почему такое происходит? Пользователи желают тратить минимум своего времени на навигацию и для доступа к пунктам подменю перемещают курсор по кратчайшему пути – диагонально. Непроизвольный выход указателя мыши за границы приводит к схлопыванию меню. При возрастающем количестве уровней меню, начинаются проблемы. Смотрите сами: (http://gig-pro.ru)

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

Wikimart  (Левое вертикальное меню) Выпадающее меню сбоку с раскрывающимся списком подкатегорий со ссылками подкатегорий (см. увеличение пространства за последней ссылкой списка). Еще примеры:
http:/www.mvideo.ru
http:/www.ebuyer.com
http:/molotok.ru

Есть и исключения, когда выпадающее меню улучшает юзабилити, позволяет реализовать многоуровневую иерархию категорий товаров или разделов сайта. Mega Drop Down меню – наиболее подходящее решение для крупных веб-сайтов или порталов. Тут оно становится помощником пользователя, поскольку на сайтах обширной тематики всегда затруднена навигация. Если только пользователю не предоставлена возможность доступа ко всем пунктам меню в одном месте (МЕГА меню). Сайт Tesco.com хороший пример навигации с расширенной структурой меню, которое случайно не схлопывается.

Чтобы пункты меню расположить верно, вспомните правило:

Человек запомнит первое и последнее из того, что видел или читал намного лучше, чем всю промежуточную информацию

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

Заключение

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

Читайте также:  Навигационное меню: 15 примеров нестандартного дизайна