Popište, jak byste navrhli systém zpětné vazby v UI (loading, success, error) pro kritický proces (např. platba). Jak volíte formu (toast/banner/inline/dialog) podle závažnosti a kontextu a jak do toho vstupuje vizuální hierarchie a přístupnost?
1) Co má feedback řešit
- Nejistotu: „Co se děje?“
- Kontrolu: „Co můžu udělat dál?“
- Prevenci chyb: zabránit opakovaným akcím, vysvětlit chyby.
2) Formy feedbacku a kdy je použít
- Inline (u pole/sekce):
- validace, lokální chyba, nejvyšší relevance.
- Banner/alert (na stránce):
- důležitá informace, která nesmí zmizet.
- Toast (dočasně):
- nedestruktivní potvrzení, které neblokuje tok.
- Dialog:
- vysoká závažnost, vyžaduje rozhodnutí (destruktivní akce, kritická chyba).
3) Proces platby (příklad)
- Po odeslání: loading stav (disabled CTA + spinner/progress + text „Zpracováváme…“).
- Úspěch: potvrzení + další kroky (doklad, návrat).
- Chyba: konkrétní sdělení + akce (zkusit znovu, jiná karta, kontakt).
- U vhodných situací preferovat undo místo přehnaného potvrzování.
4) Vizuální hierarchie a severity
- Závažnost musí být čitelná:
- typografie, barva (s redundancí), ikona, umístění.
- Nepřehánět agresivní barvy u běžných informací.
5) Přístupnost
- Feedback nesmí být pouze vizuální.
- Chyby musí být asociované s konkrétním místem.
- Fokus u dialogů a klávesnicové ovládání.
Shrnutí
Zpětná vazba je návrh „stavového rozhovoru“: správná forma podle závažnosti + jasný další krok + přístupná komunikace stavu.
Všechny otázky - Design uzivatelskych rozhrani
- 1. Vizuální design jako funkční jazyk UI
- 2. Barva: sémantika, kontrast a redundance
- 3. Layout a vizuální hierarchie: mřížky a whitespace
- 4. Gestalt principy v praxi UI
- 5. Fitts a Hick: dopad na vizuální návrh
- 6. Typografie: hierarchie, čitelnost a technika
- 7. Typografie, mikrokopie a prevence chyb
- 8. Vizualizace dat: volba kódování a grafu
- 9. Dashboard: hierarchie KPI a prezentace insightů
- 10. Ikony, metafory a signifikátory interakce
- 11. Stavy UI a zpětná vazba (feedback)
- 12. Design systém ve vizuálním designu (tokeny)
- 13. Konzistence vs lokální optimalizace (výjimky)
- 14. Etika vizuálního designu a dark patterns