Яндекс.Метрика
  • 984

Оптимальное меню для интернет-магазина

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

Оптимальное меню для интернет-магазина

Серия статей:

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

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

Аксиомы

Наши аксиомы не такие строгие, как и в математике, и даже не совсем аксиомы. У нас это некие очевидные вещи, обсуждение которых уже затёрто до дыр и выводы давно сделаны.

Аксиома 0

Аксиома 0. Интернет-магазин создаётся для покупателя.

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

Аксиома 1

Исходя из того, что 45-70% пользователей, посещающих интернет-магазин, используют мобильные устройства, сайт должно быть адаптивным. Никаких мобильных версий. Отдельное приложение — да, хотите делайте. Но мобильной версии сайта быть не должно.

Аксиома 1. Интернет-магазин должен быть адаптивным.

Информация должна быть максимально одинаково доступна в браузере на всех типах устройств от мала до велика.

Аксиома 2

Предельное число объектов, которое может захватить взглядом и воспринять мозгом обычный человек за секунды продемонстрировано природой у нас на руках и ногах. 10 пальцев — мы легко с ними управляемся. Больше будет сложнее.

Обработав в момент первые 10 объектов, мы можем приступать к следующим 10 и т. д. Если дать обработать в такой же момент 20 объектов — мозг не справится. Видя в ведре 15 и более рыб мы говорим — много.

Аксиома 2. Оптимальное число восприятия — 10. Меньше — хорошо. Больше — хуже.

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

Аксиома 3

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

Напомним и заострим внимание на том, что аксиомы, это не правила. Правила, хоть и не следует, но можно нарушать. Аксиомы — нет.

Левое боковое меню

Начнём с самого ужасного варианта — «Левое боковое меню». Это пережиток времени, оставшийся нам в наследство, сегодня полностью себя исчерпал. Такое меню было актуальным в эпоху настольных ПК и ноутбуков.

Сегодня, когда интернет-магазин посещает 45-80% пользователей, используя мобильные устройства, с разрешением дисплея не превышающим 800px по ширине — применение такого меню недопустимо.

Почему оно до сих пор живо?

Люди по своей натуре консерваторы. Как бы они не говорили, что любят всё новое, с ещё большей любовью они относятся к своим старым вещам и привычкам.

Левое боковое меню существует уже много лет. Владельцы интернет-магазинов привыкли к нему. Они пользовались им с 00 годов. Наполняли его тоже сами, как придётся, без оглядки на логику и структуру. Чаще всего, как у конкретна, который тоже не заглядывал в товароведную классификацию.

Тем более, что для нашего дьявола (владельца ИМ), такое меню очень удобно создавать. Здесь не нужно думать. Не нужно разбираться в классификациях товаров, в категориях, каталогах и фильтрах. Можно просто накидать так, как захотелось. Конечно чёрту удобно.

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

Поэтому оно и живо до сих пор.

Что не так?

Это меню более-менее нормально себя ведёт только на больших дисплеях, с разрешением экрана более 1024px по ширине. И то с натяжкой.

Оно очень раздуто. Количество корневых категорий и каталогов (1 уровень) зашкаливает.

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

Чаще всего в интернет-магазинах с таким меню используется фиксированная вёрстка. И без того скованное пространство под контент ограничивают максимально допустимой шириной сайта. В результате на экран влазит не более 4 товаров в строку при доступном месте для 5.

Само по себе применение фиксированной вёрстки именно в интернет-магазинах недопустимо. Список товаров должен быть развёрнут максимально по ширине любого экрана. Ведь человек покупал себе монитор 27 дюймов как раз для того, чтобы комфортно работать с большим объёмом информации. А тут его раз, и ограничили.

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

В результате нарушены все четыре аксиомы. Жизнь интернет-магазина с таким меню возможна, но не рекомендуется.

Мегаменю

Бывает вертикальным или горизонтальным. Но суть одна: при наведении мыши или клике на корневую категорию выпадает огромная карусель с подкатегориями и каталогами 2 и 3 уровней.

Вертикальное мегаменю используется чаще. Это усовершенствованная разновидность левого бокового меню. На первый взгляд всё замечательно.

Что не так?

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

При достаточном месте нам не видно категорий и каталогов второго уровня. Для того, чтобы их посмотреть приходится совершать дополнительные действия — клик или наведение.

Любые дополнительные действия чреваты нервами. Кто-то может не так ловко обращается с мышкой, чтобы чётко попадать в пункты меню. Немного отвёл курсор — блок пропал. Отображена лишь общая картина при больших возможностях.

В этом меню чётко ограничено количество корневых категорий за счёт фиксированной высоты (или ширины для горизонтальной версии). Нам силой приходится создавать для посетителя 9-11 категорий, в зависимости от высоты бокового баннера. Если делать меньше — будет пустая дыра в блоке, больше — нужно делать прокрутку, чтобы увидеть остальные пункты.

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

Применение мегаменю вынуждает использовать в интернет-магазине фиксированную вёрстку.

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

Выглядит аккуратно, но пользоваться тяжело.

Комбинированное мегаменю

Это гибрид горизонтального и вертикального меню. Поэтому у него остаются все достоинства и недостатки от родителей.

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

На месте баннера применяется мозаика из баннеров, ведущих сразу к самым популярным сегодня каталогам. И ещё оно не такое раздутое. Всё это хорошо.

Данное меню уже близко к идеалу. Но у нас остались необходимость использования фиксированной вёрстки и скрытность категории второго уровня на ПК.

Пользоваться всё ещё тяжеловато.

Развёрнутое меню — Доски

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

У нас есть оптимальное число 10 из аксиомы 2. Меньше можно, больше не желательно. Помним? Для создания оптимального меню для покупателя нам потребуется наступить себе на горло и научиться сокращать количество корневых категорий.

Волшебная 6

В построении адаптивных интерфейсов выявлено волшебное число 6. Оно делится на 1, 2, 3 и 6. Это значит, что на узких экранах мы покажем корневые категории в 1 столбец, на более широких 2 и т. д.

Волшебная 6 применяется и при отображении списка товаров в виде иконок. 60 товаров на страницу выводится неспроста. Это число наиболее адаптивно, чтобы внизу списка не было дыр. Показывайте по 1, 2, 3, 4, 5 или 6 товаров в ряд и у вас всё раво не будет дыр внизу страницы. Волшебно.

Правило 6. Количество корневых категорий не должно быть больше 6.

Покупатель пробегается взглядом по первой строке из корневых категорий. Цепляется за нужный столбец и в нём спускается взглядом вниз до нужной строки. За секунды, без лишних кликов и наведений.

Для того, чтобы это меню было удобным, придётся следовать аксиоме 2. В столбце должно быть не более 10-13 подкатегорий или каталогов. В подкатегориях действуют те же правила.

Список каталогов внутри категории или на главной странице интернет-магазина выглядит также аккуратно.

Данное меню соблюдает все аксиомы, адаптивно и, самое главное, удобно для покупателя.

Единственный недостаток — оно требует от продавца более тщательной проработки в целях сокращения.

Идея уже давным давно применяется в офлайне и очень успешна.

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

Научимся сокращать.