---
updateDate: 2026-02-10T00:00:00Z
publishDate: 2024-07-24
publishYear: 2017
name: Electronika
title: Точечное улучшение интерфейса
excerpt: Изучили интерфейс системы безопасности и поменяли визуальные акценты, чтобы помочь охране быстрее реагировать на события.
logo:
src: ~/assets/images/portfolio/electronika/logo.svg
alt: Electronika logo
link: https://www.electronika.ru/
image: ~/assets/images/portfolio/electronika/electronika.jpg
imageAlt: Точечное улучшение интерфейса системы безопасности
thumbnail:
src: ~/assets/images/portfolio/cards/elektronika.svg
alt: Собака Павлова • Электроника • Редизайн интерфейса системы безопасности
tags:
- gos
- ui-redesign
- ux-audit
- prof
context: В продукте нашего клиента дизайн путал визуальными ошибками, из-за которых охрана могла неправильно реагировать не происшествия.
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-дизайн под ключ](/services/ux-design), как в этом кейсе, и [многое другое](/services).
collection: services
page: ux-design
- text: |
### Хотите уметь так же?
Научим делать хорошие интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: pangeo
- collection: portfolio
page: res
- collection: portfolio
page: crt-panel-administratora
- collection: portfolio
page: center-rechevyh-technologiy
result:
-
src: ~/assets/images/portfolio/png.png
text: Макеты с рекомендованным дизайном
link: https://drive.google.com/drive/folders/1t11oXiRi6vTC9d40woPGvxTMy1jkEKb3?usp=sharing
-
src: ~/assets/images/portfolio/pdf.png
text: Отчет об аудите
link: https://drive.google.com/open?id=1s8ws_qJwdMvIn5MoZim-qvse5upXXyct
budget: ~ 480 000 ₽
review:
text: «Мы однозначно будем брать эти результаты за основу наших будущих изменений и для разработки брендбука с требованиями к интерфейсу».
person: Евгений Варламов,
position: начальник отдела исследований и разработки
director: Новый интерфейс повысит скорость реакции сотрудника службы безопасности на инциденты в аэропорту.
metadata:
canonical: https://sobakapav.ru/portfolio/electronika
title: UX • Точечные улучшения интерфейса системы безопасности
description: "Провели аудит интерфейса, выбрали самый показательный нелинейный сценарий и сделали UI-редизайн."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/electronika/electronika.jpg'
width: 1386
height: 830
---
import TOC from '~/components/widgets/TOC.astro';
<TOC> [Заказчик](#anchor1) • [Задача](#anchor2) • [Процесс](#anchor3) • [Выводы](#anchor4) • [Отзыв, цены, сроки](#anchor5)</TOC>
## <a name="anchor1" />Заказчик
Компания [«Электроника»](https://www.electronika.ru/) занимается разработкой и интеграцией систем безопасности для объектов с повышенными требованиями к защищенности. Решения создаются на собственной платформе Electronika Security Manager (ESM). Вот так выглядит рабочее место оператора.
_Профессиональный интерфейс не обязан быть красивым. Главное — понятным_
Здесь сотрудник службы безопасности следит за оповещениями системы и реагирует на инциденты. Профессиональный интерфейс не обязан быть красивым и простым. Но есть нюанс — чем сложнее и запутаннее рабочий экран, тем дольше оператор выполняет те или иные действия. В общем случае это просто потерянное время, в случае с нашим клиентом — безопасность.
## <a name="anchor2" />Задача
Глобальная задача заказчика — улучшить интерфейс. Но сначала надо разобраться, что именно и как улучшать. Обычно для этого мы предлагаем провести UX-аудит, то есть оценить в первую очередь выполняемость сценариев. В случае с Electronika Security Manager с этим все было в норме: логика понятна, структура ясна, способы решения профессиональных задач проработаны. Проблема только в UI.
- Элементы расположены не оптимально, те же операции можно выполнять быстрее.
- Эстетическое решение отвлекает пользователя от его рабочих задач.
Что можно улучить и, главное, как? С этим нам предстояло разобраться.
## <a name="anchor3" />Процесс
Действовали по заранее составленному и согласованному с заказчиком [плану](https://drive.google.com/open?id=1JX6kYt9fE5ohanXLyrLyjT6KTq0Xz39y).
_Скриншот нашего плана для заказчика_
### Определили границы проекта
Выбрали один сценарий использования системы — самый показательный, который компания демонстрирует на выставках.
### Разобрались в системе
Заказчик рассказал, что именно происходит в этом сценарии, что и как должен делать оператор. Поставили себя на место оператора, в демоверсии системы прошлись по всем шагам и проиграли все возможные варианты развития событий.
Сложность была в том, что сценарий — нелинейный. Если нарушитель опасен, оператор предпринимает одно действие, если мелкий хулиган — другое. Сотрудник службы безопасности находится в постоянном диалоге с системой.
Тут есть простой способ. Фиксировать все скриншотами и описанием, а потом просить заказчика прокомментировать, правильно ли мы все поняли.
_Для каждого экрана мы подготовили описание. Так проще разобраться, из каких блоков состоит интерфейс и какую функцию они выполняют_
[Сценарий инцидента](https://drive.google.com/open?id=15NxR_IPGwJAUJ-089ydy2UHTfW7Dwzk9)
### Сделали редизайн интерфейса
Концептуальные изменения были такими.
- Упростить все, что можно упростить.
- Расставить визуальные акценты, которые бы подталкивали пользователя к наиболее вероятному в данном контексте действию. А если возможных действий несколько, то отдать приоритет худшему варианту развития событий.
_Новые визуальные акценты помогают охране быстрее отреагировать на происшествия. Светлая версия интерфейса_
### Обсудили c командой заказчика
Не все наши решения заказчик принимал сразу. Было много вопросов и обсуждений «почему так» и «как лучше». Презентация — это, конечно, стандартное действие в любом проекте. Мы просто в очередной раз хотим подчеркнуть, что ценность работы проектировщика не только в картинках, а еще и в обосновании собственных решений.
Кстати, важно еще и честно сказать, когда не знаешь правильный ответ. Так, например, у нас были аргументы и в пользу светлого решения, и в пользу «традиционного» темного. Тестирование, выбор и принятие решения оставили заказчику.
_Темная версия интерфейса_
### Сравнили две версии
Заключительный этап — оценка изменений. Обратите внимание, что только сейчас случился собственно аудит. Тут есть принципиальная разница с аудитом массовых сервисов, когда для выводов об удобстве участникам проекта с лихвой хватает собственного цифрового опыта. В оценке профессиональных интерфейсов нужна осторожность и аккуратность. «Переделать и сравнить» — отличный подход для поиска слабых мест — и сразу же решений.
_Старая версия интерфейса и новая. Описываем изменения для клиента_
[UI-аудит](https://drive.google.com/open?id=1s8ws_qJwdMvIn5MoZim-qvse5upXXyct)
Итоговый отчет содержит 18 аналогичных страниц.
## <a name="anchor4" /> Выводы
[Критикуешь — предлагай](/publication/criticize-then-suggest). Этот принцип как нельзя лучше подходит для оценки профессиональных интерфейсов. А результат такого сравнительного аудита позволяет заказчику принять взвешенное решение, нужно ли что-то менять, и если да, то как именно надо действовать.
## <a name="anchor5" />