Выпадающие меню сайтов в интернет-коммерции: практические примеры

Выпадающие меню — ценный элемент навигации по сайтам и интернет-магазинам. Есть целый ряд сложностей с правильным размещением и использованием этого элемента навигации с позиций юзабилити сайта. В блоге маркетингового проекта Econsultancy попытались разобраться с тем, как грамотно спроектировать и применять выпадающие меню на сайтах разной конфигурации; а также рассмотрели все “за” и “против” в плане применения данного элемента навигации для e-commerce сайтов и привели ряд практических примеров.

Важность выпадающих / разворачиваемых меню

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

С позиции дизайна использование выпадающих меню также позволяют “сузить” загруженную визуально площадь на главной странице сайта за счет включения подкатегорий товаров в меню, которое можно легко свернуть мышкой. При этом некорректное использование выпадающих меню можеть стать еще той головной болью (не говоря уже о трудностях использования данного элемента на экране мобильного устройства).

Возможные юзабилити-проблемы, связанные с такими меню

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

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

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

Автоматическое разворачивание или показ полного меню только после клика мышью?

Еще один момент, который стоит учесть при проектировании навигационных меню на вашем сайте — это механизм активации и отображения. Для отображения полного меню пользователю необходимо либо кликнуть на навигационной панели (и тогда меню отобразится), либо навести курсор на категорию товаров в меню, и вложенное меню автоматически развернется без щелчка по нему.

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

При этом посетителям сайта надо в явной форме сообщить, что для активации меню необходимо кликнуть на соответствующем разделе навигационной панели (как это в своих сервисах делает, например, Google). Тем не менее, большинство онлайн-ритейлеров отдает предпочтение меню, которые автоматически разворачиваются при наведении на них курсора мыши. Более того: такая частая практика привела к тому, что если пользователь наводит курсор на раздел навигации на сайте и при этом меню не разворачивается автоматически, возникает предположение, что данная надпись в разделе навигации не является меню. Также разворачиваемое автоматически меню предполагает, что нельзя в 1 клик мышки перейти к категории товаров или услуг, указанной на главной навигационной панели.

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

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

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

А вот пример сайта O2, где наведение мышкой на определенный пункт меню приводит к раскрытию выпадающего пояснения условий тарифного плана, выбранного пользователем на сайте мобильного оператора. И при этом все разворачиваемые вкладки легко закрыть, и все они входят в состав единой сравнительной таблицы. Такое решение трудно назвать идеальным с позиции навигации по сайту.

Большие drop-down меню

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

Правда, разработка и внедрение больших меню должна проходить обязательный этап предварительного тестирования, чтобы не “забивать” внимание пользователя избыточным количеством ссылок.

“За” и “против” больших выпадающих меню

Аргументы “за”:

• Посетители сайта могут достичь даже “глубоких”, внутренних ссылок за меньшее число кликов и быстрее, чем обычно.
• При правильном проектировании выпадающее меню предлагает разные пути навигации и достижения целевой ссылки для одного и того же продукта, в зависимости от того, какой тип систематизации товаров выбрал покупатель: на основе бренда или на основе типа товаров.
• Выпадающие меню можно использовать для фильтрации и сужения области поиска товаров по запросу пользователя, что экономит время и количество кликов.
• При помощи таких меню ритейлеры могут подойти разумно к систематизации товаров и вопросам мерчандайзинга, вынести в заголовки самые популярные и акционные категории товаров, которые при этом будут набирать наибольшее число просмотров.
• Большие выпадающие меню хорошо работают с горизонтальными навигационными панелями. В частности, в Microsoft провели исследование с применением технологии eye—tracking, которое доказывает большую эффективность в использовании горизонтальной навигации по верхней части главной страницы сайта; подтверджает это и Якоб Нильсен (Jakob Nielsen) в рамках своего ‘F—shaped reading pattern’: этот паттерн демонстрирует, что пользователи в массе своей начинают просмотр страницы по горизонтали в верхней части, затем ненадолго переходят в низ, а после вновь возвращаются к блоку слева вверху и читают его вниз.

Аргументы “против”

• Выпадающие меню довольно часто трудно (а в ряде случаев — практически невозможно) использовать для версии сайта, предназначенной для мобильных устройств. С ростом темпов развития мобильной интернет-коммерции и повсеместным применением интернет-планшетов ритейлерам приходится учитывать потребности и предпочтения мобильных пользователей.
• Большие по размеру выпадающие меню могут замедлить перемещение интернет-пользователя по сайту, дав слишком большое разнообразие выбора и усложнив задачу поиска целевых товаров и услуг (создается т.назыв. “парадокс выбора”).
• Такие меню пишутся как правило с применением кода, который “ведет себя” по-разному в различных браузерах.
• Большие выпадающие меню могут визуально не восприниматься, а также накладываться, что приводит к трудностям в их визуальном восприятии и просмотре. Хорошо спроектированное меню на сайте данного типа будет использовать различные размеры шрифтов и разные цветовые решения, а также иконки и графику, чтобы сделать само меню более читабельным.

Примеры использования выпадающих меню

Вот меню M&S, получившееся после редизайна своего сайта еще в 2009 году:

Единое огромное выпадающее меню предоставляло весь набор навигационных ссылок во все разделы интернет-магазина, и в целом в этом меню было порядка 60+ ссылок для перехода по ним. При этом по каждой ссылке можно было легко кликнуть без необходимости какого-либо скроллинга, хотя разработчики сайта для M&S могли бы сделать разные цвета, шрифты и визуальную идентификацию для разных разделов сайта, чтобы было проще просматривать и выбирать требуемый раздел.

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

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

Как пример использования выпадающих меню в интернет-коммерции и мерчандайзинге на сайте можно привести структуру меню на сайте Argos, где самые популярные товары представлены вверху слева:

На сайте ASOS выпадающее меню позволяет покупателям увидеть все подкатегории товаров за один раз:

Сайт Comet использует большое выпадающее меню, но вместо отображения длинного списка подкатегорий, здесь приведены самые свежие предложения и продукты-бестселлеры:

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

Теперь бренд использует более “традиционный” формат разворачиваемого меню:

Сайт Officer’s Club отображает в своем выпадающем меню также спектр цен, чтобы посетители сайта могли отфильтровать товары по цене еще до того, как перейдут на страницу с категориями товаров:

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

А вот перед нами отличный пример выпадающего меню на сайте Sunglass Hut. Здесь показаны изображения различных по стилю солнечных очков в сочетании с рекламными предложениями и информацией, встроенной в навигационный блок:

Большой набор опций предлагает и меню на сайте интернет-магазина Kiddisave, в частности — меню проще просматривать за счет просмотра логотипов рядом с названиями брендов:

Подсказки для тех, кто хочет улучшить юзабилити выпадающих меню

Используйте заголовки

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

Используйте столбцы

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

Отобразите бест-селлеры в списке

Сэкономьте время своих покупателей. Для этого поместите бест-селлеры в одно большое меню, которое будет открываться напрямую в 1 клик с главной страницы. В таком меню клиентам не придется переходить в подкатегории товаров или искать конкретный популярный продукт на сайте.

Будьте лаконичны

Остерегайтесь того, чтобы сделать ваше меню слишком громоздким и длинным. Слишком большое меню может “выпасть” за пределы экрана, если пользователь просматривает ваш сайт на экране нетбука, интернет-планшета или другого мобильного устройства. Установить примерное количество посетителей вашего сайта с такими устройствами (с малой диагональю экрана) можно на основе мониторинга при помощи Google Analytics. Старайтесь проектировать меню сайта таким образом, чтобы оно одинаково отображалось для подавляющего большинства разрешений экрана с любой диагональю.

Добавьте границу или тень

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

Проведите кросс-браузерное тестирование

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

Используйте весь разворот страницы

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

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

Используйте изображения и иконки

Пример интернет-магазина Sunglass Hut, а также приведенный далее скриншот сайта BMW демонстрируют, что выпадающие меню могут быть не только полезны в плане навигации, но и просты для зрительного восприятия, если к текстовым ссылка добавить изображения товара:

Продвигайте акционные предложения и эксклюзивы

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

Настройте частоту и время отображения

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

Якоб Нильсен рекомендует настроить задержку в отображении меню в 0,5 секунды (полсекунды до того, как меню автоматически свернется, если убрать с него курсор мыши). Такая простая настройка позволит избежать постоянного выскакивания меню, если вы случайно провели курсором мыши по заглавному пункту меню на сайте.

Меняйте размер меню при необходимости

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

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

Сфокусируйтесь на основных компонентах

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

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

Источник: блог Econsultancy