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

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

В начале апреля в США запустили вторую версию единой дизайн-системы для государственных сайтов — 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)

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

Поиск (Search)

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

Кнопки (Buttons)

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

Предупреждения (Alert)

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

Подвал (Footer)

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

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

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

0
50 комментариев
Написать комментарий...
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
AS

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

Ответить
Развернуть ветку
Rudolf Cunningham

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

Ответить
Развернуть ветку
Alexander Biragov

Ретроград.

Ответить
Развернуть ветку
Rudolf Cunningham

Нет, просто ставлю функциональность выше свистоперделок.

Ответить
Развернуть ветку
Alex One

Какую ты видишь функциональность? Аргументы будут?

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

Ответить
Развернуть ветку
Vitold S.
дизайн у нас менее навязчивый

В лоб я не вижу навязчивости дизайна сайтов US.

более минималистичен

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

чище, мягкие акценты цветовые, при тех же UX элементах

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

Ответить
Развернуть ветку
Alex One

Дизайн субъективно лучше, но это моё частное мнение.
Какой борщ вкуснее обсуждать не намерен.
Ваша аргументация построена на отрицании.

Основной вопрос был про функциональность, так называемый UX, что удобнее, где удобнее, почему удобнее? Это же считается у нас "более объективной" сущностью.

Ответить
Развернуть ветку
AS
Зато условный новый GMail красивенький, вот только тормозит как не в себя

Это потому что напихают JS-фреймворков на миллион мегабайт, да ещё и 4К видосик в фон поставят, а потом лагает. Дизайн-то тут при чём? Можно сделать красиво и современно, при том тормозить ничего не будет.

Ответить
Развернуть ветку
Rudolf Cunningham

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

Ответить
Развернуть ветку
Никита Викторов

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

Ответить
Развернуть ветку
Mike Kosulin

Новый GMail - это пиздец, при условии, что я пользовался спокойно Inbox.

Ответить
Развернуть ветку
AS

По мне так все веб-клиенты — пиздец, я десктопным пользуюсь :)

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Рома Терехин

Если благодаря 2010-design idle вкладка не будет отжирать 300mb и анимация на кнопочке не будет просаживать CPU на 50% - голосую обеими руками.

Ответить
Развернуть ветку
D.S

Ты же не знаешь какой там JS будет под капотом =)

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Alexander Zhikh

Не многовато упоминаний дизайн-компании "СМЕНА"?

Вроде про американские госсайты статья.

Ответить
Развернуть ветку
Anastasia Reshetnik

Тема и статья интересные, но этот абзац прям тянет на холивар.

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

Я, как и большинство посетителей сайтов, не различаю шрифты визуально. Можно установить специальные плагины в браузер или посмотреть исходный код страницы, но зачем оно нам нужно? Стал ли для нас шрифт PT Russia "идентификатором официальных ресурсов"? Конечно же нет!

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

А теперь вопрос на миллион: "Как узнать, что шрифт PT Russia на сайте был использован бесплатно?" Ведь это ваш способ определять гос сайты...

Ответить
Развернуть ветку
Артём Геллер
Автор

если вы не знаете название шрифта то это совсем не значит, что вы его не идентифицируете ;)

Ответить
Развернуть ветку
Anton Lazovskiy

Т.е. вы не согласны, что разработка «идентификатора офф. ресурсов предоставления» в виде шрифта, это не есть бесполезный распил? Может лучше делать идентификатор в виде качественного UX и полноценного каталога услуг?

Ответить
Развернуть ветку
Артём Геллер
Автор

Этот «распил» мы создали за собственные не малые деньги и раздаём бесплатно.
Что такое “идентификатор в виде качественного UX”?

Ответить
Развернуть ветку
Артём Геллер
Автор

мы говорим про большинство. Шрифт яндекса, гугла и apple выполняет ровно ту же функцию

Ответить
Развернуть ветку
Виктор Говнинов

У нас симпотишнее и не 2010 год

Ответить
Развернуть ветку
max buynoff

Взять хоть наши Госуслуги точка ру - там и анимация и svg и spa, зато ui такой что хрен разберешь куда тыкать и где инфу искать

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
max buynoff

Российская государственная дизайн-система такова, что даже на схожих по тематике госсайтах приходится вводить одни и те же данные - базы разные и никак не интегрирутся.

Ответить
Развернуть ветку
Артём Геллер
Автор

она только появилась и ещё почти не начала применяться

Ответить
Развернуть ветку
max buynoff

Заметно, что до сих пор госсайты разрабатывались абсолютно бессистемно. Ну теперь будет на что еще несколько миллиардов списать

Ответить
Развернуть ветку
Артём Геллер
Автор

где-то в мире был другой путь?

Ответить
Развернуть ветку
Stanislav Sergeev

Я только что почитал brandbook, верно?

Ответить
Развернуть ветку
Ivan Beloborodov

Нет

Ответить
Развернуть ветку
Stanislav Sergeev

А есть какой-то список отличий одного от другого? Я был на конфе по этой теме и даже там не смог понять разницу.

Ответить
Развернуть ветку
Ivan Beloborodov

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

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

Ответить
Развернуть ветку
Stanislav Sergeev

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

Ответить
Развернуть ветку
Артём Геллер
Автор

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

Ответить
Развернуть ветку
Vovan Avach

Сайты придумали у них но дизайн придумали у нас )

Ответить
Развернуть ветку
Alexandr Perminoff

(с) Омар Хайям

Ответить
Развернуть ветку
Дмитрий Ольшевский

какие мы разные… жесть

Ответить
Развернуть ветку
Juriy Naumkin

Геллер молодец! )

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

1.Это означает что функционал не трогают и вносят только косметические улучшения по стилевой части? Если интерфейс услуги кардинально переработали - как его обновить не нарушая текущий функционал?

около 200 сайтов американских федеральных органов власти работали на первой версии USWDS

2.Каждое ведомство само делает переход на работу с дизайн системой? И обновляются потом тоже самостоятельно?

3.Сколько времени занимает переход/обновление?

Ответить
Развернуть ветку
Артём Геллер
Автор

1. Во второй версии так и есть. Стиль и не ломающая косметика.

2. Да.

3. Значительно меньше, чем заказать новый дизайн. В дальнейшем стили и весь фронт смогут обновляться из облака

Ответить
Развернуть ветку
Максим Завалишин

Нахваливают эту "Смену", мол у них и тут лучше, и там читабельнее. А если по факту - у америкосов уже все готово и внедряется, уже 2-я версия вышла. А у нас где? Даже 1-й версии не вижу. Есть какие-то наброски на gov.design, но в целом ничего так и нет. Даже шрифт. Где вот его взять этот PT Russia? На разных сайта смотрел, не нашел. Хотя, казалось бы, в первую очередь должны внедрить на сайты kremlin.ru и minsvyaz.ru.
Или я ошибаюсь?

Ответить
Развернуть ветку
Максим Завалишин

В документации (http://standart.gov.design/design/typography) написано, что размер шрифта должен быть 16 пунктов (для мобильных устройств) и 18 пунктов для ПК. Но по факту на этом же сайте-документации шрифты размеров 16 пикселей и 18 пикселей. Пункты (pt) и пиксели (px) разные единицы измерения!

Ответить
Развернуть ветку
Marina Vorobeva

а я вам сейчас расскажу эту боль.....Летом 2018 мы взялись редизайнить наших местных госовиков, начали с Комитета по информационным технологиям и связи, для начала. Вооружившись паттернами, примерами и т.д. стала "дизайнерить". Этот чертов Госбар как бы надо обязательно. Но никто, однако, не упомянул, что эта ХРЕНЬ всего лишь в трех цветах (благо сейчас нашли возможность менять). Всё, запилили этот госбар (та еще боль для разработчиков), внедрили сайт. Спустя полгода выяснилось, что ни один сайт, который перешел на эту "дизайн-систему" не воткнул себе Госбар (и догадываюсь почему). Есть так называемые ЕФТТ (единые требования), в которых прописано все то, что должно быть на сайтах ИОГВ и ОМСУ, но это всего лишь протокол, который никаким приказами не утвержден. Отсюда что? Что вся эта дизайн-система - это не требование, а рекомендация. Да, в целом все понятно, но если бы мы полгода назад понимали, что можно сделать шаг влево, шаг вправо, все могло бы выглядеть по-другому. Шрифт - отдельная тема. Это сегодня это PT Russia, а в прошлом году это был GOST UI, которым мы и воспользовались. Вывод один - если в прошлом году это были рекомендации для всех разработчиков по России - то сейчас создалась СМЕНА (привет Сереже :), которые, естественно, перетащат и это одеяло на себя :). Отбирают хлеб у провинциалов )))))

Ответить
Развернуть ветку
Максим Завалишин

Еще где-то звучало название RF Sans вроде. Конечно, не спорю, всё это не так просто придумать, написать документацию, внедрить и т.п. Но все таки, мне кажется, как-то слишком медленно всё это происходит.

Ответить
Развернуть ветку
Marina Vorobeva

Не знаю. Задумка, безусловно, хорошая, правильная, затеянная правильными людьми, и я понимаю, что не так все просто с госовиками, это отдельный "заказчик", много согласований и т.д. Просто такой ажиотаж в прошлом году был с этим связан, а на самом деле продукт сырой. Конечно же я пожелаю ребятам двигаться дальше в правильном направлении, но пусть занимаются крупняками, которых провинциалы точно не получат, а вот регионалов пусть оставят нам ))))).

Ответить
Развернуть ветку
Denis Yekimov

Почему мы не можем просто использовать дизайн-систему US?
Зачем разрабатывать свою? Судя по статье, она ничем не лучше.

Ответить
Развернуть ветку
Softexe.net

наверное надо писать CSS framework, а не "дизайн-системы" ?

Ответить
Развернуть ветку
Артём Геллер
Автор

framework это часть дизайн-системы в нашем случае

Ответить
Развернуть ветку
47 комментариев
Раскрывать всегда