Горизонтальные меню – пожалуй, самый популярный вид навигации в веб-дизайне. Можно с уверенностью сказать, что на сегодняшний день большинство сайтов используют такой тип меню с целью упрощения просмотра страниц.
Тем не менее, в современном веб-дизайне очень много видов горизонтальных меню. Некоторые предлагают преимущества в удобстве использования для определенных типов сайтов, а другие эстетически лучше смотрятся.
В этой статье мы сосредоточимся на множестве подходов и практик с тем, чтобы убедиться в простоте использования горизонтальных меню, а также отметим некоторые, менее эффективные, решения. Также, мы обратим внимание на парочку тенденций, которые, возможно, помогут разработчикам в работе над горизонтальными меню в будущих проектах.
Давайте начнем с удобства и простоты использования любого навигационного меню. Когда пользователь посещает новый сайт, меню будет одной из первых вещей, на которые он осмысленно обратит внимание. Если этот элемент будет хорошо оформлен, пользователь обратится к нему за помощью для решения своей задачи. Почти каждый веб-сайт имеет определенные секции, которые «ожидаются» пользователями, к примеру «О нас», «Услуги», «Продукты» или «Связь с нами».
По самой природе Веба, пользователи будут недовольны любой задержкой из-за непонятной навигации, если они не могут немедленно найти необходимые данные.
Так, ссылка на страницу «О нас» должна быть названа «О нас» [Спасибо, Кэп – прим. переводчика] или «Контакты», ссылка на раздел услуг – названа «Услуги» или «Наши услуги»
Излишнее творчество в процессе именования пунктов главного меню может привести к потере в удобстве для вашего пользователя.
Impulse Development
Меню этого сайта не создает лишних проблем с навигацией
Даже при самых необычных обстоятельствах, не называйте страницу с предоставляемыми услугами – «То, чем мы занимаемся». И не нужно называть страницу с контактами «Способы нас найти». В поисках информации, пользователи пытаются найти знакомые слова и, первое время, неосознанно избегают незнакомых или непонятных слов и словосочетаний.
Как только вы выяснили, какие части вашего сайта являются главными, а какие второстепенными, по важности для потенциального пользователя, вы уже можете визуально создать иерархическую структуру меню, которая увеличит удобство и простоту использования вашего сайта.
Важные ссылки (например «Услуги», «Контакты», и т.д.) должны четко отличаться от второстепенных. Работа дизайнера состоит в том, что бы по возможности разделить все навигационные ссылки на две этих категории и ясно указать на их различия пользователям.
Рассмотрим несколько примеров:
Edwards & Hampson
У сайта Edwards & Hampson хорошее отчетливое горизонтальное меню, которое является основным средством перехода по страницам сайта. В то время как здесь находятся стандартные ссылки («О нас», «Наши услуги», «Продукция»), в этом меню есть много других ссылок, которые не являются столь «первичными» по отношению к пользователю; однако они являются достаточно важными для того, что бы быть на виду.
Аналогичный пример:
Deliciouslyorkshire
Ссылки на сайте The Deliciouslyorkshire, ведущие к важным разделам («Home», «About»,«News and events», «Recipes») расположены рядом с теми, что, казалось бы, является вторичными секциями ( «Promotions», «Useful links»). Оба типа ссылок имеют вид закладок, без признаков иерархии.
Фактически, если некоторые из этих ссылок менее важны для посетителей сайта, то проектирование секций с отражением иерархии было бы мудрым решением. Конечно, у этих компаний могли быть веские причины именно так спроектировать свои меню, и это не обязательно плохой пример, скорее всего, это просто исключения, иллюстрирующие важность визуальной иерархии.
Вот два примера сайтов, которые подчеркивают иерархию, при этом оставляя менее важные ссылки легкодоступными:
Designers Couch
У Designers Couch есть важные навигационные ссылки в главном меню («Home», «Gallery», «Jobs» и т.д.), а также вторичные ссылки на этом же самом меню, но сохраняющие визуальные отличия («Find a designer», «Get involved»).
J Taylor Design
Дизайнер сайта J Taylor Design подчеркивает различие между главными и зависимыми пунктами тем, что помещает вторичные ссылки ниже главного меню, используя другой цвет, шрифт и размер. В этом примере пользователь не сталкивается с проблемой, различая первичные и вторичные секции.
Если вы разрабатываете сайт, позволяющий регистрироваться пользователям, или коммерческий сайт, у которого есть «Корзина» для покупки товара, то будет лучше, если вы поместите ссылки с этими секциями справа от меню (или в другом месте справа, вверху). [Например, как это сделал Хабр :)] Здесь нет никакого шаманства или парапсихологии, вроде «Логотипы в правом углу воспринимаются на 45,9% лучше, чем в левом», просто пользователи привыкли к такому расположению.
Вот несколько примеров сайтов, которые визуально отделяют ссылки на действия в главном меню.
Xero
Sharify
Sharify и Xero помещают свои ссылки на действия в то же меню, что и важные ссылки, но они сохраняют иерархию, располагая их справа, на некотором отдалении.
Другой метод, улучшающий простоту и удобство – это установка поиска справа, как часть меню. Поиск аналогичен всем функциям, упомянутым ранее, поэтому он требует специфического подхода.
Раз пользователи привыкли видеть ориентированные на действие возможности, включая окно поиска, на правой части страницы, так оставьте место в этой части вашего сайта и для строки поиска, если такое возможно.
Несколько примеров такого расположения поиска (включая вышеупомянутый J Taylor Design):
Washtenaw Community College
Westcoast Poppin
Выпадающие меню достаточно распространены в современном дизайне, благодаря своей способности справляться с нагромождением ссылок. Однако, следует наглядно сообщать пользователю, раскроется ли меню при наведении на него курсора мыши. Лучше всего это сделать с помощью небольшого указывающего вниз треугольника или стрелки.
Рассмотрим несколько примеров, следующих этому совету:
QN5 Music
Kinder-aktuell
К сожалению, не все сайты сигнализируют пользователю о выпадающих меню.
webstudios
billoneil.com
Эти примеры не обязательно нужно считать лучшими, но к ним стоит присмотреться, разрабатывая свое собственное горизонтальное меню.
[Приводу здесь только превьюшки изображений, дабы не загромождать страницу – прим. переводчика]:
Lorem Ipsum
Arca lui Noe Hotel
The Art of Non-Conformity
Auditude
Mission Bicycle Company
Twitshirt
Jupiter Underfloor Heating
Cambridge Shakespeare Festival
The Mindset Game
Lanbruk’s Gunya
Glocal Ventures
Owltastic
inkd
Eyemagine
Wetaskiwin Regional Public Schools
Full Cream Milk
My Favorite Thing
Методы, рекомендуемые в этой статье, достаточно общие, и, возможно не являются панацеей во всех случаях. Однако следование этим советам позволит посетителям вашего сайта избежать путаницы с меню, ведь пользователи обычно привыкают к определенному стилю, а его неоправданное нарушение, приведет к тонне проклятий на вашу голову.
UPD: Поставлены ссылки для каждого скрина.
Тем не менее, в современном веб-дизайне очень много видов горизонтальных меню. Некоторые предлагают преимущества в удобстве использования для определенных типов сайтов, а другие эстетически лучше смотрятся.
В этой статье мы сосредоточимся на множестве подходов и практик с тем, чтобы убедиться в простоте использования горизонтальных меню, а также отметим некоторые, менее эффективные, решения. Также, мы обратим внимание на парочку тенденций, которые, возможно, помогут разработчикам в работе над горизонтальными меню в будущих проектах.
Используйте хорошо известные имена для ссылок
Давайте начнем с удобства и простоты использования любого навигационного меню. Когда пользователь посещает новый сайт, меню будет одной из первых вещей, на которые он осмысленно обратит внимание. Если этот элемент будет хорошо оформлен, пользователь обратится к нему за помощью для решения своей задачи. Почти каждый веб-сайт имеет определенные секции, которые «ожидаются» пользователями, к примеру «О нас», «Услуги», «Продукты» или «Связь с нами».
По самой природе Веба, пользователи будут недовольны любой задержкой из-за непонятной навигации, если они не могут немедленно найти необходимые данные.
Так, ссылка на страницу «О нас» должна быть названа «О нас» [Спасибо, Кэп – прим. переводчика] или «Контакты», ссылка на раздел услуг – названа «Услуги» или «Наши услуги»
Излишнее творчество в процессе именования пунктов главного меню может привести к потере в удобстве для вашего пользователя.
Impulse Development
Меню этого сайта не создает лишних проблем с навигацией
Даже при самых необычных обстоятельствах, не называйте страницу с предоставляемыми услугами – «То, чем мы занимаемся». И не нужно называть страницу с контактами «Способы нас найти». В поисках информации, пользователи пытаются найти знакомые слова и, первое время, неосознанно избегают незнакомых или непонятных слов и словосочетаний.
Четко определяйте главные и второстепенные секции
Как только вы выяснили, какие части вашего сайта являются главными, а какие второстепенными, по важности для потенциального пользователя, вы уже можете визуально создать иерархическую структуру меню, которая увеличит удобство и простоту использования вашего сайта.
Важные ссылки (например «Услуги», «Контакты», и т.д.) должны четко отличаться от второстепенных. Работа дизайнера состоит в том, что бы по возможности разделить все навигационные ссылки на две этих категории и ясно указать на их различия пользователям.
Рассмотрим несколько примеров:
Edwards & Hampson
У сайта Edwards & Hampson хорошее отчетливое горизонтальное меню, которое является основным средством перехода по страницам сайта. В то время как здесь находятся стандартные ссылки («О нас», «Наши услуги», «Продукция»), в этом меню есть много других ссылок, которые не являются столь «первичными» по отношению к пользователю; однако они являются достаточно важными для того, что бы быть на виду.
Аналогичный пример:
Deliciouslyorkshire
Ссылки на сайте The Deliciouslyorkshire, ведущие к важным разделам («Home», «About»,«News and events», «Recipes») расположены рядом с теми, что, казалось бы, является вторичными секциями ( «Promotions», «Useful links»). Оба типа ссылок имеют вид закладок, без признаков иерархии.
Фактически, если некоторые из этих ссылок менее важны для посетителей сайта, то проектирование секций с отражением иерархии было бы мудрым решением. Конечно, у этих компаний могли быть веские причины именно так спроектировать свои меню, и это не обязательно плохой пример, скорее всего, это просто исключения, иллюстрирующие важность визуальной иерархии.
Вот два примера сайтов, которые подчеркивают иерархию, при этом оставляя менее важные ссылки легкодоступными:
Designers Couch
У Designers Couch есть важные навигационные ссылки в главном меню («Home», «Gallery», «Jobs» и т.д.), а также вторичные ссылки на этом же самом меню, но сохраняющие визуальные отличия («Find a designer», «Get involved»).
J Taylor Design
Дизайнер сайта J Taylor Design подчеркивает различие между главными и зависимыми пунктами тем, что помещает вторичные ссылки ниже главного меню, используя другой цвет, шрифт и размер. В этом примере пользователь не сталкивается с проблемой, различая первичные и вторичные секции.
Помещайте ссылки на действия пользователя вправо
Если вы разрабатываете сайт, позволяющий регистрироваться пользователям, или коммерческий сайт, у которого есть «Корзина» для покупки товара, то будет лучше, если вы поместите ссылки с этими секциями справа от меню (или в другом месте справа, вверху). [Например, как это сделал Хабр :)] Здесь нет никакого шаманства или парапсихологии, вроде «Логотипы в правом углу воспринимаются на 45,9% лучше, чем в левом», просто пользователи привыкли к такому расположению.
Вот несколько примеров сайтов, которые визуально отделяют ссылки на действия в главном меню.
Xero
Sharify
Sharify и Xero помещают свои ссылки на действия в то же меню, что и важные ссылки, но они сохраняют иерархию, располагая их справа, на некотором отдалении.
Строка поиска, как часть меню
Другой метод, улучшающий простоту и удобство – это установка поиска справа, как часть меню. Поиск аналогичен всем функциям, упомянутым ранее, поэтому он требует специфического подхода.
Раз пользователи привыкли видеть ориентированные на действие возможности, включая окно поиска, на правой части страницы, так оставьте место в этой части вашего сайта и для строки поиска, если такое возможно.
Несколько примеров такого расположения поиска (включая вышеупомянутый J Taylor Design):
Washtenaw Community College
Westcoast Poppin
Избегайте ВНЕЗАПНО выпадающих меню
Выпадающие меню достаточно распространены в современном дизайне, благодаря своей способности справляться с нагромождением ссылок. Однако, следует наглядно сообщать пользователю, раскроется ли меню при наведении на него курсора мыши. Лучше всего это сделать с помощью небольшого указывающего вниз треугольника или стрелки.
Рассмотрим несколько примеров, следующих этому совету:
QN5 Music
Kinder-aktuell
К сожалению, не все сайты сигнализируют пользователю о выпадающих меню.
webstudios
billoneil.com
Различные тенденции и стили
Эти примеры не обязательно нужно считать лучшими, но к ним стоит присмотреться, разрабатывая свое собственное горизонтальное меню.
[Приводу здесь только превьюшки изображений, дабы не загромождать страницу – прим. переводчика]:
Lorem Ipsum
Arca lui Noe Hotel
The Art of Non-Conformity
Auditude
Mission Bicycle Company
Twitshirt
Jupiter Underfloor Heating
Cambridge Shakespeare Festival
The Mindset Game
Lanbruk’s Gunya
Glocal Ventures
Owltastic
inkd
Eyemagine
Wetaskiwin Regional Public Schools
Full Cream Milk
My Favorite Thing
Вывод
Методы, рекомендуемые в этой статье, достаточно общие, и, возможно не являются панацеей во всех случаях. Однако следование этим советам позволит посетителям вашего сайта избежать путаницы с меню, ведь пользователи обычно привыкают к определенному стилю, а его неоправданное нарушение, приведет к тонне проклятий на вашу голову.
UPD: Поставлены ссылки для каждого скрина.
