UX/UI-аудит для дистрибьютора электротехники

«ЭТМ» — комплексный поставщик инженерных систем на всей территории России. У компании очень широкий круг клиентов: промышленные предприятия, производители электрощитового оборудования, предприятия инфраструктуры, электромонтажные и строительные компании, частные монтажники, розничные магазины и т.д.

В рамках заказанного «Собаке Павловой» UX-аудита компания «ЭТМ» хотела сфокусироваться на двух группах пользователей: административно-хозяйственных организациях и профессиональных монтажниках.

Бизнес-задача

Создать удобный цифровой инструмент для пользователей и максимально перевести обслуживание в онлайн-каналы.

Главная страница сайта «ЭТМ»

Дизайн-задача

Провести UX/UI-аудит существующей системы с акцентом на проблемы двух групп пользователей: административно-хозяйственных организаций и профессиональных монтажников (частных и из малого бизнеса).

Главная страница сайта «ЭТМ» с комментариями эксперта

Результат

Провели двухэтапный UX/UI-аудит: вначале интерфейс оценили эксперты, а затем мы протестировали его на живых пользователях.

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

Найденные проблемы ранжировали по важности и предложили для каждой одно или несколько решений.

Небольшой фрагмент доски с экспертной оценкой в Miro

В пользовательском тестировании участвовали десять информантов: шесть профессиональных монтажников из ремонтно-монтажных организаций и четыре представителя административно-хозяйственных организаций.

Вот чем административно-хозяйственные организации отличаются от ремонтно-монтажных:

1. Разная бюрократизированность: в АХО каждый этап работы должен сопровождаться документацией.
2. Разные объёмы. Даже через маленькую АХО проходит гораздо больший объём закупок, чем через МРО. Это меняет требования к навигации по документам и заказам.
3. Разный фокус внимания в работе. МРО работают проектами, АХО — потоком. Соответственно, и отчётность строится не по итогам завершения работы над проектом, а по временным периодам.

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

Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть модуль дизайн-задачника «Сценарии взаимодействия» для тех, кто хочет научиться их использовать в дизайне интерфейсов.

Составили отчет и финальную презентацию, объединив результаты экспертной оценки и пользовательского тестирования.

Фрагмент отчета об аудите

Пользователи

Профессиональные монтажники

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

На сайте «ЭТМ» их интересует покупка товаров, сервис проектирования и калькулятор. Монтажнику очень важно составить смету с ценами и согласовать ее с заказчиком ремонта.

Первый экран задачи «Согласовать смету с заказчиком»

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

Составляют довольно большую долю всех клиентов «ЭТМ» и создают основную нагрузку на коллцентр: часто уточняют срок поставки, просят помощи с промокодом, просят ускорить доставку или доставить заказ по частям, в разные сроки.

Цель: закупить новые товары для ремонта квартиры заказчика.

Задачи:

• Хочу найти товары для ремонта
• Выбираю из предложенного списка подходящие товары, Хочу сравнить по параметрам
• Нахожу нужный товар, хочу его сохранить
• Хочу согласовать товары с заказчиком
• Хочу купить выбранные товары, добавляю в корзину
• Оформляю заказ
• Перешел в корзину, Хочу проверить правильность заказа
• Хочу отслеживать статус заказа
• Хочу узнать как получить свой заказ

Представители АХО

Клиенты из административно-хозяйственных организаций (завхозы, электрики ЖКХ и т.д.) тоже покупают регулярно, иногда по тендеру. Из-за больших объемов закупок им сложно ориентироваться в старых заказах, а большая бюрократизированность огранизации диктует повышенные требования к оформлению документов.

Пользователь ищет товар в старых заказах

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

Цель: закупить товары для мелкого ремонта (ранее не заказывал).

Задачи:

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

Сквозные проблемы

1. Система не учит пользователя с ней работать

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

Решение. Добавить подсказки, гайды или онбординг.

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

2. Интерфейс не ведет пользователя

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

Решение. Добавить уведомления с переходами и подсказки для пользователя. Больше общаться через интерфейс.

Пользователю непонятно, ни что происходит (товары пропали из корзины — так и должно быть?), ни что делать дальше

3. Язык

Тексты в интерфейсы написаны очень техническим языком со множеством аббревиатур и сокращений. Кроме того, есть путаница в терминах (что мы называем «сметой», что «спецификацией», что — «коммерческим предложением»). Неконсистентность путает простых сотрудников, а профессионалов раздражает.

Решение. Переписать тексты, убрать малознакомые аббревиатуры и сокращения, унифицировать термины.

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

4. Непонятные кнопки

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

Решение. Стоит объяснить пользователю в интерфейсе, к какому действию ведут кнопки, что произойдет, если их нажать.

На этом экране, например, неочевидно назначение кнопок «В резерв», «Со склада ОП» и «Получить комплект»

Поиск товара

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

1. Стартовая страница каталога

На стартовой всегда и у всех гайки и шайбы. Нужные, очевидно, не всем и не всегда.

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

2. Структура каталога

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

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

Поиск товара через каталог

3. Настройки по умолчанию

Все настройки поиска, вида и т.д. сбрасываются к дефолтным после перезагрузки страницы. При этом натройки по умолчанию удобны не для всех пользователей. Например, 20 товаров на странице — маловато, а дефолтная поисковая выдача в виде карточек не подходит профессионалам.

Решение. Сохранять пользовательские настройки.

Поисковая выдача

4. Релевантность

Неясна логика сортировки товаров «по релевантности» (это дефолтная настройка, которая возвращается после каждой перезагрузки). В итоге, если товаров много, нельзя предсказать, на какой странице выдачи будет нужный.

Решения:

1. Сделать прозрачной логику порядка выдачи товаров при сортировке по релевантности.
2. Выбрать другую логику в качестве дефолтной. Например, по цене или по алфавиту.
3. Позволить пользователю самому выбирать сортировку по умолчанию.

Итог

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