Ako sa stať UX/UI dizajnérom: od čoho začať a čo dať do portfólia
Čo UX/UI dizajnér robí v bežný deň, aké zručnosti a nástroje potrebuje, štyri cvičenia na učenie, ako postaviť portfólio z 2 až 3 príbehov a ako získať prvé skúsenosti.
Tento článek je zatím dostupný jen ve slovenštině.
- UX/UI dizajnér rieši, aby bolo rozhranie zrozumiteľné (UX) a dobre vyzeralo a ovládalo sa (UI): rozpráva sa s ľuďmi, kreslí náčrty, wireframy a obrazovky, testuje ich a spolupracuje s programátorom.
- Začnite základmi (rozumieť ľuďom, štruktúra, vizuálne základy, komunikácia), nástrojmi Figma a papier a štyrmi cvičeniami: princípy, prekreslenie existujúceho webu, vlastný mini projekt a test s 5 ľuďmi.
- Do portfólia dajte 2 až 3 príbehy v poradí problém, postup, výsledok, čo som sa naučil, a prvé skúsenosti získajte pomocou malej firme alebo dobrovoľníckym projektom.
Ak chcete vedieť, ako sa stať UX dizajnérom, začnite základmi: pochopte, ako ľudia používajú weby a appky, naučte sa kresliť jednoduché náčrty a obrazovky a postavte si 2 až 3 príbehy do portfólia. Ciest je viac: niekto prichádza z grafiky, niekto z programovania, marketingu alebo z celkom iného oboru. Tento článok nehovorí, kde sa učiť, ale čo sa naučiť a čo ukázať. Prehľad krokov nájdete aj v myšlienkovej mape Ako sa stať UX/UI dizajnérom.
Čo UX/UI dizajnér robí v bežný deň
UX (používateľská skúsenosť) rieši, či sa rozhranie dá pochopiť a použiť: nájde človek cenník, dokončí objednávku? UI dizajn rieši, ako rozhranie vyzerá a ovláda sa: farby, písmo, tlačidlá, rozloženie. V malých štúdiách a firmách sa obe roly často spájajú v jednom človeku, vo väčších tímoch bývajú oddelené. Bežný deň môže obsahovať:
- rozhovor so zákazníkom alebo používateľom, aby ste pochopili, čo potrebuje a kde sa zasekáva,
- náčrt na papier a potom wireframe (jednoduchý nákres rozloženia stránky bez farieb a fotiek),
- kreslenie obrazoviek vo Figme (nástroj na návrh rozhraní) a ich prepojenie do prototypu, ktorý sa dá preklikať,
- test použiteľnosti, teda pozorovanie, ako človek skúša splniť úlohu,
- spoluprácu s programátorom: vysvetlenie návrhu a kontrolu, či výsledok zodpovedá,
- vysvetľovanie rozhodnutí klientovi alebo tímu a zapracovanie pripomienok.
Veľká časť práce nie je kreslenie. Je to počúvanie, zjednodušovanie a rozhodovanie, čo na obrazovke nechať a čo vyhodiť.
Príklad dňa pri webe pre kaderníctvo: ráno si prejdete poznámky z rozhovoru s tromi zákazníčkami a zistíte, že najviac ich zdržuje hľadanie ceny. Cez deň nakreslíte tri varianty objednávania na papier. Poobede jeden z nich prekreslíte do prototypu. Večer ho ukážete majiteľke, zapíšete jej pripomienky a pripravíte podklady pre programátora. Rozsah sa líši podľa firmy, ale princíp je rovnaký: od človeka k riešeniu a naspäť k človeku.
Základné zručnosti
- Rozumieť ľuďom. Pozorovať, pýtať sa otvorene a nepredpokladať. Kaderníčka nepotrebuje „moderný web“, potrebuje, aby sa zákazník vedel objednať na prvé kliknutie. Pri každom webe si položte otázku, čo chce človek urobiť a či mu to web uľahčuje.
- Štruktúra. Zoradiť informácie tak, aby človek vedel, kde je a kam ísť ďalej: čo patrí do menu, čo na úvod, čo na podstránku a aké kroky vedú k objednávke.
- Vizuálne základy. Zarovnanie, rozostupy, hierarchia (čo je najdôležitejšie, to je najviditeľnejšie), čitateľné písmo, kontrast, farby. Nemusíte byť ilustrátor.
- Komunikácia. Vysvetliť, prečo ste rozhodli tak, ako ste, vypočuť kritiku bez obrany a zapísať dohody. Dizajn, ktorý neviete obhájiť dôvodom, sa pri prvej pripomienke rozpadne.
Programovať sa naučiť nemusíte. Pomáha však vedieť, ako sa web skladá a čo je pre programátora jednoduché a čo náročné.
Chcete to mať hotové bez starostí? Pošlite nám pár viet o zadaní a cenovú ponuku dostanete do 48 hodín, zadarmo a bez záväzkov.
Nástroje: Figma a papier
Nástrojov je veľa, ale začať stačí s dvoma. Papier a ceruzka sú najrýchlejšie: za pol hodiny nakreslíte desať variantov stránky a väčšinu zahodíte bez ľútosti. Figma používajú dizajnéri na kreslenie obrazoviek, prepájanie do prototypu a spoluprácu v tíme. Naučte sa základy: rámce obrazoviek, text, tvary, komponenty (opakovateľné diely, napríklad tlačidlo) a prototyp. Nástroj je len prostriedok. Zle premyslený návrh nezachráni ani dobre ovládaný program a dobrý nápad sa dá ukázať aj na papieri.
Ako sa učiť: štyri cvičenia
- Princípy. Prečítajte si 10 heuristík použiteľnosti Jakoba Nielsena (zásady, podľa ktorých sa hodnotí, ako ľahko sa rozhranie používa): viditeľnosť stavu systému, súlad medzi systémom a reálnym svetom, kontrola a sloboda používateľa, konzistentnosť a štandardy, prevencia chýb, rozpoznanie namiesto zapamätania, flexibilita a efektivita, minimalistický dizajn, pomoc pri chybách, pomoc a dokumentácia. Potom si vezmite tri weby a ku každému nájdite, ktoré heuristiky porušuje.
- Prekreslenie existujúceho webu. Vyberte web malej firmy (kaderníctvo, ordinácia, remeselník) a prekreslite jednu stránku tak, aby bola jasnejšia. Zapíšte, čo ste zmenili a prečo. Označte, že ide o cvičenie a nie o zákazku, a nevydávajte cudzie logá a fotky za vlastné.
- Vlastný mini projekt. Vymyslite si jednu úlohu, napríklad objednávanie v kaderníctve. Opíšte problém, spýtajte sa 3 až 5 ľudí, ako to robia dnes, nakreslite náčrty a wireframe a spravte preklikateľný prototyp. Jedna cesta používateľa od začiatku do konca je lepšia než desať polovičatých obrazoviek.
- Test s 5 ľuďmi. Prototyp ukážte piatim ľuďom, dajte im úlohy a zapíšte, kde sa zastavili. Postup je v článku Testovanie použiteľnosti na piatich ľuďoch. Opravte, čo ste zistili, a porovnajte stav pred a po.
Po každom cvičení napíšte pol strany: aký bol cieľ, čo ste zmenili, čo ste zistili a čo by ste urobili inak. Tieto zápisky sú neskôr surovinou pre portfólio a zároveň vás nútia premýšľať o dôvodoch, nie len o vzhľade. Jedno cvičenie dotiahnuté do konca a zapísané poučí viac než päť rozrobených.
Čo dať do portfólia
Portfólio nie je galéria pekných obrazoviek. Ukazuje, ako rozmýšľate. Stačia 2 až 3 príbehy, každý v rovnakej štruktúre:
| Časť | Na čo odpovedá | Príklad vety (vymyslený) |
|---|---|---|
| Problém | Komu a v čom to nefungovalo | Zákazníci kaderníctva volali, aby zistili cenu strihu, lebo cenník bol schovaný v päte stránky. |
| Postup | Čo ste robili a prečo | Spýtal som sa piatich ľudí, nakreslil tri varianty, jeden vybral a spravil z neho prototyp. |
| Výsledok | Čo sa zmenilo alebo čo ste zistili | V teste s piatimi ľuďmi našli cenník štyria hneď a jeden po chvíli hľadania. |
| Čo som sa naučil | Čo by ste urobili inak | Prvý prototyp mal priveľa volieb, v ďalšom kole som ich zjednodušil. |
Píšte len to, čo ste skutočne zistili: nevymýšľajte čísla ani klientov. Ukážte aj slepé uličky (návrh, ktorý ste zahodili, a prečo), pridajte odkaz na prototyp, ktorý si návštevník môže preklikať, a píšte stručne. Ak niečo bolo cvičenie, napíšte to. Poctivé portfólio s dvoma príbehmi je lepšie než nafúknuté s desiatimi.
Každý príbeh ukážte jednoducho: jedna obrazovka pred, jedna po a tri až štyri vety o tom, prečo ste ju zmenili. Návštevník portfólia nemá čas čítať dlhé eseje. Ak ste výsledok nemerali, nepíšte, že ste „zvýšili objednávky“. Napíšte, čo ste zistili v teste a čo ste podľa toho opravili.
Ako získať prvé skúsenosti
- Pomoc malej firme. Kaderníctvo, remeselník alebo účtovníčka často majú web, ktorý nikto nesleduje. Ponúknite jednu konkrétnu vec: prepracovať formulár, usporiadať cenník, zjednodušiť objednanie. Dohodnite si písomne rozsah, kto čo dostane a či môžete výsledok zverejniť v portfóliu.
- Dobrovoľnícky projekt. Nezisková organizácia, spolok alebo školský klub potrebujú zrozumiteľný web či formulár. Máte reálnych používateľov, reálne obmedzenia a jasný koniec.
- Spolupráca s programátorom alebo grafikom. Spoločný projekt ukáže, ako vyzerá odovzdanie návrhu a čo programátor skutočne potrebuje.
- Pohľad z druhej strany. Pozrite sa, ako funguje kreatívna agentúra a kedy si firmy namiesto nej vyberú freelancera. Pochopíte, aké projekty sa zadávajú a ako.
Čo hľadajú tí, ktorí dizajnéra zadávajú
Majiteľ firmy, ktorý nie je z oboru, zvyčajne nerieši, v akom programe pracujete. Zaujíma ho, či vidíte problém jeho zákazníka, či viete vysvetliť postup, či rozhodnutia obhájite dôvodom a či držíte rozsah a termíny. Portfólio s príbehmi na to odpovedá lepšie než desať obrazoviek bez komentára. Ako vyzerá zadanie z druhej strany a čo si má zadávateľ pripraviť, opisuje článok Ako zadať UX a UI dizajn. Prečítajte si ho ako študijný materiál: uvidíte, čo zadávateľ očakáva a na čo sa bude pýtať.
Kedy stačí jednoduchšie riešenie a kedy pomôže skúsený dizajnér
Ak potrebujete len web pre vlastnú firmu, nemusíte sa stať UX dizajnérom. Stačí vedieť zadať úlohu a výsledok otestovať na pár ľuďoch. Ak chcete dizajn robiť ako povolanie, bez práce s reálnymi ľuďmi to nepôjde: knihy a kurzy nenahradia chvíľu, keď niekto pred vami nájde miesto, kde váš návrh nefunguje. Skúsený dizajnér, ktorý sa pozrie na vaše portfólio a povie, čo je slabé, ušetrí veľa slepých ciest. Spätnú väzbu hľadajte aktívne, nielen lajky.
Čo urobiť ako prvé
- Vyberte web malej firmy a zapíšte 5 vecí, na ktorých sa ako používateľ zaseknete.
- Nakreslite na papier lepšiu verziu jednej stránky.
- Ukážte ju trom ľuďom a zapíšte, čo povedali a kde sa zastavili.
- Vyberte si mini projekt a od začiatku si zbierajte materiál na príbeh do portfólia: náčrty, zápisky z testov, verzie pred a po.
Časté otázky
Musím vedieť kresliť alebo programovať?
Nie. Vizuálne základy sa dajú naučiť a programovať sa nemusíte. Dôležitejšie je pozorovať ľudí a vedieť zdôvodniť rozhodnutia.
Čo ak nemám klienta do portfólia?
Použite vlastný mini projekt alebo prekreslenie existujúceho webu a vždy poctivo uveďte, že ide o cvičenie. Jeden dobre opísaný vlastný projekt je lepší než vymyslený klient.
Začať s UX, alebo s UI?
Začnite UX, teda porozumením ľuďom a štruktúrou, pretože pekne nakreslená obrazovka, ktorá nefunguje, nepomôže. Vizuálne základy pridávajte popri tom.
Stačí vedieť Figmu?
Nie. Je to nástroj. Zadávateľa a tím zaujíma, ako ste sa dopracovali k riešeniu a či viete vysvetliť prečo.
Chcete vedieť viac o UI a UX dizajne?
V sekcii UI/UX dizajn pre všetkých nájdete pojmy, myšlienkové mapy, články a nástroje pre začiatočníkov aj pre firmy, ktoré dizajn zadávajú.
Chcete totéž pro svou značku?
Napište nám pár vět o svém záměru a do pár hodin v pracovní den se ozveme s návrhem postupu.