3. fejezet a 8 közül · Mi az a dizájnrendszer~5 perc
Építőelemek, szabályok és magyarázatok közös készlete, hogy az állam minden szolgáltatását ugyanúgy lehessen használni
Gondolj a közlekedési táblákra
Amikor olyan városban vezetsz, ahol még nem jártál, nem kell újra megtanulnod, mit jelent a „Stop”. A tábla formája, színe ugyanaz, és ugyanott áll, mint mindenhol máshol. Minden város megtartja a saját nevét a bejáratnál álló táblán. A szabályok viszont közösek.
Egy dizájnrendszer ugyanezt teszi a honlapokkal és az alkalmazásokkal. A „Küldés” gomb ugyanúgy néz ki, és ugyanott van. A hibaüzenet ugyanolyan világosan megmondja, mi történt. A személyi szám (CNP) mezője ugyanúgy működik. Egyszer megtanulod, mindenhol használod.
Miből áll
Képzelj el egy építőkészletet, a hozzá tartozó kézikönyvvel együtt:
- Az elvek. Például: „azért írunk, hogy megértsenek”, „abszolút mindenkinek, az első naptól”.
- A gyakorlatban: az elvek döntenek, amikor a csapatok nem értenek egyet. Ha valaki „minden eshetőségre” fel akar venni egy mezőt az űrlapba, a „csak azokat az adatokat kérjük, amelyekre szükségünk van” szabály nemet mond. Ugyanez az elv már a 242/2022-es törvényben is szerepel.
Minden fölösleges mező még egy ok arra, hogy valaki feladja. Az elv kihúzza, ami nem szükséges. - Egy másik példa: „a használhatóság előbbre való az egységességnél”. Ugyanazt a megoldást csak ott alkalmazzuk, ahol ugyanazt a problémát oldja meg.
Más színek és más nevek, ugyanaz a gomb, ugyanazon a helyen. Következetes, nem egyforma.
- A gyakorlatban: az elvek döntenek, amikor a csapatok nem értenek egyet. Ha valaki „minden eshetőségre” fel akar venni egy mezőt az űrlapba, a „csak azokat az adatokat kérjük, amelyekre szükségünk van” szabály nemet mond. Ugyanez az elv már a 242/2022-es törvényben is szerepel.
- Az alapok. A színek, a betűk, a térközök. Úgy választják ki őket, hogy a szöveget bárki könnyen el tudja olvasni.
- A színeknek nevük van, nem csak kódjuk (design tokenek). Egy gomb nem „#244C8F kék”, hanem „az elsődleges művelet színe”. Ha az árnyalat megváltozik, egyetlen helyről mindenhol megváltozik.
A szín kódja egyetlen helyen van. A gomb, a link és a fókuszkeret onnan veszi át. - A kontrasztot kiszámítják, nem találgatják. A zászló kékje fehér alapon 12,7 : 1 kontrasztot ad, és nagyon jól olvasható. A zászló sárgája fehér alapon csak 1,5 : 1-et. Ezért a sárga lehet kiemelőszín, de soha nem lehet egy szöveg színe.
A zászló kékje fehér alapon 12,7 az 1-hez kontrasztot ad, és olvasható. A sárga fehér alapon 1,5 az 1-hez, és nem olvasható. A sárga kék alapon 8,6 az 1-hez, és kiemelőszínként használható.
A zászló színei a 176/2023-as törvény szerint. A normál szöveg minimális küszöbe 4,5 : 1. - A betűkészletben helyes ș és ț van (alul vesszővel), ő és ű a magyarhoz, cirill betűk az ukránhoz, valamint könnyen megkülönböztethető karakterek: a nagy I, a kis l és az 1-es számjegy; a nagy O és a 0-s számjegy. A feltételeket és a mintákat A betűtípus kiválasztása oldal mutatja be. A térközök 8 pixeles rácsot követnek, hogy az oldalak bármilyen képernyőn rendezettek legyenek.
Olyan betűtípus, amely helyesen ír románul, magyarul és ukránul, és egyértelműen megkülönbözteti az I, l, o, O és 0 karaktereket. A térközök a 8 többszörösei.
- A színeknek nevük van, nem csak kódjuk (design tokenek). Egy gomb nem „#244C8F kék”, hanem „az elsődleges művelet színe”. Ha az árnyalat megváltozik, egyetlen helyről mindenhol megváltozik.
- Az építőelemek. Gombok, kitöltendő mezők, hibaüzenetek, menük. Mindegyiket egyszer építik meg és tesztelik, olyan emberekkel is, akik képernyőfelolvasó programot használnak.
- Minden állapotot előre végiggondolnak (komponensek). Egy gomb másképp néz ki alaphelyzetben, amikor az egérrel fölé mész, amikor lenyomod, amikor nem használható, és amikor billentyűzettel jutsz el hozzá. Ez utóbbi állapotról feledkeznek meg a legtöbbször a mai honlapokon.
Ugyanaz az építőelem, öt állapot. Az utolsó, a sárga-fekete keret mutatja meg, hol vagy, amikor billentyűzettel navigálsz. - A tesztek nyilvánosak. Egy építőelemet csak akkor nyilvánítanak „stabilnak”, ha átmegy a billentyűzetes teszten, a szöveg 200–400%-os nagyításán és a románul beszélő képernyőolvasókkal végzett teszteken. Az eredmények minden építőelemnél egy nyilvános oldalon olvashatók.
Egy építőelem nyilvános adatlapja: mit és mivel teszteltek. Egy építőelem csak az összes ellenőrzés után lesz „stabil”.
- Minden állapotot előre végiggondolnak (komponensek). Egy gomb másképp néz ki alaphelyzetben, amikor az egérrel fölé mész, amikor lenyomod, amikor nem használható, és amikor billentyűzettel jutsz el hozzá. Ez utóbbi állapotról feledkeznek meg a legtöbbször a mai honlapokon.
- A receptek. Hogyan kérj be egy romániai címet, hogyan ellenőrizz egy személyi számot, hogyan mondd meg az embernek már az elején, milyen dokumentumokra lesz szüksége.
- A CNP (minta). A mező ellenőrzi a 13 számjegyet és az ellenőrző számjegyet. Az üzenet pontosan megmondja, mi a hiba: „A CNP 13 számjegyből áll. Ön 12-t írt be.” Az üzenet magázó formát („Ön”) használ, mint minden közszolgáltatás; az 5. fejezetben elmagyarázom, miért, és ki is próbálhatod.
Ugyanaz a mező, ugyanaz a hiba. A különbség az üzenet: az egyik megakaszt, a másik megmondja, mit tegyél. - A cím. Megye, aztán település, aztán utca, házszám, tömbház, lépcsőház, lakás, valamint a „Külföldön élek” lehetőség a diaszpórának.
A romániai cím, tömbházzal, lépcsőházzal és lakással, valamint a diaszpórában élőknek szóló változattal. - „Mielőtt elkezdi”. Minden szolgáltatás első oldalán ott áll, milyen dokumentumok kellenek, mennyibe kerül, mennyi ideig tart, és ki felel érte.
Minden, amit tudnod kell, az első oldalon, nem az űrlap végén.
- A CNP (minta). A mező ellenőrzi a 13 számjegyet és az ellenőrző számjegyet. Az üzenet pontosan megmondja, mi a hiba: „A CNP 13 számjegyből áll. Ön 12-t írt be.” Az üzenet magázó formát („Ön”) használ, mint minden közszolgáltatás; az 5. fejezetben elmagyarázom, miért, és ki is próbálhatod.
- Az oldalsablonok. Teljes, előre összeállított oldalak, amelyeket egy intézmény a saját igényeihez igazíthat.
- Az „Accesibilitate” (Akadálymentesség) oldal, amely már ki van töltve a 815/2022-es ADR-határozatban szereplő hivatalos nyilatkozatminta szerint. Az intézménynek csak a saját adatait kell beírnia.
A hivatalos szöveg már ott van. Az intézmény csak a megjelölt mezőket tölti ki. - A polgármesteri hivatal honlapja (sablon), a törvény (123/2002-es HG) által előírt öt rovattal, és a menü első sorában a „Monitorul Oficial Local” (Helyi Hivatalos Közlöny) füllel.
A törvény által előírt menü, készen: az öt rovat, a Helyi Hivatalos Közlöny (Monitorul Oficial Local) az első helyen, a frissítés dátuma minden oldalon. - Olaszországban csaknem 6000 polgármesteri hivatal újította meg a honlapját ugyanabból a mintából kiindulva, amelyet az állam ingyen bocsátott rendelkezésre.
Olaszország: minden pont 100 polgármesteri hivatalt jelent, amely ugyanabból a honlapmintából indult ki (2022–2025).
- Az „Accesibilitate” (Akadálymentesség) oldal, amely már ki van töltve a 815/2022-es ADR-határozatban szereplő hivatalos nyilatkozatminta szerint. Az intézménynek csak a saját adatait kell beírnia.
- A kézikönyv. Magyarázatok, példák és elkerülendő hibák azoknak, akik építenek.
- Minden építőelemnek saját oldala van (dokumentáció): mikor használd, mikor ne, kódpélda, gyakori hibák, a tesztek eredményei és az ismert korlátok.
Minden építőelemnek saját oldala van: mikor használd, mikor ne, a kód, a tesztek és az ismert korlátok. - Példa egy elkerülendő hibára: egy link, amelyen csak annyi áll, hogy „Kattints ide”. Annak, aki képernyőolvasót használ, egy csupa „Kattints ide” linkből álló lista semmit sem mond.
A képernyőolvasók csak a linkek listáját is meg tudják jeleníteni. Az első példában senki sem tudja, melyik link hová vezet. - Norvégiában a kézikönyv valóságos tudásportál (Aksel), nem csupán az építőelemek listája.
Tudásportál, mint az Aksel Norvégiában: nemcsak építőelemek, hanem a mögöttük álló okok is.
- Minden építőelemnek saját oldala van (dokumentáció): mikor használd, mikor ne, kódpélda, gyakori hibák, a tesztek eredményei és az ismert korlátok.
És ami nagyon fontos: egy csapat, amely gondozza mindezt. Nélküle az építőkészlet elavul, és felhagynak vele.
A gyakorlatban: minden új változatnak száma van (például 1.2), egy megjegyzés, amely leírja, mi változott, és egy határidő, ameddig az intézmények átvehetik. Legalább két ember, különböző szervezetekből, adhat ki új változatot, hogy a rendszer ne egyetlen személyen múljon.
Termék, nem szabályzat
Úgy gondolom, hogy az állam dizájnrendszerét digitális termékként kell elképzelni, nem kötelezettségek listájaként. Egy terméknek:
- vannak felhasználói: az emberek, akik a szolgáltatásokat használják, és a csapatok, amelyek építik őket;
- van egy csapata, amely felel érte;
- folyamatosan javul abból, amit tanul;
- nyilvánosan megmutatja az eredményeit.
A végső ügyfele az adófizető: az az ember, aki fizet az állam szolgáltatásaiért, és joga van ahhoz, hogy könnyen használhassa őket.
Mi nem
- Nem teszi egyformává az összes honlapot. Következetes, nem egyforma: a polgármesteri hivatal polgármesteri hivatalnak néz ki, a minisztérium minisztériumnak. De ugyanúgy kell használni őket.
- Nem új logó, és nem változtatja meg az állam jelképeit.
- Nem egyetlen portál, ahová az összes szolgáltatás átköltözik.
- Nem fizetési vagy digitális azonosítási platform. Ilyenek már léteznek (Ghișeul.ro, ROeID). A dizájnrendszer csak az „arcukat” adja: hogyan néz ki a gomb, és milyen lépéseken megy végig a felhasználó.
- Nem helyettesíti a meglévő szabályokat. Kész építőelemekké alakítja őket: a 815/2022-es ADR-határozat által előírt „Accesibilitate” oldallá, a 123/2002-es HG öt rovatává, az 1085/2003-as HG által előírt frissítési dátummá.
- Nem old meg mindent. Ha az állami nyilvántartások nem kommunikálnak egymással, vagy felesleges dokumentumokat kérnek tőled, ezen a jobb dizájn nem segít. A problémákat viszont láthatóvá teheti.
Szakembereknek
- Az SDGR-javaslat rétegei (SDGR: a Román Kormány Dizájnrendszere, az én javaslatom): elvek és tartalom → design tokenek és témák → bizalmi réteg (bizalmi sáv, intézményi azonosító) → komponensek → romániai szolgáltatási minták → oldalsablonok → honlapmodellek.
- Négyszintű design tokenek: primitív → szemantikus → komponensszintű → az intézmény témája. A színek a relatív luminancia alapján vannak kalibrálva, az USWDS mintájára, így a fokozatok közötti különbség garantálja a kontrasztot.
- Technológia: HTML/CSS és webkomponensek, keretrendszertől függetlenül, keretrendszer-specifikus csomagokkal csak igény esetén. A feltevést három integrációs próbával tesztelik, többek között a MUD kódján (Moldova, MIT-licenc).
- Érettségi szintek: javaslat → kísérleti → jelölt → stabil → kivezetett.
- Három terület, három gazda: a mag (a rendszer csapata), a szolgáltatási minták (a csapat az intézményekkel közösen), a közös szolgáltatások (ROeID, Ghișeul.ro, interoperabilitás: ezek üzemeltetői).
- Licencek: EUPL-1.2 a kódra, CC BY 4.0 a dokumentációra.
Mire támaszkodom
A hivatkozások a kutatási dokumentumaim nyilvános változataihoz vezetnek; a szakasz száma (§) egyenesen az idézett bekezdéshez visz.
| Állítás | Dokumentum | Hol |
|---|---|---|
| Termék, nem szabályzat; az adófizető mint végső ügyfél | A teljes javaslat, V3 | §2 |
| Elvek („abszolút mindenkinek”, „következetes, nem egyforma”) | A teljes javaslat, V3 | §3 |
| Mi nem; három terület | A teljes javaslat, V3 | §4 |
| Rétegek, tokenek, technológia, érettség | A teljes javaslat, V3 | §6 |
| A korlátok: nyilvántartások, folyamatok | A teljes javaslat, V3 | §1.2 |
| Kalibrált színek, a „bűvös szám” | Az amerikai rendszer (USWDS) | §5.2, §8 |
| Az architektúrák családjai Európában | Európai dizájnrendszerek | §11 |
| A „Miből áll” rész példái: elvek, tokenek, 8 px-es rács, betűtípusok, állapotok és tesztek, minták, dokumentáció, változatok | A teljes javaslat, V3 | §3, §6.4–§6.8, §8, §9.2, §10.5 |
| „Minimális adatok”, 242/2022-es törvény | Ami Romániában már létezik | §11 |
| A zászló színeinek kontrasztja (12,7 : 1 és 1,5 : 1) | Ami Romániában már létezik | §2.1 |
| Az „Accesibilitate” oldal (815/2022-es ADR-határozat); az öt rovat (123/2002-es HG); Monitorul Oficial Local | Ami Romániában már létezik | §5, §6 |
| Olaszország: csaknem 6000 polgármesteri hivatal ugyanazon a mintán | Az uniós tagállamok törvényei | §3.4 |
| Norvégia: Aksel, tudásportál | Európai dizájnrendszerek | §5, §11 |
| Integrációs próba a MUD-dal | Ami Romániában már létezik | §13, 11. döntés |