Привет!

3 вида навигации в интернет-магазинах [digital note for ecommerce #59]

Валерия СластенниковаВалерия Сластенникова

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

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

Первый сайт - Winestyr. Онлайн-поставщик вин мелких производителей. Разочарованные крупными и известными компаниями, они обратились к интернету, чтобы поделиться с людьми малоизвестными изысканными винами. Дизайн их сайта выполнен в стиле, который можно назвать “новый традиционный”. Его хотели создать как по учебнику, по последнему его выпуску, со всеми лучшими трендами и моделями пользовательского интерфейса.

Дизайнер часов Paul Valentine. Оказались приверженцами более экспериментального подхода. Так как это модный интернет-магазин, он должен быть более современным и необычным в дизайне, чтобы создать шикарный пользовательский опыт, который привлекает fashion-покупателей. Мы видим много уникальных и новых дизайнерских решений, каждое из них работает определенным образом в контексте.

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

Мы рассмотрим, как каждый сайт справляется с 5 ключевыми аспектами в навигации:

  • главное меню,
  • дополнительное меню,
  • функция поиска,
  • анимация,
  • элементы домашней страницы.

Рассмотрение трех подходов должно открыть новые возможности и вдохновить на идеи, которые можно применить в собственном интернет-магазине.

1. Главное меню

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

В основном никто не хочет перегружать основное меню категориями, даже если их очень много. Наиболее популярное мнение - главное меню не должно содержать более 10 пунктов. Для остального есть выпадающие списки и подкатегории.

Winestyr

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

Paul Valentine

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

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

House of Fraser

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

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

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

2. Дополнительное меню

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

Winestyr

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

Paul Valentine

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

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

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

House of Fraser

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

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

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

3. Функция поиска

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

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

4. Анимация

Анимация является одним из инструментов, который показывает как работает сайт без фактического объяснения того, как работает сайт. Анимации создают визуальные подсказки, которые пользователи воспринимают практически на подсознательном уровне. Их используют по-разному на каждом сайте. Winestyr и House of Fraser практически полностью их проигнорировали, оставив только сглаживание резких переходов.

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

5. Элементы домашней страницы

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

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

Winestyr

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

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

Paul Valentine

У них более традиционная главная страница. Разделили ее на шесть последовательных экранов:

  • посадочный - четкое изображение товара с акцентом на его качество,
  • образец страницы категорий - чтобы показать несколько экземпляров со ссылками страницы товаров,
  • продвижение маркетинговой кампании 1,
  • о компании,
  • продвижение маркетинговой кампании 2,
  • футер.

House of Fraser

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

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

Заключение

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

3 Styles of eCommerce Navigation: A Comparison of Real Sites