SKOficiálna stránka

Hlavička - webové sídla

Hlavička pre webové sídla je základný prvok jednotného dizajnového systému Slovenska, ktorý je postavený tak, aby používateľom poskytoval jednotný vizuálny, ale aj interakčný zážitok naprieč celým ekosystémom štátu.

Použitie hlavičky

Jednou z najdôležitejších úloh hlavičky je navigovať používateľa k hľadanému obsahu webového sídla. Komponent obsahuje vždy hlavnú sekciu a podľa potreby môže byť jeho súčasťou aj záhlavie, navigácia a rozbaľovacie menu. Pri posúvaní sa obsahom webového sídla dochádza súbežne k rolovaniu hlavičky.

Záhlavie

Na ľavej strane záhlavia sa nachádza nápis, ktorý indikuje, že webové sídlo je oficiálnou stránkou verejnej správy spoločne s odkazom na hlavné webové sídlo správcu alebo na webové sídlo ústredného portálu verejnej správy. Výber jazyka sa vždy nachádza na pravej strane záhlavia.

záhlavie

Hlavná sekcia

Hlavná sekcia je povinná časť každej hlavičky. Hlavná sekcia hlavičky je zložená z loga na ľavej strane a akčného panelu na pravej strane. Logo v hlavičke sa riadi pravidlami pre domenové mená. V časti akčný panel sa nachádzajú najviac dve tlačidlá a vyhľadávacie pole. Panel ponúka tiež variant po prihlásení koncového používateľa. V tom prípade je na akčnom paneli zobrazené prihlasovacie meno koncového používateľa, za predpokladu, že daný portál alebo webové sídlo poskytuje túto možnosť.

  1. 1. Bez akčného panelu
  2. 2. S akčným panelom
  3. 3. S akčným panelom prihlásený používateľ
hlavná sekcia

Navigácia (menu)

V navigácií sa v prvej úrovni používa najviac päť položiek, ak používateľský prieskum nepreukáže inak. Do navigácie sa spravidla umiestňujú vecné oblasti alebo témy, na ktoré sa orgán riadenia špecializuje. V prípade varianty hlavička pre elektronické služby sa navigácia nachádza v hlavnej sekcii hlavičky. Položky v menu a podmenu vytvárajte za pomoci používateľských prieskumov. Znížite tým riziko, že do hlavičky zakomponujete časti, ktoré pre používateľa nie su relevantné.

navigácia menu

Varianty

Komponent umožňuje použitie 4 variantov.

1. S navigáciou: tento variant hlavičky používajte v prípade robustnejšej informačnej architekúry webového sídla. Navigácia ponúka lepšiu orientáciu používateľa nad hlavnými časťami webu.

2. Bez navigácie: využíva sa v prípade jednoduchšieho webového sídla bez rozsiahlej informačnej architektúry.

varianty navigácie

3. Neprihlásený používateľ: používa sa v prípade, že webové sídlo neposkytuje používateľom možnosť prihlásenia resp. zobrazuje stav hlavičky pred prihlásením.

4. Prihlásený používateľ: využíva sa v prípade, že webové sídlo poskytuje používateľom možnosť prihlásiť sa do profilu/osobnej zóny.

varianty prihlásenia

Responzivita

Zobrazenie vybraných variantov komponentu hlavička na responzívnom zariadení. Počas posúvania obsahu ostáva hlavička staticky pripnutá v hornej časti obrazovky, obsah sa roluje pod hlavičku. Hlavná navigácia je umiestnená v rozbaľovacej ponuke, ktorej súčasťou je aj zobrazený profil, vyhľadávanie a príslušné akcie. Varianta hlavičky s rozbaleným menu obsahuje v spodnej časti dve primárne tlačidla.

responzivita

Pravidlá pre doménové mená

Použitie variantu doménového mena pri responzívnej verzií slúži na efektívne využívanie úzkeho priestoru v hlavnej sekcii hlavičky na mobilných zariadeniach. Pre správne používanie domenových mien sa odporúčajú definovať krátke textové názvy, ktoré reprezentujú dané webové sídlo alebo OVM. Ukážky variantov sú uvedené na ilustráciách nižšie.

doménové mená

Ako nepoužívať hlavičku

Neodporúča sa používať domenové meno z vyšším počtom znakov ako je 80 a ani kombináciu veľmi širokej verzie loga v kombinácii s textom.

ako nepoužívať hlavičku

Hlavička - webové aplikácie

Hlavička pre webové aplikácie (elektronické služby) podporuje jednotný vizuálny zážitok používateľa naprieč rozhraniami ekosystému štátu. Využíva sa iba pre rozhrania, ktoré vyžadujú autentifikáciu používateľa, ako sú elektronické služby, portály služieb a osobné zóny.

Použitie hlavičky

Jednou z najdôležitejších úloh hlavičky je navigovať používateľa k hľadanému obsahu webovej aplikácie. Komponent obsahuje vždy hlavnú sekciu a podľa potreby môže obsahovať aj záhlavie, navigáciu a rozbaľovacie menu. Komponent hlavičky je staticky umiestnený v hornej časti obrazovky a počas posúvania sa obsah roluje pod hlavičkou.

Záhlavie

Na ľavej strane záhlavia sa nachádza nápis, ktorý indikuje, že webové sídlo je oficiálnou stránkou verejnej správy spoločne s odkazom na hlavné webové sídlo správcu alebo na webové sídlo ústredného portálu verejnej správy. Výber jazyka sa vždy nachádza na pravej strane záhlavia.

záhlavie

Hlavná sekcia

Hlavná sekcia je povinná časť každej hlavičky. Hlavná sekcia hlavičky je zložená z loga na ľavej strane a akčného panelu na pravej strane. Logo v hlavičke sa riadi pravidlami pre domenové mená. V akčnom paneli je vytvorený priestor pre zobrazenie ikony profilu a doplnkové nadradené akcie ako napríklad notifikácie, podpora atď.

  1. 1. S navigáciou
  2. 2. Bez navigácie
hlavná sekcia webové

Navigácia (menu)

V navigácií sa v prvej úrovni používa najviac päť položiek, ak používateľský prieskum nepreukáže inak. Do navigácie sa spravidla umiestňujú vecné oblasti alebo témy, na ktoré sa orgán riadenia špecializuje. Navigácia je umiestnená v strede hlavnej sekcie hlavičky. Položky v menu a podmenu vytvárajte za pomoci používateľských prieskumov. Znížite tým riziko, že do hlavičky zakomponujete časti, ktoré pre používateľa nie su relevantné.

Varianty

Komponent umožňuje použitie 2 variantov.

1. S navigáciou: tento variant hlavičky používajte v prípade robustnejšej informačnej architektúry webovej aplikácie. Navigácia ponúka lepšiu orientáciu používateľa nad hlavnými časťami webovej aplikácie.

2. Bez navigácie: využíva sa v prípade jednoduchšej webovej aplikácie (elektronickej služby) bez rozsiahlej informačnej architektúry.

varianty navigácie s navigáciou a bez

Responzivita

Zobrazenie vybraných variantov komponentu hlavička na responzívnom zariadení. Počas posúvania obsahu ostáva hlavička staticky pripnutá v hornej časti obrazovky a obsah sa roluje pod hlavičku. Hlavná navigácia je umiestnená v rozbaľovacej ponuke, ktorej súčasťou je aj zobrazený profil, vyhľadávanie a príslušné akcie.

responzivita

Pravidlá pre doménové mená

Použitie variantu doménoveho mena pri responzívnej verzií slúži na efektívne využívanie úzkeho priestoru v hlavnej sekcii hlavičky na mobilných zariadeniach. Pre správne používanie domenových mien sa odporúčajú definovať krátke textové názvy, ktoré reprezentujú dané webové sídlo alebo OVM. Ukážky variantov sú uvedené na ilustráciách nižšie.

doménové mená

Ako nepoužívať hlavičku

Neodporúča sa používať domenové meno z vyšším počtom znakov ako je 80 a ani kombináciu veľmi širokej verzie loga v kombinácii s textom.

ako nepoužívať hlavičku