Юзабилити интернет-магазина

Юзабилитиинтернет-покупки

Саша Куценко

1Удобство подбора товара

Юзабилити блока фильтров

Большинство фильтров расположены либо справа от товарной сетки


Большинство фильтров расположены либо справа от товарной сетки, либо слева


(вечный спор)

Мало товаров —колбаса


Много товаров — дырка


Ещё иногда делают сверху


Но в них надо постоянно кликать


Посмотреть варианты — клик

Выбрать или убрать — кликЧтобы применить — клик

Настоящие эстеты скрывают


Настоящие эстеты скрывают : )


Одно дело в один момент времени

Мы считаем, что когда ты фильтруешь, ты фильтруешь

У «Траектории» было так


После каждого клика контент обновляется, покупатель вынужден ждать — это раздражает

Мы предложили концепцию, когда фильтры находятся в слое



Действие «Отфильтровать» — главное и единственное = хочется нажать



На основные вопросы: сколько товаров / большой ли ассортимент / от какой суммы начинается ответы даны



На основные вопросы: сколько товаров / большой ли ассортимент / от какой суммы начинается ответы даны

Популярные запросы: не хочешь фильтровать — клик и сразу нужная выборка

По кнопке «Отфильтровать» открывается слой фильтров



Верх такой же, он прикрепится и будет с нами



Все фильтры разложены, по частоте использования покупателями



Все фильтры разложены, по частоте использования покупателями

Используется вся площадь (большинство списков не надо сворачивать)


Много места для подсказок и расшифровок (цвет, бренд)



Изменения после каждого клика видны, но не мешают пользоваться фильтром



Изменения после каждого клика видны, но не мешают пользоваться фильтром

После клика слой закрывается мгновенно, товары отфильтрованные — не нужно ждать

Отфильтровано




Шапка такая же, как была в фильтрах. Третьей строкой показано, что выбрано.




Кнопка «Изменить» мгновенно откроет слой с выбранными фильтрами




Кнопка «Изменить» мгновенно откроет слой с выбранными фильтрами

Клик на «Сбросить» вернет состояние по умолчанию

используется вся площадь, а не 25% экрана

Все фильтры и их состав виден сразу



Можно использовать графику: цвета, иконки и т.д.без компромиссов, место есть




Товары обновляются в фоне — не бесит и не мешаетзакрыл слой и видишь уже отфильтрованное



Нет ограничений: масштабируемое решениедобавлять, удалять, делать уникальные фильтры и т.д.


Товары обновляются в фоне — не бесит и не мешаетзакрыл слой и видишь уже отфильтрованное

2Покупка без перехода на карточку

Юзабилити товарной сетки

Большинство покупателейс категории входитв карточку


Для них важны цвета


Для них важны цвета, наличие видео


Для них важны цвета, наличие видео, стоимость товара и доставки


Поэтому наибольшие площади — ссылки в карточку


Навели на товар


Площадь блокане изменилась



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






Все информация (кроме старой цены) осталась доступна




Появилась кнопка «Купить»


Все информация (кроме старой цены) осталась доступна

Но есть те, которые знают за чем пришли.

Они хотят сразу покупать


!

Нажали «Купить»


Фотография ушла на второй план — фокус на цветах и размерах



Цвета и размеры пролистываются, ничего не всплывает






Кнопка видна, но недоступна = делай выбор





Кнопка видна, но недоступна = делай выбор

Если передумал, можно закрыть

Выбрали цвет


Сверху фотография товара выбранного цвета


Выбрали размерСтала доступна кнопка «Добавить в корзину»

Выбрали цветСверху фотография товара выбранного цвета

Добавилив корзину


Сверху стала фотография выбранного цвета



Выбор сделан, цвета не нужны, вместо них маркер «в корзине» с выбранным размером




Выбор сделан, цвета не нужны, вместо них маркер «в корзине» с выбранным размером


Старая цена снова видна

Снова навели


На месте кнопки «Купить» вводится кнопка «Оформить» — переходв корзину

Готово


Добавление произошлов площади карточкибез дополнительных всплываний и окон

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

2,5Коридор от витрины к кассе

Юзабилити покупки одного товара

микро-кейс

Для многих магазинов среднее кол-во товаров в заказе менее 2 шт


В большинстве случаев нажатие кнопки «Купить» = закончить покупку


В таких случаях следует предлагать «Оформить» сразу после «Купить»


Это слой


Мгновенное открытие

Это слой


Мгновенное закрытие, возврат к тому же месту страницы


Это слой


Мгновенное закрытие, возврат к тому же месту страницы


Нет шапки, подвала — ничего, что отвлекает = одно главное сообщение

Главное


Заголовок и иконка сразу говорят «все получилось»

Главное


Основная информация есть = вижу, что покупаю


Главное




Нет ссылок вообще = некуда выйти — принимай решение

Главное




Нет ссылок вообще = некуда выйти — принимай решение

Всего два действия «Оформляем» или «Покупаем ещё»

На втором плане


Аксессуары под правильным заголовком = допродажа

На втором плане


Добавление в корзину в один клик

Аксессуары под правильным заголовком = допродажа

люди просто не забывают оформлять заказ

Количество брошенных корзин резко падает



Среднее кол-во товаров в чеке не снижаетсяслой — не принуждение, а подкасказка



Среднее кол-во товаров в чеке не снижаетсяслой — не принуждение, а подкасказка

Продажа аксессуаров незначительно растетконверсия блока аксессуаров около 1%

3Рекомендации

Юзабилити карточки товара

Главное #1


Название товара максимально высоко

Главное #1


Фотография максимально крупно и высоко(не обязательно слева)


Главное #1




Кнопка «Купить» — главный фокус внимания покупателя

Главное #1




Кнопка «Купить» — главный фокус внимания покупателя

Стоимость доставкии возможность самовывоза видны сразу

Главное #2


Ключевые характеристики видны сразу (могут быть объединены)

Главное #2


Гарантия близко с ценой(частые вопросы)


Главное #2




Артикул наверху,но не яркий

Главное #2




Артикул наверху,но не яркий

Возможность сравнения под рукой

Главное #3


Видно, что есть другие конфигурации (объем, цвет)

Главное #3


Оформление кредита — альтернатива покупки (рядом с «Купить»)


Главное #3




Бонусы за покупку рядом с ценой, но с ощущением «+»

Главное #3




Бонусы за покупку рядом с ценой, но с ощущением «+»

Суть акции и срок действия а не дата запускаи маркетинговое название

Далее


Рейтинг лучше делать пятибалльный и с цветовым кодированием

Далее


Отзывы можно братьс Яндекс.Маркета (есть API)


Далее




Везде, где не однозначно подсказки при наведении

Далее




Везде, где не однозначно подсказки при наведении

Используйте слова «бесплатно», «в наличии» — это работает

Не менее важно


Если есть оффлайн, сразу показывайте, где есть товар



Предлагайте бронировать, и сразу разъясняйте все условия




Предлагайте бронировать, и сразу разъясняйте все условия


После бронирования хвалите + выводите всю нужную ему информацию

Аксессуары


Выкладывайте аксессуары, прямо на странице товара



Предлагайте добавлять в один клик, но позволяйте смотреть подробнее




Предлагайте добавлять в один клик, но позволяйте смотреть подробнее


Группируйте аксессуары по категориям, но по умолчанию выводите самые нужные

Не забывайте


Если товара нет в наличии, не скрывайте его страницу, а предлагайте альтернативу



Если товар по предзаказу, всегда пишите дату начала продаж, и делайте минимум полей




Если товар по предзаказу, всегда пишите дату начала продаж, и делайте минимум полей


Если товар уцененный, пишите причину уценку, делайте фотографиии указывайте изменения гарантии

Карточка — часть единого пространства магазина и опытный консультант

одновременно.

Карточка — не отдельная комната,в центре которой товар.

4Отдельный от оформления экран

Юзабилити корзины

Корзина — это результат выбора, а не оформление


Главное #1


Храним товары в корзине всегда

Главное #1


Товары не удаляем, а вычеркиваем


Главное #1




Количество товара лучше и полем и кнопками

Главное #1




Количество товара лучше и полем и кнопками

Самый контрастный элемент — кнопка «Оформить заказ»

Главное #2


Если есть товар, блокирующий оформление, предлагайте другой

Главное #2


Не скрывайте недоступные кнопки — делайте серыми


Главное #2


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



Главное #2


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

Если для привоза требуется оплата, говорите об этом здесь



Прикассовые товары


Правильный заголовок = понятно почему предлагают



Добавление к заказу в один клик = легко




Добавление к заказу в один клик = легко


Подобранные с умом = действительно пригодится

Больше ничего не надо


Хорошая корзина, как хороший кассир: объясняет, предлагает, уведомляет

5Отделение от корзины, разбивка на шаги

Юзабилити оформления заказа

Если все ОК,не показывайте ещё раз корзину


Покупатель нажал «Оформить» — оформляйте

Но обязательно


Выводите сколько товаров и на какую сумму




Показывайте баллы и бонусы за покупку




Показывайте баллыи бонусы за покупку

Предоставляйте переход на корзину, но не ярко

Разбейте на шаги




Но показывайте сколько всего шагов и какие они




Задавайте вопросы по одному — так легче




Задавайте вопросы по одному — так легче

Делайте ответ простым = одна кнопка «Продолжить»

Сначала спрашивайте о получении




Если самовывоз наиболее популярен, показывайте его по умолчанию




Показывайте и карту, и список — разным людям удобно по-разному




Показывайте и карту, и список — разным людям удобно по-разному

Выводите режим работы, телефон и адрес магазина

Помогайте покупателю


Показывайте ближайшую станцию метрои расстояние от метро




Показывайте фотографию магазина с улицы, с ней проще сориентироваться




Показывайте фотографию магазина с улицы, с ней проще сориентироваться

Если товар нужно перебросить, пишите что это бесплатно, и позволяйте оформить самовывоз

Если доставка, сначала спросите адрес




Делайте минимум полей, необходимых для расчета доставки




Подписываете под полями телефона и почты для чего вы их спрашиваете




Подписываете под полями телефона и почты для чего вы их спрашиваете

Проверяйте правильность написания почты и телефона, но не занудничайте : )

Берегите деньги покупателя


Если до бесплатной доставка не хватает чуть-чуть, предложите добавить




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




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

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

Последний вопрос про оплату


Располагайте способы оплаты по частоте их востребованности




Выделяйте главные способы оплаты крупнее




Выделяйте главные способы оплаты крупнее

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

Важная мелочь


Позволяйте возвращаться назад, но не делайте на этом акцент

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

Важная мелочь


Позволяйте возвращаться назад, но не делайте на этом акцент

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

Дайте ещё раз спокойно на всё взглянуть




Уберите все точки выхода: нет шапки, нет подвала, нет ссылок у товаров = некуда деться



Уберите все точки выхода: нет шапки, нет подвала, нет ссылок у товаров = некуда деться

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


Если с заказом везете карту лояльности — скажите об этом. Подчеркните, что её надо активировать.


Пишите так, как говорите в обычной жизни: вопрос — «Проверьте ваш заказ», ответ — «Да, все правильно»



Пишите так, как говорите в обычной жизни: вопрос — «Проверьте ваш заказ», ответ — «Да, все правильно»

Главный акцент на кнопке подтверждения, «Изменить» значительно менее явная


После оформления


Визуально показывайте, что все хорошо: иконка, зеленый цвет, крупный шрифт




Говорите что будет дальше: свяжется менеджер, придет смс и т.д.




Говорите что будет дальше: свяжется менеджер, придет смс и т.д.

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


Не отпускайте сразу

Пригласите подписатьсяна вас в социальных сетях

но помните, что покупку он уже сделал





Предложите почитать обзоры и статьи






Убедите подписаться на полезную ему рассылку






Убедите подписаться на полезную ему рассылку

Покажите фишки: сервисы по подбору, расчету и т.п.

5+Сухие рекомендации

Юзабилити страницы акции

бонус

Важно #1


Баннер акции уже не важен. Главное — в чем предложение и до какого числа

Важно #1



Все товары акции в привычной сетке — можно купить, сравнить и т.д.

Важно #1



Все товары акции в привычной сетке — можно купить, сравнить и т.д.

Если акция с одним товаром, то он в виде экспресс-карточки

Важно #2


Если товары разных групп, то по группам можно фильтровать прямо здесь

Важно #2



В каждую группу можно перейти — дальнейшая фильтрация или интереск аналогам

Важно #2



В каждую группу можно перейти — дальнейшая фильтрация или интереск аналогам

И обязательно 2-3 другие акции + переход на все акций

«Юзабилити в e-commerce — это информированность в каждую секунду, легкость всех действий и постоянные

подсказки в мелочах»

Задавайте вопросы. Пишите на [email protected]

Спасибо

Саша Куценко, креативный директор facebook.com/gurick

Дизайн-студия Aidem facebook.com/aidem.ru

aidem.ruФотографии Петербурга — Иван Смелов

Презентация на slideshare.net/аidem_ru

mailto:[email protected]

http://facebook.com/gurick

http://facebook.com/aidem.ru

http://aidem.ru

http://smelov.photo

http://slideshare.net/%D0%B0idem_ru

Business

Юзабилити интернет-магазина