1. Покупка обуви онлайн:
как не напугать пользователя
194 вебинар UX Russia
Юлия Суворова
15 мая 2013

2. Часто ли вы это видели?
Товар не может
дешеветь
бесконечно …

3. Два типа
пользователей
Новые
(65-90%)
Вернувшиеся
(10-35%)
Но не всё так просто

4. Новый пользователь
Категория в
каталоге
Корзина
«Thank
you»
Офор-
мление
заказа
Выходы
Конверсия
Карточка
товараГлавная
Маша, 20 лет
Поиск

5. Решение зайти в новый
магазин
Первое впечатление от
магазина
Поиск нужного отдела
Сравнение моделей Выбор понравившейся пары
Примерка
(Ещё раз
сравнение, выбор, примерка)
Путь до кассы
Крем для обуви!
Касса
Использование купленного
товара
Контекст взаимодействия
в магазине
Все эти этапы влияют на
решение о покупке
Хочу
туфли!
Только придя на
кассу клиент
точно уверен в
том, что
совершит
покупку

6. Посадочная
страница (каталог
- туфли)
Карточка
понравившейся
пары
(Ещё раз
Каталог, Карточка)
Сравнение
Выбор одной
пары
Крем для обуви?
Контакты
магазина
Корзина
Оформление
покупки
Thank you page -
Спасибо за ваш
заказ!
Просмотр статуса
заказа и работа в
личном кабинете
Контекст взаимодействия
в интернете
Обычно
конверсию
замеряют
где-то
здесь
Хочу
туфли!

7. Чего боится Маша?
Это обман, я
потеряю свои
деньги!
Я закажу
туфли, а
размер мне
не подойдёт!
Туфли на
картинке
выглядят
красивее, чем
выглядели бы
на мне!
Мне не
привезут обувь
вовремя, а она
нужна мне
срочно!
Я не найду
того, что
мне
подходит!
Обувь
окажется
плохого
качества!
Пойду-ка я лучше
в обычный магазин…
Модели
не будет в
наличии!

8. 1. Каталог
– всё и сразу

9. Сколько людей – столько и сортировок
• Сделайте каталогизацию
по тем
параметрам, которые
понятны большинству
пользователей

10. Сколько людей – столько и сортировок
• Предоставляйте возможности
сортировки и фильтрации по
каталогу по разным, нужным
пользователю, критериям.
Как выбрать
только
розовенькие?

11. Сколько людей – столько и сортировок
• Предоставляйте возможности
сортировки и фильтрации по
каталогу по разным критериям.
• Поместите самые важные
параметры на верх страницы:
– Типа обуви
– Цены
– Цвета Не нашла ни
сортировки по
цене, ни
выбора цвета
– они были за
границей моего
экрана

12. А вот здесь всё
сразу понятно.
И можно
отсортирова
ть по цене или
по рейтингу!
Сколько людей – столько и сортировок

13. Ещё нагляднее
Цвет удобнее
выбирать из
цветных
плашек, чем из
списка…
… а цену –
менять
ползунками, а
не вводить
руками

14. • Дополнительных вариантов сортировки может быть много!
• Это облегчит поиск подходящей пары.
• Особенно, если у вас большой ассортимент.
Зачем столько сложностей?

15. • Дополнительные варианты
не выносите наверх, а
поместите слева от выдачи
– они нужны не всем.
С перламутровыми пуговицами
Мне нужны
туфли на
низеньком
каблучке!

16. • Не прячьте цену и не
отделяйте прайс-лист
от каталога.
Нет, они не позвонят…
… они просто уйдут
к конкурентам.
Ещё я буду
регистрироваться?!
Ну нет. На другом
сайте я точно знаю,
что они стоят 800
рублей.

17. Я покупаю онлайн не только обувь
Выделяйте
различающиеся
характеристики!
Почему я до сих пор не
встречала такого на
обувных сайтах?!

18. Чего боится Маша?
Это обман, я
потеряю свои
деньги!
Я закажу
туфли, а размер
мне не
подойдёт!
Туфли на картинке
выглядят
красивее, чем
выглядели бы
на мне!
Мне не привезут
обувь вовремя, а
она нужна мне
срочно!
Я не найду
того, что мне
подходит!
Обувь окажется
плохого качества!
Пойду-ка я лучше
в обычный магазин…
Модели не
будет в
наличии!

19. • Поставьте в фильтре
опцию «Только в
наличии».
• Сразу указывайте, какие
размеры есть прямо
сейчас.
• Если нужного размера
нет, но он появится –
предложите сообщить на
почту о появлении
размера.
Лучше меньше, да лучше

20. Чего боится Маша?
Это обман, я
потеряю свои
деньги!
Я закажу
туфли, а размер
мне не
подойдёт!
Туфли на картинке
выглядят красивее,
чем выглядели бы
на мне!
Мне не привезут
обувь вовремя, а
она нужна мне
срочно!
Я не найду
того, что мне
подходит!
Обувь окажется
плохого качества!
Пойду-ка я лучше
в обычный магазин…
Модели не
будет в
наличии!

21. 2. Карточка товара
– лицо сайта

22. Цена и ценность
• Цену нужно сопоставлять
не только с качеством, но
и с личностной ценностью.
Туфли как
туфли. И за
что такие
деньги?

23. Цена и ценность
• Цену нужно сопоставлять
не только с качеством, но
и с личностной ценностью.
Да-да, я хочу
быть
женственной и
романтичной!
^___^
МОИ туфли!
Сколько они там
стоят?

24. Покажите товар отдельно
во всех цветовых
вариантах.
А если его стукнуть, он станет
фиолетовым в крапинку
1. В каталоге: 2. В карточке:
А, может, всё
-таки
красные?

25. • Применяйте
технологию
визуального
поиска!
• Помогите Маше
найти похожие
по форме и
цвету модели.
• Kuznech.com –
и это не
реклама:)
Продолжаем выбирать на карточке

26. Важные детали
• Поясните детали, которые
невозможно разглядеть на
изображении.
• Дайте чёткие формальные
характеристики товара.

27. Люблю глазами
• Используйте несколько изображений с разных ракурсов.
• Используйте изображения, связанные с использованием
товара в реальном контексте.

28. Чего боится Маша?
Это обман, я
потеряю свои
деньги!
Я закажу туфли,
а размер мне
не подойдёт!
Туфли на картинке
выглядят
красивее, чем
выглядели бы
на мне!
Мне не привезут
обувь вовремя, а
она нужна мне
срочно!
Я не найду
того, что мне
подходит!
Обувь окажется
плохого качества!
Пойду-ка я лучше
в обычный магазин…
Модели не
будет в
наличии!

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

30. Чего боится Маша?
Это обман, я
потеряю свои
деньги!
Я закажу
туфли, а размер
мне не
подойдёт!
Туфли на картинке
выглядят
красивее, чем
выглядели бы
на мне!
Мне не привезут
обувь вовремя, а
она нужна мне
срочно!
Я не найду
того, что мне
подходит!
Обувь окажется
плохого качества!
Пойду-ка я лучше
в обычный магазин…
Модели не
будет в
наличии!

31. • Дайте на карточке товара:
– Инструкцию, как выбрать размер
– Примерное соответствие
российскому стандарту
– А ещё лучше –
предложение
привезти 2-3
пары
на примерку
бесплатно
и возможность
возврата.
Максимум подсказок
А вдруг будут
малы? Что я с
ними тогда
делать буду?!

32. Чего боится Маша?
Это обман, я
потеряю свои
деньги!
Я закажу
туфли, а
размер мне
не подойдёт!
Туфли на
картинке
выглядят
красивее, чем
выглядели бы
на мне!
Мне не
привезут обувь
вовремя, а она
нужна мне
срочно!
Я не найду
того, что
мне
подходит!
Обувь
окажется
плохого
качества!
Пойду-ка я лучше
в обычный магазин…
Модели
не будет в
наличии!

33. И ещё немного
• Пользователь должен выбирать
все опции на карточке товара, а не
в корзине!
• Покажите на карточке финальную
стоимость продукта.
• Сразу дайте информацию о
доставке и гарантии.
А во сколько
мне в итоге
обойдутся
туфельки?
И как скоро
я их получу?

34. Крем для обуви!
• Разместите на карточке
товара ссылку на
акционную
страницу, которая
находится на втором
уровне структуры сайта –
ваши товары будут лучше
индексироваться.
• Делайте больше
внутренних перелинковок:
– На сопутствующие
товары
– На популярные похожие

35. 3. Корзина
– метафоры и бизнес

36. Клише или правило?
• Используйте
простую, понятную и
заметную кнопку для
добавления в корзину.
• Если располагаете
корзину не в правом
вернем углу, спросите
себя «Зачем»?
• В пустой корзине размещайте
инструкции, как делать
покупки.

37. • Не располагайте больше никаких кнопок рядом с
кнопкой добавления в корзину.
• Обеспечьте очевидную обратную связь после
добавления в корзину.
Всё гениальное просто
Купить или
добавить в
корзину?

38. 4. Оформление заказа
– горылшко воронки

39. Давайте начистоту
• Шаги должны соответствовать
ожиданиям пользователей:
– Подарки и скидки
– Выбор способа доставки
– Выбор адреса доставки
– Ввод биллинговой
информации
• Кнопка перехода к
следующему шагу должна
выделяться.
• Рассчитывайте итоговую
стоимость до ввода
биллинговой информации.
Даже не
заметила, как
зарегистрировалась

40. Мы не рабы, рабы не мы
Регистрация не должна быть обязательной!

41. Чего боится Маша?
Это обман, я
потеряю свои
деньги!
Я закажу
туфли, а размер
мне не
подойдёт!
Туфли на картинке
выглядят
красивее, чем
выглядели бы
на мне!
Мне не привезут
обувь вовремя, а
она нужна мне
срочно!
Я не найду
того, что мне
подходит!
Обувь окажется
плохого качества!
Пойду-ка я лучше
в обычный магазин…
Модели не
будет в
наличии!

42. 5. Thank you page
– будьте любезны

43. А напоследок я скажу
Покажите
доступность и
разные
возможности для
связи с вами.
Если что-то
пойдёт не так – я
знаю, как мне с
ними связаться!

44. «О проекте»
• Не пишите автобиографий.
• Формируйте доверие.
• Отведите отдельную страницу
информации о гарантиях и
возврате.

45. • Дайте максимум
контактной информации.
Везде.
Люди собираются доверить
вам свои деньги.
А готовы ли вы доверить им
информацию о себе?
Телефончик не оставите?

46. • Используйте
социальные сети:
покажите реальные
отзывы о сроках
доставки и удобстве
возврата.
• Попросите клиентов
писать отзыв о покупке
в обмен на скидку при
следующем заказе.
Сарафанное радио
А что пишет
народ на
Вконтакте? Даже
если ссылки нет – я
всё равно поищу
отзывы через
Яндекс.

47. 6. Главная
– не главная?

48. Люди
Ищут поиском
(50%)
Ищут по каталогу
(50%)
Для своих и дотошных
Что это за
магазин
Как быстро
найти нужный
мне товар
А что вообще
здесь есть

49. Не лицо, а спина
Только:
1. Бренд
2. Переход к
информации о
магазине
3. Переход к
каталогу
4. Поисковая строка
5. Акции
… значит, ничего
лишнего здесь быть не
должно.

50. Чего боится Маша?
Это обман, я
потеряю свои
деньги!
Я закажу туфли,
а размер мне
не подойдёт!
Туфли на картинке
выглядят красивее,
чем выглядели бы
на мне!
Мне не привезут
обувь вовремя, а
она нужна мне
срочно!
Я не найду
того, что мне
подходит!
Обувь окажется
плохого качества!
А почему бы
и не попробовать?
Модели не
будет в
наличии!

51. Потому что
Маша должна
выбрать
именно вас!
Не пугайте Машу!

52. Спасибо за внимание!