За прошедшие годы мы уже видели множество разных тенденций в мире веб-дизайна; некоторые уходили в прошлое, некоторые, наоборот, будут еще долгое время использоваться и использоваться. Но каким бы странным это не было, за 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.
Итоги
Электронная коммерция, новостные сайты, интернет-журналы и проекты со сложной информационной иерархией всегда будут предпочитать использовать мегаменю с богатыми возможностями. Они позволяют охватить все категории и представить их взору посетителей простым и интуитивно понятным образом, экономя время пользователя и пространство на холсте. При добавлении иконок или иллюстраций, если позволяет тематика проекта, меню получается чуть более информативным и понятным.
Да, мега-меню улучшает изучение вашего сайта, помогает найти нужное и соответственно продать больше. Но оно не применимо для мобильных платформ, оно может не сочетаться с некоторыми трендами веб-дизайна, оно может раздражать посетителей своим объемом.
Но всегда нужно помнить – при правильном использовании его функционал оправдан. И именно поэтому выпадающих списков может быть один или два. Идей использования очень много и, да, мега-меню не столько популярны, сколько необходимы при определённых условиях