Как простые UX-законы помогают прокачать дизайн

Как простые UX-законы помогают прокачать дизайн

Маленькая история перерождения двух точек взаимодействия в Customer Journey Map

Команда нашего сервиса по продажам электронных услуг бойко обновляла внешний вид пользовательского кабинета. Эта работа была продолжением изменений сайта, которые затронули главную и основные разделы. Улучшение происходило без радикального вмешательства в архитектуру интерфейсов, чтобы темпы разработки других задач проекта оставались на прежнем уровне. Только верстка для десктопа и адаптива, только хардкор.

Очередная итерация добралась до двух важных страниц — оплаты услуги и пополнения баланса. Особого внимания требовали панели выбора способа пополнения баланса и способа оплаты.

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

В обоих панелях пользователь выполнял похожие действия: переключался между пунктами и читал подробности в окошке справа, затем выбирал нужный вариант, вводил сумму для пополнения баланса и продолжал свой путь через кнопки “Продолжить”, “Оплатить” или “Выписать счет”. В случае пополнения баланса выбор способа был более очевидным из-за радиокнопок. В панели выбора способа оплаты выбор подразумевался менее очевидными зелеными стрелками слева и выделением варианта болдом.

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

  1. Необходимо бодро удовлетворить потребность пользователя оплатить услугу и пополнить баланс через выбор подходящего способа;
  2. Пользователь должен как можно меньше думать, а качество его опыта должно повышаться;
  3. Способ взаимодействия должен остаться привычным на уровне всей системы.

Дизайн для нас рисовали ребята из небольшой студии. В брифе указывали, что нужен редизайн без радикальностей. Для этой задачи прототип не готовился. Но со своей стороны мы могли вносить предложения по улучшению UX/UI, которые затем внедрялись на этапе дизайна или верстки.

Первые варианты обновленных панелей

Панель выбора способа пополнения счета — чистый редизайн. Радиокнопки остались
Панель выбора способа оплаты. Стрелки остались

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

Финальные варианты

Внешний вид взят у панели выбора способа оплаты. Кнопка “Продолжить” сгруппирована вместе с суммой и описанием способа в один прямоугольный модуль
Кнопка “Оплатить” также включена в один прямоугольный модуль

Какие законы и гештальт-принципы мы взяли в оборот?

  1. Закон близости и принцип общей области. Мы хотели, чтобы прямоугольный модуль с зеленой рамкой и кнопка ключевого действия воспринимались как связанные друг с другом. Элементы воспринимаются группой, если они находятся в области, имеющей чёткие границы;
  2. Мы использовали прямоугольники, чтобы сгруппировать нужные элементы. Увеличили количество свободного пространства и размер кнопок.
  3. Принцип сходства. Мы сделали панели похожими друг на друга, чтобы элементы воспринимались как относящиеся к одному типу — выбор необходимого способа;
  4. Принцип непрерывности. Для того, чтобы оставить связь между колонкой вариантов способов оплаты и пополнения баланса и прямоугольником с описанием каждого способа, мы оставили галочки и зеленый треугольник. Так дизайн читается легче и внимание пользователя никуда не девается.

Итог

Благодаря проверенным UX-законам и принципам мы немного улучшили экосистему личного кабинета. Конечно, панели не получились идеальными. Нужны правки в отступах в соответствии с правилами внешнего и внутреннего. Но мы остались довольны тем, что освежили старый вид страниц и улучшили опыт наших клиентов.

“Как простые UX-законы помогают прокачать дизайн” Posted first on ” UX on Medium “
Author: Олег Кептюха

Author: Pawan Kumar

Leave a Reply

Close Menu
%d bloggers like this:
Skip to toolbar