Концепт мега-меню: эволюция тренда с 2011 по 2014

Веб-дизайн — очень динамичная среда, представители которой всегда изобретают что-то новое, пробуя продемонстрировать под другим ракурсом самые привычные вещи. К примеру, в концепте мега-меню нет ничего сложного: всего лишь раскрывающийся элемент навигации с солидным числом подпунктов.

Но и тут дизайнеры не оставляют попыток поменять привычный движение вещей.

на данный момент вы заметите на примерах, как эволюционировал этот элемент в течение последних лет: с 2011 по 2014 год.

1. Вебмагазин одежды Argos

Верхнее меню вебмагазина практически не изменилось. Показались новые категории товаров, а раскрывающееся меню сейчас занимает всю ширину страницы.

Любая из колонок в собственности лишь одной категории, а заголовки в этом разделе стали больше. Еще одно маленькое изменение: ранее пункты подменю размешались в алфавитном порядке, а на данный момент данный принцип фактически не соблюдается.

2011

2014

  • Дизайн Landing Page: с чего начать?

2. Вебмагазин одежды Asos

Asos не менял ничего, маркетологи 2 новых раздела: «Boutique» (бутик) и «Preowned» (бывший в потреблении).

Как и раньше, в мега-меню магазина нет деления на группы. К сожалению, это затрудняет поиск нужного продукта в веб-магазине.

2011

Концепт мега-меню: эволюция тренда с 2011 по 2014

2014

  • Как применять правила дизайна для повышения конверсии

3. Вебмагазин электроники Ebuyer

Маркетологи сместили основное меню сайта с хедера страницы в левый на данный момент. В случае если раньше любая колонка была подчинена отдельной категории, наименование которой размещалось тут же, то сейчас вы заметите один перечень, прерываемый только заглавиями разделов.

Число подкатегорий группах различно, но, в каждую из них включен новый перечень — «Featured», где размещены ссылки на спецпредложения сервиса.

В итоге мега-меню Ebuyer мало утратило в юзабилити, но взяло последовательность новых и весьма полезных ссылок. Что лучше? Как знать.

2011

2014

4. Вебмагазин креативной кухни Lakeland

В 2011 году компания стремилась вместить все подкатегории в одно меню, но ей это никак не получалось. До нынешнего момента обстановка не изменилась. К примеру, три из представленных категорий так и не взяли никаких подпунктов («Travel Accessories»).

Меню расширено на всю страницу, что разрешило включить блок и дополнительные предложения с рекомендуемыми товарами. Посредством этого элемента Lakeland раскручивает бренды и популярные продукты.

2011

2014

  • Юзабилити: раскрывающиеся меню в контексте сложных целевых страниц

5. BQ

Тут вам сперва предстоит кликнуть по вкладке Shop by department (Разделы магазина) и лишь позже перейти к выбору интересующего товара.

Текущее меню в целом повторяет содержание и дизайн уникального примера, но имеется пара косметических трансформаций. К примеру, любой раздел ограничен всего лишь 3 ссылкой и категориями View All (Взглянуть все). Раньше клиентам предлагался более широкий выбор.

2011

2014

6. Вебмагазин House of Fraser

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

Главные категории остались теми же, но подпункты сейчас другие. В 2011 году любой из них отображался в отдельной колонке, а в 2014 маркетологи разбили содержимое всех категорий на два блока — «Highlights» (Главные продукты) и «InspirationsIdeas». Тут кроме этого присутствует изображение, визуально дублирующее наименование категории.

2011

2014

7. Вебмагазин John Lewis

На сайте этого интернет-гипермаркета вы легко сможете отыскать интересующий вас товар. Горизонтальное мега-меню, разместившееся в шапке сайта, раскрывается на целый экран и предлагает ознакомиться с широким ассортиментом магазина. Наряду с этим другая часть сайта темнеет, концентрируя взор лишь на меню.

Если сравнивать с 2011 годом само меню изменилось мало: по сути, это все те же столбцы с группами товаров, распределенные по разделам. Но показалась новая категория «Highlights», где магазин предлагает сезонные товары в рамках каждой категории.

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

2011

2014

8. Maplin

Если сравнивать с редакцией 2011 года, пример мега-меню от 2014 изменился мало. Очевидно, заглавия категорий и подкатегорий были доработаны, но расположены они равно как и раньше.

Из нового — раздел «Most popular», в котором, как легко додуматься из заглавия, представлены самые популярные позиции в магазине, и большое изображение товара, предлагаемого по акции.

2011

2014

9. Kiddisave

Интернет-ритейлер детских товаров Kiddisave снизил размер собственного мега-меню. Быть может, такое решение было принято в связи с внедрением адаптивного дизайна.

В 2011 году мега-меню раскрывалось на целый экран и содержало такие дополнительные разделы как «Top brands» и «Promoted products». В 2014 году любая категория ограничена всего лишь 3 колонками.

2011

2014

10. Fat Face

Интернет-магазин одежды и аксессуаров Fat Face отказался от классического выпадающего меню. Вместо него вам сперва предложат кликнуть на одну из 4 категорий: «Дамы», «Мужчины», «Девочки», «Мальчики», и уже позже выбирать интересующий предмет гардероба.

2011

2014

11. Jigsaw

Основное меню сайта так же, как и прежде включает в себя мега-меню, складывающееся из 2 и более колонок, и одинарные выпадающие столбцы. В мега-меню добавлен раздел «Features», в котором размещены ссылки на страницы с контентом. В целом, навигация сайта стала эргономичнее в применении.

2011

2014

  • Реализовывающий контент — 7 уроков от Apple

12. Monsoon

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

2011

2014

13. Next

Все меню в веб-магазине Next выполнены в едином стиле: справа представлен блок «Collections», слева — заглавия подкатегорий, заголовки которых выделены, что существенно облегчает навигацию.

2011

2014

  • 7 актуальных трендов веб-дизайна

14. Lovehoney

Секс-шоп Lovehoney всецело отказался от мега-меню, заменив их одиночными выпадающими перечнями. Это упрощает навигацию по сайту, не смотря на то, что и сокращает количество дополнительной информации.

К примеру, в 2011 году каждое мега-меню содержало особый пункт со ссылками на справочный раздел либо таблицу размеров. В 2014 году все это сведено до единственной ссылки в конце выпадающего перечня.

2011

2014

15. MyProtein

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

Линейка продуктов компании представлена в меню «Our range», которая раскрывается на целый экран и содержит 6 колонок. Успешное сочетание шрифтов и цветов делает обзор всех категорий делом приятным и несложным.

Другие меню предлагают визитёру ознакомиться с информативной составляющей сайта — статьями на тему спорта, верного питания, здоровья и т. д.

Ранее мы говорили, что применение иллюстраций раскрывает потенциал мега-меню, но, сайт MyProtein в этом замысле проигрывает: дизайн нужно модернизировать.

2011

2014

16. Novatech

Еще один бренд, чей интерфейс претерпел большие перемены с 2011 года. Мега-меню было реструктуризировано, и сейчас оно представляет собой не 6 колонок со ссылками на конкретные модели компьютеров, а, как вы имеете возможность видеть на ниже, всего 2 колонки ссылок, поделённые заголовками на группы. Это освобождает место для продвижения акционных специальных предложений и товаров.

2011

2014

17. Blacks

Протяженность выпадающего меню вебмагазина Blacks ранее зависела от числа позиций, входящих в ту либо иную категорию. Сейчас интерфейс унифицирован: меню раскрывается на целый экран, предлагая нам 4 колонки ссылок, причем правую колонку постоянно занимает рекламный баннер с актуальной акцией. В целом, макет меню очень удобен для восприятия, отчего навигация по сайту остается столь же превосходной.

Обратите внимание на меню с брендами, каковые представлены логотипами, а не несложным текстом.

2011

2014

18. Wiggle

Мега-меню интернет-ритейлера Wiggle раскрывается на всю ширину экрана и предлагает вашему вниманию ссылки на конкретные позиции вместо широких товарных групп. В случае если в прошлом имелись такие разделы, как «Top brands» (Популярные торговые марки) и «What’s hot» (Что модно), то на данный момент их нет, но имеется более конкретные «Triathlon bikes» и «Triathlon components». Применение выделенных жирным маркированных списков и заголовков облегчает поиск по меню.

  • Как оптимизировать навигацию вебмагазинов, либо 7 раз отмерь

2011

2014

19. La Redoute

Ритейлер актуальной одежды La Redoute расширил собственный мега-меню, и по сей день оно занимает фактически целый экран. Между колонками большое количество свободного места, но это всего лишь заготовки под будущие рекламные баннеры.

2011

2014

20. Jaeger

Вебмагазин Jaeger в новой редакции сайта отказался от выпадающих меню.

2011

2014

21. Selfridges

Сайт Selfridges предлагает ознакомиться с товарным ассортиментом через огромнейшее мега-меню, в котором нашлось место и для рекламного баннера, и для возможности поиска товара по брендам, и для ссылок на страницы с контентом. Благодаря успешному дизайну это меню все еще прекрасно читается.

2011

2014

22. MS

Сайт вебмагазина MS был перезапущен в феврале этого года, и с учетом внесенных трансформаций мы можем отметить следующее: навигация по ресурсу сейчас основывается на двухуровневом меню. К примеру, если вы выбираете вкладку «Kids» (Дети), то после этого кликаете по пункту «Boys» либо «Girls», лишь по окончании чего переходите к выбору конкретного товара.

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

2011

2014

23. MamasPapas

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

2011

2014

Заключение

Вариантов мега-меню — множество, но немногие компании сохранили уникальный дизайн в неприкосновенности.

Меню, раскрывающееся на целый экран, находится в тренде, и 15 из 23 брендов применяют как раз таковой вариант. Это позволяет уместить в интерфейс больше товарных позиций и подкатегорий, и изображений, но ухудшает юзабилити.

Высоких вам конверсий!

По данным econsultancy.com

Случайные статьи:

Hettich: Kitchen Concept 2015, presented at Interzum 2009


Подборка похожих статей:

riasevastopol