připomenutí předchozí hodiny a uvedení problému „Přístupnost rozhraní“. 5–12 min: stručná teorie – kontrast, velikost, popisek, fokus, barva versus význam, přístupnost. 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 – Provést kontrolu prototypu a upravit nejméně tři prvky. 36–41 min: vzájemná kontrola podle zadání a oprava zjištěné chyby. 41–45 min: uložení výstupu (Upravený prototyp a kontrolní list), krátký exit ticket a pojmenování dalšího kroku.
Návrh uživatelského rozhraní · 45 minut
Přístupnost rozhraní
Žák zkontroluje kontrast, popisky a ovladatelnost klíčových prvků.
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ě „Přístupnost rozhraní“ je hlavním cílem: Žák zkontroluje kontrast, popisky a ovladatelnost klíčových prvků. 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 kontrast, velikost, popisek, fokus, barva versus význam tvoří společný jazyk pro popis řešení. Při praktické práci v prostředí „Figma nebo prototypovací 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í: Provést kontrolu prototypu a upravit nejméně tři prvky. Výsledkem musí být „Upravený prototyp a kontrolní list“. 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: Konkrétní opravy a zdůvodnění. 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ů
kontrast
Rozdíl jasu nebo barvy mezi prvky, který ovlivňuje jejich rozlišitelnost a čitelnost.
velikost
Rozměr textu či ovládacího prvku, který ovlivňuje čitelnost a možnost přesného ovládání.
popisek
Text jednoznačně vysvětlující význam pole, ovládacího prvku, obrázku nebo hodnoty.
fokus
Aktuálně vybraný prvek rozhraní, který přijímá vstup z klávesnice.
barva versus význam
Zásada, že důležitá informace nesmí být sdělena pouze barvou, ale také textem, ikonou nebo tvarem.
přístupnost
Vlastnost produktu umožňující použití lidem s různými schopnostmi, zařízeními a způsoby ovládání.
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 prototypovací prostředí. Originální podklady ponech beze změny a pracuj s kopií ve vlastní složce.
- 02
Pojmenuj pracovní složku ve tvaru „57_pristupnost-rozhrani_prijmeni“. Uvnitř odděl zdrojové soubory, vlastní práci a výsledný export.
- 03
Rozděl zadání na menší ověřitelné kroky: Provést kontrolu prototypu a upravit nejméně tři prvky. 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 „Konkrétní opravy a zdůvodnění“. Oprav alespoň jednu konkrétní slabinu zjištěnou vlastní nebo vrstevnickou kontrolou.
- 06
Ulož zdrojovou i výslednou podobu. Odevzdej „Upravený prototyp a kontrolní list“ 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
57 Podklady Readme
↓Pracovní podklad určený k samostatnému zpracování.
57_PODKLADY_README.txt · 1 kB.TXT
57 Pozadavky Uzivatele
↓Pracovní podklad určený k samostatnému zpracování.
57_pozadavky_uzivatele.txt · 1 kB
.SVG
57 Prazdny Wireframe
↓Pracovní podklad určený k samostatnému zpracování.
57_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 „Přístupnost rozhraní“ 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: kontrast, velikost, popisek, fokus, barva versus význam. 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 „Provést kontrolu prototypu a upravit nejméně tři prvky.“ 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í: Provést kontrolu prototypu a upravit nejméně tři prvky.
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: Konkrétní opravy, zdůvodnění.
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
Přístupnost rozhraní
Provést kontrolu prototypu a upravit nejméně tři prvky. 1. Pojmenuj pracovní složku ve tvaru „57_pristupnost-rozhrani_prijmeni“. Uvnitř odděl zdrojové soubory, vlastní práci a výsledný export. 2. Rozděl zadání na menší ověřitelné kroky: Provést kontrolu prototypu a upravit nejméně tři prvky. 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 „Konkrétní opravy a zdůvodnění“. Oprav alespoň jednu konkrétní slabinu zjištěnou vlastní nebo vrstevnickou kontrolou.
Očekávaný výstup
Upravený prototyp a kontrolní list
07
DŮKAZ O UČENÍ
Odevzdání praktického úkolu
Soubor a krátká odpověď
Upravený prototyp a kontrolní list
Dokonči praktickou práci a odevzdej důkaz: Upravený prototyp a kontrolní list. 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: Upravený prototyp a kontrolní list. Výsledek zkontroluj podle kritérií: Konkrétní opravy a zdůvodnění.