Йоу! Это Алина – дизайн лид в диджитал-продакшн ФОДЖИН. Сегодня покажу как мы с командой дизайнеров провели аудит за час и какой крутой результат получили за такой короткий срок.
В отделе у нас есть традиции – проводить технические ивенты, одним из таких и стал аудит. Я собрала вместе 5 дизов, чтобы они проанализировали фичу на одном сервисе, нашли точки роста и предложили идеи по улучшению. Ключевым условием было ограничение по времени и никакой вводной информации.
DPD я выбрала практически случайно – незадолго до аудита заказывала через него пару вещей, меня привлекло то, что на сайте есть что отсмотреть с точки зрения дизайна.
Задача
Определить проблемы в UX и визуале, предложить идеи, которые помогут улучшить опыт использования и сделать новый дизайн, который будет решать эти проблемы.
План работы
Ребята на скорую руку накидали шаги и тайминги, которые позволят уложиться во время и организовать процесс.
Выявление проблем
Пользовательский путь мы проходим со стороны физического лица.
Первое, что бросается в глаза – это нарушение структуры страницы. Общий заголовок и названия разделов имеют одинаковый размер, а горизонтальные полосы не разделяют форму, а превращают страницу в мешанину.
Неинформативные иконки. Одинаковые изображения коробок не помогают при выборе габаритов груза, а просто отвлекают внимание и занимают пространство.
Запутанная форма точного расчета. Находящиеся почти рядом заголовки на сером фоне, жирная обводка такого же цвета и функция сворачивания окна сбивают с толку.
Переход на следующий шаг вызывает дискомфорт. Контент скроллится вниз настолько сильно, что фокус с раздела перемещается на объемный футер.
Карта выпадает за рамки шага. Это нарушает теорию близости, складывается впечатление, что блоки не связаны между собой.
Отсутствие консистентности и общей информации в карточке услуг. Ребята используют разные цвета и виды данных (цифры и иконки), что создает эффект сборной солянки и плохо влияет на читаемость контента. Кроме этого, без лишнего клика тяжело понять разницу тарифов.
Совмещение секций. На последнем шаге выскакивает целый пласт из предварительно провалидированных полей смешанный с информацией об оплате.
Нехватка акцентов. Сумма теряется в информации, несмотря на выделение красным цветом. Стоимость и ее детализация не воспринимается как что-то единое и взаимосвязанное.
Анализ результатов
На аудит был дан всего час, поэтому в ход пошли лучшие практики без привлечения респондентов и исследований. Ребята выделили три глобальные проблемы и исходя из них сформировали список дизайн решений:
- Проблемы с общей композицией страницы. Нет однозначных группировок по разделам, серые полосы с белой надписью выглядят грузно и не помогают ориентироваться по странице. В целом не хватает отступов и разделений между разносортным контентом.
- Отсутствуют акценты и структура типографики. Почти во всех карточках нарушена иерархия и есть лишние элементы, за счет чего важная информация тяжело читается.
- Слишком длинная форма. Этим все сказано.
Что сделали
Улучшили пользовательский опыт добавив степпер и пересобрав структуру страницы. Пользователь должен понимать сколько шагов его ждет и не напрягаться лишний раз. Теперь, заголовок оформления заказа является однозначно общим для всей страницы, а шаги четко разделены за счет белых карточек. Инпуты мы тоже доработали – убрали красные звездочки, вместо них в степпере появилась надпись, что все поля являются обязательными по умолчанию, если не указано иначе.
Карточки для выбора размера сделали компактнее. Выделили основную информацию красным цветом и убрали иконки.
Убрали лишнее из формы расчета. В топку пошли черные рамки и сворачивание блока. Даже если юзер добавил 100 позиций, ему все равно приходится скроллить в самый верх, чтобы свернуть поля, вместо этого мы добавили кнопку для особых случаев. Вынесли статичное поле с объявленной ценностью за пределы динамики, чтобы пользователь адекватно воспринимал информацию.
Теперь проще оценить преимущества услуг. Вынесли различия и перекомпоновали информацию.
Выделили группы контактных данных. Отправитель и получатель воспринимаются как независимые друг от друга блоки.
Отобразили последовательность информации об оплате. Сделали акцент на сумме и показали зависимость детализации от общей стоимости.
Что в итоге?
Мы пересобрали логику всей формы, добавили понятную иерархию и акценты, освежили визуал, систематизировали блоки, переделали карточки – информация в них легче считывается, обеспечили юзеру скоростное понимание разницы услуг, добавили степпер, который позволяет последовательно заполнять поля и все это за час. Офигеть!
Если вас драйвит дизайн, вы устали от топов со шрифтами и чеклистов и хотите услышать больше о жизни дизайнеров в агенстве – подписывайтесь на наш тг-канал.
А, если вам нужен UX-аудит, крутой дизайн, сильная разработка или качественное тестирование, то пишите нам!