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

Юзабилити 
интернет-покупки
Саша Куценко

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 — это
информированность в каждую секунду,
легкость всех действий и постоянные
подсказки в мелочах»

Задавайте вопросы.
Пишите на sasha@aidem.ru
Спасибо
Саша Куценко,  
креативный директор
facebook.com/gurick
Дизайн-студия Aidem  
facebook.com/aidem.ru
aidem.ru
Фотографии Петербурга — Иван Смелов
Презентация на slideshare.net/аidem_ru

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

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (17)

More from Евгений Летов

More from Евгений Летов (17)

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