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