Найти в Дзене

Оптимизация дизайна интерфейса. Работа над версией клиента.

В рамках дизайнерской поддержки сайта клиента дорабатываем сценарий заказа лицензии для софта.

Заказчик своими силами сделал дизайн страницы покупки, шаги оформления заказа. Получилось 5 шагов покупки + шаг перехода на шлюз оплаты.

Версия клиента, которую правим.  Первый шаг покупки
Версия клиента, которую правим. Первый шаг покупки

Как переработали

Объединили шаги, некоторые убрали за ненужностью. Например, убрали шаг выбора типа оплаты, потому что при сумме меньше 2000 вариант оплаты только один

Визуально выделили сделали сквозной систему скидок. Усилить хочется (с)

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

Отметили обязательные поля. Раньше они были не выделены. Теперь на не обязательные поля тратить время не будем.

Обязательные поля отмечены *. Теперь видим, какие поля нужно заполнять, а какие нет.
Обязательные поля отмечены *. Теперь видим, какие поля нужно заполнять, а какие нет.

Переименовали кнопки “Вперед” и “Назад”. Теперь кнопки носят смысловые названия в зависимости от следующего шага

Прогресс-бар в версии клиента показывал, что мы где-то находимся. Но сколько шагов прошли и сколько еще пройдем — никакой информации. 

Прогресс бар в версии клиента
Прогресс бар в версии клиента

Поскольку  мы сократили количество шагов и на каждой кнопке подписан следующий шаг, прогресс бар убрали, чтобы не отвлекал внимание.

Всего шагов стало 2, и 3 в варианте для тех, кто платит больше 2000 руб. и должен выбрать способ оплаты.

Закончим работу и выложим результат отдельным постом.

Есть вопросы, пишите нам в robotwashere@ya.ru или в tg @robotwashere

Будем рады и признательны за +, если вам понравилась наша статья. Команда дизайнеров ux/ui — Robot was here