Обучайся бесплатно с WAYUP Premiere сегодня вечером

За прошедшие годы мы уже видели множество разных тенденций в мире веб-дизайна; некоторые уходили в прошлое, некоторые, наоборот, будут еще долгое время использоваться и использоваться. Но каким бы странным это не было, за 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.

Итоги

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

Да, мега-меню улучшает изучение вашего сайта, помогает найти нужное и соответственно продать больше. Но оно не применимо для мобильных платформ, оно может не сочетаться с некоторыми трендами веб-дизайна, оно может раздражать посетителей своим объемом.

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

Как вам материал?