UX DIZAJN: Čo je to ID-SK a čo obsahuje

O predstavení Jednotného dizajn manuálu elektronických služieb odbornej verejnosti som písala v predchádzajúcom článku. Teraz sa pozrime bližšie na to, čo to vlastne je a na čo je nám to dobré.

Čo je to ID-SK a čo obsahuje

ID-SK je verejne dostupný dokument, postavený na základoch britského gov.uk, zverejnený na stránke http://idsk-elements.herokuapp.com/. Je určený na voľné použitie pre všetkých tvorcov elektronických služieb, poskytuje im zdrojové kódy a praktické tipy, ktoré dodávateľom pomôžu zjednodušiť komplikované formuláre štátnych služieb. Manuál bol tvorený tak, aby služby, ktoré budú poskytované v jeho dizajne, boli jednoduché, zrozumiteľné a ľahko dostupné pre všetky vekové kategórie. (napísala výstižne SUXA.)

Jednotný dizajn manuál elektronických služieb má za cieľ zjednotiť používateľské rozhrania a spôsob komunikácie s používateľom pri poskytovaní elektronických služieb na Slovensku.

Inými slovami, malo by to pomôcť zjednotiť ako výzor, tak i správanie formulárov služieb na rôznych štátnych stránkach. A tým by sme mali my, občania, oveľa lepšie pochopiť, čo po nás daný úrad vlastne chce a malo by nám byť jasné, ako to máme daný formulár vyplniť a vybaviť.

Momentálne totiž každý úrad má úplne iné formuláre. A to nehovorím len o farbe, ale aj o štruktúre a logike zadávania informácií.

Zároveň ID-SK svojim obsahom pomôže aj urýchliť realizáciu a programovanie týchto online služieb. Veľa vecí totiž už relizátori a programátori nebudú musieť riešiť. Pribudnú im však starosti ohľadom dobrej user experience, čiže našej dobrej používateľskej skúsenosti ;)

K tomu všetkému im pomôže práve obsah tohto ID-SK.

Úvod

obsahuje všeobecný opis ID-SK a princípy tvorby kvalitného používateľského rozhrania. A hoci sú to väčšinou dlhšie textové stránky, tak odporúčam prečítať:

  • Čo je dizajn manuál ID-SK
  • Metodické usmernenie
  • 10 princípov tvorby elektronických služieb podľa ID-SK
  • Ako začať s vývojom

Webové komponenty

sú tie, ktoré potrebujú relizátori pri tvorbe elektronických služieb. Všetky tieto komponenty sú dodávané s popisom a HTML kódom.

  • Chyby a validácia
  • Farby
  • Formulárové prvky
  • Hlavička a pätička
  • Ikony a obrázky
  • Označenie verzie služby
  • Rozloženie stránky
  • Tlačidlá
  • Typografia
  • Údaje

PRÍKLAD - Rozloženie stránky

 

PRÍKLAD - Typografia

 

PRÍKLAD - Farby

PRÍKLAD - Chyby a validácia

Vzory

sa venujú správnemu používaniu webových komponentov a spôsobu zostavovania služieb.

  • Úvodné obrazovky
  • Overenie pred začiatkom procesu
  • Stránky dokončenia procesu
  • Indikátory progresu
  • Štruktúra formulárov
  • Ukážka podania žiadosti
  • Platobná stránka
  • Pomocný text
  • Prihlásenie a používateľské účty
  • Proces overenia e-mailovej adresy
  • … a mnoho ďalších

PRÍKLAD - Úvodné obrazovky

PRÍKLAD - Stránky dokončenia procesu

PRÍKLAD - Indikátori procesu

PRÍKLAD - Adresy

Slovník

pozostáva z názvoslovia používaného v používateľských rozhraniach spolu so špecifikáciou ich správneho použitia.

  • Označenie webových komponentov
    (Breakpoints, Button, Drop-down lists, Focus, Fieldset atď.)
  • Označenie tlačidiel
    (Prihlásiť sa, Odhlásiť sa, Začať, Pokračovať, Podpísať žiadosť atď.)
  • Používané výrazy
    (Autentifikácia, Autorizácia, Elektronické podanie atď.)

Pozn: Jednotný dizajn manuál elektronických služieb Slovenskej republiky bol vytvorený v rámci SUXA (Slovenská user experience asociácia) a v spolupráci s Úradom podpredsedu vlády SR pre investície a informatizáciu. Nájdete ho na  https://idsk-elements.herokuapp.com/

Zdrojové kódy nájdete na Git Hube https://github.com/id-sk