připomenutí předchozí hodiny a uvedení problému „Uživatelský tok a navigace“. 5–12 min: stručná teorie – uživatelský tok, navigace, obrazovka, rozhodovací bod, zpětná vazba. 12–18 min: společná ukázka prvního kroku a kontrolních kritérií. 18–36 min: samostatná práce nebo práce ve dvojici – Nakreslit tok pro přidání záznamu nebo dokončení kvízu a odstranit zbytečný krok. 36–41 min: vzájemná kontrola podle zadání a oprava zjištěné chyby. 41–45 min: uložení výstupu (Diagram uživatelského toku), krátký exit ticket a pojmenování dalšího kroku.
Návrh uživatelského rozhraní · 45 minut
Uživatelský tok a navigace
Žák navrhne sled kroků, který vede uživatele k cíli.
00
ČASOVÁ OSA
Struktura 45minutové hodiny
01
VIDEO LEKCE
Ukázka a vysvětlení postupu
▶
Video je připravené k doplnění
Video ukáže princip, první kroky, kontrolu a typickou chybu. Nebude obsahovat celý hotový upravitelný úkol.
provider: youtube · youtubeId: ""02
STUDIJNÍ MATERIÁL
Výklad: z čeho se učíš
Dobré rozhraní vychází z potřeb uživatele, jasné navigace a ověřování prototypu, nikoli pouze z dekorativního vzhledu.
V hodině „Uživatelský tok a navigace“ je hlavním cílem: Žák navrhne sled kroků, který vede uživatele k cíli. Nejde pouze o dokončení jednotlivých kliknutí nebo příkazů; důležité je umět vysvětlit, proč zvolený krok vede k cíli a co se v průběhu práce mění.
Klíčové pojmy uživatelský tok, navigace, obrazovka, rozhodovací bod, zpětná vazba tvoří společný jazyk pro popis řešení. Při praktické práci v prostředí „Diagramový nástroj“ sleduj vstup, jednotlivé kroky, mezivýsledek a způsob kontroly. Pokud některý krok nelze popsat nebo zopakovat, postup ještě není dostatečně přesný.
Praktická část vychází ze zadání: Nakreslit tok pro přidání záznamu nebo dokončení kvízu a odstranit zbytečný krok. Výsledkem musí být „Diagram uživatelského toku“. Hotový výstup nestačí pouze ukázat; musí být možné doložit, že vznikl z pracovních podkladů a že splňuje uvedená hodnoticí kritéria.
Před odevzdáním ověř zejména: Logický tok a úplné stavy. U programů nebo modelů použij více vstupů, u diagramů zkontroluj vztahy a popisky, u dokumentace ověř úplnost. Chybu nejprve přesně popiš, potom změň jen jednu věc a znovu výsledek otestuj.
Slovníček pojmů
uživatelský tok
Posloupnost obrazovek a kroků, kterými uživatel prochází při plnění cíle.
navigace
Systém odkazů, nabídek a ovládacích prvků umožňující pohyb mezi částmi rozhraní.
obrazovka
Jedna ucelená stránka nebo stav uživatelského rozhraní.
rozhodovací bod
Místo uživatelského toku, kde uživatel volí mezi možnostmi nebo systém reaguje na podmínku.
zpětná vazba
Viditelná, zvuková nebo hmatová reakce systému potvrzující akci, stav nebo chybu.
03
ŘÍZENÁ PRÁCE
Postup krok za krokem
- 01
Ve studentské lekci si přečti cíl a otevři pracovní podklady. Připrav prostředí: Diagramový nástroj. Originální podklady ponech beze změny a pracuj s kopií ve vlastní složce.
- 02
Pojmenuj pracovní složku ve tvaru „54_uzivatelsky-tok-a-navigace_prijmeni“. Uvnitř odděl zdrojové soubory, vlastní práci a výsledný export.
- 03
Rozděl zadání na menší ověřitelné kroky: Nakreslit tok pro přidání záznamu nebo dokončení kvízu a odstranit zbytečný krok. Nejprve vytvoř nejjednodušší funkční nebo srozumitelnou variantu.
- 04
Po každém významném kroku výsledek spusť, otevři nebo jinak zkontroluj. Zapisuj testovací vstup, skutečný výsledek a případnou opravu; neměň více nezávislých věcí najednou.
- 05
Porovnej práci s kritérii „Logický tok a úplné stavy“. Oprav alespoň jednu konkrétní slabinu zjištěnou vlastní nebo vrstevnickou kontrolou.
- 06
Ulož zdrojovou i výslednou podobu. Odevzdej „Diagram uživatelského toku“ v požadovaném formátu a přidej krátké zdůvodnění, jak jsi správnost ověřil/a.
04
PRACOVNÍ PODKLADY
Stáhni si soubory, se kterými budeš pracovat
Náhled ukazuje pouze strukturu a typ výsledku. Hotové upravitelné řešení ve studentské části není.
.TXT
54 Podklady Readme
↓Pracovní podklad určený k samostatnému zpracování.
54_PODKLADY_README.txt · 1 kB.TXT
54 Pozadavky Uzivatele
↓Pracovní podklad určený k samostatnému zpracování.
54_pozadavky_uzivatele.txt · 1 kB
.SVG
54 Prazdny Wireframe
↓Pracovní podklad určený k samostatnému zpracování.
54_prazdny_wireframe.svg · 2 kBDůležité: Podklady jsou vstupy k práci, nikoli kompletní řešení. Vlastní výsledek musí vzniknout podle zadání, testu a reflexe.
05
OTEVŘENÉ ODPOVĚDI
Pracovní list
1. Startovací otázkaStačí 2–3 věty; důležitý je konkrétní výchozí příklad.
Co už o tématu „Uživatelský tok a navigace“ víš? Uveď konkrétní příklad nebo situaci.
2. Práce s pojmyDefinici spoj s konkrétním krokem, hodnotou nebo částí výstupu.
Vysvětli vlastními slovy alespoň tři pojmy: uživatelský tok, navigace, obrazovka, rozhodovací bod, zpětná vazba. Ke každému přidej použití v dnešní úloze.
3. Rozhodnutí a zdůvodněníUveď nejméně dvě možné varianty a kritérium volby.
Které rozhodnutí je při řešení úkolu „Nakreslit tok pro přidání záznamu nebo dokončení kvízu a odstranit zbytečný krok.“ nejdůležitější a podle čeho je uděláš?
4. Plán praktické prácePostup má mít vstup, očíslované kroky, kontrolu a očekávaný výstup.
Rozepiš vlastní postup k zadání: Nakreslit tok pro přidání záznamu nebo dokončení kvízu a odstranit zbytečný krok.
5. SebekontrolaKaždou otázku musí být možné zodpovědět důkazem z práce.
Převeď hodnoticí kritéria na kontrolní otázky: Logický tok, úplné stavy.
6. Exit ticketOdpověď musí být konkrétní a vztahovat se k dnešní práci.
Napiš jeden pochopený princip, jednu provedenou opravu a jeden další krok.
06
PRAKTICKÁ PRÁCE
Uživatelský tok a navigace
Nakreslit tok pro přidání záznamu nebo dokončení kvízu a odstranit zbytečný krok. 1. Pojmenuj pracovní složku ve tvaru „54_uzivatelsky-tok-a-navigace_prijmeni“. Uvnitř odděl zdrojové soubory, vlastní práci a výsledný export. 2. Rozděl zadání na menší ověřitelné kroky: Nakreslit tok pro přidání záznamu nebo dokončení kvízu a odstranit zbytečný krok. Nejprve vytvoř nejjednodušší funkční nebo srozumitelnou variantu. 3. Po každém významném kroku výsledek spusť, otevři nebo jinak zkontroluj. Zapisuj testovací vstup, skutečný výsledek a případnou opravu; neměň více nezávislých věcí najednou. 4. Porovnej práci s kritérii „Logický tok a úplné stavy“. Oprav alespoň jednu konkrétní slabinu zjištěnou vlastní nebo vrstevnickou kontrolou.
Očekávaný výstup
Diagram uživatelského toku
07
DŮKAZ O UČENÍ
Odevzdání praktického úkolu
Soubor a krátká odpověď
Diagram uživatelského toku
Dokonči praktickou práci a odevzdej důkaz: Diagram uživatelského toku. Použij studentské podklady, zpracuj je samostatně a před odevzdáním projdi kontrolní kritéria. Hotové řešení je dostupné pouze v učitelské části.
Zatím nebyl vybrán žádný soubor.
V samostatném HTML se ukládají odpovědi a názvy vybraných souborů pouze do tohoto prohlížeče. Skutečný upload provede aplikace Kurzy/Studio.
08
ZÁVĚREČNÁ KONTROLA
Test
09
REFLEXE
Co si z lekce odnášíš
Dokončeno neznamená pouze vytvořeno. Po dokončení lekce prokážeš cíl odevzdáním výstupu: Diagram uživatelského toku. Výsledek zkontroluj podle kritérií: Logický tok a úplné stavy.