Build Mode
Kurz
Modul 11 · První skutečná aplikace

Obrazovky a cesty uživatele

Aplikace nejsou stránky, ale cesty. Jak je navrhnout tak, aby dávaly smysl bez vysvětlování.

12 minlekce 65/107

Po lekci umíš

  • Umíš vypsat obrazovky z datového modelu
  • Rozumíš tomu, co je uživatelská cesta
  • Umíš najít místa, kde se uživatel ztratí
Obsah lekce (5)

Když si vypíšeš seznam obrazovek, máš seznam. Když si projdeš cestu uživatele, najdeš díry.

Obrazovky z modelu

Většina obrazovek vyplyne z datového modelu skoro sama. Pro každou hlavní věc obvykle potřebuješ:

  1. Seznam

    Přehled všeho. Obvykle první obrazovka po přihlášení.

  2. Detail

    Jedna položka se vším, co o ní víme.

  3. Vytvoření a úprava

    Často jeden formulář pro obojí.

K tomu pár obrazovek navíc: přihlášení, nastavení, chybová stránka.

Cesta místo seznamu

Cesta je posloupnost kroků, kterou uživatel projde, aby něco udělal. Popisuje se větou od začátku do konce.

„Nový zákazník přijde na web, vybere službu, vybere termín, vyplní jméno a telefon, potvrdí a dostane potvrzovací SMS.“

Když si tuhle větu napíšeš, hned uvidíš, co všechno k ní potřebuješ – a taky co ti chybí.

Prompt pro Claude Code

Projdi cestu krok za krokem

Návrh obrazovek podle skutečné cesty uživatele.

Chci projít jednu uživatelskou cestu do detailu.

Cesta: [POPIŠ VĚTOU, OD ZAČÁTKU DO KONCE]

Rozepiš ji na jednotlivé kroky. U každého kroku napiš:
1. Co uživatel vidí.
2. Co může udělat.
3. Co se stane potom.
4. Co se stane, když se to nepovede.

Na konci mi napiš, které obrazovky z toho vyplývají a která místa
jsou podle tebe nejrizikovější – tedy kde uživatel nejspíš odejde.

Tři cesty, které musí fungovat

U každé aplikace jsou tři cesty, na kterých stojí všechno:

  1. Úplně první použití

    Člověk aplikaci vidí poprvé, nemá žádná data. Co uvidí a co má udělat?

  2. Hlavní věc

    To, kvůli čemu aplikace existuje. Musí jít udělat bez přemýšlení.

  3. Návrat

    Uživatel přijde podruhé, po týdnu. Najde, kde skončil?

První cesta bývá nejhorší a je nejdůležitější. Nový uživatel nemá trpělivost.

Kde se lidé ztrácejí

Zdroj zmatku

  • Není jasné, co je na obrazovce hlavní akce.
  • Po kliknutí se nic viditelně nestane.
  • Chyba se ukáže jako technická hláška.
  • Prázdný seznam bez vysvětlení.
  • Není cesta zpátky.

Jak to napravit

  • Jedna zvýrazněná akce, ostatní tišší.
  • Vždycky viditelná reakce – potvrzení, změna, načítání.
  • Text česky, s tím, co má uživatel udělat.
  • Prázdný stav vysvětluje a nabízí první krok.
  • Zpět nebo domů z každé obrazovky.
Prompt pro Claude Code

Najdi místa, kde se uživatel ztratí

Kontrola hotové obrazovky nebo cesty.

Projdi tuhle část aplikace očima člověka, který ji vidí poprvé
a nikdo mu nic nevysvětlil.

Řekni mi:
1. Kde není jasné, co má udělat.
2. Kde po akci nedostane žádnou zpětnou vazbu.
3. Kde je text psaný technicky místo lidsky.
4. Kde se nemá jak vrátit.
5. Jak vypadá tahle obrazovka, když nemá žádná data.

U každého bodu navrhni konkrétní opravu včetně textu. Česky.

Jednoduché pravidlo: z každé obrazovky musí být vidět, kde jsem a jak se dostanu domů.

Pro malou aplikaci stačí:

  • Horní lišta s názvem a odkazem domů.
  • Zvýraznění aktivní části.
  • Zpět na detailech.
Cvičení20 minut

Vezmi hlavní cestu své aplikace a rozepiš ji na kroky promptem z téhle lekce.

U každého kroku odpověz na otázku „co když se to nepovede“. Ty odpovědi si zapiš – jsou to úkoly, na které bys jinak přišel až od uživatelů.

Co si odnést

  • Obrazovky vyplynou z modelu: seznam, detail, formulář.
  • Navrhuj cesty, ne seznamy stránek. Cesta odhalí, co chybí.
  • U každého kroku se ptej „co když se to nepovede“.
  • Tři cesty musí fungovat: první použití, hlavní věc, návrat.

Máš to za sebou?

Označ lekci jako hotovou, ať víš, kde jsi skončil. Nic se tím neuzamkne.

Obsah aktualizován: 21. srpna 2026