Дизайн меню сайта: идеи, советы, примеры

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

Информационная архитектура

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

• Используйте доступные для любого пользователя технологии
• Избегайте использования Flash, JavaScript, jQuery или чего-либо еще что может вызвать проблемы в работе из-за различий браузеров

Простая и дружественная для пользователя терминология

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

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

Дизайн меню сайта на примерах

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

Но вот другой пример: креативное агенство Eighty8Four (http://www.eighty8four.com) использует термин «SHOWROOM», что может  служить сбивающим с толку фактором. Под этим пунктом может быть портфолио работ, фотоотчет или видео с презентации бренда, но это не очевидно и посетители не имеют другого выбора как проверить свои догадки сделав переход.

Стандартизация дизайна меню сайта

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

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

St Davids Hospice Care имеет простую и понятную навигацию: в каждом разделе все ссылки из выпадающего списка горизонтального меню дублируются на боковой панели слева. В оформлении горизонтального и вертикального меню этого сайта используется индикация цветом для текущего раздела и подразделов.

Индикация цветом текущего раздела меню сайта

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

Austin Eastciders в дизайне меню для текущего раздела использует индикацию цветом и едва заметное изменение фона.

Media Surgery (http://www.mediasurgery.co.uk) использует светлый фон на открытой вкладке меню. Просто и эффективно.

Соглашения и условные обозначения в WEB

Несколько слов о связи интуитивной понятности меню и удобством навигации по сайту.

• Разрабатывая дизайн и структуру навигации веб-сайта лучше придерживаться известного принципа: Не заставляйте меня думать!
• Как минимум, пользователи должны получать то, что они ожидают увидеть. Это то, что на западе понимают под user experience (UX) и призывают тестировать UX-дизайн еще до запуска продукта. Если логотип во многих случаях кликабельный – он должен быть кликабельным и на вашем сайте

Тестирование: привлечение 3-й стороны

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

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

Если есть проблемы, то тщательный послетестовый разбор выявит их и станет источником неожиданных идей.

Контекстное окружение

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

Что бы дать больше информации о директориях  своего сайта My Own Bike использует простые иконки в дизайне меню.

Красивые анимированные иконки привлекают внимание. Сайт высокотехнологичной компании элегантно использует этот эффект в меню навигации.

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

Чистый и современный дизайн

SEO Werkz – это пример дизайна меню современного сайта – чистого и адаптивного, в плоском стиле.

Примеры красивого и креативного оформления меню сайта

Сайты с эффективным и стильным (а также необычным) дизайном навигационного меню для вдохновения и новых идей.

Snailbird

Hydroholistic

Kukral

Golden Isles

4 Pines Beer

Hunters Wines

Monsters

Mecannical

WEB Engineer

Marc Bedikian

Lmnop Studios