| layout | title | permalink |
|---|---|---|
page |
Proiectare |
/proiectare/ |
Acest ghid arată cum să proiectezi un serviciu astfel încât să fie coerent cu restul serviciilor gov.ro.
Folosește spațiul liber pentru a crea o ierarhie vizuală în pagină.
Lațimea maximă implicită a unei pagini este de 1020px, dar o poți extinde în cazul în care conținutul cere acest lucru.
Folosește o grilă pentru a așeza conținutul. Pentru a preveni apariția unor linii lungi de text conținutul trebuie să stea într-o coloană care este de maximum două treimi din lățimea paginii.
Liniile lungi de text reduc lizibilitatea, prin urmare toate liniile de text trebuie să nu fie mai lungi de 75 de caractere.
Proiectează pentru ecrane mici mai întâi, folosind o singură coloană.
Optimizează apoi pentru diferite dimensiuni de ecran fără a face presupuneri cu privire la modelul dispozitivelor pe care le folosesc utilizatorii.
- distanța dintre elemente este de obicei 5px, 10px, 15px sau multiplu de 15px
- distanța față de marginile ecranului este de 15px pentru ecranele mici și 30px pentru ecranele mari
- separă pagina în coloane în funcție de conținut
- folosește ca proporții jumătăți, treimi sau sferturi din lățimea paginii
- folosește fontul Trebuchet MS cu caractere normale, cursive și aldine pentru domeniile .gov.ro
- pentru a acoperi cât mai multe dispozitive folosește stiva de fonturi: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif
- folosește caractere aldine pentru titluri
- folosește titluri și subtitluri în mod consecvent pentru a crea o ierarhie clară în pagină
- folosește caractere normale
- evita să folosești caractere cursive sau aldine dacă nu este necesar
- folosește dimensiunea 16px pentru corpul de text (14px pentru ecrane mici)
- asigură-te că liniile de text nu depășesc 75 de caractere deoarece acestea devin greu de citit dincolo de acest prag
- legăturile din corpul de text trebuie să fie subliniate
- legăturile care nu fac parte dintr-un text trebuie să nu fie urmate de punct
- culorile legăturilor se regăsesc în paleta de culori
- elementele unei liste încep cu literă mică
- folosește o margine pentru a atrage atenția asupra conținutului important din pagină
Raportul de contrast de culoare pentru text și elemente interactive trebuie să fie de cel puțin 4,5:1 așa cum este recomandat de W3C{:target="_blank"}.
- Pantone 480C; RGB(0,73,144); CMYK(100,72,0,18)
- Negru 80%; RGB(88,89,91); CMYK(0,0,0,80)
- Negru 100%; RGB(0,0,0); CMYK(0,0,0,100)
- Pantone 300C; RGB(0,121,193); CMYK(100,44,0,0)
- Negru 20%; RGB(209,211,212); CMYK(0,0,0,20)
- Negru 100%; RGB(255,255,255); CMYK(0,0,0,0)
[text, legături, fundal, butoane, focus, nuanțe de gri]
Evita decorarea inutilă - folosește doar pictograme și imagini dacă este o nevoie reală pentru utilizator.
- dacă sunt necesare pictograme asigură-te că sunt clare, simple și însoțite de un text relevant
- nu ascunde funcționalități sub pictograme
- în cazul în care sunt necesare imagini acestea trebuie să aibă raport 3:2
Folosește tabele pentru a face conținutul mai ușor de parcurs.
- atunci când se compară șiruri de numere, aliniază numerele la dreapta în celulele de tabel
- datele vizualizate sunt recomandate ca alternativă la utilizarea imaginilor
- asigură-te că valoarea numerică apare înaintea descrierii pentru a fi ușor de citit
- folosește butoanele pentru navigarea în site și afișează un singur buton principal pe pagină.
- textul unui buton trebuie să fie scurt și să descrie acțiunea pe care o realizează butonul
- butonul principal se aliniaza la stânga, în linie cu celelalte elemente din formular
- nu dezactiva butoane decât dacă există un motiv bun pentru asta
- dacă trebuie să dezactivezi un buton, asigura-te că arată că nu poate fi selectat (opacitate 50%)
- daca butonul principal este dezactivat, furnizează un alt mod prin care utilizatorul poate să continue sau adaugă un mesaj de eroare și un text pentru a explica de ce butonul este dezactivat
Păstrează formularele cât mai simple - cere doar informațiile necesare.
- solicită doar informațiile de care ai absolută nevoie
- dacă ceri informații opționale marchează etichetele câmpurilor opționale cu '(opțional)'
- câmpurile obligatorii nu trebuie marcate cu asterisc
- toate câmpurile din formular trebuie să aibă etichetă
- nu ascunde etichete, cu excepția cazului în care contextul le face inutile
- etichetele trebuie să fie aliniate deasupra câmpurilor aferente
- textul etichetei trebuie să fie scurt și direct
- evită să folosești punct la sfârșitul etichetelor
- fiecare etichetă trebuie să fie asociată cu un câmp din formular
- câmpurile trebuie să aibă o dimensiune proporțională cu informația care trebuie introdusă
- asigură-te că utilizatorii pot introduce informațiile și la dimensiuni mici de ecran
- dimensionează lățimea câmpurilor la 100% pe ecrane mici
- orice elementele din formular trebuie să fie evidențiat când se află în starea de focalizare
- starea de focalizare se activează la click pe eticheta sau în interiorul câmpului
- asigură-te că există suficient spațiu între elementele unui formular
- încearcă să reduci numărul de erori dintr-o pagină
- validează și evidențiază erorile și alte mesaje
- grupează erorile în partea de sus a paginii
- include un titlu pentru grupul de erori
- leagă fiecare eroare de câmpul care a generat problema
Pentru fiecare eroare:
- scrie un mesaj care ajută utilizatorul să înțeleagă de ce a apărut eroarea și ce să facă cu privire la aceasta
- pune mesajul de eroare în etichetă, după textul respectiv, cu roșu
- folosește un chenar roșu pentru câmp pentru a-l conecta vizual cu eroarea
Când și cum se utilizează antetul gov.ro, subsolul și logo-ul.
Dacă serviciul este disponibil la www.gov.ro sau la o adresa de forma serviciu.gov.ro, atunci trebuie să folosească antetul și subsolul gov.ro. Aceasta include logo-ul Guvernului României și paleta de culori.
În cazul în care serviciul nu este disponibil la unul dintre aceste domenii, atunci nu trebuie să folosească antetul și subsolul gov.ro.
Codul și resursele pentru a implementa antetul și subsol gov.ro sunt disponibile în pagina de componente.