Дашборды для контроля системы досудебного обжалования

1. Вводная задача от заказчика, проблематика, цели

От нас требовалось разработать интерфейс BI-системы для принятия решений на уровне государства, регионов и муниципалитетов.

Заказчик и история проекта

В России действует информационная система досудебного обжалования (ИС ДО). В ней граждане могут обжаловать решения органов власти, которые были приняты во время предоставления госуслуг. За развитие этой системы отвечает Аналитический центр при Правительстве Российской Федерации.

ИС ДО контролируют госслужащие разных уровней. Часть их работы состоит в аналитике. На основе данных сотрудники оценивают эффективность системы и ставят задачи для улучшения ее работы.

Раньше работать с огромными массивом данных специалистам приходилось вручную: на бумаге или в таблицах Excel. Чтобы госслужащие принимали решения быстрее, Аналитический центр при Правительстве Российской Федерации запустил разработку сервиса для контроля системы досудебного обжалования.

За интерфейсом и дизайном продукта команда обратилась в «Атвинту». Нам предстояло разработать макеты дашбордов, которые заказчик реализует в сервисе.

Задачи

Нам предстояло разработать дашборды, которые наглядно презентуют данные о работе системы, экономят время госслужащих и помогают принимать правильные решения на основе аналитики.

• Разработать систему экранов с дашбордами для госслужащих разного уровня: генералов, министров, инспекторов;
• Выявить приоритетные показатели и правильно разместить акценты в интерфейсе;
• Подобрать наиболее наглядные и понятные пользователю форматы диаграмм, схем и графиков;
• Создать стильную и представительную дизайн-концепцию с анимацией;
• Разработать темную версию интерфейса;
• Адаптировать макеты для 10 экранных разрешений;
• Создать макет для нестандартного экрана с разрешением 11200 х 2160;
• Найти компромиссные решения, которые сохранят эффектный дизайн и не будут слишком трудозатратными для разработки.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

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

Мы провели аналитику, чтобы выяснить:

• на каких показателях сделать акцент;
• что разместить на главном экране;
• что отразить на страницах по отдельным группам данных.

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

Экраны пользователей

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

Дашборд вице-премьера

Вице-премьер оценивает эффективность системы досудебного обжалования в масштабах государства. Ему доступны сводные данные по всей стране, а также цифры в разрезе субъектов, округов и федеральных органов исполнительной власти.

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

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

Дашборд министра

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

Дашборд инспектора

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

Дизайн

Дашборд должен экономить время сотрудника и помогать проводить аналитику быстро. Чтобы пользователь легко ориентировался в данных, мы использовали несколько приемов.

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

Анимация

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

Адаптивы для 10 видов разрешений

Перед командой стояла задача адаптировать макеты дашбордов под разные устройства. Заказчик принял решение не использовать резиновую или адаптивную верстку, а для каждого экрана разработать собственные макеты под 10 самых популярных разрешений.

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

Разработка экранов для разрешения 11200 х 2160

Совещания высокопоставленных чиновников проходят в Координационном центре Правительства РФ. В здании органа находится зал, рассчитанный на сотни человек — это пространство, в котором можно провести масштабное заседание или собрание. Чтобы показывать презентации и отчеты такому количеству людей, в аудитории установлен экран с разрешением 11200 х 2160. Нам предстояло разработать дашборды для совещаний в этой локации.

Длина экрана не соответствует привычному соотношению сторон в интерфейсе, поэтому мы не просто перекомпоновали дашборды, а разработали отдельный экран с расширенными данными. Сложность состояла в том, чтобы вывести данные, которые будут полезны целой аудитории людей, а не отдельному пользователю.

При этом экран имеет особую схему подключения из-за чего сначала макет «не вставал» в рабочее пространство. Мы потратили много времени, чтобы подобрать решение, которое позволит вывести макеты в нужном виде.

Эта задача вошла в наш личный список рекордов — мы создали макет для самого большого экрана за всю историю Атвинты.

Светлая и тeмная тема

Создали темную тему, чтобы предоставить пользователю дополнительный выбор, как именно работать с системой. Небольшая персонализация сделала интерфейс еще более удобным и функциональным.

Константин Цветов

Руководитель проектной группы по реализации механизма досудебного обжалования контрольной (надзорной) деятельности, ФГИС ДО

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

3. Результаты сотрудничества

Итоги проекта

• Разработали наглядные дашборды для трёх видов пользователей;
• Отразили на дашбордах актуальные для пользователей данные;
• Создали стильную дизайн-концепцию, которая соответствует статусу пользователей;
• Анимировали элементы дашбордов для большой привлекательности интерфейса;
• Адаптировали макеты под 10 разрешений;
• Создали отдельные дашборды для одиннадцатиметрового экрана;
• Реализовали темные цветовой режим;
• Передали заказчику инструкции по внедрению дизайна;
• Курировали команду разработки во время реализации интерфейса.

Заказчик продолжает развивать систему силами своих разработчиков. Благодаря продуманной дизайн-системе Атвинты команде легко собирать новые станицы дашбородов. Также наш концепт используется и для других задач заказчика, например, для создания отчетных видеороликов.

Константин Цветов

Руководитель проектной группы по реализации механизма досудебного обжалования контрольной (надзорной) деятельности, ФГИС ДО

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