Ú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 aplikaciStorybook
, 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.
Barva | Popis |
---|---|
Primary |
|
Secondary |
|
Graynight |
|
White |
Barva | Popis |
---|---|
Success |
|
Warning |
|
Error |
|
Poznámka
|
3.3. Ikonky a symboly
Používají se Materil Design Icons.
|
Poznámka - Work in Progress
|
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.
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.).
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.
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.
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.
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.
|
Poznámka
|
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
ainput 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"
atarget="_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
aJavaScript
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átunazev_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
|
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
-
Technologická agentura ČR. Úvodní stránka - Technologická agentura ČR [online]. Copyright © 2019 [cit. 26.01.2022]. Dostupné z: https://www.tacr.cz/.