Webové komponenty

Hlavička

Hlavička je základný komponent webovej stránky alebo služby. Je podstatný pre to, aby elektronické služby verejnej správy vyzerali pre používateľa rovnako a využívali jednotné interakčné princípy. Jednou z najdôležitejších úloh hlavičky je navigovanie používateľa k obsahu, ktorý hľadá. 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 niečo, čo používateľov nezaujíma.

Aktuálna hlavička ponúka 2 varianty:

Správanie hlavičky:

Počas posúvania obsahu sa hlavička roluje spolu s telom stránky. Komponent obsahuje tieň, ktorý ho vizuálne oddeľuje od zvyšku obsahu.

Anatómia hlavičky:

Hlavička sa skladá z nasledujúcich horizontálnych sekcií.

anatomia-hlavicky-img

Trikolora - Slúži ako výrazný element slovenskej identity a taktiež plní funkciu vizuálneho oddeľovača od hlavičky webového prehliadača. Je to povinný prvok pre každý variant hlavičky.

trikolora-img

Záhlavie - Skladá sa z dvoch častí, na ľavej strane Pečiatka, ktorá dodáva webovej stránke oficiálnu príslušnosť k slovenskému e-govermentu alebo gestorovi elektronickej služby. Text v pečiatke obsahuje hypertextový odkaz, ktorým sa používateľ preklikne na stránku príslušného gestora služby. Pokiaľ občan navštívi elektronickú službu preklikom z portálu Slovensko.sk pečiatka by mala obsahovať hypertextový odkaz späť na portál Slovensko.sk. Označenie “Oficiálna stránka verejnej správy SR” sa používa v pri webových sídlach, ktorých doména končí .gov.sk. Na pravej strane sa nachádza výber jazyka. Informačná lišta má predefinovanú modru farbu.

zahlavie-img

Hlavná sekcia - Slúži ako základný komponent hlavičky, je povinný pre každú variantu a poskytuje priestor pre zobrazenie identity orgánu verejnej moci (tzv. OVM). Sekcia obsahuje nasledujúce dve časti:

  • Logo na ľavej strane
  • Akčný panel na pravej strane

Logo

Obrázok - Odporúčaný formát loga je SVG. Maximálna povolená výška loga je 50px na výšku, šírka je variabilná. Odporúčame použiť logo podľa pravidiel logo manuálu verejne správy.
Text - Text môže obsahovať maximálne 90 znakov a podľa potreby môže byť zalomené do dvoch riadkov.
Obrázok + Text - Táto varianata môže obsahovať logo s maximálnou výškou 50px a text s maximálnym počtom 80 znakov. Medzera medzi obrázkom a textom je 15px. Zalamovanie textu voči logu je horizontálne na stred.

Akčný panel

Nachádza sa v pravej časti Hlavnej sekcie. Používateľom ponúka 3 komponenty, ktoré je možné si nakonfigurovať podľa potreby, komponent Vyhľadávanie alebo 2x Tlačidlo. Využívanie komponentu vyhľadávania vychádza z vyhlášky o štandardoch. Odporúčame využiť kombináciu vymenovaných komponentov.

Prihlásenie používateľa

Akčný panel ponúka aj variant po prihlásení používateľa - tento komponent obsahuje meno prihláseného používateľa, tlačidlo odhlásiť a variabilnú časť s tlačidlom na profil používateľa.

akcny-panel-img

Navigácia (Menu) - Menu v hlavičke je jednou z hlavných foriem navigácie, ktoré používatelia pri návšteve vášho webu využívajú. Nepoužívať viac ako 5 položiek v prvej úrovni menu pokiaľ používateľský prieskum nepreukáže inak. Čím viac položiek použijete, tým väčšia pravdepodobnosť, že sa používateľ pri hľadaní informácie prostredníctvom menu pomýli.

Do prvej úrovne menu navigácie nepoužívajte napríklad "Aktuality", "o ministerstve/úrade" alebo "Kontakty" - sú to témy, ktoré je lepšie umiestniť do tela hlavnej stránky, prípadne do pätičky. Namiesto toho menu využitie na nasmerovanie ku vecným oblastiam / témam, na ktoré sa vaša inštitúcia špecializuje.

navigacia-img

Rozbaľovacie menu

Sekcia poskytuje 2 varianty rozbaľovacieho menu:

Jednoduché rozbaľovacie menu - používa sa vo väčšine prípadov, keď počet položiek na zobrazenie je maximálne 5. Maximálny počet znakov pre jednu položku je 50, pri vyššom počte znakov sa položky zalomia do dvoch riadkov. Zalomenie do troch riadkov nie je povolené a v prípade dlhšieho textu (viac ako 50 znakov) použite 3 bodky “...”

Zložité rozbaľovacie menu - Používa sa pokiaľ počet položiek presahuje počet 5. Pričom v komponente je povolené použitie maximálne 9 položiek v 3 radoch vedľa seba. Maximálny počet znakov pre jednu položku je 50, pri vyššom počte znakov sa položky zalomia do dvoch riadkov. Zalomenie do troch riadkov nieje povolené a v prípade dlhšieho textu (viac ako 50 znakov) použite 3 bodky “...”

rozbalovacie-menu-img

Lišta

Táto sekcia obsahuje dva varianty. Lišta je umiestnená vždy v hornej časti hlavičky. Komponent slúži na dočasnú alebo permanentnú informáciu pre používateľov a môže mať maximálne 2 riadky.

Upozorňovacia lišta - Používa sa v prípade potreby zobraziť informáciu s vyššou prioritou. Pre zvýraznenie využíva žltú farbu.

lista-upozorneni-img

Informačná lišta - Využíva sa v prípade zobrazenia obsahu, ktorý ma informatívny charakter - nemá až takú vysokú vizuálnu prioritu.

informacna-lista-img

Responzívna verzia hlavičky

Správanie mobilnej hlavičky

Počas posúvania obsahu ostáva hlavička staticky pripnutá v hornej časti obrazovky - obsah sa roluje pod hlavičkou. Komponet obsahuje tieň, ktorý vyzdvihuje hlavičku ponad obsah. Počas posúvania smerom na dol sa v hlavičke schová informačná lišta následne po rolovaní na hor sa lišta opäť odkryje.

Anatómia hlavičky

Zásadná zmena oproti desktopovej verzií hlavičky je v Hlavnej sekcii, Navigácií a Rozbaľovacom menu. Sekcie ako Trikolora, Záhlavie a Lišta zostávaju rozložením nezmenené.

Hlavná sekcia

Slúži ako základný komponent hlavičky, je povinný pre každý variant a poskytuje priestor pre zobrazenie identity OVM. Sekcia obsahuje nasledujúce časti:

Logo - v tejto časti odporúčame využívať varinat Obrázok + Text a využiť pre názov inštitúcie doménove meno.

  • Obrázok - Odporúčaný formát loga je SVG. - Maximálna povolená výška loga je 40px na výšku, šírka je variabilná. Odporúčame použiť logo podľa pravidiel logo manuálu verejnej správy.
  • Text - Text môže obsahovať maximálne 90 znakov a podľa potreby môže byť zalomené do dvoch riadkov.
  • Obrázok + Text - Táto varinata môže obsahovať logo s maximálnou výškou 40px a text s maximálnym počtom 80 znakov. Medzera medzi obrázkom a textom je 10px. Zalamovanie textu voči logu je horizontálne na stred.

V pravej časti sa nachádza tlačidlo “Menu”, ktoré rozbaľuje skryté časti hlavičky.

Navigácia (Menu) + Rozbaľovacie menu

V tejto sekcii sa nachádzajú zlúčené komponenty z dvoch desktopových sekcií. Rozbalenie sekcie sa iniciuje slačením tlačidla “Menu” na hlavičke. Sekcia sa rozbaľuje ponad existujúci obsah a v prípade vyššieho počtu komponentov je posúvateľná. Sekcia sa zabalí po kliku na tlačidlo zavrieť. Obsahuje nasledovné komponenty:

  • Vyhľadávanie
  • Navigáciu a rozbaľovacie menu
  • User management - Prihlásenie a odhlásenie používateľa
  • Tlačidá CTA
responzivna-verzia-img

Hlavička pre webové sídla

Jednou z najdôležitejších úloh hlavičky je navigovanie používateľa k obsahu, ktorý hľadá. 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 niečo, čo používateľov nezaujíma.

Desktopové varianty

webove-sidla-desktop-img

Responzívne varianty

webove-sidla-mobil-img

Hlavička pre Elektronické služby

Dôležitou súčasťou varianty hlavičky pre elektronické služby je názov služby a zobrazenie prekliku na domovskú stránku gestora elektronickej služby.

elektronicke-sluzby-desktop-img

Responzívne varianty

elektronicke-sluzby-mobil-img

Rozšírené príklady pre hlavičku:

Rozšírené príklady pre hlavičku

Odkazy na staré verzie hlavičiek:

Hlavička a pätička

Hlavička pre webové sídla