Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
  1. Главная >
  2. Блог >
  3. UI/UX >
  4. 11 необычных примеров навигации интернет-магазина

11 необычных примеров навигации интернет-магазина

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

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

The First World Problems Store

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

Полностраничный, великолепно выполненный слайдер позволяет выбрать актуальную «проблему» и ее решить при помощи двух контурных кнопок (ghost buttons):

The First World Problems Store

Ted Baker

Чтобы сделать онлайн-покупки более осязаемыми и реалистичными, компания Ted Baker запустила виртуальный магазин, который использует панорамные фотографии с углом обзора 360 градусов. Таким образом, покупатели могут «пройтись» между рядами и посмотреть множество моделей дизайнерской одежды почти как при настоящем шоппинге.

Ted Baker

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

Fat Face

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

Fat Face

Zara

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

Zara

Руководитель отдела по работе с клиентами Бора Сантаолалья (Borja Santaolalla) объясняет, в чем заключается логика такого своеобразного подхода к поиску:

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

Таким образом, разработчики превратили поисковую строку в настоящий «источник вдохновения». Однако здесь возникает одна весьма существенная проблема: пока клиент не наберет текст, страница так и будет оставаться пустой, а для большинства пользователей это ассоциируется с неполадками на сайте.

В следующем примере та же дизайнерская команда усовершенствовала свои наработки.

Pull & Bear

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

Pull & Bear

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

Mendo

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

Mendo

B & O Play

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

B & O Play

Briekfielder

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

Briekfielder

Whistles

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

Whistles

Björn Borg

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

Björn Borg

Mack

Здесь вы можете навести курсор на отдельный элемент интерьера, получить о нем информацию и добавить в корзину, а при желании (и достаточном уровне экстравагантности) можно даже приобрести всю комнату целиком.

Mack

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

По материалам: econsultancy.com 

blog comments powered by Disqus
Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
copyright © 2011–2024 Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "Феникс-Маркетинг". ИНН:7725812838, КПП:772501001, ОГРН: 513774619323915280, Москва, ул. Ленинская слобода, д. 19, стр. 1, этаж/пом 3/25

ООО «Феникс-Маркетинг» — IT-компания с многолетним опытом работы, разрабатывающая инновационные решения для управления процессом лидогенерации (пост-клик маркетинг). Разработанное нами технологическое программное решение LPGENERATOR позволяет создавать целевые страницы в визуальном редакторе и управлять заявками (лидами) в CRM-системе в целях проведения эффективных, высококонверсионных рекламных кампаний