В США опубликовали апдейт дизайн-системы госсайтов: почему это важно знать

Как решается проблема в России

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

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

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

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

Американский опыт также стал хорошим примером того, как те или иные решения работают на практике.

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

Российские и американские наработки: сходства и различия

Обновленная версия USWDS и российская дизайн-система работают по схожим принципам, которые предполагают:

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

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

Возможность внедрения решений в существующие сайты и сервисы

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

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

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

Использование дизайн-токенов

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

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

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

Макетная сетка

В основе USWDS 2.0 макетная сетка с 12 колонками, которая позволяет встраивать компоненты или макеты в прототипы или существующие ресурсы. Настраивать сайты можно под любой размер дисплея.

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

Цветовые системы

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

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

Визуальные темы сайтов

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

Шрифт

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

Как это выглядит

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

Шапка сайта (Header)

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