Дашборд, который читается за десять секунд

Директор открывает сводку, чтобы узнать одно: сколько денег лежит в материалах и всё ли в порядке. Если ответ приходится искать, складывать в уме две соседние цифры или сверять с таблицей, сводка не работает — какой бы красивой она ни была.

В сентябре мы разбирали страницу «Аналитика склада» в СмИТ Биллинге. Показали её трём проверяющим: один смотрел, понятна ли она за десять секунд, второй — соответствует ли оформлению остальной системы, третий — правильно ли считаются цифры. Замечаний набралось больше сорока. Ниже — десять правил, которые из этого разбора вышли, и что конкретно поменялось на странице.

Что было не так

• Главную цифру не найти. Сколько денег в материалах — сумма «склада» и «подотчётов», двух соседних карточек того же размера, что и «0» с «70 ₽».
• Цифры спорили друг с другом. «Продажи 70 ₽» стояли рядом с «0 установок», «Аренда 150 ₽/мес» — рядом с «активных 0». Деньги считались по финансовым операциям, а установки — по движениям склада, и часть движений давно удалили.
• «Всё время» было текущим месяцем. Пустая дата молча превращалась в первое число месяца. В сентябре это было незаметно, в октябре «за всё время» показало бы только октябрь.
• Цвет ничего не значил. Синие и оранжевые полосы у карточек, синяя серия на графике — просто украшение, а не статус.
• Пустые блоки выглядели как поломка. «Топ установок» — оси на полэкрана без данных, «Склад по категориям» — сплошное кольцо из одного цвета.

Десять правил

1. Одна цель — один вопрос

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

2. Сначала каркас

Расположение продумывают до наполнения: показатели сверху, главный график, второстепенные рядом, детальные таблицы внизу. У нас все страницы собраны на одном каркасе — заголовок один раз, действия справа в шапке, срезы и поиск одной строкой. Сводка не придумывает свою шапку: человек, который открыл пять разделов, не ищет кнопки заново.

3. Одинаковые отступы

Поля, интервалы и высоты — одни на весь ряд. Если одна карточка на строку выше соседей только потому, что подпись перенеслась, взгляд цепляется за неё, а не за цифру. Карточки показателей у нас — общий компонент: высота, поля и перенос подписей в нём уже решены.

4. Главное — заметно с первого взгляда

Главная цифра крупнее и первой, остальные — спокойнее. Отдельно разделили то, что показывает текущее состояние («Сейчас»: запас, подотчёты, аренда), и то, что считается за период («За период»: продажи, подключения, себестоимость). Раньше человек менял период и удивлялся, что «Склад» не меняется, — теперь видно, какая группа от периода зависит.

5. Диаграмма под вопрос

Динамика — линия или столбцы по датам. Кто больше, кто меньше — горизонтальные столбцы по убыванию. Доли — кольцо, но только когда частей несколько. Кольцо из одной категории — не диаграмма, а круг: теперь в этом случае вместо него строка «Кабель и расходники — 472 095,67 ₽, весь запас в одной категории». Ось времени — непрерывная: дни без движений показываются нулём, а не выпадают, иначе 11 и 14 сентября выглядят соседними днями.

6. У цвета есть задача

Цвет показывает статус, отклонение или разницу категорий. Зелёный — норма и фирменная гамма, жёлтый — «обратите внимание», красный — «проблема». Всё остальное — оттенки одного цвета и серый. Синие полосы и серии со страницы ушли: они ничего не говорили, а глаз искал в них смысл.

7. Числа в одном формате

• Деньги без пустых копеек: «5 200 ₽», но «472 095,67 ₽».
• Количество — вместе с единицей: «2540 м», а не «2540» в одном углу и «м» в другом.
• Ноль и «нет данных» — разные вещи. Себестоимость подключения без подключений — прочерк с пояснением, а не «0,00 ₽», который читается как «бесплатно».
• Если сумма посчитана не полностью — это видно. У позиций без закупочной цены стоит пометка «нет цены», а над показателями — «Без закупочной цены: 7 — суммы занижены».

8. Предсказуемая типографика

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

9. Фильтры оправдывают своё место

Фильтр нужен, когда меняет вывод. Период — один переключатель, и выбранный период уже написан на нём: дублировать его строкой «Период: всё время» рядом не нужно. Когда условий больше пяти, их не выстраивают в ряд выпадающих списков, а собирают в одну панель «Фильтры» с числом позиций у каждого варианта. На телефоне эта панель выезжает снизу.

flowchart LR
  Q["Вопрос<br/>сводки"] --> K["Каркас:<br/>сверху главное"]
  K --> D["Цифры<br/>из источника"]
  D --> V{"Сходится<br/>с данными?"}
  V -->|нет| D
  V -->|да| M["Проверка<br/>на телефоне"]
  M --> R["Три взгляда:<br/>UX, вид, данные"]

10. Проверьте на настоящих данных и на телефоне

Этого правила не было в исходном списке — оно наше. Макет на выдуманных цифрах проходит любую проверку, настоящие данные — нет. Каждую цифру сверяют с источником: какие операции в неё входят, исключены ли отменённые, одна ли организация. Две цифры в одной карточке берут из одного источника. И страницу обязательно открывают на ширине телефона: там подписи осей слипаются, предупреждения уезжают за край, а карточка из девяти строк вмещает на экране одну позицию склада.

Как это работает в СмИТ Биллинге

Аналитика склада — страница модуля «Склад»: Склад → Аналитика. Наверху — предупреждения, по которым действуют: позиции ниже минимального остатка, позиции без закупочной цены, неходовые позиции без движения больше 90 дней, списания и аренда без оборудования. Каждое предупреждение ведёт в отфильтрованный список.

Показатели «Сейчас» — сколько вложено в материалы, сколько на руках у сотрудников, сколько серийного оборудования у клиентов и сколько приносит аренда в месяц. Показатели «За период» — продано клиентам, подключений и средняя себестоимость подключения; у каждого — изменение к прошлому периоду той же длины. Ниже — движения по дням, запас по категориям, что больше всего ушло на подключения и у кого материал на руках, а под ними — обороты по позициям и список подключений со ссылками на наряды.

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

Схемы по теме все схемы →

Архитектура Очереди и фоновые задачи Последовательность Запрос к ассистенту