UX/UI Principles

Tato stránka popisuje základní UX/UI principy pro Reply Pilot web app. Cílem není vytvořit velký design system, ale mít společnou dohodu pro obrazovky, nadpisy, formuláře a navigaci, aby aplikace zůstala čistá a snadno pochopitelná.

Základní směr

  • UI má být pracovní nástroj, ne marketingová stránka.
  • Stránky mají být klidné, přehledné a rychle skenovatelné.
  • Primární obsah má být vidět hned; dekorace nesmí vytlačit data.
  • Jeden vizuální prvek má mít jeden význam. Navigace, akce a stav se nemají míchat tak, aby vypadaly stejně.
  • Texty v UI mají být konkrétní a krátké. Preferuj názvy objektů, akcí a stavů před obecným vysvětlováním.

Hierarchie nadpisů

Každá plnohodnotná stránka má mít jeden viditelný H1. H1 říká, kde uživatel je. H2 říká, na kterou část, pohled nebo úlohu se právě dívá.

Pro detail objektu platí:

  • H1 je název konkrétního objektu.
  • H2 kombinuje typ objektu a aktivní pohled nebo úkol, např. Společnost - Přehled.
  • H3 se nepoužívá, dokud stránka není skutečně rozdělena do více samostatných sekcí.
  • Stejný text se nemá opakovat v H1 i H2.

Příklad pro stránky firmy:

URL H1 H2
/companies/1352 Kuchta s. r. o. Společnost - Přehled
/companies/1352/activity Kuchta s. r. o. Společnost - Aktivity
/companies/1352/edit Kuchta s. r. o. Společnost - Editovat
/companies/1352/merge Kuchta s. r. o. Společnost - Spojit duplicitu

Browser title pro detail objektu má používat tvar:

Reply Pilot - <název objektu> - <typ objektu> - <aktivní pohled nebo úkol>

Detail objektu

Detail objektu má mít stabilní strukturu:

  1. H1 s názvem objektu
  2. H2 s typem objektu a aktivním pohledem nebo úkolem
  3. navigaci pohledu a akce nad objektem
  4. samotný obsah

Název objektu patří jen do hlavičky objektu. Obsah pod hlavičkou už nesmí znovu začínat stejným názvem firmy nebo osoby.

Pro detail firmy je doporučený obsah Přehled:

  • právní název
  • IČO
  • DIČ
  • web
  • role
  • viditelnost nebo jiný důležitý stav

Pokud později přibudou skutečně samostatné skupiny, např. kontakty, vazby, rizika nebo obchodní historie, může Přehled dostat H3 sekce. Do té doby je lepší držet obsah plochý.

Navigace a akce mohou být ve stejné hlavičce, ale nemají vypadat jako stejný typ ovládání.

  • Navigace přepíná pohledy nad stejným objektem, např. Přehled a Aktivity.
  • Akce mění objekt nebo spouští workflow, např. Editovat a Spojit duplicitu.
  • Aktivní pohled se nemá renderovat jako link na stejnou stránku.
  • Destruktivní nebo rizikové akce musí být vizuálně slabší než primární tok, dokud nejsou explicitně potvrzené.
  • Tlačítka používej pro odeslání formuláře nebo akci, která přímo mění data. Odkaz na jinou stránku, například Přidat kontakt, Přidat osobu nebo Editovat, má vizuálně zůstat běžným textovým odkazem.
  • Odkazy na ticket/Jira issue používej jednotně přes sdílený link pattern: vlevo ikona Jira issue typu, u externího Jira odkazu vpravo ikona externího odkazu. Lokální odkaz do Reply Pilot external ikonu nemá.

Preferovaný tvar hlavičky firmy:

Kuchta s. r. o.

Společnost - Přehled                    Editovat  Spojit duplicitu

Přehled | Aktivity

Pokud se akce zobrazují ve stejné řadě jako pohledy, musí být stylově odlišené aspoň zarovnáním, vahou nebo oddělením.

Formuláře

Formuláře mají vycházet z jednoduchého CTA form patternu:

  • hlavní pole a hlavní akce mají být blízko sebe
  • formulář nemá být schovaný v těžké kartě, pokud stránka už sama ohraničuje kontext
  • label je vždy viditelný
  • chyba validace patří přímo k poli, které ji způsobilo
  • submit chyba, kterou nejde přiřadit k jednomu poli, patří nad formulář
  • po backend konfliktu má stránka zachovat vyplněné hodnoty
  • sekundární odkazy mají vypadat jako odkazy, ne jako další primární tlačítka

Pro vytvoření nebo editaci firmy má být primární vizuální osa:

Název firmy                         Uložit
Právní název
IČO
DIČ
Web
Role / viditelnost

Jazyk a mikrotexty

  • UI texty mají být konzistentně česky.
  • Používej Společnost, Přehled, Aktivity, Editovat, Spojit duplicitu.
  • Názvy akcí mají být slovesa nebo krátké slovesné fráze.
  • Názvy pohledu mají být podstatná jména.
  • Nepoužívej technické identifikátory jako hlavní viditelný text, pokud existuje lidský název.

Vizuální hustota

Reply Pilot je interní pracovní aplikace. Stránky mají být kompaktní, ale ne stísněné.

  • Nadpisy musí mít dost prostoru, ale nesmí vytlačit obsah mimo první obrazovku.
  • Data v přehledu patří do řádků nebo definičních seznamů, ne do dekorativních karet.
  • Karty používej hlavně pro opakované položky, modaly nebo skutečně samostatné bloky.
  • Nepoužívej kartu uvnitř karty.
  • Pokud prvek nemá jasný účel, nemá být na stránce.

Pravidlo pro změny

Při úpravě UI nejdřív zkontroluj:

  1. Co je H1 a jestli říká, kde uživatel je.
  2. Co je H2 a jestli říká, co uživatel právě vidí nebo dělá.
  3. Jestli se stejný text zbytečně neopakuje.
  4. Jestli jsou pohledy a akce rozlišené.
  5. Jestli validace a chyby patří k místu, kde je uživatel může opravit.