Новаторство И Классика / WAYUP
За прошедшие годы мы уже видели множество разных тенденций в мире веб-дизайна; некоторые уходили в прошлое, некоторые, наоборот, будут еще долгое время использоваться и использоваться. Но каким бы странным это не было, за 2017 год применение некоторых трендов стало чем-то особенным. Иными словами, несмотря на кажущуюся их бесполезность и недолюбливание со стороны пользователей, веб-мастера применяют такие элементы в своих проектах. И что самое занятное, эти проекты получаются успешными.
Одной из таких тенденций является большое выпадающее меню или «мега-меню». Популярное несколько лет назад большее меню, увы, недолговечно, как тренд и элемент. Дизайнеры в большинстве рассматривают данную концепцию во вторую очередь. Но, так или иначе, они до сих пор встречаются и используются. Это десктопные проекты, что также включают в себя и элементы мобильного дизайна. И практически бесконечной популярности этого элемента есть вполне логичное объяснение.
Что ты такое мега-меню?
Вне зависимости от количества новых веяний и веб-сайтов, которые угасают или разгораются вовсю, основное внимание мастеров всегда уделяется улучшению пользовательского опыта или UX. При помощи навигации, будь это полноэкранная или одностраничная прокручиваемая, мы пытаемся удовлетворить два требования: простота использования и удобство работы. Именно поэтому, казалось бы, похожие друг на друга тематически и типически сайты могут иметь совсем разное восприятие у пользователей.
Свою популярность большое меню приобрело с ростом числа проектов e-commerce. И причина в том, что оно сильно отличается от обычных больших выпадающих списков. Иными словами, вместо того, чтобы просто раскрыться вниз, оно расширяется и расширяется, а также имеет много колонок.
Сейчас мегаменю в моде, что ни говори. И посетители одним взглядом на него формируют правильное направление тематики, типа, позиционирования контента на данном сайте. Если мега-меню позволит упросить посетителям доступ к еще большей информации на сайте, то, разумеется, его мастера создают. Однако эта тенденция совершенно неприменима к мобильному веб-дизайну, поскольку на малых по размеру экранах для такого большого меню попросту нет места. И все равно, мега-меню имеет большую популярность.
Так какие идеи используют веб-дизайнеры для того, чтобы такая большая навигация органически вписывалась в проект в целом? Какие новаторские решения можно увидеть на просторах интернета?
Маркеры
Маркеры для ссылок подменю представляют собой небольшие индикаторы, подсказывающие пользователям о том, что существует еще группа ссылок с информацией. Это бывают точки, квадратики, стрелки или что-то подобное, но незаметное. И да, пользователи достаточно умны, чтобы понять, что данные символы или выделения со стрелкой указывают на иерархию. Например, Microsoft, Nvidia, Bahamas, 1c-interes, Walmart, action envelope. При этом некоторые меню дополнительно оснащены стрелкой вниз, сообщая о том, что пункт содержит раскрывающийся список из дополнительных ссылок.
Но иногда стрелочки подменю могут появляться только при наведении указателя мышки. Это может и красиво, анимационно, но не всегда удобно для пользователя. Задача веб-дизайна – создание удобства для пользователя в ознакомлении с информацией.
Мелко и незаметно
Это способно сводить с ума в попытке понимания, но почему-то это используют. Большое выпадающее меню создают с таким маленьким шрифтом и крошечными отступами между строк, что все буквально сливается в одну «кашу». Словно веб-дизайнерам не хватает пространства на холсте. Раскрывающееся подменю интернет-магазина Ozon.ru текст имеет настолько мелкий шрифт, будто бы мастера старались объять необъятное. И это при том, что кликать нужно строго по тексту ссылку. Если кликнуть рядом, то переход на страницу не произойдет.
Но если посмотреть на аналоги, те же Microsoft и NVidia, то по пунктам меню можно кликать и рядом с текстом. То есть, независимо от того, что шрифт мелкий, окружающее пустое пространство используется полностью и с пользой, что делает навигацию гораздо удобнее.
Интересно решение на clipper round the world, где меню не крупное, но при наведении на ссылки можно увидеть, что они кликабельны. Сами они расположены широко и активны как текст, так и отступы рядом с ним. Блочный вариант элементов меню позволяет разумнее распределять свободное пространство.
Анимация при наведении
Hover-эффект позволяет дизайнерам отказаться от иконок и использования пустого пространства и наглядно говорит о том, что ссылка содержит подменю. Обычно веб-мастера используют CSS hover для создания подсвечивания. Это отличная идея для наглядности и удобства. Посетителям гораздо приятнее подвести курсор к ссылке и увидеть список подменю, дабы узнать, есть ли там что-то нужное для него.
Анимация выделения может выглядеть как изменение цвета шрифта, появление подчеркивания, выделение маркером, свето-теневая игра и многое иное, на что хватает фантазии.
Варианты меню на royal robbins, thbhotels, dx3webs, luxe, treblecone поражают своим разнообразием. Где-то анимирован текст, где-то дополнительно иконки, выделения, цвет шрифта и даже его размер. Каждый веб-дизайн имеет собственный стиль, поэтому не стоит стремиться к стандарту использования черного и белого. Но так или иначе, активные ссылки должны выделяться и окрашиваться.
И, разумеется, что один из дополнительных цветов рабочей палитры будет как раз кстати. На сайте Nvidia как раз существует смена сероватого цвета на зеленый при наведении курсора, поскольку металлик (серый), черный и зеленый – основные цвета компании. Но в случае с AMD использование черного и белого более чем оправдано, ибо вместе с красным – это основные цвета бренда.
Мгновенное открытие
Совмещая JQuery с CSS3 можно сделать невероятно красивую и мощную анимацию для веба. Выпадающее меню обычно использует анимацию скольжения или замирания в области зрения. Иными словами, когда мы подводим курсор мышки к пункту основного меню, то можем увидеть или резкое появление ниспадающего списка ссылок, или чуть плавное соскальзывание, или даже появление и замирание, сколько бы мы не переводили курсор на разные пункты этого меню. Речь идет о Asus, Ozon.ru, Samsung, Boutique Olympique Lyon . Скриншотами такое передать сложно, посему посетить их лучше лично.
Но анимация всегда служит некой цели, поэтому UI/UX дизайнеры стараются использовать её практически. Оживить интерфейс, привлечь внимание посетителя, повлиять на эмоции, заворожить взор. Но никак не замедлить процесс работы с сайтом. Обычно задержка анимации рекомендуется не более 1,5 секунд, но иногда мастера делают 2 секунды. Разумеется, если это оправдано.
Например, сайт css menu maker имеет быстро выпадающее меню, продолжительностью около 300 миллисекунд. Но анимация осуществляется, только если курсор переводится в другое место. Это пример реально быстрой анимации; анимации, которая ощущается подсознательно пользователем и которая совершенно не перегружает собой общий дизайн сайта.
Секрет мега-меню
Таким образом, раздумывая стоит ли вообще использовать мега-меню или нет, популярно оно или устарело, стоит обратиться на сайты крупнейших компаний, на которых, как ни странно, оно есть. Но разное. Дизайнеры, в первую очередь, рассматривают не сам факт наличия меню, а его форму и функцию. А потому существует два основных подхода к улучшению использования и восприятия его.
- Простота. Не постоянно выскакивающее при малейшем наведении курсора на пункт основного меню, наглядное и понятное, где существует подменю, а где нет.
- Доступность. Мега-меню нужна структурность, логичность. Если существует пункт «Технологии», то подпункты не должны пересекаться с ссылками основного меню на сайте AMD. Пусть на странице рассказывается и о процессорах, и о видеокартах, и о архитектуре ядер. Но все это также можно найти в Продукты – Компоненты. Цель мега-меню – сориентировать посетителя на большом сайте с огромным числом контента.
Классика и новаторство
Классические и проверенные временем выпадающие списки в наши дни выгладят все же громоздко и тяжело. Именно поэтому их стараются сделать небольшими по количеству ссылок, использовать сероватый цвет шрифта и малый его размер. Тем не менее, мегаменю обладает большим потенциалом, будучи в состоянии легко сортировать информацию без заполнения собой пространства окна браузера. И на пути к такому превосходному проявлению большого меню веб-дизайнеры находят возможности усовершенствования данного элемента сайта. Новаторство и стандартизация принципов сайтостроения сливаются и дарят нам необычные решения, оригинальные, красивые и функциональные.
Boutique Olympique Lyon помогает сориентироваться даже тем, кто не силен в французском языке, ибо все ссылки меню имеют соответствующую иконку: носки, футболки, шорты, куртки, мячи, перчатки, флаги, шлепанцы и прочее.
Gibbston valley дарит посетителям совершенно иной взгляд на меню: и текстовое, и иллюстрированное. Каждая ссылка подменю обладает своей иллюстрацией и явно показывает, о чем будет идти речь в материале.
Le slip francais также создан по аналогии с предыдущим примером, но вместо фотографий мастера использовали иконки, выполненные в тематическом стиле интернет-магазина, да и страны в целом (синий-красный-белый).
Reservoir-la обладает весьма элегантным меню, полностью соответствующее эстетике всего сайта. При небольшом размере шрифта надписи вполне читаемы, а боковое рекламное изображение дает четкое и наглядное представление чему посвящён данный раздел. По аналогии создан и Camelbak
Но если посмотреть на сайт Gsi outdoors, то можно увидеть, что все варианты оригинального использования и необычной стилистики использованы в одном мега-меню. Здесь и список с рекламным изображением, и иллюстрированные ссылки, и обычные текстовые. Смотрится свежо и удобно.
И еще два крупных и новаторских решения. Это Комплекс градостроительной политики и строительства города Москвы и kremlin.ru. Решения разные, но обойти их строной невозможно.
Первый проект имеет мега-меню, но оно раскрывается вниз и образует строго две колонки. При этом анимация немного увеличена по времени и потому она плавная и очень заметная. Да, мега-меню всегда строго на одном месте, полностью текстовое, но аккуратное, наглядное и простое.
Во втором примере, мегаменю создавалось не как классический список, но в виде нескольких линий меню. При этом каждый пункт верхней линии имеет свои подпункты на нижней. И все без исключения располагаются горизонтально, друг за другом. Аналогично создано и меню проекта W2C Customs Trade Management.
Итоги
Электронная коммерция, новостные сайты, интернет-журналы и проекты со сложной информационной иерархией всегда будут предпочитать использовать мегаменю с богатыми возможностями. Они позволяют охватить все категории и представить их взору посетителей простым и интуитивно понятным образом, экономя время пользователя и пространство на холсте. При добавлении иконок или иллюстраций, если позволяет тематика проекта, меню получается чуть более информативным и понятным.
Да, мега-меню улучшает изучение вашего сайта, помогает найти нужное и соответственно продать больше. Но оно не применимо для мобильных платформ, оно может не сочетаться с некоторыми трендами веб-дизайна, оно может раздражать посетителей своим объемом.
Но всегда нужно помнить – при правильном использовании его функционал оправдан. И именно поэтому выпадающих списков может быть один или два. Идей использования очень много и, да, мега-меню не столько популярны, сколько необходимы при определённых условиях
14 мега-меню для сайта — очень функциональная вещь
1. Новое выпадающее jQuery мега-меню
Стильное горизонтальное выпадающее меню с большим количеством пунктов подменю.
2. Выпадающее CSS3 мега-меню
Выпадающее мега-меню.
3. Мега jQuery меню
Выпадающее меню с красивым jQuery эффектом.
4. Огромное выпадающее мега-меню
5. Симпатичное выпадающее мега-меню на jQuery
Симпатичное выпадающее меню с большим количеством подпунктов, разбитых по категориям.
6. CSS3 Выпадающее мега меню
7. Горизонтальные jQuery мега-меню в разных стилевых оформлениях
На демонстрационной странице представлено несколько вариантов выпадающих мега меню, в различных стилевых оформлениях. В этом меню можно настраивать: эффект выпадения, скорость выпадения, а также делать выбор между выпадением по клику или по наведению мышки на пункт.
8. Выпадающее мега-меню
Меню с большим количеством выпадающих пунктов.
9. Еще одно мега-меню с использованием Ajax и jQuery
Свежее решение для организации выпадающего меню с большим количеством подпунктов.
10. Выпадающее мега-меню jQuery
Еще один вариант выпадающего меню с большим количеством подпунктов.
11. Выпадающее CSS3 мега-меню
Реализация выпадающего меню с использованием CSS3.
12. Вертикальное jQuery мега меню
На демонстрационной странице представлено несколько вариантов выпадающих вертикальных мега меню. В меню можно настраивать: эффект выпадения, скорость выпадения, а также сторону выпадения меню (вправо или влево).
13. Стильное вертикальное jQuery мега-меню
Профессиональное вертикальное меню с огромным количеством выпадающих пунктов подменю.
14. jQuery выпадающее меню
Отличное выпадающее меню. Вместо дочерних пунктов для каждого пункта меню может выпадать HTML контент (таблицы, списки, формы). Очень интересный эффект.
От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов jQuery. Сегодня у нас плагин, позволяющий реализовать так называемое мега-меню (mega menu). Речь идет о выпадающем меню, где вложенное меню может включать в себя множество пунктов, разбитых на колонки.
На мой взгляд, меню — это один из наиболее ответственных элементов на сайте. Благодаря продуманному и хорошо реализованному меню пользователю удобно пользоваться сайтом. Ну а если меню реализовано еще и красиво, если для него реализованы какие-либо эффекты — это безусловно понравится посетителям сайта. В нашем сегодняшнем меню можно вместить много пунктов, именно поэтому оно и называется — mega menu (мега меню).
На странице GitHub плагина megamenu-js мы можем скачать исходники плагина а также познакомиться с небольшой инструкцией по его установке и примеры создания megamenu. Скачаем и подключим плагин.
<link href=»css/style.css» rel=»stylesheet»> <link href=»css/ionicons.min.css» rel=»stylesheet»> <script src=»js/megamenu.js»></script>
<link href=»css/style.css» rel=»stylesheet»> <link href=»css/ionicons.min.css» rel=»stylesheet»> <script src=»js/megamenu.js»></script> |
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнееТеперь нам потребуется верстка для организации мега меню. Это стандартная типовая верстка меню списками, примерно такая:
<div> <div> <ul> <li></li> <li> <ul> <li></li> <li></li> </ul> </li> </ul> </div> </div>
<div> <div> <ul> <li></li> <li> <ul> <li></li> <li></li> </ul> </li> </ul> </div> </div> |
Собственно, это все. Без подключения файлов стилей и файла самого плагина наше меню выглядит примерно так:
А вот с подключенными файлами плагина megamenu-js — меню кардинально меняется и выглядит уже очень достойно. Вот так выглядит меню в раскрытом состоянии при наведении на родительский пункт меню:
Ну и, конечно же, меню адаптивно, куда же сейчас без этого. При уменьшении ширины окна браузера меню будет замечательно адаптироваться.
Отличное меню получилось, мне нравится. На этом у меня сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнееМега-меню: зло или благо
Автор: Юлия Федотова
«Шеф-редактор блога GetGoodRank, веб-аналитик, блоггер.
Что такое мега-меню, зачем они нужны сайту. Рассматриваем, как должно работать мега-меню, как должно быть оптимизировано, а чего в мега-меню быть не должно.»
Мега меню — тип меню на сайте или в приложение, открывающее по действию список доступных тематических категорий или подкатегорий сайта. Это отличное решение, позволяющее сэкономить полезную площадь на сайте и показать пользователю больше полезного контента, чем навигационных элементов.
Мега-меню имеют следующие характерные черты:
- двухмерные панели, разделенные на тематические группы доступных опций
- доступные опции структурированы при помощи графических элементов (типографика, иконки) и разметки
- мега-меню не требует прокрутки и четко соответствует размерам экрана, на котором оно открыто
- меню открывается по определенному действию пользователя: клику, наведению, тапу
Пример мега-меню на сайте DaveRamsey открывает пользователю пять тематических подкатегорий, разделы которых видны сразу. Пользователь сразу понимает, что найдет в каждой из категорий.
Пример мега-меню на сайте Nova Scotia показывает категории, каждая из которых имеет свой графический элемент в заглавии. Это не самое удачное решение, в данном случае измененные шрифты, а также разные цветовые решения для категорий воспринимались бы лучше. Альтернативным решением для картинок каждой из категорий в данном меню становятся тематические схематические иконки, четко отражающие тему каждой из категорий. Они легче считываются при беглом просмотре.
Пример сайта Moleskine показывает, как графическая визуализация категорий упрощает восприятие тематических категорий.
Мега-меню существенно экономят пространство и качественно структурируют информацию на сайте. Более того такой тип меню упрощает доступ к нужной категории, улучшает пользовательский опыт. Так как категории и подкатегории видны в развернутом виде сразу, то от пользователя не требуется дополнительных действий. Это уменьшает риск ошибочного клика.
Почему мега-меню лучше стандартных выпадающих списков
Результаты тестирования мега-меню показали, что пользователи положительно воспринимают такой тип навигации:
- На многостраничных сайтах, в каталогах и интернет-магазинах с большим ассортиментом товаров, выпадающие списки не вписываются в пределы экрана и требуют прокрутки. Выпадающие списки традиционно показывают опции первого уровня. Для того, чтобы открыть доступные подкатегории, пользователю необходимо кликнуть или навести курсор мышки на желаемый пункт выпадающего списка. Прокрутка выпадающего списка до конца скрывает верхнюю часть меню. Если это первое взаимодействие с сайтом, то пользователю приходится полагаться на собственную память, чтобы запомнить, какие опции доступны в начале списка. Пользователи предпочитают видеть сразу все доступные опции, чем тратить время на изучение.
- Мега-меню отлично структурируют информацию, при правильной визуальной подаче пользователь сразу поймет, к какой категории относится каждый пункт.
- Мега-меню позволяет использовать графические элементы для простоты восприятия.
Мега-меню по наведению мышки
Если мега-меню открывается по наведению курсора мышки, то важно понимать намерение пользователя в данный момент времени, чтобы избежать ошибочных действий. Важно понимать, что пользователь делает в данный момент на сайте:
- он просто передвигает курсор и траектория движения мышки пересекается с кнопкой, за которой скрывается мега-меню
- пользователь действительно хочет открыть мега-меню
В первом случае срабатывание и раскрытие мега-меню ухудшит пользовательский опыт, тогда как во втором случае важно своевременно открыть меню. Как понять, что хочет пользователь? Решение простое:
- для срабатывания мега-меню должно быть выполнено условие — курсор мышки должен задержаться на навигационном элементе более 0,5 секунды.
- если условие выполнено, то мега-меню должно открыться за 0,1 секунды
- меню должно быть открыто, пока курсор мышки находится в поле меню
- после того, как пользователь вывел курсор за пределы меню, оно должно исчезнуть в течение 0,1 секунды
Если эти условия не выполняются, пользовательский опыт станет просто невозможным, так как постоянно появляющиеся списки вызовут раздражение.
Что важно помнить при создании мега-меню
- Правильная группировка элементов — следует избегать чрезмерной детализации, чем больше элементов будет доступно к просмотру, тем сложнее пользователю будет ориентироваться в предложенном наборе опций. Рекомендуем вспомнить о проблеме выбора в теории Барри Шварца.
- Название каждой группы элементов должно четко называть тематику или описывать группу элементов в данной группе
- Соблюдайте простоту — в одно мега-меню можно поместить всю структуру сайта, но надо ли?
- Помните о доступности для скринридеров — динамические элементы всегда сложны для интерпретации и взаимодействия для пользователей с проблемами зрения, двигательной активности.
- Задача мега-меню — упрощение навигации, мега-меню должно четко структурировать тематическую информацию, помещаться в пределах одного экрана, по наведению на пункт или подпункт меню не должно появляться дополнительных выпадающих списков.
Выводы:
Любое нововведение на сайте требует тщательного А/В тестирования.
Мега-меню будут работать только в том случае, если они действительно правильно группируют элементы и упрощают доступ пользователя к категориям, находящимся в глубине сайта.
Помогая пользователям обнаружить больше элементов на сайте, вы способствуете повышению продаж.
Источник