Дизайн-системи державних ресурсів

У березні-квітні минулого року стався бум волонтерських/некомерційних українських проєктів, і деякі з них (наприклад, застосунок єТривога та сайт з втратами росії) використовували частини з дизайн-системи Дії. Хоч і розробники єТривоги буквально за декілька днів (навіть раніше офіційної «Повітряної Тривоги») зробили повноцінну версію застосунку з повітряними тривогами, робота багатьох проєктів могла б бути в рази прискорена, якщо була б дизайн-система Дії доступна у відкритому доступі.

На початку минулого літа я перевідкрив для себе дизайн-код Дії, і у мене зʼявилась ідея зверстати цю систему (звісно, що дизайн-система – це не лише про компоненти), створити дизайн-компоненти для UI-бібліотек а-ля реакт та опублікувати це все в опенсорс, щоб кожен міг використати. Таким чином, у розробників була б можливість трохи швидше створювати інтерфейси. Я тоді почав запитувати дизайнерів та розробників, повʼязаних з дизайн-системою Дії, що вони думають про цю ідею. Вони відповідали, що це все колись і планувалось, і дизайн-компоненти вже були публічними якийсь час, але в якийсь момент вирішили закрити через те, що зʼявились підробки, щоб не полегшувати роботу підробникам. Напевно, це все має сенс (особливо, зараз, та ще й враховуючи обізнаність суспільства, яке може асоціювати інтерфейси, схожі на Дію, з іншими державними ресурсами). До речі, зараз можна знайти створені неофіційні дизайн-системи Дії на всяких дизайнерських ресурсах. А підтримка Дії, до речі, так нічого і не відповіла на мій запит.

А як взагалі з дизайн-системами в інших країнах?

🇺🇸 Штати

В штатах є офіційна дизайн-система для створення державних ресурсів в одному і тому ж візуальному стилі. Зазвичай вони всі складаються з самих компонентів, принципів проєктування, патернів – інструкцій, як покращити досвід користувача.

В патернах розбирають конкретні випадки з порадами, як треба і як не треба робити. Наприклад, в одному патерні описують, як треба створити поле для вводу номера і там є рекомендація, щоб для номерів використовувався лише текстовий формат, а не "number". Запитання в зал: чому так? (відповідь далі)

Цікаво, що для стилів використовується BEM-система – методологія, придуману в тій компанії (пошуковій системі), де «знайдеться все».

Окремо від дизайн-системи, я знайшов 18F (назва походить від вулиці, де вони знаходяться – 1800 F Street) – команда айтівців, які якраз працюють з державними сервісами та розв'язують технологічні проблеми. Вони пишуть у себе про підходи до роботи (мені подобається, як вони часто посилаються на колег з Британії – десь як гарний приклад, а іноді – протилежний, наприклад, про FAQ), публікують правила для своїх розробників та методи дизайну, які я буду ще вчити декілька років 😄

Шкода, що DS-160 – це дуже всрата форма в стилі нульових років, тому я їх дизайн-систему так і не оцінив під час отримання візи (у минулому житті, звісно).

🇦🇺 Австралія

Публічна дизайн-система колись існувала, і разом з британською була референсом, як можна було б в Дії зробити, але її закрили, і не вказали навіть, чому закривають.

🇨🇦 Канада

Канадську дизайн-систему можна використовувати лише державним та внутрішнім сервісам, тому на неї можна лише дивитись, хоч і код є на гітхабі :)

Напевне, я тут вперше побачив Design decision, які виглядають майже аналогічно Architecture Design Record зі світу програмування.

З Канадою пощастило трохи більше, чим зі штатами – коли видавали візу, то я трохи насолодився дизайном (але не дуже), і проблеми були на деяких кроках – наприклад, я так і не зрозумів обмеження в пару мегабайт на завантажені виписки з банків – що робити, коли мої перекладені виписки були ±5 мегабайт?

А особливо мені подобається читати блоги – в них часто описують, які проблеми були, як вирішували. Наприклад, в якийсь час перевіряли доступність своїх сайтів на скрінрідерах з людьми, які їх використовують.

Шкода, в цілому, що у них з навігацією все ще проблеми якісь є (особливо, з агрегатором всього на світі на їх головній сторінці), але все одно це величезна робота!

🇬🇧 Британія

Якщо треба обрати одну з найкращих – це, очевидно, буде британська система!

У мене колись були питання, на скільки (і чи можу) я можу залишатись в Британії, коли у мене був рейс брітішами (😢) з Борисполя (😢😢) – це був дуже приємний досвід користування британськими сервісами – з тими лейоверами там досить багато умов є, але досвід користування настільки гарним та зручним був з максимально простою мовою, що навіть питань додаткових не виникало. Ще візу колись робив, і це було щось з прекрасного!

Ось нещодавно вони додали компонент «Exit this page» з величезною кількістю інформації, коли треба і не треба використовувати цю єдину кнопку, і ще й додатково в блог написали пост з детальнішим описом та проблемами, які вирішують.

Повертаючись до інпутів з type=number для номера телефона, в блозі детально описано, чому це рішення погане та альтернативні. Також це публікують в розділ з патернами та паралельно обговорюють рішення на гітхабі.

Хоч якісь рішення мені здаються дивними (наприклад, перший екран головної сторінки https://www.gov.uk на мобільному тепер займає більшу частину екрана, хоча після декількох ітерацій це сподобалось дизайн-команді), але ззовні все виглядає дуже гарно!

Навіть для vue якісь розробники зробили набір компонентів на основі британської системи.

Можливо, це і добре, що я не почав тоді компоненти робити (бо повного бачення не було, окрім частин інтерфейсу та прикладів), але сподіваюсь, що з часом все-таки до цього руки дійдуть. Мрію, що у нас з Дією колись щось дуже схоже на таке зʼявиться (і обовʼязково з блогом!), а щоб розбавити цю всю напівтехнічну тему – наступний пост буде про круасани!

Сі ю ін е вік!