Чем рабочий интерфейс отличается от сайта
Сайт открывают, чтобы что-то узнать или купить, и закрывают. В CRM работают часами: менеджер обрабатывает заявки, оператор меняет статусы, руководитель смотрит отчёты. Поэтому критерии другие. Эффектный первый экран здесь почти ничего не стоит, а важны скорость, плотность информации и предсказуемость: одно и то же действие всегда делается одинаково и в одном месте.
Вторая особенность — пользователи уже умеют работать. Их не нужно убеждать, но им нужно не мешать. Хороший рабочий интерфейс сокращает число кликов на частые операции, не заставляет держать данные в голове при переходе между экранами и честно показывает, что произошло после каждого действия.
Начните с ролей и частых операций
Меню CRM часто повторяет структуру базы данных: клиенты, сделки, задачи, справочники, настройки. Работать в такой системе неудобно, потому что люди думают задачами, а не таблицами. Проектирование начинается с вопроса: кто пользуется системой и что каждый делает чаще всего.
Выпишите роли и для каждой — 5–10 самых частых операций с примерной частотой. Лучше всего подсмотреть за реальной работой: посидеть рядом с менеджером час, посмотреть, где он переключается в Excel или мессенджер, что ищет и что переспрашивает. Обычно картина такая:
- Менеджер: найти клиента, увидеть историю, поставить задачу, сменить статус сделки.
- Оператор или диспетчер: принять заявку, распределить, отследить сроки.
- Руководитель: увидеть, где горят сроки, сколько денег в воронке, кто перегружен.
- Администратор: настроить справочники, права, шаблоны — редко, но без ошибок.
Списки и таблицы: главный экран любой CRM
Большую часть времени люди проводят в списках: заявки, клиенты, заказы. Поэтому таблице стоит уделить больше внимания, чем любому другому экрану. Колонки — только те, по которым принимают решения, остальное в карточке. Статус — цветной меткой с текстом, а не только цветом. Суммы и даты выровнены по правому краю и набраны цифрами одинаковой ширины, чтобы столбец читался сверху вниз.
Что ещё проверяем в каждом списке:
- Сохранённые фильтры и виды: «мои заявки», «просрочено», «без ответа больше дня».
- Массовые действия: выбрать несколько строк и сменить статус или ответственного.
- Быстрые действия в строке без перехода в карточку: позвонить, назначить, отметить.
- Сортировка и выбранный набор фильтров сохраняются, когда человек вернулся из карточки.
- Пустой список объясняет, почему он пуст, и что сделать: снять фильтр или создать запись.
- Плотность строк можно переключить: компактная для опытных, просторная для новых сотрудников.
Карточка клиента или сделки
Карточка отвечает на вопрос «что с этим клиентом и что делать дальше». Наверху — главное: имя или название, статус, ответственный, следующая задача со сроком и кнопки частых действий. Ниже — лента истории: звонки, письма, смены статуса, комментарии, в одном потоке по времени. Справочные поля — реквизиты, адреса, источники — уходят в боковую колонку или вкладку.
Частая ошибка — редактирование всей карточки через одну большую форму с кнопкой «Сохранить» внизу. Удобнее менять поля на месте, с явным подтверждением и возможностью отменить. Если два человека правят одну запись, система должна предупредить об этом, а не молча перезаписать чужие изменения.
Дашборд: метрики, по которым принимают решения
Дашборд часто превращают в витрину всех графиков, какие можно построить. Через неделю его перестают открывать. Хороший дашборд отвечает на 3–5 вопросов конкретной роли, и каждый показатель ведёт к действию: если цифра плохая, по клику видно, из чего она складывается.
Правила, которых мы держимся:
- Сверху — несколько ключевых чисел со сравнением с прошлым периодом и понятной подписью.
- Тип графика по задаче: динамика — линия, сравнение категорий — горизонтальные столбцы, доля — одна полоса, а не круговая диаграмма из десяти секторов.
- Цвет несёт смысл: один акцент для главного ряда, красный только для проблем.
- Цифры кликабельны и ведут в отфильтрованный список, из которого они посчитаны.
- Видно, за какой период данные и когда обновились.
- У каждой роли свой дашборд, а не один общий на всех.
Формы, ошибки и состояния
Рабочие формы длинные, и ошибка в них стоит дорого: неверный телефон клиента, потерянная заявка, дубль. Поэтому формы проектируем так же внимательно, как в магазине: маски для телефонов и сумм, подсказки из справочников, проверка дублей при вводе, ошибки рядом с полем и в сводке. Черновик не должен теряться при случайном закрытии вкладки.
Отдельно рисуем состояния, которые в рабочих системах случаются каждый день:
- Загрузка таблицы и карточки — скелетоны вместо пустого экрана.
- Нет прав на действие — объясняем, к кому обратиться.
- Ошибка сохранения и потеря связи — данные не пропадают, есть «повторить».
- Конфликт правок, удалённая запись, долгий импорт с прогрессом.
- Длинные названия, пустые поля и очень большие числа.
Система компонентов вместо набора экранов
CRM растёт постоянно: новые разделы, отчёты, поля. Если каждый экран рисовать с нуля, через полгода в системе пять видов таблиц и три вида кнопки «Сохранить». Поэтому вместе с макетами мы отдаём систему компонентов: таблица, фильтр, статус, поле ввода, карточка, тост, пустое состояние — каждый со всеми состояниями и правилами, когда его использовать.
Так мы работали в бренд-системе «Нова»: 30 компонентов с состояниями, среди них таблица характеристик и сравнения, фильтры и чипы, бейджи и статусы, скелетон и пустые состояния, плюс инструкция для разработчиков. Из этой системы потом собраны интернет-магазин, лендинги и сайт сервисного центра, и все они выглядят как одна семья. Для CRM это ещё важнее: разработчики собирают новые экраны из готовых деталей, а дизайнер нужен только для действительно новых задач.
Доступность закладываем туда же. Стандарт WCAG 2.2 на уровне AA требует контраст обычного текста не меньше 4,5:1 и цели касания не меньше 24×24 CSS-пикселя. Для рабочих систем добавляем видимый фокус и полноценную работу с клавиатуры: опытные сотрудники работают быстрее без мыши.
Как проверить, что система удобна
Самая надёжная проверка — дать прототип тем, кто будет работать в системе, с реальными задачами: «найдите клиента, у которого завтра истекает договор, и поставьте звонок». Смотрите, где люди останавливаются, что ищут и чего не находят. Кликабельный прототип главных сценариев делается за 1–2 недели и экономит месяцы переделок после разработки.
Если система уже работает, начните с UX-аудита: пройдите частые операции каждой роли, посчитайте клики и переходы, сравните интерфейс с эвристиками юзабилити Nielsen Norman Group и расставьте исправления по пользе и стоимости. После изменений сравните время на типовые операции и число ошибок до и после.
Сколько стоит дизайн CRM и дашбордов
У нас дизайн CRM и дашбордов стоит от 90 000 ₽, ориентировочно от 6 недель: роли и сценарии, прототип, макеты списков, карточек, форм и дашбордов для всех ролей, состояния и система компонентов для разработчиков. Дизайн веб-сервиса или личного кабинета — тоже от 90 000 ₽, от 6 недель. Кликабельный прототип главных сценариев — от 30 000 ₽, от 1 недели; прототип в коде — от 50 000 ₽, от 2 недель. Если система уже работает и нужно понять, что мешает сотрудникам, — UX-аудит от 60 000 ₽, ориентировочно от 1 недели.
Чтобы обсудить вашу систему, напишите нам в Telegram, позвоните или отправьте письмо. Пришлите список ролей и пару скриншотов текущего интерфейса — с них и начнём.
