Элементы UX дизайна, привлекающие поток клиентов

Большинство из данных элементов помогают привести клиента кратким путем к покупке товара.
Примеры были взяты с интернет-магазинов: Airbnb, AO.com, Argos, ASOS, Barnes & Noble, BestBuy, Booking.com, Debenhams, Everlane, Lush, Nike, Rentalcars, RS Components, Schuh, Size, Tesco, TheTrainline и Toys R Us.

  1. Время работы местного магазина в шапке сайта

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

usability

2. Слайдер категорий

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

slider

3. Кнопка отслеживания заказа в шапке

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

track_order_ao-com_3

4. Побуждение к заказу еще на этапе входа в систему

И чтобы дважды убедиться в том, что клиент завершит свое действие, кликая на кнопку входа, он получает еще один стимул от Rentalcars — над полем электронного адреса и пароля: «В ноябре 5 счастливчиков выиграют бесплатный прокат автомобилей».
Все, что ему нужно сделать для участия в розыгрыше, это войти в систему и забронировать.

track_order_ao-com_4

5. Баннер, который показывает ценность предложения

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

argos_delivery_info_5

6. Широкомасштабное меню в шапке сайта

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

screen_shot_6

7. Миниатюры популярных продуктов в поиске

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

best_buys_in_search_7

8. Результаты из категории популярных товаров

Вот еще один способ, как RS помогает сузить результат персонального поиска. Как только клиент возвращается к своему запросу «LED», ему говорят, что здесь 25000 результатов в 200 категориях.
Чтобы уберечь его от перебирания всех этих товаров, RS предлагает 10 популярных категорий, сужая выбор. При этом можно кликнуть на кнопку «перейти к товарам», если все же хочется пересмотреть весь список.

rs_categorise_in_search_8

9. Поиск как главная

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

airbnb_search_10

10. Фильтр товаров по доставке в день заказа

Задержались с покупкой подарка? Argos и его фасетная навигация позволят отфильтровать только те товары, которые доступны для доставки в тот же день или быстрее.

facets_argos_10

11. Фильтр товаров, которые можно забрать в местных магазинах (доступен и на мобильном устройстве)

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

pick_up_today_11

12. Уведомить меня

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

notify_me_2_bestbuy_12

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

faceted_size_13

14. Метка «скоро исчезнет»

Простой, но хорошо продуманный штрих. Lush добавляет черно-белые метки «скоро исчезнет» к своим сезонным товарам, таким как мыло на Хэллоуин. Это сообщение может добавить ощущение срочности постоянному покупателю, которому нравятся определенные сезонные товары.

lush_leaving_soon_14

15. Эффект при наведении на изображение

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

16. Подборка «популярных товаров» на целевой странице

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

best_product_landing_16

17.  Интерактивное руководство по размерам

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

size_guide_lightbox_asos_17

18.  Отсчет заказа «Хотите это к завтрашнему дню?»

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

deb_countdown_18

19. «Купите образ»

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

asos_outfit_19

20. Перекрестная продажа по ингредиентам

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

ingredient_cross_sell_20

21.  Презентационные фото товаров

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

product_image_instructions_best_buy_21

22. Всплывающее окно с выбором размера при добавлении товара в корзину

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

size_select_22

23. Милая персонализированная миниатюра

Посмотрите на это! Здание парламента на миленькой миниатюре при оплате путешествия в Лондон на сайте TheTrainline.

trainline_london_pic_23

24.  Контактный номер в шапке при оформлении заказа

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

phone_number_in_checkout_24

25. Конкретная дата и время в сервисе «click andc ollect» (онлайн заказ с самовывозом)

Одна из неопределенностей для пользователей системы click and collect – прибудет ли их заказ вовремя. Некоторые продавцы дают «1-3 рабочих дня», оставляя пользователя в ожидании уведомления с надеждой, что пройдет все-таки один день. Debenhams решает это неудобство, четко давая потребителю дату и время, к которому его посылка будет готова к самовывозу.

click_n_coll_deb_25

Если вам еще хочется интересных примеров из e-commerce, то читайте полную статью тут.


Администрация SEOlib.ru

Администрация SEOlib.ru

Администрация сервиса для мониторинга позиций и аналитики SEOlib.ru