Улучшаем рабочие столы (дашборды) в личных кабинетах

Время чтения - 8 мин.

Дата публикации 04.01.2024 (обновлено 21.05.2026)

Улучшаем рабочие столы (дашборды) в личных кабинетах

Ваш рабочий стол в личном кабинете — это тормоз для бизнеса?

Давайте честно: как часто вы заходите в личный кабинет и тратите время, пытаясь понять, с чего начать работу? Или видите перед глазами кучу цифр, которые не дают ответа на главный вопрос: «Что делать прямо сейчас?»

Я сам прошел через это. В наших продуктах (Service, CRM, Auction) мы годами использовали стандартный дашборд. Казалось, что всё работает. Но потом мы заметили: пользователи просто не дочитывают свои рабочие столы. Они путаются, теряют время и не видят главного.

Почему так происходит? Потому что мы, разработчики, часто идем от формы, а не от потребности. Нам проще запихнуть в дашборд 4 показателя (даже если нужен всего 1), чем подумать: «А что на самом деле нужно пользователю?»

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

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

Как мы делали рабочий стол пользователя системы раньше

У нас был стандартный компонент «Дашборд». Он выводил 4 показателя. К каждому — своя иконка, ссылка, подсказка. Под ними — панели с таблицами и графиками. Всё по шаблону.

Вот как это выглядело в базовом варианте:

Старый дашборд с четырьмя показателями и таблицами

Логика была простая: «Мне нужно вывести 4 показателя и таблицу. Как заполнить анкету?» Проблема в том, что мы думали о форме, а не о человеке.

Что не так с таким рабочим столом?

Фокус смещается на техническую часть. Вы начинаете ломать голову: «Какую иконку поставить второму показателю?», «А что, если у меня только 3 показателя?» И в итоге вы добавляете четвертый, бессмысленный, лишь бы шаблон работал.

Это неправильно. Нужно идти от реальной потребности пользователя, а не от формы.

Новый подход к созданию рабочего стола: фокус на пользователе

Теперь мы ставим во главу угла типовые потребности пользователя и его сценарии. Рабочий стол — это не просто страница. Это стартовая точка, с которой начинается любой процесс в системе.

Вот пример нового дашборда Исполнителя на решении Falcon Auction:

Новый дашборд исполнителя в Falcon Auction

Что теперь на дашборде:

Только актуальное. Никаких закрытых заказов. Только то, что требует внимания.
Навигация. Каждая часть дашборда — это ссылка на связанный раздел. Это как расширенное меню, но с подробностями.
Ключевые показатели. Они могут браться откуда угодно: из базы, по API, из файловой системы. Раньше, в старом варианте, можно было использовать только SQL-запросы. Теперь, например, можно вывести размер папки /uploads.
Управляющие действия. Кнопки, которые запускают основные бизнес-процессы. Пользователь видит их сразу и может начать работу.

Рабочий стол должен быть гибким

Структура дашборда не должна быть зажата в рамки одного компонента. Вот что мы поняли на практике:

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

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

⚠️ Важно: Не пытайтесь сделать дашборд «на века». Делайте его так, чтобы его можно было легко менять и дополнять. Гибкость — это ключ к тому, чтобы рабочий стол оставался полезным.

Настройка рабочего стола: технические нюансы

Признаюсь, отказываться от собственного компонента было непросто. Но практика показала: связка «Bootstrap-разметка + Таблицы + Формы» работает гибче и проще в развитии.

Примечание: Компонент «Таблица» может выводить не только таблицу, но и графики, канбан, календарь. А «Форма» — как реальную форму, так и просто разметку на основе данных из БД.

Важные технические моменты

Скорость загрузки. Дашборд — часто запрашиваемая страница. Минимизируйте обращения к большим таблицам. Если используете, убедитесь, что запрос работает быстро с первого раза.
Отдельные версии таблиц. Лучше сделать копию существующей таблицы и адаптировать её под дашборд. Например, в Auction для Исполнителя мы используем краткую версию таблицы «Проекты» (с суффиксом Short в коде). Это позволяет не бояться сломать основную таблицу.
Агрегация данных. Не выводите много строк. Лучше покажите агрегированный показатель (например, «Количество ошибок по типам») и дайте ссылку на детализацию.
Кнопки действия. Используйте модальные формы (as-form-modal). Например, «Создать проект», «Создать клиента», «Занести расход». В некоторых случаях достаточно простой ссылки (как «Искать исполнителя» в Auction).

Пример: рабочий стол администратора-разработчика

Мы заменили дашборд и для администратора. Этот дашборд может смотреть и бизнес-админ (за исключением доступа к SQL).

Первый разворот:

Новый дашборд администратора, первый разворот

Второй разворот:

Новый дашборд администратора, второй разворот

Что есть на дашборде администратора:

Общее меню на ключевые разделы.
Ошибки по типам за последние 24 часа.
Статистика по трейсу за 24 часа (лог событий, разделенный по кодам).
Последние активные пользователи + кто онлайн.
Посещаемость сайта по дням (уники: авторизованные и гости).
Принты для отладки процедур.
Последние изменения по хранимым процедурам.
Большие таблицы БД (чтобы знать, что можно почистить).
Размер папки /uploads.
Диагностика (набор правил в виде SQL-запросов для проверки состояния объектов БД).
Информация по Falcon (советы, вопросы-ответы, полезные ссылки) — выделено серо-синим.

Старый дашборд был гораздо менее информативен. Новый не добавляет принципиально новых возможностей, но дает гораздо более наглядное представление о ситуации на сайте.

Вот как выглядела верхняя часть старого дашборда администратора:

Старый дашборд администратора, верхняя часть

Новый дашборд можно установить на старые экземпляры через SQL-пакет (потребуются небольшие ручные правки, описанные в пакете обновления).

Заключение: что дальше?

Новые дашборды уже внедрены для нескольких ролей:

Площадка услуг Auction — кабинеты Исполнителя и Заказчика.
Решение CRM — кабинет менеджера.
Решение Service — кабинеты Клиента и менеджера точки.

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

Чек-лист: как сделать идеальный дашборд

Определите сценарии пользователя. Что он делает чаще всего? С чего начинает работу?
Уберите всё лишнее. Оставьте только то, что нужно здесь и сейчас.
Сделайте дашборд навигатором. Каждый блок должен вести к деталям.
Обеспечьте гибкость. Используйте API, отдельные таблицы, модальные формы.
Оптимизируйте скорость. Минимизируйте обращения к большим таблицам.
Агрегируйте данные. Показывайте суть, а не всё подряд.
Добавьте управляющие действия. Кнопки для запуска ключевых процессов.
Проверьте на реальных пользователях. Удобно ли им?