UX-аудит за час. Оцениваем эффективность самой важной фичи крупного сервиса

Йоу! Это Алина – дизайн лид в диджитал-продакшн ФОДЖИН. Сегодня покажу как мы с командой дизайнеров провели аудит за час и какой крутой результат получили за такой короткий срок.

В отделе у нас есть традиции – проводить технические ивенты, одним из таких и стал аудит. Я собрала вместе 5 дизов, чтобы они проанализировали фичу на одном сервисе, нашли точки роста и предложили идеи по улучшению. Ключевым условием было ограничение по времени и никакой вводной информации.

DPD я выбрала практически случайно – незадолго до аудита заказывала через него пару вещей, меня привлекло то, что на сайте есть что отсмотреть с точки зрения дизайна.

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

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

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

Первое, что бросается в глаза – это нарушение структуры страницы. Общий заголовок и названия разделов имеют одинаковый размер, а горизонтальные полосы не разделяют форму, а превращают страницу в мешанину.

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

Запутанная форма точного расчета. Находящиеся почти рядом заголовки на сером фоне, жирная обводка такого же цвета и функция сворачивания окна сбивают с толку.

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

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

Отсутствие консистентности и общей информации в карточке услуг. Ребята используют разные цвета и виды данных (цифры и иконки), что создает эффект сборной солянки и плохо влияет на читаемость контента. Кроме этого, без лишнего клика тяжело понять разницу тарифов.

Совмещение секций. На последнем шаге выскакивает целый пласт из предварительно провалидированных полей смешанный с информацией об оплате.

Нехватка акцентов. Сумма теряется в информации, несмотря на выделение красным цветом. Стоимость и ее детализация не воспринимается как что-то единое и взаимосвязанное.

На аудит был дан всего час, поэтому в ход пошли лучшие практики без привлечения респондентов и исследований. Ребята выделили три глобальные проблемы и исходя из них сформировали список дизайн решений:

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

Карточки для выбора размера сделали компактнее. Выделили основную информацию красным цветом и убрали иконки.

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

Теперь проще оценить преимущества услуг. Вынесли различия и перекомпоновали информацию.

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

Отобразили последовательность информации об оплате. Сделали акцент на сумме и показали зависимость детализации от общей стоимости.

Мы пересобрали логику всей формы, добавили понятную иерархию и акценты, освежили визуал, систематизировали блоки, переделали карточки – информация в них легче считывается, обеспечили юзеру скоростное понимание разницы услуг, добавили степпер, который позволяет последовательно заполнять поля и все это за час. Офигеть!

Если вас драйвит дизайн, вы устали от топов со шрифтами и чеклистов и хотите услышать больше о жизни дизайнеров в агенстве – подписывайтесь на наш тг-канал.

А, если вам нужен UX-аудит, крутой дизайн, сильная разработка или качественное тестирование, то пишите нам!