sunrise
Produktový a UI dizajn
Pre koho: Samostatne čitateľný; absolventi K1-K4 ho využijú pri stavbe vlastných produktov. Žiadne predpoklady
Lekcia 1: Čo je dobrý dizajn (a čo nie je)
Cieľ: Mať pracovnú definíciu dobrého dizajnu a desatoro kontrolných otázok.
Dizajn nie je, ako vec vyzerá, ale ako funguje. "Úroveň Apple" nevzniká vizuálnym lakom, ale disciplínou: stovky malých rozhodnutí, ktoré rešpektujú človeka na druhej strane. Apple svoje princípy kodifikuje v Human Interface Guidelines (HIG), verejných a pravidelne aktualizovaných. Tento kurz z nich vychádza spolu s pravidlami prístupnosti WCAG 2.2 a heuristikami Nielsen Norman Group. Nekopírujeme Apple; učíme sa princípy, ktoré oni dodržiavajú.
Tri pracovné kritériá, ktoré stačí držať v hlave pri každej obrazovke. Jasnosť: človek vždy vie, kde je, čo je hlavná úloha obrazovky a čo sa stane po ťuknutí. Konzistencia: rovnaké veci vyzerajú a správajú sa rovnako v celej aplikácii. Ohľaduplnosť: rozhranie neplytvá pozornosťou, nežiada zbytočné údaje a funguje aj pri slabšom zraku, jednej ruke či zlom svetle.
Kontrolný nástroj, ktorý použijeme celý kurz, je desať heuristík použiteľnosti od Nielsen Norman Group. Nie sú to pravidlá krásy, ale diagnostický zoznam: keď niečo "nie je ono", takmer vždy nájdeš, ktorá heuristika sa porušuje.
- Viditeľnosť stavu: systém vždy ukazuje, čo sa deje (načítavanie, odoslané, chyba).
- Zhoda systému s reálnym svetom: hovorí jazykom používateľa, nie databázy.
- Kontrola a sloboda: ľahký krok späť, zrušenie, návrat z omylu.
- Konzistencia a štandardy: rovnaké pojmy, ikony a správanie všade.
- Prevencia chýb: lepšie zabrániť chybe, než ju riešiť.
- Rozpoznanie namiesto spomenutia: voľby viditeľné, nemusia si ich pamätať.
- Flexibilita a efektivita: skratky pre skúsených, jednoduchosť pre nových.
- Estetika a minimalizmus: žiadny prvok navyše, každý prvok má dôvod.
- Pomoc pri chybách: chybová hláška povie, čo sa stalo a čo s tým.
- Pomoc a dokumentácia: tam, kde treba, ľahko dostupná.
Syntetická úloha: obrazovka potvrdenia objednávky. Verzia A: nadpis "Potvrdiť objednávku?", suma a položky, primárne tlačidlo Potvrdiť, sekundárne Späť. Verzia B: tie isté prvky plus ikonka, oranžový banner "ŠPECIÁLNA PONUKA", tretie tlačidlo "Pridať poistenie" a časomiču.
Rozbor desatorom: verzia A zodpovedá "čo mám urobiť" na prvý pohľad (jedna akcia, jasný výsledok). Verzia B pridáva tri rozhodnutia, ktoré s objednávkou nesúvisia, a umelý tlak. Dizajnérska práca nie je pridať prvky, ale odobrať rozhodnutia.
Praktický test, ktorý použij aj ty: ukáž obrazovku kolegovi na 5 sekúnd a spýtaj sa, čo mal urobiť. Ak odpovie inak, než si chcel, obrazovka zlyhala bez ohľadu na to, ako pekne vyzerá.
Obrazovka je "prázdna", tak sa doplnia dekorácie. Náprava: prázdny priestor je funkčný (oddych očí, hierarchia); doplňuj len to, čo pomáha úlohe.
Dva prvky vyzerajú rovnako, ale robia rozdielne veci (modrý text raz odkaz, raz nadpis). Náprava: rovnaký význam = rovnaký vzhľad, rôzny význam = viditeľne rôzny vzhľad.
Dobrý dizajn spoznáš tak, že si ho nevšimneš. Zlý dizajn je zbierka malých trení, ktoré niekto neodstránil.
Cvičenie
Vyber aplikáciu, ktorú používaš denne. Nájdi v nej tri momenty trenia (niečo ťa spomalilo, zmätilo alebo naštvalo) a ku každému napíš, ktorá heuristika sa porušuje.
Riešenie
Ukážka mapovania: skryté odhlásenie = porušená kontrola a sloboda. Iná ikona pre tú istú vec na dvoch obrazovkách = konzistencia. "Error 500" bez vysvetlenia = pomoc pri chybách. Ak tvoja analýza dopadla podobne, metóda sedí.
Lekcia 2: Typografia: hierarchia a čitateľnosť
Cieľ: Vybudovať hierarchiu textu, ktorá vedie oko, a text, ktorý sa dá prečítať každému.
Apple HIG odporúča pre iOS predvolenú veľkosť textu 17 pt a ako odporúčané minimum 11 pt. Nie je to záruka prístupnosti ani univerzálne pravidlo: ide o minimum čitateľnosti systémového písma a pri tenkom vlastnom písme HIG radí mieriť vyššie. Pozor na jednotky: pt je jednotka iOS rozhrania, nie CSS pixel. Prepočet na web nie je 1:1, preto sa čísla z HIG do CSS neprenášajú mechanicky, ale ako východzí bod, ktorý overíš testom čitateľnosti. Hierarchia sa stavia tromi páčkami: veľkosť, váha (hrúbka) a farba. Nemiešaj veľa písiem: HIG priamo odporúča minimalizovať počet rodín písiem, lebo miešanie rozbíja hierarchiu a konzistenciu. Jeden systémový font so štýlmi (large title, title, body, caption) vystačí na celú aplikáciu.
Druhá pologica je prispôsobivosť. Dynamic Type je systémová funkcia, ktorou si človek zväčší text. HIG odporúča umožniť zväčšenie aspoň na 200 percent a držať hierarchiu aj pri veľkom texte: primárny obsah ostáva hore a text sa neusekáva. Text, ktorý sa pri zväčšení oreže na "Aktuálny zos...", je chyba návrhu, nie používateľa.
Praktické pravidlo pre web aj mobil: textová šírka riadku pre pohodlné čítanie je približne 45-75 znakov; príliš široké riadky unavujú, príliš úzke trhajú rytmus.
Syntetická obrazovka: detail udalosti v kalendári. Návrh hierarchie v troch úrovniach: primárna informácia (názov a čas udalosti, najväčší a najtučnejší text), sekundárna (miesto, menší, stredná váha), terciárna (poznámka, najmenší, tlmená farba).
Test škýrkania: prižmúr oči. Ak nevyčnieva názov a čas, hierarchia nefunguje. Najčastejšia chyba: všetko je tučné, teda nič nie je dôležité.
Čitateľnosť pre každého: drž sa systémových veľkostí (v iOS je 11 bodov kontextové minimum pre systémový font, nie cieľ), riadková dĺžka bežného textu cca 45-75 znakov a dostatočný riadkový rozostup. Malý sivý text na sivom pozadí je častá príčina "nečitateľnej" aplikácie, hoci typografia je inak v poriadku (viď lekcia 3).
Štyri rôzne písma na jednej obrazovke: hierarchia sa rozpadá. Náprava: jedna rodina písma, úroveň významu nesie veľkosť a váha, nie nový font.
Popisok 11 pt svetlosivý: pod minimálnou veľkosťou a nízkym kontrastom zároveň. Náprava: najprv kontrast na 4,5:1 (lekcia 3), potom veľkosť; "malé a sivé" je najčastejší znak generického AI dizajnu.
Pri najväčšej veľkosti textu sa kľúčová informácia oreže. Náprava: povoliť viac riadkov, nechať rolovať, hlavný obsah držať hore, testovať so zväčšeným textom ako so štandardným stavom.
Cvičenie
Odfoti jednu obrazovku svojej aplikácie a popíš jej typografické úrovne: koľko veľkostí a váh textu používa a či z nich čítaš poradie dôležitosti.
Navrhni pre ňu štyri úrovne (nadpis, titulok, telo, popisok) s konkrétnymi veľkosťami a váhami.
Riešenie
Pracovná škála pre mobilnú bankovú obrazovku z ukážky vyššie (systémové písmo): nadpis obrazovky 28 pt tučne, suma zostatku 24 pt polotučne, telo a riadky zoznamu 17 pt, popisok 13 pt v sekundárnej farbe. Pre web v CSS px rozumný štart je 32/24/16/14 px; pri dlhom čítaní (blog, dokument) škálu otoč, telo na 18-20 px a nadpisy výraznejšie. Škála je východzí bod pre daný kontext, nie univerzálny predpis.
Kontrola: ak z úrovní nečítaš poradie dôležitosti na prvý pohľad, posilni veľkosť alebo váhu, nie farbu navyše. Ak dve úrovne robia tú istú prácu, zlúč ich.
Lekcia 3: Farba a kontrast
Cieľ: Používať farbu ako informáciu, nie dekoráciu, a dodržať kontrastné minima.
Tvrdé čísla z WCAG 2.2 (kritérium 1.4.3, úroveň AA): normálny text potrebuje kontrast voči pozadiu aspoň 4,5:1, veľký text (18 pt a viac, alebo 14 pt tučný) aspoň 3:1. Kritérium 1.4.11 žiada 3:1 aj pre významové ikony a ovládanie. Toto nie sú estetické odporúčania, ale prahy čitateľnosti pre ľudí so slabším zrakom a na oslnených displejoch. Hodnota 4,499:1 neprechádza, pomer sa nezaokrúhľuje.
Apple HIG pridáva tri pracovné pravidlá. Používaj systémové a sémantické farby (majú varianty pre svetlý a tmavý režim a zvýšený kontrast). Neprenášaj informáciu len farbou: daltonik nerozozná červenú a zelenú, pridaj ikonu, tvar alebo text. A nepoužívaj tú istú farbu na dva významy: ak je modrá "interaktívna", nemôže byť zároveň farba obyčajného textu.
Zdržanlivosť je znak kvality: jedna akčná farba, neutrálne pozadie, dôraz len tam, kde treba rozhodnutie. Interiér s piatimi kričiacimi farbami vyzerá ako generovaný návrh, nie ako produkt.
Syntetický prvok 1: tlačidlo s bielym textom (#FFFFFF) na modrom pozadí (#2F5BEA). Výpočet pomeru (postup WCAG): relatívna svetlosť oboch farieb, pomer (svetlejšia+0,05)/(tmavšia+0,05) = cca 6,1:1. Pre bežný text vyžaduje WCAG 2.2 úroveň AA aspoň 4,5:1, teda prechádza.
Syntetický prvok 2: sivý popisok (#9A9A9A) na bielom pozadí. Pomer cca 2,8:1. Na bežný text málo, na veľký text (18 pt+, prípadne 14 pt tučný) stačí 3:1 a aj to je na hrane. Riešenie: stmavnúť na približne #6B6B6B (cca 4,9:1).
Návyk z praxe: kontrast meraj číslom (online kalkulačka alebo devtools), nie okom na kalibrovanom monitore v tme. A pamätaj: farba nesmie byť jediný nosič informácie (červená = chyba chce aj ikonku alebo text, viď riešenie cvičenia).
Stav objednávky len farbou (zelená/červená bodka). Daltonik ju nerozozná. Náprava: farba + ikona + slovný stav.
Tmavý režim ako dodatok: svetlé ikony na svetlom materiáli, kontrast pod hranicou v dark mode. Náprava: každú vlastnú farbu definuj vo svetlom, tmavom a zvýšenom kontraste, alebo použi systémové farby, ktoré to robia samé.
Akčná farba na všetkom: keď je modrá všade, nič nie je hlavné. Náprava: akčnú farbu rezervuj pre primárnu akciu a interaktívne prvky, nič iné.
Cvičenie
Zober dve farby textu a pozadia zo svojej obrazovky a zmeraj im kontrast online nástrojom. Zapíš pomer a či prechádza 4,5:1 (malý text) alebo 3:1 (veľký).
Nájdi v aplikácii miesto, kde sa informácia nesie len farbou, a navrhni doplnok (ikonu alebo text).
Riešenie
Typický nález: sivé popisky okolo 3:1, čiže pod hranicou. Náprava je stmavnúť text, nie zväčšiť logo.
Miesto len s farbou: typicky stavové bodky a grafy. Doplnok, ktorý funguje bez novej farby: ikona alebo slovný štítok vedľa farby.
Lekcia 4: Priestor a layout
Cieľ: Stavať rozloženie z konzistentných medzier a rešpektovať bezpečné oblasti.
HIG hovorí priamo: keď medzery nie sú konzistentné, obsah už nevyzerá ako mriežka a ťažšie sa skenuje. Pracovná konvencia v praxi (nie Apple mandát, ale ustálený zvyk): stavať medzery z násobkov 8 bodov (8, 16, 24, 32), s jemnými výnimkami 4 pre tesné súvislosti. Dôležité nie je číslo, ale jednotnosť: rovnaké vzťahy = rovnaké medzery.
Priestor je tiež nástroj zoskupovania: veci, ktoré patria k sebe, majú menšiu medzeru než cudzie. Väčšina "preplácaných" obrazoviek netrpí počtom prvkov, ale chýbajúcim zoskupením. Najprv priestor a zarovnanie, až potom čiary a rámy; rámy sú náplasť za zlý priestor.
Bezpečná oblasť (safe area): systémové prvky (Dynamic Island, tab bar, gestá) zakrývajú okraje. Obsah patrí do bezpečnej oblasti a ovládanie tam, kde prst reálne dosiahne: HIG odporúča kľúčové ovládanie v strede a spodnej časti displeja a podporovať swipe späť.
Syntetická obrazovka: formulár s medzerami 7, 13, 22 a 5 pixelov medzi prvkami (typický stav po ručnom "napasovaní"). Prechod na násobky 8: medzery 8 medzi prvkami v skupine, 16 medzi skupinami, 24 okolo hlavičky. Bez zmeny farieb či fontu obrazovka okamžite pôsobí upravene.
Prečo to funguje: oko nevie spočítať pixely, ale spozná opakujúci sa rytmus. Násobky jednej jednotky ho vytvárajú; náhodné hodnoty ho rušia.
Bezpečné oblasti: na telefónoch s výrezom a domovským indikátorom drž tlačidlá a text mimo horného a dolného systémového pásma; primárne akcie tesne nad indikátorom sú najčastejšou príčinou "nedá sa kliknúť".
Medzery 13, 7, 22, 5 na jednej obrazovke: rozloženie vyzerá "rozladene" aj bez toho, aby človek vedel prečo. Náprava: prepíš hodnoty na násobky 8 a uvidíš rozdiel na prvý pohľad.
Obsah pod výrezom alebo pod tab barom: porušená safe area. Náprava: použi systémové layout guide, nikdy nefixovať obsah na okraj "lebo na mojom telefóne to sedí".
Všetko centrované: dlhé texty a zoznamy sa centrované čítajú zle. Náprava: zarovnanie vľavo, centrovanie len pre krátke hero prvky.
Cvičenie
Zmeraj (odhadom v nástroji alebo pravítkom na snímke) medzery na jednej obrazovke a prepíš ich na násobky 8. Čo sa zmenilo?
Riešenie
Častý výsledok: stačí zjednotiť medzery a obrazovka pôsobí "drahšie" bez jedinej novej farby či ikony. Priestor je najlacnejší luxus.
Lekcia 5: Ovládanie a dotyk
Cieľ: Navrhovať ovládanie, ktoré trafí prst aj chápe hlava.
Apple HIG: tlačidlo potrebuje hit region aspoň 44x44 pt (vo visionOS 60x60), aby ho človek trafil prstom, kurzorom aj pohľadom. Ikonka 20 pt je v poriadku ako grafika, ale jej dotyková plocha musí byť 44x44. A každé vlastné tlačidlo potrebuje stav stlačenia: bez neho pôsobí mŕtvo a človek nevie, či ťuknutie prešlo.
Dosiahnuteľnosť: na telefóne držanom jednou rukou sú pohodlné zóny v strede a dole. Primárna akcia patrí do dosahu palca, deštruktívne akcie naopak nie na miesto, kam sa ľahko ťukne omylom. HIG zároveň odporúča obmedziť počet ovládacích prvkov na obrazovke: sústreď človeka na hlavnú úlohu a vedľajšie akcie sprav objaviteľnými, nie nápadnými.
Gestá: použi systémové (swipe späť, potiahnutie na obnovenie), nevymýšľaj vlastné tam, kde platforma štandard má. Každé nové gesto je daň z učenia.
Chyba 1: tlačidlo "X" na zavretie veľké 16 pixelov. Oprava: dotyková plocha aspoň 44x44 bodov (odporúčanie Apple HIG) - vizuálne môže byť ikonka malá, ale plocha, na ktorú reaguje dotyk, musí byť veľká.
Chyba 2: deštruktívna akcia (Zmazať účet) vedľa bežnej akcie (Uložiť), rovnaký vzhľad. Oprava: deštruktívna akcia odseparovaná, odlišne farbou a s potvrdením; bežná akcia ostáva primárna.
Chyba 3: gesto ako jediná cesta (prejdenie prstom na archiváciu bez tlačidla). Oprava: gesto ostáva ako skratka pre pokročilých, ale viditeľná akcia existuje vždy; gesta sa nehádajú, objavujú.
Zatváracie "x" 16x16 v rohu: míňa sa. Náprava: vizuál malý, ale hit region 44x44.
Tlačidlo bez odozvy: po ťuknutí nič, človek ťuká znova a vytvorí objednávku dvakrát. Náprava: stav stlačenia + okamžitá spätná väzba + ochrana pred dvojitým odoslaním.
Primárna akcia hore vpravo: na veľkom telefóne nedosiahnuteľná jednou rukou. Náprava: hlavná akcia dole, ideálne ako plnoplošné tlačidlo nad klávesnicou gest.
Cvičenie
Prejdi jednu obrazovku a spočítaj ovládacie prvky. Napíš, ktorá akcia je primárna, a navrhni, kam patrí pre jednoručné použitie.
Riešenie
Kontrola: ak je na obrazovke viac "hlavných" tlačidiel než jedno, hierarchia akcií zlyhala. Primárna akcia je jedna, ostatné sú sekundárne (obrys, text) alebo skryté do menu.
Lekcia 6: Štavy a spätná väzba
Cieľ: Navrhnúť všetky štyri stavy obrazovky, nie len šťastnú cestu.
Prvá heuristika: viditeľnosť stavu. Každá obrazovka má štyri stavy a začiatočník navrhuje len jeden: plný obsah. Prázdny stav (nič tu ešte nie je: čo to je a čo spraviť), načítavanie (skeleton alebo indikátor s jasným významom), chyba (čo sa stalo a ako z toho von) a úspech (potvrdenie, ktoré zmizne a nezavadzia).
Chybová hláška je dizajnérsky artefakt, nie developerský výpadok. "Error 500" nič nepovie. Dobrá hláška povie ľudským jazykom, čo sa stalo, či sú dáta v bezpečí a čo má človek spraviť ďalej. Nielsen to hovorí 30 rokov, HIG to opakuje dodnes.
Pohyb: animácia má vysvetľovať (odkiaľ a kam sa prvok presunul), nie zabávať. Nad 300-400 ms pôsobí pomaly, dekoratívne animácie pri každom ťuknutí otravujú a pri zapnutom "Reduce Motion" ich treba stíšiť.
Syntetická úloha: obrazovka "Platby" v bankovej miniapke.
Prázdny stav: ikona + text "Zatiaľ žiadne platby. Keď niečo zaplatíš, uvidíš to tu." + žiadne falošné tlačidlo. Nesprávna verzia: prázdna biela obrazovka.
Načítavanie: skeleton (sivé kostry riadkov v tvare zoznamu) namiesto točiaceho kolieska bez kontextu; pri pomalej sieti text "Načítavam platby...". Nesprávna verzia: večný spinner bez slova.
Chyba: "Platby sa nepodarilo načítať. Skontroluj pripojenie a skús znova." + tlačidlo "Skúsiť znova". Nesprávna verzia: "Error 500" alebo tichý pád.
Úspech po akcii: krátke potvrdenie "Platba odoslaná", ktoré samo zmizne a neblokuje ďalšiu prácu.
Skeleton, ktorý sa netransformuje do obsahu, ale bliká: horšie než spinner. Náprava: skeleton má tvar budúceho obsahu a zmizne s ním.
Chyba sa zobrazí tostom na 2 sekundy a zmizne: človek ju nestihne prečítať. Náprava: chyba drží na mieste, kým ju človek neuzavrie alebo nevykoná akciu.
Potvrdenie úspechu blokuje ďalší krok (modálne okno "OK"). Náprava: nenápadný banner, ktorý neprerušuje tok.
Cvičenie
Vyber jednu obrazovku a napíš všetky štyri stavy s konkrétnymi textami po slovensky. Potom si zahraj chybu (vypni sieť) a porovnaj s realitou.
Riešenie
Ak sa tvoje texty líšia od aplikácie tým, že tvoje hovoria čo spraviť ďalej, práve si prežil lekciu 1 v praxi: jasnosť a pomoc pri chybách.
Lekcia 7: Ako sa učiť z referencií: metóda Mobbin
Cieľ: Študovať skutočné produkty tak, aby si kopíroval úsudok, nie pixely.
Mobbin je prehľadávateľná knižnica skutočných mobilných a webových aplikácií: jednotlivé obrazovky, viackrokové toky a UI vzory z reálne vydaných produktov. Hodnota nie je v "inšpirácii", ale v tom, že vidíš, ako desiatky tímov vyriešili ten istý problém (prihlásenie, onboarding, prázdny stav), a vieš porovnať prístupy.
Metóda teardown: vyber jednu obrazovku z referencie a odpovedz písomne na päť otázok. (1) Aká je primárna úloha obrazovky? (2) Ako je vybudovaná hierarchia (typografia, priestor, farba)? (3) Ktoré štyri stavy musí mať a ako ich produkt rieši? (4) Ktorý známy vzor používa (tab bar, karty, bottom sheet)? (5) Čo by som urobil inak a prečo? Bez piatej otázky je to obdivovanie, nie štúdium.
Hranica kopírovania: vzory (pattern) sú voľné, konkrétne dizajnové výstupy nie. Kopírovať dôvod ("primárna akcia dole, lebo palec") je remeslo. Kopírovať presné farby, ilustrácie, texty a rozloženie konkrétnej aplikácie je krádež a navyše bez kontextu nefunguje: ich riešenie sedí ich obsahu, nie tvojmu.
Predmet: typický prihlasovací tok modernej bankovej aplikácie (opísané bez snímok, ako cvičenie analýzy).
(1) Primárna úloha: dostať človeka dovnútra rýchlo a bezpečne, nie ukázať značku. (2) Hierarchia: jediné veľké tlačidlo "Prihlásiť sa" dole v dosahu palca; logo malé; žiadne bannery. (3) Štavy: prázdny formulár, validácia emailu pri písaní, chyba so zrozumiteľným textom ("Nesprávne heslo, ostávajú 2 pokusy"), biometria ako skratka po prvom prihlásení. (4) Vzory: plnoplošný primárny button, "zabudnuté heslo" ako tichý odkaz pod tlačidlom, nie rovnocenné tlačidlo. (5) Čo inak: obrazovka so zabudnutým heslom by mala ponúknuť aj odblokovanie, nie len reset.
Záver ukážky: z teardownu si odnášaš princípy (jedna primárna akcia, chyby ľudsky, skratky pre vracajúcich sa), nie kópiu obrazovky.
Moodboard pekných obrazoviek bez jedinej poznámky: týždeň "výskumu" s nulovým výstupom. Náprava: žiadna referencia bez odpovede na päť otázok.
Skopírovaný vzor mimo kontextu: onboarding z aplikácie pre tínedžerov v hypotéčnej banke. Náprava: vzor vždy prelož do vlastného obsahu a publika a otestuj na jednom človeku.
"Sprav mi to ako Apple" bez ďalšej špecifikácie: generický výsledok. Náprava: pomenovanie konkrétnych princípov (hierarchia, kontrast, stavy), nie značiek.
Cvičenie
Urob teardown jednej obrazovky z vlastnej obľúbenej aplikácie podľa piatich otázok. Minimálne tri vety k otázke 5.
Riešenie
Ak pri otázke 5 nemáš čo povedať, vyber komplikovanejšiu obrazovku (platba, nastavenia súkromia). Jednoduché obrazovky sa učia ťažko, lebo chyby nie sú viditeľné.
Lekcia 8: Od návrhu k produktu
Cieľ: Odovzdať dizajn tak, aby prežil vývoj, a udržať ho konzistentný v čase.
Design tokeny: pomenované hodnoty (farba akčná, text primárny, medzera-8, medzera-16, rádius karty). Dizajnér aj vývojár hovoria tými istými menami, nie "tá modrá". Tokeny sú zárodok dizajnového systému a najlacnejšia poistka konzistencie.
Odovzdanie (handoff) nie je jeden pekný obrázok, ale balík: všetky štyri stavy každej obrazovky, hraničný obsah (najdlhšie reálne meno, prázdny zoznam, pomalá sieť), typografické a farebné tokeny, správanie pri zväčšenom texte a prístupnostný kontrolný zoznam: kontrast 4,5:1/3:1, hit region 44x44, zväčšenie textu na 200 %, žiadna informácia len farbou.
Iterácia: prvý návrh je návrh. Otestuj na jednom reálnom človeku (stačí kolega: "nájdi a zaplať faktúru") skôr, než čokoľvek dokóduješ. Závažnosť problémov hodnoť podľa heuristík z lekcie 1, nie podľa vkusu.
Syntetický komponent: tlačidlo. Odovzdávacia stránka obsahuje: varianty (primárne, sekundárne, deštruktívne), stavy (základný, stlačený, neaktívny, načítava sa), veľkosti, použité tokeny (farba brand/primary, zaoblenie radius/m, typografia label/l) a príklady, kedy ktorý variant použiť.
Token namiesto hodnoty: "farba brand/primary" prežije zmenu odtieňa v celej aplikácii; natvrdo zapísaný hex #2F5BEA na dvanástich miestach nie. Odovzdanie v tokenoch je rozdiel medzi dizajnom a obrázkom dizajnu.
Konzistencia v čase: raz kvartálne prejdi produkt a porovnaj so systémom; každá odchýlka je buď oprava produktu, alebo vedome zdokumentované rozšírenie systému, nie tretia možnosť.
Handoff len šťastnej cesty: vývojár si prázdny stav vymyslí sám a vznikne "Error 500". Náprava: žiadna obrazovka neodchádza bez štyroch stavov.
Token drift: po pol roku má aplikácia 17 odtieňov sivej. Náprava: audit tokenov raz za kvartál, zlúč duplicity.
Redizajn z nudy: nové odtiene, rovnaké problémy. Náprava: redizajn sa zdôvodňuje nameranými treniami (z teardownu a testovania), nie chuťou na zmenu.
Cvičenie
Napíš tokeny pre svoju projektovú obrazovku: 2 farby textu, 2 pozadia, 1 akčná farba, 3 medzery, 1 rádius.
Riešenie
Ak máš viac než 3 farby textu alebo 5 medzier, systém ešte nie je systém. Zúž a zdôvodni každú hodnotu.
Záverečný projekt: redizajn jednej obrazovky
Cieľ: vyber jednu reálnu obrazovku z aplikácie, ktorú používaš (banka, obedové menu, MHD, čokoľvek), a preved ju celým postupom kurzu. Pracuješ na papieri alebo v ľubovoľnom bezplatnom nástroji; nič sa neplatí.
- Audit: odfoti obrazovku a urob jej rozbor podľa desiatich heuristík a lekcií 2-6. Zapíš aspoň päť konkrétnych nálezov s číslami (veľkosti, kontrasty, medzery).
- Teardown: porovnaj, ako rovnaký problém rieši aspoň jedna ďalšia aplikácia (referencie nájdeš na Mobbin aj v bezplatnom prehľade). Odpoveď na päť otázok z lekcie 7.
- Redizajn: navrhni novú verziu obrazovky. Každé rozhodnutie (hierarchia, farby, medzery, veľkosti cieľov, stavy) musí mať vetu zdôvodnenia odkazujúcu na lekciu.
- Štyri stavy: nakresli alebo popíš prázdny, načítavací, chybový a úspešný stav redizajnu s konkrétnymi textami.
- Prístupnosť: skontroluj kontrasty, hit region 44x44, správanie pri 200 % texte a miesta, kde informáciu nesie len farba.
- Test: daj obe verzie (pôvodnú aj svoju) jednému človeku s jednou úlohou. Zapíš, kde bol rýchlejší a čo ho zmátlo.
Výstup: pôvodná obrazovka s auditom, teardown referencie, redizajn so zdôvodneniami, štyri stavy a zápis z testu s jedným človekom.
- Analýza: 1 = len "páči/nepáči"; 2 = nálezy viazané na heuristiky; 3 = nálezy s číslami (kontrast, body, medzery) a závažnosťou.
- Rozhodnutia: 1 = kopíruje referenciu; 2 = rozhodnutia majú zdôvodnenie; 3 = zdôvodnenia odkazujú na konkrétne princípy a vlastný kontext, nie na značky.
- Stavy a prístupnosť: 1 = len šťastná cesta; 2 = štyri stavy a základné kontroly; 3 = navyše hraničný obsah a 200 % text premyslený.
- Test: 1 = žiadny; 2 = jeden človek, jedna úloha; 3 = z testu vyplynula konkrétna zmena návrhu a je zapísaná.