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

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

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

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

Тренды / ТОП

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

Маркетинг

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

Свой сайт

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

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

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

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

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

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

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

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

Планирование построения навигации следует начать с информационной архитектуры. Вам необходимо выяснить детали и характерные особенности информации будущего сайта: что наиболее важно и что будет ниже уровнем в информационной иерархии (множество различных деталей, потребности пользователя, 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-дизайн еще до запуска продукта. Если логотип во многих случаях кликабельный – он должен быть кликабельным и на вашем сайте
Читайте также:  Как технологии изменят UI/UX дизайн в 2018 году?

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

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

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

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

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

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

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

Иконки в дизайне меню сайта

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

Вертикальное навигационное меню с красивыми анимированными иконками

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

Пример красивого мега меню с иконками на сайте девелопмент компании snipcart.com

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

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

меню сайта с плоским адаптивным дизайном

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

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

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

SnailbirdКрасиво оформленные шапка и меню сайта

Hydroholisticкрасивое оформление меню сайта

Kukralкрасивое оформление меню сайта

Golden Islesкрасивое оформление меню сайта

4 Pines Beerкрасивое оформление меню сайта

Hunters Winesкрасивое оформление меню сайта

MonstersМеню на сайте: примеры красивого оформления

MecannicalПример необычного дизайна меню на портфолио-сайте

WEB EngineerПримеры дизайна меню сайта

Marc BedikianОригинальное навигационное меню

Lmnop StudiosНестандартное вертикальное меню сайта

Читайте также:  Самые необычные и оригинальные сайты