Cvičení 1
Vstupenky
Co si vyzkoušíte
Kino Sever chce prodávat vstupenky online. Zatím má jen stránku s programem na týden, kterou jste opravovali minule, a koupě vstupenky na webu chybí úplně. Navrhnete, jak bude fungovat. Kód psát nebudete: kreslíte na papír, nebo v Excalidraw. Poslední krok zadání se dělá ve dvojici.
Zadání
- Napište jednou větou cíl uživatele, pro kterého koupi vstupenky navrhujete, a to jeho slovy. Pod něj vypište dva až tři úkoly, které musí na webu udělat, aby cíle dosáhl.
- Nakreslete uživatelský tok koupě vstupenky od příchodu na web po potvrzení objednávky. Použijte značky z výkladu.
- Doplňte do toku aspoň jedno rozhodnutí a aspoň jednu odbočku ze šťastné cesty, třeba vyprodané představení nebo špatně vyplněný e-mail. Zkontrolujte, že žádná šipka nekončí ve slepé uličce.
- Vypište z toku seznam obrazovek, které web potřebuje. Ke každé připište, co na ní uživatel musí udělat.
- Nakreslete low-fi wireframy tří obrazovek pro úzký displej: program, výběr představení a počtu vstupenek a formulář s kontaktem a shrnutím objednávky. Nadpisy a tlačítka popište skutečnými texty.
- Vyznačte na každém wireframu hlavní akci. Je na každé obrazovce jen jedna?
- Ověřte, že pořadí prvků na každé obrazovce odpovídá tomu, čeho si má uživatel všimnout nejdřív. Kde ne, prvky přeskládejte.
- Vyměňte si návrhy ve dvojici. Projděte cizí tok prstem po wireframech, s cílem jeho uživatele v hlavě, a nahlas říkejte, kam klikáte. Kde se u vašeho návrhu zaváhalo, návrh upravte.
Bonus
- Nakreslete wireframe obrazovky s výběrem představení pro široké okno. Obsah a pořadí prvků zůstanou stejné jako na úzkém displeji.
- Nakreslete tok pro druhý cíl: vrácení vstupenky, nebo objednávku školního představení pro celou třídu. Které obrazovky má společné s koupí vstupenky?
- Spočítejte kroky šťastné cesty a jeden uberte tak, aby uživatel nepřišel o nic, co potřebuje vědět.