Государство для людей: зачем нужна единая дизайн-система для российских государственных сайтов и кто её придумал

Уже около трёх лет над официальной дизайн-системой для всех сайтов российских госорганов работает дизайн-компания «Смена» (AIC и «Лаборатория Артема Геллера») вместе с партнёрами из Минкомсвязи. Цель проекта — унификация и объединение социально важных сайтов для оказания услуг гражданам и их информирования.

Команда рассказала о том, как пришла идея создания дизайн-системы и зачем она нужна людям и государству.

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

Идея о том, что государственные сайты нуждаются в единой дизайн-системе, возникла ещё в 2009 году. В это время был создан сайт Президента РФ — kremlin.ru. Над ним работала команда Артёма Геллера. Новый сайт доброжелательно встретило профессиональное сообщество. Результатом были довольны и заказчики.

В итоге как грибы после дождя стали появляться «клоны» kremlin.ru. Разработчикам госсервисов и сайтов хотелось выдавать стилистически похожие продукты, чтобы пользователи, зайдя на сайт, понимали, что это — официальный источник, которому можно доверять.

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

Как отмечает Артём Геллер, после первых мыслей о том, что дизайн «украли», появилась идея: государству нужно помочь — создать единый стандарт для всех официальных сайтов и распространять его бесплатно. Это должны быть официально утверждённые решения, стили, шаблоны и шрифт с подробными руководствами, как ими пользоваться.

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

Решили базировать будущую дизайн-систему на домене gov.design, который в то время принадлежал ФСО. Домен передали в Минкомсвязи, с командой был заключён государственный контракт и началась работа по созданию первой версии дизайн-системы для государства.

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

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

Из первой версии во вторую перекочевали лейаут и система отступов, но сама система стала проще и для пользователей, и для дизайнеров. Вторая версия позволяет сфокусироваться не на визуальной составляющей, а на качестве сервисов и понятности контента.

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

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

«Смена» заказала разработку официального шрифта Российской Федерации одному из лучших специалистов в этой сфере — Александре Корольковой из «Паратайп». Так появился шрифт «Голос RF», который будут использовать на всех официальных сайтах.

По похожему пути шли многие государства, где есть разветвлённая система правительственных сайтов и сервисов. Так, совсем недавно объявили о запуске второй версии унифицированной дизайн-системы в США. Похожие сайты с подробными руководствами для разработчиков действуют в Великобритании, Австралии, некоторых странах Евросоюза.

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

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

Стоит знать, что минимум 8,2% россиян живут с инвалидностью, 14% — имеют проблемы со зрением, а 40% вообще не пользуются онлайн-сервисами. Многие испытывают беспокойство в случаях, когда приходится оставлять свои личные данные при получении услуг в форме на сайте.

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

Кроме того, в возрасте от 25 до 60 лет способность людей пользоваться сайтами снижается на 0,8% в год. Это происходит в основном потому, что они тратят больше времени на страницу из-за трудностей с навигацией. Другими словами, 40-летний пользователь проведёт на сайте на 8% больше времени, чем 30-летний для выполнения одной и той же задачи.

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

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

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

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

Первая версия дизайн-системы оправдала себя в применении лишь к информационным сайтам. Вот так смотрелись страницы Министерства образования и Министерства природных ресурсов.

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

И самые новые скрины разработки второй версии дизайн-системы — лента новостей с частотой одной–пяти новостей в день (всего три ленты), концепт страницы ведомства и концепт навигации по структуре правительства.