Design systémy v governmentu

Několik výrazných a funkčních příkladů design systémů na úrovni veřejné správy

Britský design systém je možná komplexnější — ale ne tak přívětivý pro BGU (běžného grafického uživatele), aby nabízel exporty ve Figmě

S knihovnami Material Design od Googlu nebo Human Interface Guidelines od Applu má zkušenost téměř každý.

Stejně snadno identifikujete redmondský Fluent.

Nebo design systémy výrazných brandů od IKEA po Wolt.

Uživatelský zážitek z používání daného operačního systému, návštěvy obchodu nebo objednání jídla je díky nim celistvý.

Ale co uživatelský zážitek z používání státu?

Označili byste ho za celistvý?

Existují!

Government pojímá tolik oblastí a aplikací, že nemůže být pochyb o opakovaném používání určitých komponentů, které tvoří meritum design systémů.

Navíc je typickým příkladem standardizovaného, normovaného, byrokratického prostředí, které má (alespoň papírově) jasná pravidla (většinou).

Tak proč bychom uživatelský zážitek z používání státu zřejmě neoznačili za celistvý?

Znamená to, že zatím žádný government nenapadlo povolat odborníky, sestavit komplexní design systém a vymáhat ho ve svých službách?

Napadlo. A další řádky jsou toho důkazem.

Hlavní důvody, proč uživatelský zážitek z používání služeb veřejné správy asi neoznačíte za celistvý, jsou různé, ale většinou mezi ně nepatří absence design systémů nebo jejich dílčí nefunkčnost [1].

Dokonce se s různou intencí vymáhají. Takže si jen musíme počkat na dostatečnou úroveň aplikace.

Tento článek sumíruje hned několik výrazných počinů.

Velká Británie 🇬🇧

Modlu všech design systémů na úrovni governmentu zpodobuje Spojené království. Způsob, jakým se kabinetům podařilo zapojit designové kapacity do své organizační struktury, inspiruje další státy i korporáty [2].

Britský design systém obsahuje všechno potřebné k vytvoření digitální služby veřejné správy zaměřené na uživatele, ale jako knihovna zdrojů je mnohem širokospektrálnější.

Koruna ho používá od roku 2017, kdy nahradil samostatný service manual a dílčí knihovnu zdrojů [3].

Implementace systému do stávajících struktur byla velmi náročná — došlo k ní až ruku v ruce s publikováním dokumentace k GOV.UK frontendu a především po kolečku mezivládních show and tells, které sjednotily různé přístupy, zdůraznily společné výzvy a zastavily práci dílčích kruhů na vlastních systémech.

Autoři systému mluvili s řadou designérů, vývojářů, nezávislých výzkumníků, zástupců vládních oddělení, agentur, externích dodavatelů a hlavně uživatelů z různých komunit, aby navrhli prototyp a postupně vylepšovali jeho navigaci, strukturu i obsah.

Až se jim podařilo stvořit opravdu promyšlený a komplexní systém — jak po stránce vizuální, tak technické.

Design systém Spojeného království zahrnuje i mřížky nebo layering jednotlivých os (autor: Mark Hurrell, použito dle principu fear dealing)

Mark Hurrell (Head of Graphic Design Government Digital Service, který spadá přímo pod britský úřad vlády) zmiňuje, že přes veškerou složitost vznikal design systém iterativně, rychle a s minimální průběžnou dokumentací. Členové týmu komunikovali neformálně přes e-maily, Slack a GitHub [4].

Počet zahrnutých komponentů, stylů a vzorů je ohromující — ale stále přehledný. Všechny fungují rovnou jako fragmenty kódu v HTML, CSS nebo JavaScriptu.

👍 Co je super: Systém je velmi inkluzivní a jeho nedílnou součástí je pečlivě designovaný způsob, jak se ptát na citlivé otázky (jako sexuální orientaci). I původní barevná paleta byla časem aktualizována, aby splňovala accessibility laws Evropské unie.

⭐ Co je ještě více super: Systém nestojí samostatně, ale navazuje na status quo. Neuvěřitelně. Jestli někde můžete mít nejblíž k celistvému uživatelskému zážitku z používání státu, tak ve Velké Británii. Vizuální styl ladí s rozšířenou Johnston-like a Transport-like typografií. Jako by všechno od cedulí nouzového východu v soukromém obchodě přes navigační systém metra po elektronické podání daňového přiznání bylo totéž.

👎 Co je rozpačité: Protože všechny komponenty primárně fungují jako fragmenty kódu, chcete-li využít cokoliv z knihovny zdrojů, musíte rovnou zevrubně instalovat Node.js a zabývat se Gitem i terminálem. Dokumentace s ničím jiným nepočítá. Takový přístup se hodí při prototypování nové služby, ale pro quick use je to poněkud složité řešení.

Česko 🇨🇿

Ano, i Česko má na úrovni governmentu vlastní design systém. Vznikl jako manuál pro vytváření webů konzistentních s weby Ministerstva vnitra, ale vyvinul se v systém pravidel, dokumentací, komponentů a nástrojů, který by měly akceptovat všechny služby veřejné správy [5].

Oproti britskému systému není vázán na kabinet — vyvíjí ho a spravuje právě ministerstvo vnitra.

Vzhledem k původu systému ministerstvo nikoho a nic nenutí, jen pasivně vysvětluje, jaké jsou výhody používání [6]. Možná proto systém oficiálně používá jen několik málo projektů — Portál veřejné správy, Chci identitu, Covid Portál, Tečka a čTečka.

Na druhou stranu: Ve veřejné správě je design systém už v dostatečném povědomí, takže na jeho principech částečně a neoficiálně staví další projekty — jako ePortál České správy sociálního zabezpečení. A třeba čerstvě zrekonstruovaný web Českého telekomunikačního úřadu se design systémem řídí tak přísně, že by klidně mohl spadat do kategorie oficiální.

Český design systém je rovnocenně určen pro designéry, vývojáře a úředníky.

Vývojáři mohou rovnou naklonovat repozitář v rámci Portálu otevřeného kódu. Jednotlivé komponenty mají k dispozici i v pattern labu. Integrace umožňuje jak hostování již zkompilovaných souborů, tak zařazení do vlastního build procesu [7].

Designéři to mají stejně jednoduché. Design systém umožňuje export všech komponent do Figmy. A ministerstvo je připraveno konzultovat nově vytvořené prvky, aby se v systému mohly objevit jako nová komponenta nebo modifikace už existující komponenty [8].

Všechny vizuální části českého design systému jsou ready-to-edit ve Figmě

Poměrně unikátní v poli design systémů v governmentu je zaměření na úředníky.

Design systém je instruuje k genderové neutrálnosti, používání pravidla obrácené pyramidy, dodržování určitého tónu komunikace, a dokonce k SEO [9].

I s lehkou ironií — takže se úředníci mohou dočíst, co v hlavě čtenáře „zní […] jako ‚blablabla‘“. Nebo že je něco „hezké, ale čtenář neví, co má dělat“.

👍 Co je super: Systém myslí na všechno — i na zákon. Kdo se ho bude držet, ví, že dostane požadavkům zákona č. 99/2019 Sb., o přístupnosti internetových stránek a mobilních aplikací.

👎 Co je rozpačité: Nikdo ho nevynucuje a nové služby veřejné správy stále vznikají i ve vlastních (vysoutěžených) design systémech. Nebo žádných design systémech.

Spojené státy 🇺🇸

Jiný přístup k design systému v governmentu zaujaly Spojené státy.

Komplikovaný je už jeho vznik:

Design systém vyvinul v roce 2015 společný tým 18F (úřadu federálních zaměstnanců, který spadá pod nezávislou vládní agenturu) & nikterak oficiální skupiny U.S. Digital Service (která seskupuje hlavně technology z různých organizací federální vlády, ale přihlásit se do ní může každý americký designér) [10][11][12].

Ale jen vyvinul! Teď je design systém Spojených států open‑source projektem komunity vládních zaměstnanců, nezávislých designérů a content specialistů, do kterého může přispívat každý.

Každý může reportovat chybu nebo položit otázku na GitHubu, každý může vyplnit jednoduchý formulář a připojit se ke komunitním kanálům na Slacku [13]. Postup je obdobný, jako když se hlásíte k Česko.Digital.

Systém tvoří opět nejen knihovna komponentů, ale i sada různých designových principů a nástrojů.

V roce 2019 prošel design systém Spojených států modernizací, která strohým textovým stránkám dodala košatější zážitek (autoři: Dan O. Williams a Maya Benari, použito dle principu fair use)

Americký systém je něco mezi britským a českým příkladem.

Ačkoliv je zaměřen primárně na vývojáře nebo funkční týmy, nabízí dostatečnou podporu i samotným designérům bez rozsáhlé technické průpravy. Všechny komponenty jsou jako HTML mock-upy exportovatelné a ready-to-edit ve Sketchi, Adobe XD a Figmě [14].

To je docela dobrý balanc mezi zaměřením pouze na vývojáře (🇬🇧) a rovnocenným přístupem ke všem skupinám, který neumožňuje jít do patřičné hloubky (🇨🇿).

👍 Co je super: Systém zahrnuje vlastní maturity model, který zohledňuje reálné fungování americké veřejné správy. Ke každému kroku nabízí komunita rozsáhlou podporu.

👎 Co je rozpačité: Design systém je poměrně volný a nezahrnuje žádná sveřepá pravidla. Takže i když jej oficiálně dodržují stovky služeb veřejné správy, ve výsledku jsou natolik rozmanité, že je těžší identifikovat příslušnost k témuž design systému.

Několik dalších příkladů

Pokročilý design systém v governmentu má Singapur. Jeho součástí je i intuitivní theme customizer

Evropská unie má strohý design systém pro vlastní použití v governmentu a pro ostatní vyvíjí velmi stroze dokumentovaný systém eUI

Australský příklad sice není výrazný ani funkční, ale třeba jednou k takovému výsledku povede — oficiální design systém se neuchytil a byl „vyřazen z provozu“, načež vzniklo hned několik iniciativ pokoušejících se o jeho obnovu (vlastní systém vyvíjí vláda Jižní Austrálie a otevřená komunita zase vyvíjí vlastní GOLD Design System pro použití v governmentu)

Použité zdroje

[1] LOVE, Terence. National design infrastructures: the key to design-driven socio-economic outcomes and innovative knowledge economies. In: IASDR 07: International Association of Societies of Design Research [online]. Hongkong, 2007: The Hong Kong Polytechnic University, s. 10 [cit. 2022–01–29]. Dostupné z: https://www.sd.polyu.edu.hk/iasdr/proceeding/papers/National%20design%20infrastructures.pdf

[2] MAFFEI, Stefano, Elena PACENTI a Beatrice VILLARI. Service design: Perspectives of service design as core to the contemporary innovative production model. Ottagono [online]. Bologna: Compositori Comunicazione, 2013, 47(260), s. 53 [cit. 2022–01–29]. ISSN 0391–7487. Dostupné z: https://www.academia.edu/download/46442758/Servicescapes._La_prospettiva_del_design20160613-1883-maifjq.pdf

[3] NOAKES, Alice. Building the GOV.UK Design System. In: Government Digital Service Blog [online]. Londýn: Government Digital Service, 30. 10. 2017 [cit. 2022–01–29]. Dostupné z: https://gds.blog.gov.uk/2017/10/30/building-the-gov-uk-design-system/

[4] HURRELL, Mark. GOV.UK Design System. In: Mark Hurrell [online]. Londýn: Mark Hurrell [cit. 2022–01–29]. Dostupné z: https://mhurrell.co.uk/work/govuk-design-system/

[5] Design systém gov.cz. Design systém gov.cz [online]. Praha: Ministerstvo vnitra, c2021 [cit. 2022–01–29]. Dostupné z: https://designsystem.gov.cz/#/README

[6] O design systému. Design systém gov.cz [online]. Praha: Ministerstvo vnitra, c2021 [cit. 2022–01–29]. Dostupné z: https://designsystem.gov.cz/#/zaciname/o-design-systemu

[7] Pro vývojáře. Design systém gov.cz [online]. Praha: Ministerstvo vnitra, c2021 [cit. 2022–01–29]. Dostupné z: https://designsystem.gov.cz/#/zaciname/pro-vyvojare

[8] Pro designéry. Design systém gov.cz [online]. Praha: Ministerstvo vnitra, c2021 [cit. 2022–01–29]. Dostupné z: https://designsystem.gov.cz/#/zaciname/pro-designery

[9] Pravidla pro tvorbu obsahu. Design systém gov.cz [online]. Praha: Ministerstvo vnitra, c2021 [cit. 2022–01–29]. Dostupné z: https://designsystem.gov.cz/#/pravidla/pravidla-pro-tvorbu-obsahu

[10] About. U.S. Web Design System [online]. Washington, D.C.: General Services Administration [cit. 2022–01–29]. Dostupné z: https://designsystem.digital.gov/about/

[11] About. 18F: Digital service delivery [online]. Washington, D.C.: General Services Administration [cit. 2022–01–29]. Dostupné z: https://18f.gsa.gov/about/

[12] Our mission. United States Digital Service [online]. Washington, D.C.: United States Digital Service [cit. 2022–01–29]. Dostupné z: https://www.usds.gov/mission

[13] Community. U.S. Web Design System [online]. Washington, D.C.: General Services Administration [cit. 2022–01–29]. Dostupné z: https://designsystem.digital.gov/about/community/

[14] Getting started for designers. U.S. Web Design System [online]. Washington, D.C.: General Services Administration [cit. 2022–01–29]. Dostupné z: https://designsystem.digital.gov/documentation/getting-started-for-designers/