В США опубликовали апдейт дизайн-системы госсайтов: почему это важно знать
Текст Артема Геллера с vc.ru
Основатель дизайн-компании «Смена» и инициатор создания российской дизайн-системы — о том, что такое дизайн-система, чем она будет полезна людям и почему это важнейший элемент становления сервисного государства.
В начале апреля в США запустили вторую версию единой дизайн-системы для государственных сайтов — USWDS 2.0. В России уже около трёх лет реализуется схожий проект.
Зачем нужна дизайн-система
Дизайн-система — это структура готовых компонентов, стилей и решений, на основе которых можно быстро построить сайт и разработать онлайн-услугу. Все решения тестируются с помощью исследований.
Поэтому на начальном этапе у разработчиков уже есть информация о потребностях людей, которые станут пользователями. Это помогает создать простой и понятный для всех сайт любой организации.
В США создание единой дизайн-системы для госсайтов — в первую очередь способ добиться соответствия государственных электронных ресурсов закону Section 508. Этот документ призван принять антидискриминационные меры в сфере информационных технологий.
Другими словами, государственные сайты, согласно американскому законодательству, должны быть доступны для всех людей без исключения. Кроме того, разработчики USWDS 2.0 отмечают, что дизайн-система США создана, чтобы государственные организации могли разрабатывать удобные и понятные сайты, затрачивая минимальное количество временных и финансовых ресурсов.
USWDS — это не первый «подход к штанге». До неё несколько американских агентств уже внедряло подобные проекты для поддержания единства внутри своего цифрового бренда.
Однако разработка собственной системы с нуля — процесс довольно сложный: у большинства государственных институтов не хватает возможностей сделать это самостоятельно и качественно. Решением стало создание единой дизайн-системы, которую могут использовать все госведомства США.
До опубликованного в апреле апдейта около 200 сайтов американских федеральных органов власти работали на первой версии USWDS. Этот опыт подтвердил гипотезу о том, что единая система способна упростить взаимодействие «человек-государство» и сделать процесс создания официальных сайтов менее затратным.
Местные разработчики любого профессионального уровня, пользуясь готовыми кодами, инструментами и гайдами, делают одинаково удобные и эффективные сайты государственных организаций.
Вторая версия USWDS нужна для того, чтобы упростить интеграцию государственных сайтов в систему, а значит — подключить к ней ещё больше официальных цифровых ресурсов.
На иллюстрациях видно, что интегрированные в систему госсайты США, сохранили индивидуальную стилистику и привычную для пользователей навигацию. Но при этом не похожи между собой.
Как решается проблема в России
В нашей стране предпосылки реализации и идеология проекта были схожими. Главная цель всей работы — облегчить людям взаимодействие с государственными институтами через простые и понятные веб-сервисы. С помощью дизайн-системы удастся сместить фокус в цифровизации госуслуг с «красивой картинки» на решение конкретных проблем пользователей.
Как и американские разработчики, дизайн-компания «Смена» руководствуется в первую очередь принципом доступности. Предоставляя услуги в онлайне, государство снимает ограничения для людей с особыми потребностями или низкой цифровой грамотностью.
Например, если в семье родился ребёнок, для получения свидетельства о рождении его маме больше не нужно относить несколько документов по разным инстанциям. Ей эту услугу окажут в онлайне. А человек со слабым зрением, которому сложно ориентироваться в разномастных сайтах, сможет узнать необходимую информацию, просто зайдя на адаптированный под его потребности типовой государственный портал.
Апдейт системы США стал ещё одним доказательством того, что схема работает и серьёзно упрощает взаимодействие для всех сторон процесса. Люди испытывают меньше затруднений при получении услуг, государство самым коротким и очевидным способом доводит информацию до людей, а разработчики тратят меньше времени и бюджетных денег, создавая сайты по однажды внедренным и протестированным решениям.
Американский опыт также стал хорошим примером того, как те или иные решения работают на практике.
Российские разработчики перенимали удачный опыт зарубежных коллег из США, Великобритании, Австралии, Германии, где идёт работа над едиными дизайн-системами. В то же время они сделали уникальный отечественный продукт, концепты и решения которого подтверждены исследованиями российских пользователей.
Российские и американские наработки: сходства и различия
Обновленная версия USWDS и российская дизайн-система работают по схожим принципам, которые предполагают:
- модульный дизайн;
- обеспечение единого языка дизайна на всех сайтах;
- гибкость и последовательность;
- ускорение процесса разработки прототипов и «боевых» сайтов;
- создание фундамента для развития государственной цифровой системы;
- экспертное сопровождение для последующих разработчиков
Но в реализации этих принципов есть отличия. Ниже эксперты компании «Смена» привели несколько примеров того, как в США и у нас в рамках единой дизайн-системы решаются проблемы соответствия потребностям пользователей.
Возможность внедрения решений в существующие сайты и сервисы
Разработчики USWDS 2.0 сообщают, что их дизайн-система не нарушает существующую функциональность сайтов, а изменения можно вносить быстро. Все разработки легко адаптируются к внешнему виду ресурса, так что посетителями не придётся долго привыкать к обновлениям.
Российская дизайн-система предполагает не только функциональную, но и стилистическую унификацию госсайтов. Эксперты компании «Смена» объясняют, что многие люди испытывают тревогу, если приходится передавать свои данные для получения услуг в онлайне.
Стилистическое единообразие повысит уровень доверия к сайтам, поскольку пользователь будет без труда идентифицировать официальный сайт среди прочих. Люди получат уверенность, что информация надежно защищена, а услуга будет оказана.
Использование дизайн-токенов
В USWDS 2.0 токены — это одинаково построенные шаблоны визуального дизайна, включая цвет, межбуквенные и межстрочные интервалы. В российской версии ту же роль играют паттерны. Они строятся на основе сетки и системы отступов.
Это универсальные инструменты организации пространства, которые обеспечивают согласованность между сервисами, средами и размерами экрана, используя единую систему управления пространством.
Используя токены или паттерны, разработчики тратят гораздо меньше времени на конструирование страницы, направляя усилия на удовлетворение конкретных проблем пользователей.
Макетная сетка
В основе USWDS 2.0 макетная сетка с 12 колонками, которая позволяет встраивать компоненты или макеты в прототипы или существующие ресурсы. Настраивать сайты можно под любой размер дисплея.
Российская колоночная система адаптируется под три типа устройств: десктоп, планшет и смартфон. Для каждого устройства задан свой диапазон ширины экрана, в рамках которого сетка имеет свои параметры: количество колонок, их ширину, расстояния между ними и ширину поля. При переходе границы диапазона ширин эти параметры изменяются.
Цветовые системы
Система цвета USWDS 2.0 даёт возможность выбирать подходящие пары цветов для построения компонентов. В российской дизайн-системе в качестве основных цветов используются чёрный, белый, оттенки серого и синий.
Остальные цвета применяются редко и обращают внимание на важную информацию, например, на ошибку или предупреждение. Людям так проще воспринимать информацию на странице и определять те или иные компоненты в соответствии с их назначением.
Визуальные темы сайтов
Для разных сайтов USWDS 2.0 можно создавать различные визуальные темы в соответствии с направленностью сайта. Российская дизайн-система — это единое узнаваемое визуальное и техническое решение для всей группы государственных сайтов. Пользователям не придется, приходя на очередной государственный сайт, заново привыкать к принципам его работы, стилистике и навигации.
Шрифт
Вторая версия американской дизайн-системы имеет шрифт с открытым исходным кодом Public Sans. Для российской дизайн-системы специально разработан шрифт PT Russia. Он может использоваться бесплатно только на государственных сайтах, а значит — станет ещё одним идентификатором официальных ресурсов предоставления услуг.
Как это выглядит
Компоненты российской и американской дизайн-систем, выполняя одни и те же функции, реализуются по-разному. Вот несколько примеров того, как это выглядит на практике.
Шапка сайта (Header)
Этот элемент позволяет пользователю понять, какой сайт он посещает. В американской дизайн-системе отсутствует возможность перейти с одного государственного ресурса на другой через так называемый госбар. Российская система же предлагает навигацию по всем официальным ресурсам.
Американский вариант предлагает простой поиск по ключевым словам. В российском — больше возможностей для поиска. В поисковой строке предлагается список всех разделов сайта, чтобы была дополнительная возможность выбрать один, по которому будет вестись поиск.
В дизайн-системе США больше вариантов, в которых можно использовать кнопки. Их предполагается использовать для выделения приоритетных действий. В российском варианте кнопка используется как единственный акцент, чтобы сценарий получения услуги был более очевидным для пользователя.
В американской системе больше вариантов предупреждений, чем в российской. По мнению российских разработчиков, меньшее количество предупреждений облегчает пользователю возможность правильно на них среагировать.
Американский вариант более нагружен визуально. Российская версия более системна и функциональна. Кроме того, предусмотрена мобильная версия подвала. Все это облегчает восприятие информации с любых типов устройств.
Таким образом, российская и американская дизайн-системы демонстрируют разные подходы к решению похожих задач. Разработчики основываются на специфике своей национальной аудитории, поэтому разные решения одинаково эффективно работают в нашей стране и в США.
При этом важный опыт западных коллег даёт возможность нашим специалистам учитывать чужие ошибки в своей работе и выдавать продукт, максимально подходящий для работы в «боевых» условиях.
