Ищите надёжного digital-подрядчика? Выберите его самостоятельно или организуйте тендер, чтобы определить лучшего.
Proscom
Дистанционное электронное голосование (ДЭГ)
Proscom
WDA
2025
#Проектирование сайта#Дизайн сайта

Дистанционное электронное голосование (ДЭГ)

2246 
13 фев 2025 в 9:44
Proscom
Proscom Россия, Москва
Поделиться:
Клиент

Правительство Москвы

Сфера

Некоммерческие, государственные организации

Регион

Россия, Москва

Сдано

Август 2024

Задача

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

В Москве ДЭГ впервые внедрили в сентябре 2019 года. С тех пор онлайн-голосование стало неотъемлемой частью выборов в столице.

Одна из главных задач ДЭГ — дать возможность миллионам москвичей отдать свой голос на выборах онлайн, без посещения избирательного участка.

Практически каждый год в столичной системе ДЭГ появляются новые технологические решения, которые делают голосование более простым и удобным.

Решение

В 2024 году мы совместно с Правительством Москвы создали интерфейсы для сервисов, которые помогают оптимизировать процесс онлайн-голосования.

Для улучшения качества обслуживания избирателей и повышения эффективности работы государственных организаций мы разработали дизайн для трех цифровых решений:

1. «Электронного списка избирателей» — технологии, которая помогает быстро найти нужного человека, а также исключает ошибки, связанные с хранением данных на бумаге и человеческим фактором.

2. «Дистанционного электронного голосования» (ДЭГ) — системы, которая помогает избирателям отдать голос электронно.

3. «Обзервер» — сервиса, благодаря которому можно следить за ходом онлайн-голосования.

Стоит отметить, что все технические работы проходили на стороне заказчика.

1Дизайн «Электронного списка избирателей»

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

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

Подпись к изображению: Главный экран члена УИК.

Кроме того, восприятие информации усложнялось из-за перегруженности экранов различными элементами. Один из примеров — экран «Регистрация избирателя». Пользователь видит сразу три кнопки: «Поиск», «Сканировать» и «Закрыть форму». Такое множество вариантов затрудняет понимание того, какое действие необходимо сделать для достижения результата.

Подпись к изображению: Экран «Регистрация избирателя».

Решение: для улучшения восприятия информации мы проработали расстановку цветовых акцентов в сервисе и продумали новое расположение элементов на экранах. Кроме того, приняли непростое решение — отказались от активного красного цвета в дизайне. Непростое, потому что ярко-красный — это главный цвет дизайн-системы портала mos.ru.

В новом интерфейсе красным остался только логотип сервиса — для сохранения преемственности от основного городского портала mos.ru. Остальные элементы мы сделали более нейтральными — в спокойных оттенках синего.

Подпись к изображению: Новый главный экран члена УИК.

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

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

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

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

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

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

Подпись к изображению: Экран «Выбор способа голосования».

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

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

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

2Дизайн «Дистанционного электронного голосования» для избирателя

Для участия в дистанционном электронном голосовании в дни выборов нужно авторизоваться на портале mos.ru и нажать на баннер о голосовании. Затем, необходимо второй раз подтвердить личность и получить доступ к бюллетеню. Это можно сделать с помощью номера телефона, к которому привязан аккаунт в системе. После, избирателю в электронном бюллетене нужно поставить галочку у фамилии выбранного кандидата и нажать «Проголосовать».

Проблема: сложные сценарии пользовательских действий на всех этапах ДЭГ из-за высоких требований к информационной безопасности. А также отсутствие аналогичного мирового пользовательского опыта и возможности длительного анализа отклика пользователей, что могло бы помочь при проектировании и тестировании гипотез.

Решение: мы тщательно продумали пользовательский путь с учетом всех возможных разветвлений и разработали понятный интерфейс. Заказчик дал нам подробное ТЗ с прописанными сценариями и доступ к дизайн-системе портала mos.ru. 

Подпись к изображению: Часть схемы движения пользователя в сервисе.

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

Подпись к изображению: Пример модального окна.

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

Исследование выявило моменты, сложные для пользовательского восприятия, и показало возможные точки развития сервиса.

3Дизайн аналитического сервиса «Обзервер»

Чтобы избиратели, наблюдатели и сотрудники МГИК могли быстро интерпретировать информацию о ходе онлайн-голосования, мы разработали интерфейс сервиса «Обзервер». Сам инструмент предназначен для мониторинга хода дистанционного электронного голосования с помощью блокчейн-сети, в которой хранится информация о всех действиях, с ним связанных: это сведения о выдаче электронных бюллетеней, получении голосов, их расшифровке и подсчете. Эти данные находятся в открытом доступе и показывают динамику голосования.

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

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

Решение: чтобы упростить работу с сервисом, мы реализовали в интерфейсе функции фильтрации и поиска транзакций. Пользователь может посмотреть только нужные ему данные, например, за определенный временной интервал.

Подпись к изображению: Экран «Мониторинг голосования».

Кроме того, мы добавили цветовую кодировку для различных типов действий, что способствует лучшему восприятию данных: голубой — выдача бюллетеня; розовый — прием бюллетеня; салатовый — проверочная транзакция и другие варианты. 

Подпись к изображению: Цвета статусов транзакции.

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

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

Подпись к изображению: Экран «Блоки и транзакции».

Хочется отметить, что в сервисе «Обзервер» доступны несколько тем: светлая и темная. Кроме того, инструментом можно пользоваться на различных устройствах.

Подпись к изображению: Адаптивность сервиса к различным устройствам.

Результат

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

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

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

На выборах депутатов Московской городской Думы, муниципальных депутатов ТиНАО и района Куркино в сентябре 2024 года явка избирателей в Москве достигла 40%, что почти вдвое превышает показатель 2019 года. Из них 95,38% проголосовали электронно.

https://www.mos.ru/city/projects/vote2024/

Стек технологий

  • Figma Figma Графический редактор

Награды


Выскажите мнение
Авторизуйтесь, чтобы добавить свой комментарий.
оставить заявку

Хотите заказать похожий проект?

Proscom с удовольствием обсудит вашу задачу

Оставить заявку