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

Добавление активного состояния и наведенного состояния (Active/Hover States).

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

  • Активное состояние всегда позволит пользователю знать,  в какой части сайта он находится в данный момент. А в сочетании с “обратно-пошаговой” навигацией позволит вам избежать множества проблем связанных с юзабилити.
  • Наведенное состояние позволит пользователям увидеть, что в действительности ваше меню состоит из ссылок, а не является всего лишь статическим текстом.
  • Наведенное состояние также придаст вашему меню более интерактивное ощущение, очаровывая пользователей. Лично я больше кликаю по ссылкам с наведенным состоянием, чем по статическим,  так как они меня к этому подталкивают!

FanExtra

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

CSSMania

 

CSSMania использует великолепные активные состояния в меню, что бы пользователь точно знал в какой части сайта он находится.

 

Не добавляйте слишком много ссылок.

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

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

LogoMotive

LogoMotive отличный пример минималистичной навигации. Ограниченное количество пунктов меню означает простоту понимания для пользователей.

1stWebDesigner

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

Ваше меню должно быть ярким и четким.

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

BuySellAds

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

Garphee

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

Не забывайте об основных элементах!

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

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

Smashing Magazine

В Smashing Magazine возможно не самая лучшая в мире навигация, но они хорошо поступают, разместив навигационное меню и поисковую форму в одну и ту же заметную зону.

UXBooth

UXBooth внедрили поисковую форму в ту же панель, где находится навигационное меню. Это делает навигацию их сайта очень простой и ясной.

Vimeo

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

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

Источник статьи — http://psd.fanextra.com/articles/thursday-theory-rules-for-a-perfect-website-navigation/