Transcript
Page 1: Интерфейсы для реального мира (часть 1) - оформление заказа

Интерфейсы для реального мира - часть 1

Sense Production Помогаем значительно сократить путь

к большим интернет-продажамМы в FB - www.facebook.com/shortway2salesupНаш сайт - www.sensepro.ru

Page 2: Интерфейсы для реального мира (часть 1) - оформление заказа

Что такое юзабилити?

1. Когда визуальные приоритеты не соперничают за внимание пользователя, а

совместно двигают его к общей цели – покупке.

2. Когда понятна логика элементов навигации.

3. Когда контент, блог и функционал сайта соответствуют задачам, которые

хочет решить пользователь.

Page 3: Интерфейсы для реального мира (часть 1) - оформление заказа

Контактные данные

Было до Стало после

Page 4: Интерфейсы для реального мира (часть 1) - оформление заказа

Шаг 1

•Нет акцентов

•Нет дизайна

•Еще пару ошибок

Что не так?

Page 5: Интерфейсы для реального мира (часть 1) - оформление заказа

Шаг 1

•Расставлены акценты

•Вход по E-mail без пароля

•Трансляция УТП

Как лучше?

Page 6: Интерфейсы для реального мира (часть 1) - оформление заказа

Доставка

Было до

Стало после

Page 7: Интерфейсы для реального мира (часть 1) - оформление заказа

Показываем пользователю

только те элементы,

которые нужны конкретно

здесь и сейчас.

Убираем лишнее

Page 8: Интерфейсы для реального мира (часть 1) - оформление заказа

Сценарий поведения – или правильная логика

1. Изменение содержания страницы в зависимости от выбора пользователя.

2. Вся команда разработчиков понимает логику (и дизайнер и программист)

Page 9: Интерфейсы для реального мира (часть 1) - оформление заказа

Изменение содержимого страницы в зависимости от выбора города

Page 10: Интерфейсы для реального мира (часть 1) - оформление заказа

Убираем лишнее

Показываем карту при

выбранном пункте выдачи

Показываем

соответствующие поля

Page 11: Интерфейсы для реального мира (часть 1) - оформление заказа

FOTOS.UA

Page 12: Интерфейсы для реального мира (часть 1) - оформление заказа

Эволюция оформления заказа

Page 13: Интерфейсы для реального мира (часть 1) - оформление заказа

Одношаговое оформление заказа

Небольшие корректировки или значительное улучшение юзабилити?

Page 14: Интерфейсы для реального мира (часть 1) - оформление заказа

Одношаговое оформление заказа

При использовании одношагового оформления заказа конверсия показывала не лучшие результаты.

•Перегрузка пользователя информацией

•Не расставленные акценты

•Увеличение конверсии требует значительных изменений в юзабилити

Page 15: Интерфейсы для реального мира (часть 1) - оформление заказа

Многошаговое оформление и его преимущества

Возможность логина через соц. сети и в ручную.

Page 16: Интерфейсы для реального мира (часть 1) - оформление заказа

Многошаговое оформление и его преимущества

• Возможность захвата E-mail в ДМ-системе.

• Обновление номеров или почты не по блокам, а раздельно.

Page 17: Интерфейсы для реального мира (часть 1) - оформление заказа

Доставка: Выбор города• «Определить город» -

GEO-IP по клику

• Список городов сгруппирован по областям.

Page 18: Интерфейсы для реального мира (часть 1) - оформление заказа

Доставка: Выбор времени

Page 19: Интерфейсы для реального мира (часть 1) - оформление заказа

Доставка

Поясняющие подсказки говорят пользователю, что произойдет дальше

Если покупатель хочет забрать свою покупку самостоятельно – важно показать ему все доступные пункты выдачи.

Page 20: Интерфейсы для реального мира (часть 1) - оформление заказа

Оплата

Поясняющие подсказки говорят пользователю, что произойдет дальше

Page 21: Интерфейсы для реального мира (часть 1) - оформление заказа

Изменение в акциях – изменение в оформлении заказа

Особые условия, по которым продаются акционные товары (скидка, подарок), должны отображаться в процессе оформления заказа.

Page 22: Интерфейсы для реального мира (часть 1) - оформление заказа

Вопросы?

Sense Production Помогаем значительно сократить путь

к большим интернет-продажамМы в FB - www.facebook.com/shortway2salesupНаш сайт - www.sensepro.ru