Pravidla UX a design systém

Úvod

Design systém informačního systému TA ČR (dále jako „DISTA“) je soubor principů, pravidel, UI elementů a dalších podkladů pro tvorbu uživatelského rozhraní Společného informačního systému Technologické agentury ČR (dále jen „SISTA“).

DISTA vychází z Materil Designu a pravidel daných Design systémem gov.cz v době svého vzniku. DISTA reflektuje specifické požadavky, dané mírou komplexity systému, např. věcně daný požadavek na velikost a obsáhlost dokumnetů překládaných TA ČR (popisy projektů).

DISTA má dvě části:

První částí je tento dokument, který shrnuje základní principy a nefunkční požadavky.
Druhou částí je Knihovna UI komponent v aplikaci Storybook, která obsahuje základní UI komponenty pro vývoj uživatelského rozhraní SISTA v jazyce React. Tyto komponenty vycházejí ze standardů Materil Designu a jeho implementaci do jazyka React Material UI. Komponenty jsou dále přizpůsobeny požadavků SISTA.

DISTA je živým dokumentem, který bude průběžně aktualizován a doplňován podle potřeb projektového týmu realizujícího SISTA a na základě zpětné vazby uživatelů SISTA.

1. Jak s DISTA pracovat

Seznamte se nejdříve s touto textovou částí. Následně si projděte aktuální verzi Knihovny UI komponent v aplikaci Storybook.
Přístup do Knihovny UI komponent je otevřený.

2. Principy

Přístup k vytváření DISTA je definován následujícími principy.

Funkčnost a srozumitelnost
Chceme dosáhnout maximálně funkčního designu, který je zaměřen na splnění cílů uživatele. Žádné zbytečné animace ani grafické prvky, které by měly dělat systém „hezčí” a odváděly pozornost uživatele.
Serióznost a transparentnost
Systém zprostředkovává projekty v řádu stovek milionů. Celkový styl a způsob prezentace musí působit důvěryhodně a transparentně.
Jednoduchost a čistota
Barvy a grafické prvky jsou jednoznačné, bez gradientů. Texty jsou snadno čitelné díky velikosti a kontrastu. Uživateli jasně komunikujeme, co je hlavní akce nebo informace.
Předvídatelnost a jednota
Ovládací prvky vypadají a chovají se tak, jak to znají uživatelé z aplikací, které běžně používají (např. emailoví klienti). Při přechodu z jedné služby SISTA do druhé se nemění logika ovládání.
Protoypování a testování
Každé zadání dílčího minitendru doplňujeme prototypy, které slouží ve fázi přípravy slouží rovněž k uživatelskému testování. Prototypy využívají primárně MUI prvky, případně drobně upravené o specifické požadavky SISTA. Prototypy slouží jak uživatelům, pro ověření konceptů a návrhů, tak i dodavatelům, jako pomůcka pro pochopení procesu. Prototypy nemají za cíl být pixel perfect, a to s ohledem na komponenty ve Storybooku, ale poskytovat uživateli věrohodný obraz o obsahu a chování dílčí služby. Testujeme nejen na prototypech, ale rovněž průběžně v rámci vývoje.
Využití sdílených komponent Vývojáři využívají v rámci tvorby aplikací hotové a ve Storybooku dokumentované komponenty. Případné vylepšení nebo úprava komponenty by se tak měla projevit v rámci všech služeb.
Učíme se z chyb Tento princip je uplatňován v rámci celého vývoje SISTA a stejně tak i v rámci prototypování a vývoje. Vzhledem k rozdělení systému na dílčí služby (monolity či mikroslužby) je obtížné domyslet vždy celý velký obraz, proto je nutné postupovat iteratvině a případně rozvíjet a vylepšovat existující komponenty.

3. Jednotící prvky

3.1. Font a typografie

SISTA používá Font Family Roboto, uvolněnou pod Apache licencí. V rámci definovaných stylů jsou používány následující fonty:

Roboto Light
Roboto Regular
Roboto Semi Bold
Roboto Bold

Pro jednotlivé typy obsahu a elementů jsou vytvořeny specifické styly, které jsou dokumentovány v rámci Storybooku (např. „Body Text Default” ad.), které definují použitý font, velikost, rozestup mezi písmeny ad.

Na tzv. spacing mezi elementy je použit lineární systém, typicky 8px, 16px, 24px, 32px, 48px, 64px.

3.2. Barevné schéma

V rámci UI Kitu je definováno základní barevné schéma včetně použití barev.

Výběr barev vychází z principů DISTA – předvídatelnosti a čistoty.

Používejte pouze definované styly. Příklad – barva „Primary Main” pro tlačítka. Pokud dojde ke zmeně stylu pro „Primary Main”, změní se styly u všech elementů, které ji používají automaticky.

Table 1. Základní barvy
Barva	Popis
	Primary #0D47A1 Primary a její určené varianty jsou použity na aktivní ovládací prvky, tlačítka, linky ad.
	Secondary #D1D5DA Secondary a její určené varianty jsou použity pro obrysy nebo jako podklad vybraných elementů (např. neaktivní prvky).
	Graynight #2C2E2F Graynight a její určené varianty jsou použity pro texty, ikonky, popisky ad.
	White #FFFFFF White se používá pro pozadí ploch s formuláři, pozadí vybraných navigačních prvků, textů tlačítek ad.

Table 2. Pomocné barvy
Barva	Popis
	Success #FFD33D Success a její varianty se používají pro vybrané texty signalizující správnou funkčnost, úspěch ad.
	Warning #FFD33D Warning a její varianty se používají pro vybrané texty signalizující nepřesnost, neúplnost ad.
	Error #D50000 Error a její varianty se používají na alerty, errorové stavy, tlačítka smazat ad.

Poznámka

Po dohodě s dodavatelem sdílených React komponent (MT065) byla barevná paleta, včetně názvosloví, přizpůsobena názvosloví Material UI.

3.3. Ikonky a symboly

Používají se Materil Design Icons.

Poznámka - Work in Progress

Vzhledem k tomu, že k entitám typu Veřejné zakázky nebo Veřejné soutěže neexistují v rámci Material Design Icons vhodné ikony, TA ČR pro účely projektu SISTA vytvoří sadu specifických ikon „na míru". Tyto ikony budou do UI Kitu doplněny.

3.4. Logo

Logo SISTA existuje ve dvou variantách, jedné pro větší zařízení (ikona a text SISTA) a jedné pro mobilní zařízení (pouze ikona). Ikona obsažená v logu zároveň slouží jako favicon.
Logo je umístěno v levé části horní navigační lišty, viz [Top Navbar] níže, a když na něj uživatel klikne, dostane se na domovskou stránku systému.

Figure 1. Logo SISTA

3.5. Rozložení

Rozložení (layout) SISTA je plánováno pro tři typy zařízení:

Desktop
- Margin 32px vlevo a vpravo.
- Breakpoint (min-width) 1200 px.
Tablet
- Margin 16px vlevo a vpravo.
- Breakpoint (min-width) 600 px.
Mobil
- Margin 16px vlevo a vpravo
- Breakpoint (max-width) 599 px.

3.6. Navigace

Naším cílem je poskytnou uživateli pohodlný a jednotný zážitek z používání SISTA a to i v případě, kdy se bude pohybovat mezi jednotlivými Službami a uživatelskými profily. K dosažení tohoto cíle by měly mimo jiné sloužit jednotné navigační prvky.

3.6.1. Top Bar

Top Bar je horní navigační lišta společná napříč SISTA.
Kromě klikatelného loga, které odkazuje na úvodní obrazovku definovanou pro daný profil obsahuje horní navigační lišta v defaultním nastavení také Top Navigation Menu a Profile Badge.
V UI Kitu je definováno několik variant komponenty Top Navbar pro různé situace (aktivní uživatel, uživatel, který prochází registrací ad.).

Figure 2. Top Bar

3.6.2. Top Navigation Menu

Jde o navigační menu umístěné v Top Navbaru s odkazy na Služby, které jsou společné pro všechny uživatelské profily, například Notifikace, Nápověda.

Figure 3. Top Navigation Menu

3.6.3. User Menu

User Menu je součástí Top Baru a poskytuje uživateli informaci, že je přihlášen v určitém profilu. Zároveň by měl umožnit uživateli přepínat mezi jeho uživatelskými profily (pokud jich má více), odhlásit ho ze SISTA, přejít do nastavení účtu a potenciálně i další akce související s jeho profilem a nastavením (přidat profil, nastavit jazyk uživatelského rozhraní ad.)
Jsou připraveny 2 typy User Menu, které budou testovány.

Figure 4. User Menu

3.6.4. Main Menu

Jde o vertikální menu umístěné vlevo, které má dva typy položek – primární a sekundární. Záměrem je umožnit uživateli rychlý přechod do „služeb”, které jsou aktivní pro daný uživatelský profil.
Po kliknutí na primární položku se uživateli rozbalí relevantní seznam sekundárních položek. Za účelem přehlednosti může být rozbalena vždy pouze jedna primární položka.
Primární položky tohoto menu tedy budou například: Přehled (Dashboard), Projekty, Úkoly apod. Pod vybranými položkami pak budou sekundární položky - například pod primární položkou Projekty budou sekundární položky Seznam projektů, Smlouvy apod.

Figure 5. Main Menu

3.6.5. Tabs

Jde o horní menu, které se zobrazuje v kontextu vybraných služeb pod Top Barem.
Položky menu odpovídají funkcionalitám služeb, podle výběru z Tabs nebo z Top Navigation Menu.

Figure 6. Tabs

Poznámka

Navigační logika je jednou z priorit pro testování a její správné fungování bude prověřeno s uživateli pomocí testování protypů se simulací přechodu do různých Služeb SISTA.

3.7. Formuláře

3.7.1. Základní principy

Pokud je to možné, mají formulářové inputy uveden svůj Label (název inputu, např. „Adresa”), Placeholder (např. „Uličnická 1”), Notes (např. „Adresa je povinný údaj”) a ikonku pro zobrazení nápovědy, jak daný input vyplnit (zobrazuje se pomocí Tooltipu nebo HelpBoxu).
Notes a Tooltip mohou být použity rovněž pro chybová upozornění (například u formuláře pro přihlášení).

4. Nefunkční požadavky

4.1. Podporované prohlížeče

Edge - poslední 3 verze
Chrome - posledních 6 verzí
Firefox - posledních 6 verzí
Safari - poslední 3 verze
iOS - poslední 3 verze
Android - prohlížeč Chrome, posledních 6 verzí

4.2. Ostatní nefunkční požadavky (WIP)

Používá se HTTPS.
Je specifikován HTML doctype.
Je definován charset.
Do pole pro zadání hesla je možné vložit nakopírovaný obsah.
Je implementováno ovládání pomocí klávesnice (Tab navigation) s viditelným Keyboard focusem pro ovládací prvky (linky, tlačítka, položky navigačních menu, včetně možnosti výběru možností v případě drop-down menu pomocí šipek klávesnice a input fields).
Žádný element nemá [tabindex] hodnotu větší než 0.
Formulářové input prvky mají příslušný label for a input id.
Tlačítka mají type=button.
Ovládací prvky (např. ikonová tlačítka) mají title. Toto však platí pouze pro ovládací prvky, jejichž obsah plně nevystihuje jejich účel. title nesmí duplikovat obsah prvku.
Nedostatečný textový obsah tlačítek je z hlediska přístupnosti řešen skrytým textem, viz příklad tlačítka "Otevřít" níže

<button type="button">
    Otevřít
    <span class="sr-only">náhled návrhu projektu</span>
</button>

Obrázky mají alt text. Čistě prezentační obrázky bez konkrétního významu, jako je například logo SISTA, mají alt nastavený jako prázdný string.
U odkazů, které se otvírají na nové stránce, jsou uvedeny atributy rel="noreferrer" a target="_blank". Otevírání odkazů na nové stránce je nastaveno pouze u odkazů v rámci formulářů (popisků a nápověd k jednotlivým polím) a v rámci obecné nápovědy (ServiceDesk, FAQ). Ve zbylých případech není defaultní otevírání odkazů na nové stránce žádoucí.
V <head> je uveden <meta name="viewport" content="width=device-width, initial-scale=1">
Soubory CSS a JavaScript jsou minifikovány.
ARIA role jsou použity správně a mají platné role dle specifikace.
<html> element má uveden [lang] atribut s platnou hodnotou.
Každá stránka má platnou hodnotu <title> elementu, a to ve formátu nazev_stranky | SISTA. Název stránky se mění dynamicky podle stránky, na které se uživatel nachází, a může obsahovat mezery i diakritiku. Název webu za rozdělovníkem, tj. SISTA, se nemění.
Nepoužívají se žádné prvky, které blikají.
Nepoužívá se automatické zjišťování polohy uživatele.
Existuje platný robots.txt soubor.

Poznámka - Work in Progress

V rámci projektu SISTA budou zhodnoceny požadavky na přístupnost dané zákonem č. 99/2019 Sb. zákonem č. 81/2006 Sb., repektive Směrnice (EU) 2016/2102 o přístupnosti webových stránek a mobilních aplikací subjektů veřejného sektoru.
Dává smysl, aby prohlášení o přístupnosti bylo společné pro všechny Služby SISTA, nicméně toto by mělo být předmětem rozhodnutí projektového týmu SISTA.

5. Release notes dokumentu

Verze: 4.
Datum vydání: 22. 12. 2023.
Autor: Petr Novák (TA ČR), [email protected].
Poznámka k verzi: Pravidla UX platná od 22. 12. 2023.

Detailní popis změn:

Verze 5

Kompletní revize.
Odstranění příloh a odkazů na obsoleta FIGMU
Aktualizace principů

Verze 4

Aktualizace barevné palety v podkapitole Barevné schéma.
Aktualizace seznamu existujících komponent v kapitole [Komponenty].
Aktualizace názvosloví barev a komponent (názvosloví přizpůsobeno konvenci Material UI).
Aktualizace nefunkčních požadavků.
Odstranění DISTA UI Kitu ve .fig formátu z příloh, doplnění odkazu na živý dokument ve Figma.
Přidání odkazu na Knihovnu UI komponent ve Storybooku.
Odstranění již nerelevantních poznámek.

Verze 3

Aktualizace textu podkapitol Barevné schéma a Logo.
Aktualizace seznamu existujících komponent v kapitole [Komponenty].
Aktualizace DISTA UI Kitu:
- Přepracování komponenty levého menu na rozbalovací menu s primárními a sekundárdními položkami. Přejmenování této komponenty.
- Přejmenování komponenty horního menu.
- Přepracování komponent formulářových polí (Form Fields). Nově se jedná o pole s tooltipovými nápovědami ve formě vyskakovacího okna.
- Přidání nové komponenty pro tooltipové nápovědy (Help Box).
- Úprava stávající komponenty pro notifikace (Notification), přidání nové komponenty pro zobrazení všech notifikací (Notifications).

Verze 2

Opravy po scrumových událostech etapy 01.
Aktualizace DISTA UI Kitu - aktualizace loga a vybraných komponent.
Přidání odkazu na aktuální DISTA UI Kit.

Termíny a definice

SISTA: Sdílený informační systém Technologické agentury ČR.
DISTA: Design systém pro Sdílený informační systém Technologické agentury ČR. Obsahem je tato textová část a MUI Kit pro použití v nástroji Figma.
UI Kit: Soubor stylů a UI elementů ve formátu .fig navržených pro vytváření prototypů uživatelských rozhraní, která vznikají v rámci vývoje SISTA. UI Kit využívá primárně dostupný kit přímo od MUI.
Uživatelský profil nebo profil uživatele: Uživatelé SISTA mají přiřazeny profily (jeden a více), které definují, jaké mají dostupné funkcionality.

Odkazy a zdroje

Internetové zdroje

Projekt SISTA - etapa 2: Pravidla UX a design systém