Главная страница – оформление по правилам продающего сайта
Пн, 9/01/17 – 17:44 | One Comment

Окинув взглядом главную страницу, среднестатистический посетитель сайта доверится впечатлению от дизайна, интерфейса, стиля. Оформленное «на коленке» вызовет рефлекторную реакцию закрытия вкладки – такого …

Читать статью »
CSS верстка

Оформление веб-страницы: css3 html5 приемы верстки сайтов

Дизайн

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

Wordpress

Wordpress сайту: современные и креативные, шаблоны вордпресс

Интернет-маркетинг

О маркетинге в сети Интернет и web-эффективности

Свой сайт

О создании оформления сайта, как сделать свой сайт лучше

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

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

28 Ноябрь 2013 Нет комментариев

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

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

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

Конструктивное размещение элементов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Есть и исключения, когда выпадающее меню оправдано. Их стоит отметить.
1. Тот случай, когда Drop Down Меню:

  • Улучшает юзабилити
  • Позволяет реализовать многоуровневую иерархию категорий товаров, разделов сайта

Picture.com.br Категории горизонтального меню с выпадающими плашками дублируются в левом сайдбаре. Структура навигации по сайту с цветовой индикацией для текущей web-страницы практически всех его элементов — позволили сделать проект стильным, приятным и удобным для пользования. Цветом выделяются: активный раздел, ссылки подраздела, заголовки, прочие элементы дизайна и даже часть логотипа. Хороший пример, как можно организовать навигацию на сайте до четырех уровней вложенности.

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

Порядок пунктов меню

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

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

Заключение

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