připomenutí předchozí hodiny a uvedení problému „Klikací prototyp“. 5–12 min: stručná teorie – prototyp, hotspot, stav tlačítka, potvrzení, chybová zpráva. 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 – Převést wireframe do klikacího prototypu a doplnit stav úspěchu a chyby. 36–41 min: vzájemná kontrola podle zadání a oprava zjištěné chyby. 41–45 min: uložení výstupu (Klikací prototyp), krátký exit ticket a pojmenování dalšího kroku.
Návrh uživatelského rozhraní · 45 minut
Klikací prototyp
Žák propojí obrazovky a vytvoří srozumitelnou zpětnou vazbu.
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ě „Klikací prototyp“ je hlavním cílem: Žák propojí obrazovky a vytvoří srozumitelnou zpětnou vazbu. 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 prototyp, hotspot, stav tlačítka, potvrzení, chybová zpráva tvoří společný jazyk pro popis řešení. Při praktické práci v prostředí „Figma nebo jiné prostředí“ 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í: Převést wireframe do klikacího prototypu a doplnit stav úspěchu a chyby. Výsledkem musí být „Klikací prototyp“. 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: Funkční průchod a zpětná vazba. 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ů
prototyp
Zkušební verze produktu nebo rozhraní určená k ověření návrhu před dokončením.
hotspot
Klikatelná oblast prototypu, která simuluje přechod nebo akci.
stav tlačítka
Vizuální a funkční podoba tlačítka například v klidu, při najetí, stisku, vypnutí nebo načítání.
potvrzení
Zpětná vazba, která uživatele informuje, že akce byla přijata nebo dokončena.
chybová zpráva
Srozumitelné sdělení, co se nepodařilo, proč a jak může uživatel pokračovat nebo chybu opravit.
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í: Figma nebo jiné prostředí. Originální podklady ponech beze změny a pracuj s kopií ve vlastní složce.
- 02
Pojmenuj pracovní složku ve tvaru „56_klikaci-prototyp_prijmeni“. Uvnitř odděl zdrojové soubory, vlastní práci a výsledný export.
- 03
Rozděl zadání na menší ověřitelné kroky: Převést wireframe do klikacího prototypu a doplnit stav úspěchu a chyby. 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 „Funkční průchod a zpětná vazba“. Oprav alespoň jednu konkrétní slabinu zjištěnou vlastní nebo vrstevnickou kontrolou.
- 06
Ulož zdrojovou i výslednou podobu. Odevzdej „Klikací prototyp“ 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
56 Podklady Readme
↓Pracovní podklad určený k samostatnému zpracování.
56_PODKLADY_README.txt · 1 kB.TXT
56 Pozadavky Uzivatele
↓Pracovní podklad určený k samostatnému zpracování.
56_pozadavky_uzivatele.txt · 1 kB
.SVG
56 Prazdny Wireframe
↓Pracovní podklad určený k samostatnému zpracování.
56_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 „Klikací prototyp“ 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: prototyp, hotspot, stav tlačítka, potvrzení, chybová zpráva. 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 „Převést wireframe do klikacího prototypu a doplnit stav úspěchu a chyby.“ 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í: Převést wireframe do klikacího prototypu a doplnit stav úspěchu a chyby.
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: Funkční průchod, zpětná vazba.
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
Klikací prototyp
Převést wireframe do klikacího prototypu a doplnit stav úspěchu a chyby. 1. Pojmenuj pracovní složku ve tvaru „56_klikaci-prototyp_prijmeni“. Uvnitř odděl zdrojové soubory, vlastní práci a výsledný export. 2. Rozděl zadání na menší ověřitelné kroky: Převést wireframe do klikacího prototypu a doplnit stav úspěchu a chyby. 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 „Funkční průchod a zpětná vazba“. Oprav alespoň jednu konkrétní slabinu zjištěnou vlastní nebo vrstevnickou kontrolou.
Očekávaný výstup
Klikací prototyp
07
DŮKAZ O UČENÍ
Odevzdání praktického úkolu
Soubor a krátká odpověď
Klikací prototyp
Dokonči praktickou práci a odevzdej důkaz: Klikací prototyp. 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: Klikací prototyp. Výsledek zkontroluj podle kritérií: Funkční průchod a zpětná vazba.