Если вы делали покупки в Интернете, есть большая вероятность, что вы переместились в мегаменю.
Это огромное меню со ссылками на различные разделы и подразделы сайта. Они популярны на сайтах с большим количеством контента, особенно на сайтах розничной торговли.
Если вы пользуетесь интернет-магазином или другим сайтом с множеством ссылок, по которым люди могут ориентироваться, то может показаться, что мегаменю не составляет никакого труда. Но так ли это?
В этой статье я рассмотрю некоторые сценарии, в которых мегаменю будет улучшать ваш сайт, и те, в которых он не будет улучшаться.
Что такое мега-меню?
Мега-меню — это своего рода навигационное меню, в котором все параметры видны одновременно, как по горизонтали, так и по вертикали. Иногда они будут разбиты на разделы, иногда нет.
Примером этого является меню на веб-сайте Amazon UK, которое занимает весь экран:
Но на американском сайте Amazon не использует мегаменю, а вместо этого стандартное выпадающее меню:
Который просто показывает, что мегаменю не всегда являются ответом!
Мега-меню, как правило, имеют:
- одна или несколько больших панелей, разделенных на группы вариантов навигации
- варианты навигации, структурированные с использованием макета, типографики и (иногда) значков
- все видно сразу, поэтому пользователям не нужно прокручивать или нажимать на подменю
Мега-меню и пользовательский опыт
Основным принципом использования мега-меню должен быть ответ на один простой вопрос:
Мегаменю облегчает людям навигацию по моему сайту?
Вы не должны просто добавить один, потому что они последняя крутая вещь. Добавление мегаменю на ваш сайт должно учитывать пользовательский опыт (UX). Если ваше мегаменю сделает процесс навигации более плавным и интуитивно понятным, добавьте его. Если этого не произойдет, или вам просто не нужно так много пунктов в меню, придерживайтесь обычного выпадающего меню.
Другой вопрос, который вы можете задать себе, решая, использовать ли мегаменю, таков:
Поможет ли мегаменю моему сайту достичь своих целей?
Вы можете подумать, что это неопределенный вопрос, на который трудно ответить, но все аспекты дизайна и содержания вашего сайта должны быть связаны с тем, чего ваш сайт пытается достичь. Это может быть одной из нескольких вещей:
- продавать товары онлайн
- поощрять людей связаться с вами, чтобы купить ваши услуги
- вырастить последователей
- содействовать благотворительности
- создать сообщество
- получить подписчиков
- продавать билеты на мероприятия
Я уверен, что у веб-сайта гораздо больше целей, но это одни из самых распространенных. Понимание вашей поможет вам точно знать, какие страницы на вашем сайте вы хотите, чтобы пользователи посещали для достижения ваших целей.
Так что, если вы хотите, чтобы люди покупали товары через Интернет, а у вас большой и сложный магазин, мегаменю может быть хорошим вариантом. Но если у вас есть один очень специфический продукт или услуга, и вы хотите направить людей на страницу продаж для этого, то мегаменю может отвлечь.
Прежде чем вы решите, добавлять ли мегаменю, найдите время, чтобы подумать, чего вы хотите добиться от своего сайта, куда на вашем сайте вы хотите поощрять посетителей, и какая навигация будет стимулировать их делать это.
Ниже приведены некоторые конкретные примеры того, как мегаменю может улучшить ваш сайт.
Когда использовать мега-меню
Давайте рассмотрим некоторые сценарии, когда мегаменю являются полезным дополнением к вашему сайту.
1. Когда пользователи ожидают одного
Если ваш сайт является розничным, то пользователи привыкли видеть мегаменю и использовать их для навигации по отделам магазина.
Например, сайт Джона Льюиса, показанный ниже, использует различные мегаменю для каждого основного раздела магазина. Ниже приведен раздел для женской одежды:
Люди привыкли использовать мегаменю на веб-сайтах для таких крупных универмагов, как это, и их это не смущает. Например, если я захожу на сайт в поисках платья, я могу легко перейти в этот раздел сайта одним щелчком мыши.
2. Когда выпадающее меню будет слишком большим
В некоторых случаях раскрывающееся меню или их ряд могут содержать так много параметров, что это отвлекает от UX.
Якоб Нильсен и Энджи Ли провели исследование, показавшее, что для больших навигационных меню мега-меню улучшают UX по сравнению с выпадающими меню. Это связано с тем, что раскрывающееся меню с большим количеством контента потребует от пользователя прокрутить вниз или иногда прокрутить вниз, а затем снова вернуться вверх. Это занимает больше времени, увеличивает нагрузку на кратковременную память и может сбивать с толку.
Так что если вашему сайту нужно много элементов в навигационном меню, мегаменю вполне может улучшить UX. Но убедитесь, что если вы используете его, вы структурируете его интуитивно понятным для пользователей образом и используете дизайнерские подсказки, такие как цвета, текстовые эффекты и шрифты, чтобы их было легко просматривать.
Веб-сайт игры, представленный ниже, является хорошим примером серии мегаменю, каждое из которых относится к разделу сайта. Они использовали интервалы и текстовые эффекты, такие как жирный текст и фон, чтобы сделать меню интуитивно понятным и простым в навигации.
3. Когда дизайн меню улучшает сайт
Иногда у вас есть возможность добавить больше, чем просто текстовые ссылки на ваш сайт.
На сайте Moleskine, показанном ниже, есть мега-меню с разницей. В дополнение к текстовым ссылкам, на нем есть фотографии нескольких ключевых продуктов, которые действуют как ссылки вместе с наложенным на них текстом.
Это побуждает посетителя переходить на эти страницы и делает мегаменю больше, чем просто функциональный аспект сайта — это улучшает дизайн и помогает достичь целей продаж.
Когда не использовать мега-меню
Будут времена, когда вы не должны использовать мега-меню. Вот несколько примеров.
1. Когда у вас нет много ссылок
Если на вашем сайте нет сотен страниц, то мега-меню будет излишним. Для среднего сайта малого бизнеса или блога мегаменю просто запутает посетителей — и тоже будет выглядеть довольно пусто.
Сайт Envato Tuts + использует комбинацию мега-меню и обычных выпадающих меню. Для тех разделов сайта, которые не имеют много ссылок, нормальное выпадающее меню делает работу и занимает меньше страницы:
2. Когда ваша домашняя страница — только ссылки
Если ваша домашняя страница — просто страница, полная ссылок на подстраницы, то вам также не нужно мегаменю.
Примером этого является сайт правительства Великобритании, страница которого содержит ссылки в качестве домашней страницы:
Как только вы перейдете на сайт, появится левое меню навигации, которое можно расширить:
Это также хороший пример неиспользования мегаменю в контексте, где пользователи могут этого не ожидать. Мега-меню менее распространены на сайтах государственного сектора, чем, например, в розничной торговле.
3. Когда вы хотите направить посетителей на определенную страницу
Иногда ваш сайт будет предназначен для продажи только одного или двух продуктов или услуг или для поощрения регистрации в списке рассылки.
Если это так, у вас вполне может быть баннер на главной странице, направляющий посетителей на целевую страницу.
В таких случаях вы хотите, чтобы навигация была минимальной. Мега-меню предоставит посетителям так много вариантов, что у них будет гораздо меньше шансов посетить страницу, на которую вы хотите. Поэтому сводите навигацию к минимуму и сосредоточьтесь на том, чтобы направлять посетителей на целевую страницу.
Сайт Social Media Examiner — хороший тому пример. Прямо сейчас они хотят, чтобы посетители делали одну из двух вещей: подписывались на свой список рассылки или покупали билет на свою конференцию. Баннер отражает второе из них, а призыв к действию, занимающий верхнюю часть главной страницы, отражает первое.
Если бы они давали посетителям большое мегаменю, это уменьшило бы вероятность того, что они выполнили одно из этих двух действий, поэтому вместо этого они оставляли навигацию простой.
4. На мобильном телефоне
Будет сложно создать мегаменю, которое будет читаться на маленьком экране. Чтобы это работало, вам нужно либо сделать крошечные ссылки, а это значит, что люди не смогут их касаться, либо ввести прокрутку. Объединение мегаменю с прокруткой может сбивать с толку, так как трудно узнать, где заканчивается мегаменю и начинается содержимое страницы.
На мобильных устройствах лучше использовать меню бургера: меню, которое не отображается, пока вы не нажмете на него символ. Это часто называют меню бургера из-за символа: три вертикальные линии немного похожи на гамбургер.
На указанном выше сайте Джона Льюиса есть такое меню. Нажмите на символ, и под ним откроется меню.
Добавление мегаменю на ваш сайт
Если вы решили, что мегаменю — это правильный вариант для вашего сайта, проще всего добавить его через плагин.
CodeCanyon предлагает множество плагинов для мегаменю. Некоторые из самых популярных:
- UberMenu — самый продаваемый плагин для мегаменю . Это позволяет вам создать полностью настраиваемое мегаменю для вашего сайта. Он включает в себя селекторы CSS, которые помогут вам создать великолепное мегаменю со шрифтами и текстовыми эффектами, и имеет несколько макетов.
- Mega Main Menu позволяет размещать различные типы объектов в вашем меню. Так что, если вы хотите изображения, как на сайте Moleskine выше, это может помочь.
- Меню Hero разработано, чтобы быть простым в использовании и поможет вам создать и запустить мегаменю за считанные минуты с помощью перетаскивателя меню.
Чтобы получить больше вдохновения для создания своего мегаменю, вы можете проверить эти посты на Envato Tuts +:
-
WordPressUberMenu и 7 других лучших плагинов Mega Menu -
Разработка темыКак интегрировать загрузчик Navbar в тему WordPress
-
WordPress11 лучших виджетов и плагинов для WordPress и аккордеона
Используйте Мега-меню с умом, и они улучшат ваш сайт
Мега-меню могут быть отличным способом улучшить UX вашего сайта. Если у вас большой сайт с множеством ссылок, то добавление одного из них поможет вашим пользователям ориентироваться. Если ваш сайт отвечает всем требованиям, попробуйте добавить мегаменю сегодня.