Statul online o viziune personală
100%
RO EN HU

Capitolul 3 din 8 · Ce este un sistem de design~5 minute

Un set comun de piese, reguli și explicații, ca toate serviciile statului să se folosească la fel

Gândește-te la indicatoarele rutiere

Când conduci într-un oraș în care n-ai mai fost, nu înveți din nou ce înseamnă „Stop”. Indicatorul are aceeași formă, aceeași culoare și stă în același loc ca peste tot. Fiecare oraș își păstrează numele pe tăblița de la intrare. Dar regulile sunt comune.

Un sistem de design face același lucru pentru site-uri și aplicații. Butonul „Trimite” arată la fel și stă în același loc. Mesajul de eroare spune la fel de clar ce s-a întâmplat. Câmpul pentru CNP funcționează la fel. Înveți o dată, folosești peste tot.

Din ce e făcut

Imaginează-ți un set de piese de construcție, plus manualul lui:

  1. Principiile. De exemplu: „scriem ca să fim înțeleși”, „pentru absolut toți, din prima zi”.
    • În practică: principiile decid când echipele nu sunt de acord. Dacă cineva vrea să adauge în formular un câmp „pentru orice eventualitate”, regula „cerem doar datele de care avem nevoie” spune nu. Același principiu apare deja în Legea nr. 242/2022.
      Fiecare câmp în plus e încă un motiv de abandon. Principiul taie ce nu e necesar.
    • Alt exemplu: „utilitatea înaintea uniformității”. Folosim aceeași soluție doar acolo unde rezolvă aceeași problemă.
      Culori și nume diferite, același buton, în același loc. Consecvent, nu identic.
  2. Fundamentele. Culorile, literele, spațiile. Ele sunt alese astfel încât textul să se citească ușor de către oricine.
    • Culorile au nume, nu doar coduri (design tokens). Un buton nu e „albastru #244C8F”, ci „culoarea acțiunii principale”. Dacă se schimbă nuanța, se schimbă peste tot, dintr-un singur loc.
      Codul culorii stă într-un singur loc. Butonul, linkul și conturul de focus îl preiau de acolo.
    • Contrastul se calculează, nu se ghicește. Albastrul drapelului, scris pe alb, are un contrast de 12,7 : 1 și se citește foarte bine. Galbenul drapelului, pe alb, are doar 1,5 : 1. De aceea galbenul poate fi accent, dar niciodată culoarea unui text.

      Albastrul drapelului pe alb are un contrast de 12,7 la 1 și se citește. Galbenul pe alb are 1,5 la 1 și nu se citește. Galbenul pe albastru are 8,6 la 1 și poate fi folosit ca accent.

      Culorile drapelului, din Legea nr. 176/2023. Pragul minim pentru text normal e 4,5 : 1.
    • Fontul are ș și ț corecte (cu virgulă dedesubt), ő și ű pentru maghiară, litere chirilice pentru ucraineană și litere ușor de deosebit: I mare, l mic și cifra 1; O mare și cifra 0. Criteriile și mostrele sunt în Alegerea fontului. Spațiile urmează o grilă de 8 pixeli, ca paginile să arate ordonat pe orice ecran.
      Un font care scrie corect în română, maghiară și ucraineană și care deosebește clar I, l, o, O și 0. Spațiile sunt multipli de 8.
  3. Piesele. Butoane, câmpuri de completat, mesaje de eroare, meniuri. Fiecare e construită și testată o singură dată, inclusiv cu oameni care folosesc programe ce citesc ecranul.
    • Fiecare stare e gândită dinainte (componente). Un buton arată diferit când e normal, când treci cu mouse-ul peste el, când e apăsat, când nu poate fi folosit și când ajungi la el cu tastatura. Ultima stare e cea mai des uitată pe site-urile de azi.
      Aceeași piesă, cinci stări. Ultima, conturul galben și negru, arată unde ești când navighezi cu tastatura.
    • Testele sunt publice. O piesă e declarată „stabilă” doar după ce trece testele cu tastatura, cu mărirea textului la 200–400% și cu cititoare de ecran care vorbesc românește. Rezultatele stau pe o pagină publică, pentru fiecare piesă.
      Fișa publică a unei piese: ce s-a testat și cu ce. O piesă devine „stabilă” doar după toate verificările.
  4. Rețetele. Cum ceri o adresă românească, cum verifici un CNP, cum îi spui omului de la început ce documente îi trebuie.
    • CNP-ul (tipar). Câmpul verifică cele 13 cifre și cifra de control. Mesajul spune exact ce e greșit: „CNP-ul are 13 cifre. Ați introdus 12.” Mesajul folosește „dumneavoastră”, ca orice serviciu public; în capitolul 5 explic de ce și îl poți încerca.
      Același câmp, aceeași greșeală. Diferența e mesajul: unul te blochează, celălalt îți spune ce să faci.
    • Adresa. Județ, apoi localitate, apoi stradă, număr, bloc, scară, apartament, plus varianta „Locuiesc în străinătate”, pentru diaspora.
      Adresa românească, cu bloc, scară și apartament, plus varianta pentru cei din diaspora.
    • „Înainte să începeți”. Pe prima pagină a fiecărui serviciu scrie ce documente trebuie, cât costă, cât durează și cine răspunde.
      Tot ce trebuie să știi, pe prima pagină, nu la finalul formularului.
  5. Paginile-model. Pagini întregi, gata asamblate, pe care o instituție le poate adapta.
    • Pagina „Accesibilitate”, deja completată după modelul oficial de declarație din Decizia ADR nr. 815/2022. Instituția doar își trece datele.
      Textul oficial e deja acolo. Instituția completează doar câmpurile marcate.
    • Site-ul de primărie (șablon), cu cele cinci secțiuni cerute de lege (HG nr. 123/2002) și cu fila „Monitorul Oficial Local” pe primul rând al meniului.
      Meniul cerut de lege, gata construit: cele cinci secțiuni, Monitorul Oficial Local pe primul loc, data actualizării pe fiecare pagină.
    • În Italia, aproape 6.000 de primării și-au refăcut site-urile pornind de la același model, pus gratuit la dispoziție de stat.
      Italia: fiecare punct înseamnă 100 de primării care au pornit de la același model de site (2022–2025).
  6. Manualul. Explicații, exemple și greșeli de evitat, pentru cei care construiesc.
    • Fiecare piesă are pagina ei (documentație): când o folosești, când nu, exemplu de cod, greșeli frecvente, rezultatele testelor și limitele cunoscute.
      Fiecare piesă are o pagină: când o folosești, când nu, codul, testele și limitele cunoscute.
    • Exemplu de greșeală de evitat: un link care spune doar „Click aici”. Pentru cine folosește un cititor de ecran, o listă de linkuri „Click aici” nu spune nimic.
      Cititoarele de ecran pot afișa doar lista linkurilor. În primul exemplu, nimeni nu știe unde duce vreun link.
    • În Norvegia, manualul e un adevărat portal de cunoaștere (Aksel), nu doar o listă de piese.
      Un portal de cunoaștere, ca Aksel în Norvegia: nu doar piese, ci și motivele din spatele lor.

Și, foarte important: o echipă care le întreține. Fără ea, setul de piese îmbătrânește și e abandonat.

În practică: fiecare versiune nouă are un număr (de exemplu 1.2), o notă care spune ce s-a schimbat și un termen în care instituțiile o pot adopta. Cel puțin doi oameni, din organizații diferite, pot publica o versiune, ca sistemul să nu depindă de o singură persoană.

Fiecare versiune are un număr, o notă despre ce s-a schimbat și un termen clar pentru instituții.

E un produs, nu un regulament

Cred că un sistem de design pentru stat trebuie gândit ca un produs digital, nu ca o listă de obligații. Un produs:

Clientul lui final e contribuabilul: omul care plătește pentru serviciile statului și are dreptul să le poată folosi ușor.

Ce nu este

Ce ar câștiga fiecare →

Pentru specialiști
  • Straturile propunerii SDGR (Sistemul de Design al Guvernului României, cum îl propun eu): principii și conținut → design tokens și teme → stratul de încredere (banda de încredere, identificatorul instituțional) → componente → tipare de servicii românești → șabloane de pagină → modele de site.
  • Design tokens pe patru niveluri: primitive → semantice → de componentă → tema instituției. Culorile sunt calibrate pe luminanța relativă, după modelul USWDS, astfel încât diferența de treaptă să garanteze contrastul.
  • Tehnologie: HTML/CSS și componente web, independente de framework, cu pachete pentru framework-uri doar la cerere. Ipoteza se testează prin trei probe de integrare, inclusiv pe codul MUD (Moldova, licență MIT).
  • Niveluri de maturitate: propunere → experimental → candidat → stabil → scos din uz.
  • Trei domenii, trei proprietari: nucleul (echipa sistemului), tiparele de servicii (echipa, împreună cu instituțiile), serviciile partajate (ROeID, Ghișeul.ro, interoperabilitate: operatorii lor).
  • Licențe: EUPL-1.2 pentru cod, CC BY 4.0 pentru documentație.

Pe ce mă bazez

Trimiterile duc la versiunile publice ale documentelor mele de cercetare; numărul secțiunii (§) duce direct la paragraful citat.

Afirmație Document Unde
Produs, nu regulament; contribuabilul, client final Propunerea completă §2
Principii („pentru absolut toți”, „consecvent, nu identic”) Propunerea completă §3
Ce nu este; trei domenii Propunerea completă §4
Straturi, tokens, tehnologie, maturitate Propunerea completă §6
Limitele: registre, procese Propunerea completă §1.2
Culori calibrate, „numărul magic” Sistemul american (USWDS) §5.2, §8
Familiile de arhitectură din Europa Sistemele de design din Europa §11
Exemplele de la „Din ce e făcut”: principii, tokens, grila de 8 px, fonturi, stări și teste, tipare, documentație, versiuni Propunerea completă §3, §6.4–§6.8, §8, §9.2, §10.5
„Date minime”, Legea nr. 242/2022 Ce există deja în România §11
Contrastul culorilor drapelului (12,7 : 1 și 1,5 : 1) Ce există deja în România §2.1
Pagina „Accesibilitate” (Decizia ADR 815/2022); cele cinci secțiuni (HG 123/2002); Monitorul Oficial Local Ce există deja în România §5, §6
Italia: aproape 6.000 de primării pe același model Legile statelor UE §3.4
Norvegia: Aksel, portal de cunoaștere Sistemele de design din Europa §5, §11
Proba de integrare cu MUD Ce există deja în România §13, decizia 11