Дашборды для контроля системы досудебного обжалования
Разработка дизайна и экранов системы, которой пользуются высокопоставленные министры
Экспертизы
Analytics
UX/UI design
Digital design
UX/UI design
Digital design
Дата
2020
Заказчик и история проекта
В России действует информационная система досудебного обжалования (ИС ДО). В ней граждане могут обжаловать решения органов власти, которые были приняты во время предоставления госуслуг. За развитие этой системы отвечает Аналитический центр при Правительстве Российской Федерации.
ИС ДО контролируют госслужащие разных уровней. Часть их работы состоит в аналитике. На основе данных сотрудники оценивают эффективность системы и ставят задачи для улучшения ее работы.
Раньше работать с огромными массивом данных специалистам приходилось вручную: на бумаге или в таблицах Excel. Чтобы госслужащие принимали решения быстрее, Аналитический центр при Правительстве Российской Федерации запустил разработку сервиса для контроля системы досудебного обжалования.
За интерфейсом и дизайном продукта команда обратилась в «Атвинту». Нам предстояло разработать макеты дашбордов, которые заказчик реализует в сервисе.
Раньше работать с огромными массивом данных специалистам приходилось вручную: на бумаге или в таблицах Excel. Чтобы госслужащие принимали решения быстрее, Аналитический центр при Правительстве Российской Федерации запустил разработку сервиса для контроля системы досудебного обжалования.
За интерфейсом и дизайном продукта команда обратилась в «Атвинту». Нам предстояло разработать макеты дашбордов, которые заказчик реализует в сервисе.
У нас было несколько предложений, но «Атвинта» подготовила самую лучшую презентацию проекта. Команда представила небольшой очень качественный ролик, который демонстрировал общий подход к тому, что агентство готово реализовать.
Почему «Атвинта»
Константин Цветов
руководитель проектной группы по реализации механизма досудебного обжалования контрольной (надзорной) деятельности
Задачи проекта
Нам предстояло разработать дашборды, которые наглядно презентуют данные о работе системы, экономят время госслужащих
и помогают принимать правильные решения на основе аналитики.
и помогают принимать правильные решения на основе аналитики.
Специфика состояла в уровне госслужащих — вице-премьер, министры и инспекторы, для которых мы делали экраны, мыслят разными масштабами.
Мы провели аналитику,
чтобы выяснить:
чтобы выяснить:
На старте заказчик представил объемный пул данных, которые используются для контроля системы досудебного обжалования.
Работа с данными
Одна и та же информация имеет разную значимость для госслужащих, и мы учли этот фактор при разработке экранов.
Мелкие детали не интересны министру, но необходимы инспектору, который работает с регионом. Даже 10 незакрытых жалоб будут для него поводом провести проверку.
А у министра показатели исчисляются тысячами, и это не сыграет значительной роли при принятии решений на таком уровне.
А у министра показатели исчисляются тысячами, и это не сыграет значительной роли при принятии решений на таком уровне.
project manager
Екатерина Мурая
Команде удалось понять конечного потребителя. Коллеги выбрали правильные показатели из огромного пула данных и доходчиво расположили их в интерфейсе. Наглядная структура очень важна для госслужащих, которые часто не имеют большого опыта работы с информационными системами.
Как справились с показателями
Константин Цветов
руководитель проектной группы по реализации механизма досудебного обжалования контрольной (надзорной) деятельности
Экраны пользователей
Веб-сервис представляет собой многоуровневую систему экранов, на которых в зависимости от роли пользователя отображаются соответствующие типы данных.
Дашборд вице-премьера
Вице-премьер оценивает эффективность системы досудебного обжалования в масштабах государства. Ему доступны сводные данные по всей стране, а также цифры в разрезе субъектов, округов и федеральных органов исполнительной власти.
Цвет плашек подсказывает, на какие показатели стоит обратить внимание, а диаграммы и графики помогают визуально оценить ситуацию по структуре и динамике показателя.
Нажатием на плашку пользователь переходит на страницы с детализированной информацией по группам данных.
На главной странице мы отобразили общие показатели работы системы: количество жалоб и детализация по ним, средний срок принятия решения, количество жалоб с нарушенным сроком и количество исков, поступивших в суд.
Дашборд министра
Министр оценивает работу системы в части ведения министерства, поэтому ему доступны данные в разрезе собственных подразделений, видов контроля и вида заявителя.
По структуре экраны министра во многом дублируют отчеты генерала, однако данные и детализация по ним — другие. Например, в разделе «Рейтинг» у вице-премьера отражены топ-субъекты и топ-органы исполнительной власти. Министру же доступны рейтинги по жизненным ситуациям с более подробной детализацией эффективности работы системы.
Дашборд инспектора
Инспектор работает на уровне региона — ему важно видеть информацию по конкретным кейсам, поэтому для этих пользователей мы поместили на главную планировщик с жалобами.
Карина Скородинская
ведущий UX/UI-дизайнер
Назначение данных для инспектора отличается от других категорий пользователей, поэтому и подход к визуализации иной. Например, сортировке и фильтрации данных здесь уделено больше внимания, так как вариативный и удобный поиск по жалобам важен для оперативной работы инспектора
Получить информацию можно в разрезе дня, недели и месяца. Для аналитики длительных периодов мы сделали отдельные экраны с подробной информацией о ходе рассмотрения жалоб.
Статистика для оценки работы инстанции выводится
на отдельной странице. Здесь инспектор может
оценить результаты работы своего подразделения.
на отдельной странице. Здесь инспектор может
оценить результаты работы своего подразделения.
Дизайн
Дашборд должен экономить время сотрудника и помогать проводить аналитику быстро. Чтобы пользователь легко ориентировался в данных, мы использовали несколько приемов.
Количество показателей
Мы разместили оптимальный для восприятия объем информации на каждом экране. Может показаться, что чем информативнее дашборд, тем лучше для сотрудника, однако обилие показателей и графиков перегружают внимание.
На одной плашке может быть размещена диаграмма, структура и общее количество, но все они раскрывают подробности одного явления.
На плашках сгруппированы показатели и графики из одного раздела. Это визуально отделяет группы данных, поэтому пользователь не теряется среди множества цифр и понимает, на какой именно запрос отвечает информация в блоке.
Информация на плашках
На главных страницах мы разместили общие показатели и основные пояснения к ним, например, со структурой. Второстепенные подробности мы переносили на отдельную страницу, предпочитая освободить внимание пользователя от данных, которые будут более актуальны на следующей итерации.
Размер шрифтов и графического визуала
Все, что относится к общим и ключевым показателям, мы выделили более крупными масштабами. Размер шрифтов, графиков и плашек расставляет акценты и обращает внимание пользователя на данные, которые необходимо изучить в первую очередь.
Расстояние между элементами
и экономия пространства
и экономия пространства
Экран, где каждый пиксель заполнен информацией, рассеивает внимание пользователя и увеличивает время на поиск нужных данных. Поэтому мы использовали полезное пространство, не перегружая интерфейс.
Дашборды должны помогать в анализе, поэтому мы создали визуальные подсказки, которые сигнализируют, на что стоит обратить внимание.
Например, рост среднего срока принятия решения сотрудник оценивает негативно, потому что система должна рассматривать жалобы быстрее. Такое изменение мы подсвечиваем красным.
Подсказки
Чтобы данные не сливались в единое полотно и госслужащие легко находили нужную информацию, мы проработали свободное пространство и расстояния между элементами дизайна. За счет этого группы данных стали легко различимы между друг другом в интерфейсе.
Карина Скородинская
ведущий UX/UI-дизайнер
Яркие цвета
Дополнительно разделить типы информации помогают цвета. В дизайне мы использовали яркие оттенки — это выделяет цифры и графики в интерфейсе, благодаря чему пользователь быстро находит данные на рабочем пространстве.
Если бы на диаграммах были использованы пастельные тона или цвета из одной гаммы, то структура показателя выглядела бы не такой понятной. В нашем проекте цвета сочетаются между собой, и общая картинка не выглядит кричащей или аляпистой.
Работа с цветом
Финальный вариант
О цветовом решении
Константин Цветов
руководитель проектной группы по реализации механизма досудебного обжалования контрольной (надзорной) деятельности
Среди пользователей сервиса — госслужащие высокого уровня, поэтому мы хотели, чтобы внешний вид продукта был презентабельным. Коллеги подобрали удачное цветовое решение: дашборды получились достаточно яркими и при этом стильными.
В каждом кейсе использовали несколько тестовых вариантов. Одной из самых проработанных стала диаграмма с многоуровневой структурой. Показатель было сложно интерпретировать, и мы «примерили» более 20 версий, чтобы выбрать наиболее удачный и понятный вид диаграммы.
В дашбордах десятки показателей, и к каждому из них нужно было подобрать наиболее очевидный вариант демонстрации. Мы исследовали множество библиотек, чтобы найти лучшие форматы для визуализации структуры, динамики и других типов данных.
Выбор подходящего визуала
Работа с форматами
Финальный вариант
Чтобы согласовать графики и дизайн экранов, мы ежедневно созванивались с заказчиком. Действовало правило: если большинству из рабочей группы непонятно, что означает цифра или диаграмма, то они отправляются на доработку.
Презентабельность — одно из ключевых требований заказчика к дизайну. Стильная анимация делает интерфейс более премиальным и живым для пользователя.
Анимация
Мы анимировали диаграммы, графики и другие элементы дашбордов. Основная трудность здесь — найти оптимальный подход к реализации дизайнерской задумки. Сервис работает с огромным количеством информации, и сложная анимация может потерять плавность из-за долгой загрузки данных.
Перед тем, как предложить анимацию заказчику, мы консультировались со своими программистами. Вместе с ними команда находила компромиссный вариант анимации для разработки и дизайна.
Перед командой стояла задача адаптировать макеты дашбордов под разные устройства. Заказчик принял решение не использовать резиновую или адаптивную верстку, а для каждого экрана разработать собственные макеты под 10 самых популярных разрешений.
Адаптивы для 10 видов разрешений
С одной стороны, такой подход оказался трудозатратным, потому что дизайнеры редактировали все макеты под множество разрешений. С другой — так удалось обеспечить идеальную верстку для выбранных устройств. При загрузке страницы в них полностью сохраняется структура экрана и корректное расположение элементов.
Карина Скородинская
ведущий UX/UI-дизайнер
Функционал связных компонентов в Figma помог собрать удобную систему взаимодействия с дизайном в одном месте, а также упростить работу со всеми макетами проекта. Мы создали единую библиотеку для дашбордов, элементы которой удобно использовать за рамками проекта. Это помогает расширять систему без участия дизайнера.
Разработка экранов для разрешения 11200 х 2160
Длина экрана не соответствует привычному соотношению сторон в интерфейсе, поэтому мы не просто перекомпоновали дашборды, а разработали отдельный экран с расширенными данными.
Чтобы показывать презентации и отчеты такому количеству людей, в аудитории установлен экран с разрешением 11200 х 2160. Нам предстояло разработать дашборды для совещаний в этой локации.
Совещания высокопоставленных чиновников проходят в Координационном центре Правительства РФ. В здании органа находится зал, рассчитанный на сотни человек — это пространство, в котором можно провести масштабное заседание или собрание.
Эта задача вошла в наш личный список рекордов — мы создали макет для самого большого экрана за всю историю «Атвинты».
При этом экран имеет особую схему подключения из-за чего сначала макет «не вставал» в рабочее пространство. Мы потратили много времени, чтобы подобрать решение, которое позволит вывести макеты в нужном виде.
Сложность состояла в том, чтобы вывести данные, которые будут полезны целой аудитории людей, а не отдельному пользователю.
В нашем проекте было много нетривиальных задач, с которыми команда успешно справилась. В случае с экраном в Координационном центре коллеги удачно перестроили функциональную структуру дашборда и учли технические особенности подключения нестандартной аппаратуры.
Работа с вызовами
Константин Цветов
руководитель проектной группы по реализации механизма досудебного обжалования контрольной (надзорной) деятельности
Мы создали темную тему, чтобы предоставить пользователю дополнительный выбор, как именно работать с системой. Небольшая персонализация сделала интерфейс еще более удобным и функциональным.
Светлая и тeмная тема
Темная тема позволяет сфокусироваться и выделить контентную составляющую системы: графики и данные. При разработке темной стороны лучше прорабатывается контрастность и акцентные цвета, так как использование большого количества полутонов и оттенков здесь ограничено. В итоге дизайн получается более чистым и консистентным.
Мы активно используем оба цветовых режима. Особенно удачно темная тема выглядит на совещаниях, когда мы выводим дашборды на большие экраны.
Цветовые темы
Константин Цветов
руководитель проектной группы по реализации механизма досудебного обжалования контрольной (надзорной) деятельности
Карина Скородинская
ведущий UX/UI-дизайнер
Мы позаботились, чтобы разработчики клиента без проблем могли реализовать в продукте решения, предложенные «Атвинтой».
Рекомендации для команды заказчика
Перед тем, как добавить на макет график, анимацию или тень, мы брали консультации у наших технических специалистов. Они давали рекомендации, как реализовать сложные в части визуализации элементы. Таким образом, мы передали заказчику не только макеты, но и "инструкцию по применению" к ним.
project manager
Екатерина Мурая
Для команды заказчика мы сформировали:
Коллеги сопровождали процесс разработки, чтобы итоговый продукт выглядел так же, как на макетах. Предложенный UI-Kit мы продолжаем использовать для развития сервиса — с такой подробной проработкой элементов нам удается быстро собирать новые экраны.
Помощь в разработке
Константин Цветов
руководитель проектной группы по реализации механизма досудебного обжалования контрольной (надзорной) деятельности
Проект реализовывался в режиме реального времени — готовые макеты мы передавали команде Аналитического центра, и разработчики сразу приступали к их внедрению. В режиме постоянного развития проект работает уже 2 года, и все это время он помогает тысячам госслужащих выполнять свою работу быстрее и эффективнее.
Финальный продукт и пользователи
До проекта пользователь находился в информационном вакууме. Мы хотели обеспечить его нужной информацией — дать не эфемерную картинку, а именно те цифры, которые действительно пригодятся в рутине. Дашборды позволяют госслужащим контролировать работу, не просрочивать жалобы и принимать правильные решения на основе данных.
Польза продукта
Константин Цветов
руководитель проектной группы по реализации механизма досудебного обжалования контрольной (надзорной) деятельности
Итоги проекта
Некоторые ведомства использовали аналитические панели и раньше, но инструмент не был доступен для рядовых специалистов регионального уровня. Дашборды в таких масштабах — большое новшество в нише внутренних государственных информационных систем.
Смотрите также
