---
updateDate: 2026-02-05T00:00:00Z
publishDate: 2025-01-28
publishYear: 2021
name: ЭТМ
title: UX/UI-аудит для дистрибьютора электротехники
excerpt: Провели UX-аудит, экспертную оценку и пользовательское тестирование
context: |
[«ЭТМ»](https://www.etm.ru/) — комплексный поставщик инженерных систем на всей территории России. У компании очень широкий круг клиентов: промышленные предприятия, производители электрощитового оборудования, предприятия инфраструктуры, электромонтажные и строительные компании, частные монтажники, розничные магазины и т.д.
В рамках заказанного «Собаке Павловой» UX-аудита компания «ЭТМ» хотела сфокусироваться на двух группах пользователей: административно-хозяйственных организациях и профессиональных монтажниках.
isNew: true
logo:
src: ~/assets/images/portfolio/etm/logo.svg
alt: «ЭТМ» • Логотип
link: https://www.etm.ru/
image: ~/assets/images/portfolio/etm/main.png
imageAlt: Собака Павлова • «ЭТМ» • UX/UI-аудит для дистрибьютора электротехники
thumbnail:
src: ~/assets/images/portfolio/cards/etm.svg
alt: Собака Павлова • «ЭТМ» • UX/UI-аудит для дистрибьютора электротехники
tags:
- ec
- prom
- ux-audit
- new-features
- mass
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-аудит](/services/ux-audit), как в этом кейсе, и [многое другое](/services).
collection: services
page: ux-audit
- text: |
### Хотите уметь так же?
Научим создавать удобные интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: avito
- collection: portfolio
page: domotech
- collection: portfolio
page: goodwood
- collection: portfolio
page: simetra
- collection: portfolio
page: onesoil
outcome:
title: Некоторые цифры
numbers:
- title: "Проинтервьюировали"
number: '10 информантов'
text: "в рамках пользовательского тестирования"
- title: "Нашли и описали"
number: '4 сквозных проблемы'
text: "влияющих на интерфейс в целом"
- title: "Оставили в Miro"
number: '> 220 комментариев'
text: "с интерфейсными проблемами и решениями"
result:
- text: Покажем из рук в руки и расскажем ещё больше
link: 'mailto:we@sobakapav.ru'
budget: 300 000 ₽
time: '4 месяца'
director: Это был довольно типичный UX-аудит хорошего, в общем-то, сайта. Нашли проблемы, предложили решения, хороший сайт станет еще лучше.
metadata:
canonical: https://sobakapav.ru/portfolio/etm
title: UX/UI • UX/UI-аудит для дистрибьютора электротехники
description: 'Провели UX/UI-аудит сайта, экспертную оценку и пользовательское тестирование'
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/etm/badge.png'
width: 1200
height: 630
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
<TOC>
[Бизнес-задача](#anchor1) • [Дизайн-задача](#anchor2) • [Результат](#anchor3) • [Пользователи](#anchor4) • [Сквозные проблемы](#anchor5) • [Поиск](#anchor6) • [Итог](#anchor7) • [Отзыв, цены, сроки](#anchor8)
</TOC>
## <a name="anchor1" />Бизнес-задача
Создать удобный цифровой инструмент для пользователей и максимально перевести обслуживание в онлайн-каналы.
<a href="/images/portfolio/etm/5.png" alt="UX/UI-аудит для компании «ЭТМ»" target="_blank">
</a>
_Главная страница сайта «ЭТМ»_
## <a name="anchor2" />Дизайн-задача
Провести UX/UI-аудит существующей системы с акцентом на проблемы двух групп пользователей: административно-хозяйственных организаций и профессиональных монтажников (частных и из малого бизнеса).
<a href="/images/portfolio/etm/6.png" alt="UX/UI-аудит для компании «ЭТМ»" target="_blank">
</a>
_Главная страница сайта «ЭТМ» с комментариями эксперта_
## <a name="anchor3" />Результат
Провели двухэтапный UX/UI-аудит: вначале интерфейс оценили эксперты, а затем мы протестировали его на живых пользователях.
Результаты экспертной оценки оформили в виде доски в Miro. Мы нашли и описали более 220 интерфейсных проблем и недочетов: для достаточно большого интерфейса это, на самом деле, не так уж и много.
Найденные проблемы ранжировали по важности и предложили для каждой одно или несколько решений.
<a href="/images/portfolio/etm/2.png" alt="UX/UI-аудит для компании «ЭТМ»" target="_blank">
</a>
_Небольшой фрагмент доски с экспертной оценкой в Miro_
В пользовательском тестировании участвовали десять информантов: шесть профессиональных монтажников из ремонтно-монтажных организаций и четыре представителя административно-хозяйственных организаций.
> Вот чем административно-хозяйственные организации отличаются от ремонтно-монтажных:
> 1. **Разная бюрократизированность**: в АХО каждый этап работы должен сопровождаться документацией.
> 2. **Разные объёмы**. Даже через маленькую АХО проходит гораздо больший объём закупок, чем через МРО. Это меняет требования к навигации по документам и заказам.
> 3. **Разный фокус внимания в работе**. МРО работают проектами, АХО — потоком. Соответственно, и отчётность строится не по итогам завершения работы над проектом, а по временным периодам.
Мы провели интервью с каждым из информантов, а затем, сформулировав пользовательские сценарии и основные цели и задачи пользователей, проверили, насколько удобно им выполнять эти задачи в интерфейсе и какие препятствия при этом возникают.
>Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть [модуль дизайн-задачника «Сценарии взаимодействия»](https://www.eduhund.ru/program/usecases/?utm_source=sobakapav&utm_medium=site&utm_campaign=page) для тех, кто хочет научиться их использовать в дизайне интерфейсов.
Составили отчет и финальную презентацию, объединив результаты экспертной оценки и пользовательского тестирования.
<a href="/images/portfolio/etm/1.png" alt="UX/UI-аудит для компании «ЭТМ»" target="_blank">
</a>
_Фрагмент отчета об аудите_
## <a name="anchor4" />Пользователи
### Профессиональные монтажники
Монтажники — очень лояльные клиенты, совершают покупки не реже, чем раз в месяц, у них высокий средний чек. Пользуются всеми программами лояльности (кэшбек, вывод на карту, сертификаты и т.д.).
На сайте «ЭТМ» их интересует покупка товаров, сервис проектирования и калькулятор. Монтажнику очень важно составить смету с ценами и согласовать ее с заказчиком ремонта.
<a href="/images/portfolio/etm/3.png" alt="UX/UI-аудит для компании «ЭТМ»" target="_blank">
</a>
_Первый экран задачи «Согласовать смету с заказчиком»_
Товары ищут через фильтры и конфигураторы, и, как показали интервью, больше всего на сайте им мешают проблемы с поиском и некорректная выдача.
Составляют довольно большую долю всех клиентов «ЭТМ» и создают основную нагрузку на коллцентр: часто уточняют срок поставки, просят помощи с промокодом, просят ускорить доставку или доставить заказ по частям, в разные сроки.
>**Цель**: закупить новые товары для ремонта квартиры заказчика.
>
>**Задачи**:
>
>- Хочу найти товары для ремонта
>- Выбираю из предложенного списка подходящие товары, Хочу сравнить по параметрам
>- Нахожу нужный товар, хочу его сохранить
>- Хочу согласовать товары с заказчиком
>- Хочу купить выбранные товары, добавляю в корзину
>- Оформляю заказ
>- Перешел в корзину, Хочу проверить правильность заказа
>- Хочу отслеживать статус заказа
>- Хочу узнать как получить свой заказ
<em>Задачи профессионального монтажника на сайте «ЭТМ»</em>
### Представители АХО
Клиенты из административно-хозяйственных организаций (завхозы, электрики ЖКХ и т.д.) тоже покупают регулярно, иногда по тендеру. Из-за больших объемов закупок им сложно ориентироваться в старых заказах, а большая бюрократизированность огранизации диктует повышенные требования к оформлению документов.
<a href="/images/portfolio/etm/4.png" alt="UX/UI-аудит для компании «ЭТМ»" target="_blank">
</a>
_Пользователь ищет товар в старых заказах_
Основную боль на сайте им причиняют, как и монтажникам, проблемы с поиском и фильтрацией, а также проблемы, связанные с интерфейсными текстами. Технический язык, незнакомые термины и аббревиатуры, неочевидные названия кнопок довольно сильно мешают им.
>**Цель**: закупить товары для мелкого ремонта (ранее не заказывал).
>
>**Задачи**:
>
>- Хочу найти товары для ремонта с быстрой поставкой
>- Выбираю из предложенного списка подходящие товары, Хочу сравнить по параметрам
>- Хочу купить выбранные товары, добавляю в корзину
>- Перешел в корзину, Хочу проверить правильность заказа
>- Посмотрел итоговую стоимость, Хочу согласовать результат в своей компании
>- Получил ответ, Хочу отредактировать заказ
>- Хочу оплатить заказ и воспользоваться Бонусами
>- Хочу отслеживать статус заказа
>- Хочу узнать как получить свой заказ
>- Хочу подготовить запрошенный бухгалтерией документ УПД
<em>Цели и задачи представителя административно-хозяйственной организации на сайте «ЭТМ»</em>
## <a name="anchor5" />Сквозные проблемы
### 1. Система не учит пользователя с ней работать
Интерфейс не объясняет, как решать типовые задачи. В систему заложены некоторые решения, но найти их можно только методом проб и ошибок. Пользователей не обучают нововведениям, объяснений либо нет, либо их сложно найти.
**Решение**. Добавить подсказки, гайды или онбординг.
<a href="/images/portfolio/etm/8.png" alt="UX/UI-аудит для компании «ЭТМ»" target="_blank">
</a>
_Неочевидно, например, какие действия нужно совершить, чтобы получить документ для согласования с начальством_
### 2. Интерфейс не ведет пользователя
После завершения какого-то действия на странице нет подсказки, что следует совершить дальше или на какую страницу перейти.
**Решение**. Добавить уведомления с переходами и подсказки для пользователя. Больше общаться через интерфейс.
<a href="/images/portfolio/etm/9.png" alt="UX/UI-аудит для компании «ЭТМ»" target="_blank">
</a>
_Пользователю непонятно, ни что происходит (товары пропали из корзины — так и должно быть?), ни что делать дальше_
### 3. Язык
Тексты в интерфейсы написаны очень техническим языком со множеством аббревиатур и сокращений. Кроме того, есть путаница в терминах (что мы называем «сметой», что «спецификацией», что — «коммерческим предложением»). Неконсистентность путает простых сотрудников, а профессионалов раздражает.
**Решение**. Переписать тексты, убрать малознакомые аббревиатуры и сокращения, унифицировать термины.
<a href="/images/portfolio/etm/7.png" alt="UX/UI-аудит для компании «ЭТМ»" target="_blank">
</a>
_Отсутствие заголовка, аббревиатуры и в целом малопонятный текст дают пользователю мало шансов понять, о чем речь. Отсутствие кнопки отмены усугубляет проблему: неясно, что происходит, а отыграть назад нельзя_
### 4. Непонятные кнопки
В корзине, заказах и документах есть много кнопок, действия которых не очевидны. Это может запутать пользователя, он совершит ошибочное действие, которое потом не сможет отменить.
**Решение**. Стоит объяснить пользователю в интерфейсе, к какому действию ведут кнопки, что произойдет, если их нажать.
<a href="/images/portfolio/etm/10.png" alt="UX/UI-аудит для компании «ЭТМ»" target="_blank">
</a>
_На этом экране, например, неочевидно назначение кнопок «В резерв», «Со склада ОП» и «Получить комплект»_
## <a name="anchor6" />Поиск товара
Тестирование подтвердило, что более всего пользователям мешают интерфейсные ошибки и недочеты, связанные с поиском товара.
### 1. Стартовая страница каталога
На стартовой всегда и у всех гайки и шайбы. Нужные, очевидно, не всем и не всегда.
**Решение**. Вынести на стартовую выбранные пользователем товары и категории или хотя бы часто покупаемые товары.
### 2. Структура каталога
Структура каталога не очевидна, так как строится на технических характеристиках, а не на представлениях пользователей о продукте. Это нормально для профессионалов, но затрудняет поиск для массовых пользователей. Кроме того, сложно заметить, что в категории есть подкатегории.
**Решение**. Поменять названия на более понятные. Развернуть категории, чтобы было видно, какие подкатегории в них есть. Возможно, сопроводить изображениями.
<a href="/images/portfolio/etm/12.png" alt="UX/UI-аудит для компании «ЭТМ»" target="_blank">
</a>
_Поиск товара через каталог_
### 3. Настройки по умолчанию
Все настройки поиска, вида и т.д. сбрасываются к дефолтным после перезагрузки страницы. При этом натройки по умолчанию удобны не для всех пользователей. Например, 20 товаров на странице — маловато, а дефолтная поисковая выдача в виде карточек не подходит профессионалам.
**Решение**. Сохранять пользовательские настройки.
<a href="/images/portfolio/etm/11.png" alt="UX/UI-аудит для компании «ЭТМ»" target="_blank">
</a>
_Поисковая выдача_
### 4. Релевантность
Неясна логика сортировки товаров «по релевантности» (это дефолтная настройка, которая возвращается после каждой перезагрузки). В итоге, если товаров много, нельзя предсказать, на какой странице выдачи будет нужный.
**Решения:**
1. Сделать прозрачной логику порядка выдачи товаров при сортировке по релевантности.
2. Выбрать другую логику в качестве дефолтной. Например, по цене или по алфавиту.
3. Позволить пользователю самому выбирать сортировку по умолчанию.
## <a name="anchor7" />Итог
Пеередали заказчику отчет с ранжированным по важности списком интерфейсных проблем и недочетов и рекомендациями по их устранению. Результаты нашего UX-аудита переданы в разработку.
## <a name="anchor8" />