UX metody a nástroje
Co v kurzech skutečně děláte
Wireframe, prototyp, test použitelnosti, Figma. Tady je pořadí, ve kterém se metody učí a co od vás lektor bude chtít.
Kurzy se liší tím, kolik prostoru dají ruční práci a kolik nástrojům. Níž najdete, co která metoda znamená v praxi, kolik času jí lektoři obvykle věnují a na co se máte připravit, než kurz začne.
Od výzkumu k hotové obrazovce
Výuka UX má v českých kurzech obvykle stejnou logiku: nejdřív zjistit, co lidé potřebují, pak to nakreslit zhruba, pak to udělat klikatelné a nakonec se zeptat skutečných lidí, kde to drhne. Pořadí není náhoda. Každý krok stojí na tom předchozím a přeskočený krok se vrací jako předělávání celé obrazovky.
UX výzkum
Než se začne kreslit
Rozhovory s uživateli, pozorování, jak si lidé vedou na stávajícím webu, a shrnutí do pár vět: kdo přichází, co chce najít a co ho nejčastěji odradí. V kurzu to bývá první dvouhodinový blok a často i domácí úkol na existující web.
Wireframe
Hrubý náčrt struktury
Šedé obdélníky místo barev a fotek: kde je navigace, co je nad přehybem, jak velký prostor dostane hlavní akce. Kreslí se na papír i v nástroji. Cílem není vzhled, ale dohoda, že rozvržení dává smysl dřív, než se řeší barvy.
Prototypování
Návrh, který se dá proklikat
Z několika statických obrazovek se propojí klikatelná cesta: z domovské stránky na detail, z detailu do košíku. Prototyp se nemusí tvářit jako hotový web, ale musí jím jít projít bez zastavení a ukázat, kde logika vázne.
Testování použitelnosti
Zpětná vazba od lidí
Pět lidí u jednoho stolu, zadaný úkol a ticho od zadavatele. Sleduje se, kde se zaseknou a co říkají nahlas. Většina kurzů tuhle část učí prakticky, protože právě tady se nejrychleji zlepší návrh.
Nástroje v kurzech
Figma jako hlavní dílna
Figma dnes v českých kurzech nahrazuje dřívější kombinaci grafického editoru a prototypovacího nástroje. Všechno je v jednom souboru a lektor se k vaší práci dostane odkazem, takže zpětná vazba přichází během hodiny, ne až na dalším setkání.
Figma má zdarma dostupnou verzi pro jednotlivce, což většina kurzů zmiňuje hned na začátku. Platit začnete až ve chvíli, kdy budete potřebovat společné soubory v týmu.
Wireframe na papíře není krok zpět
Kreslit na papír je rychlejší než cokoliv otevírat a hlavně se u toho snadněji mění názor. Na papíře stojí přeškrtnutí deset vteřin, v hotovém návrhu znamená předělání celé sekce.
Lektoři po vás obvykle chtějí tři verze stejné obrazovky vedle sebe. Teprve pak se přechází do Figmy. Kdo začne rovnou v nástroji, uvízne u hezkých detailů dřív, než vyřeší, jestli obrazovka vůbec funguje.
Na co se v jednotlivých blocích připravit
Kurzy se liší délkou i hloubkou, ale témata se opakují. Tabulka shrnuje, co blok obvykle obsahuje a co si k němu vzít, ať na hodinu nepřijdete s prázdnýma rukama.
Šest věcí, které se v hodinách řeší každý týden
Kdo je uživatel
Než se kreslí, sepíše se na půl stránky, kdo na web přichází a s čím. Většina špatných návrhů vzniká tím, že si návrhář představuje sebe.
Jasná hlavní akce
Každá obrazovka má jednu věc, kterou má člověk udělat. Pokud se jich na stránce tlačí pět, neudělá ani jednu.
Rozestupy a mřížka
Pravidlo o osmi bodech drží stránku pohromadě. V kurzu se vysvětluje jednou a pak se kontroluje u každé odevzdané práce.
Čitelnost textu
Délka řádku, kontrast a velikost písma se testují stejně vážně jako vzhled tlačítek. Návrh, který se nedá číst na telefonu, neprojde.
Stav prázdné obrazovky
Co vidí člověk, než má nějaká data? Prázdný stav se v začátečnických kurzech často zapomíná a přitom je to první, co uživatel uvidí.
Komu návrh vysvětlit
Obhájit rozhodnutí před klientem nebo kolegou. Kurz obvykle zařazuje krátkou prezentaci, i když jde jen o pět minut před skupinou.
Testování použitelnosti
Jak vypadá test v kurzu
Test použitelnosti nezjišťuje, jestli se lidem návrh líbí. Zjišťuje, jestli dokážou udělat to, kvůli čemu na stránku přišli. V kurzu se proto trénuje hlavně ticho: kdo napoví, zkazí výsledek.
Zadání, které se používá nejčastěji
Účastník dostane prototyp a jednu větu, například: najděte otevírací dobu a zjistěte, do kolika máte v sobotu otevřeno. Nesmí se ptát na cestu a nesmí mu být řečeno, kde kliknout. Zaznamenává se čas, počet chybných kliknutí a místo, kde se zastavil. Z pěti takových sezení vznikne seznam, který se ve většině případů opakuje, a návrh se podle něj předělá.
Co si z kurzu odnesete domů
Kurz nekončí u známky. Většina jich vyžaduje odevzdaný projekt: pár obrazovek, propojený prototyp a krátké shrnutí, proč vypadají tak, jak vypadají. To shrnutí je často cennější než samotné obrazovky, protože ukazuje, že za návrhem stojí přemýšlení.
Praktický výstup se většinou skládá ze tří věcí, které se dají ukázat v portfoliu i bez uvedení jména klienta.
Soubor ve Figmě
Obrazovky s pojmenovanými vrstvami, komponentami a popsaným design systémem. Uchazeči o práci tenhle soubor posílají místo životopisu častěji než cokoliv jiného.
Proklikatelný prototyp
Krátká cesta, kterou zvládne projít člověk, co ji vidí poprvé. Délka není důležitá, důležité je, že nikde netápete, kam kliknout dál.
Poznámky z testu
Co lidé dělali, kde se zasekli, co z toho plyne pro další verzi. I pár odstavců stačí, pokud je v nich vidět, že jste se ptali skutečných lidí.
Když metody narazí na WordPress
Část kurzů končí u prototypu, jiné pokračují na skutečný web. V tu chvíli se z wireframu stává šablona a design systém se musí vejít do toho, co redakční systém umí. Rozestupy, barvy a velikosti písma se nastavují v blocích, ne ručně u každého odstavce.
Kdo na to jde opačně, začne upravovat vzhled první stránky a po dvacáté úpravě zjistí, že podobné prvky vypadají na každé stránce jinak. Pravidla nahraná dopředu se pak mění na jednom místě a stránky se srovnají samy.
V hodinách se proto často vrací k ručnímu náčrtu: co je nadpis, co je doplňkový text, kde je tlačítko. Když je to jasné předem, bloky se skládají rychle a student nemusí znát žádný kód.
Na co se zeptat v kurzu
- Kolik hodin je vyhrazeno testování s lidmi a kolik prezentacím.
- Jestli se pracuje na vlastním tématu, nebo na zadání od lektora.
- Zda kurz končí prototypem, nebo skutečným webem ve WordPressu.
- Jestli je součástí zpětná vazba na odevzdanou práci, ne jen hodnocení na konci.
Časté otázky k metodám
Musím umět kreslit, když jde o wireframy? + −
Ne. Wireframe je obdélník, čára a popisek. Kreslí se proto, aby se rychle zkoušely varianty, ne aby to vypadalo hezky. Kdo umí nakreslit krabici a šipku, má na tuhle část kurzu dost.
Stačí na prototypování Figma, nebo je potřeba něco dalšího? + −
Pro začátečnický kurz obvykle ano. Figma zvládne obrazovky i propojení mezi nimi. Další nástroje přicházejí na řadu, až když tým potřebuje například práci s reálnými daty nebo animace nad rámec kliknutí.
Kolik lidí potřebuji na test použitelnosti? + −
V kurzu stačí pět účastníků, kteří si navzájem dělají testery. Nejde o statistiku, ale o to, že se opakované problémy objeví už u několika prvních lidí. Hledá se vzorec, ne konečné číslo.
Učí se design systém i v kurzech pro začátečníky? + −
Většinou v základní podobě: pár barev, dvě písma, rozestupy a jeden typ tlačítka. Cílem je zvyk odkazovat na jedno pravidlo místo vymýšlení nové hodnoty u každé obrazovky.
Potřebuji na kurz výkonný počítač? + −
Figma běží v prohlížeči, takže stačí běžný notebook s připojením k internetu. Nároky rostou, až když se pracuje s velkými soubory nebo videem. Před zápisem se vyplatí zeptat, jestli škola poskytuje počítače na místě.
Chcete poradit s výběrem kurzu?
Napište nám, co už umíte a co byste chtěli umět na konci. Podle toho se dá říct, který typ kurzu má smysl a čemu se naopak vyhnout. Odpovídáme v pracovní dny dopoledne i odpoledne.