Kdyby každý začínající UX/UI designér dostal startovací balíček, určitě by v něm našel talent, dovednosti a chuť pracovat. Ale aby tvá práce nebyla ok, ale wow, potřebuješ také vycvičené oko. Koneckonců, aby ses naučil*a profesionálně tvořit, musíš se umět profesionálně dívat.
Připravili jsme krátký, ale dostačující návod, jak se UX/UI designér může naučit vidět krásné i ne tak krásné, rozlišit nechutné od ne tak nechutného a funkční od nepohodlného.
Co je to krása v UX/UI
Jedním z kritérií krásy v UX/UI je pohodlnost. Náš mozek rád šetří energii, a proto si vybírá jednoduché a známé věci – má rád akce, které nevyžadují příliš mnoho úsilí. Co je dobré, je jednoduché a funkční.
Jakob Nielsen, zakladatel poradenské společnosti Nielsen Norman Group, která se zabývá uživatelskými zkušenostmi, formuloval pět pravidel, která mozek považuje za dobrá v oblasti UX/UI:
#1 Rozsah. Máme rádi, když důležité věci zabírají více místa než ty nedůležité.
#2 Nastavené rozvržení a pevná šířka stránky. Pokud bude stránka zobrazována na velkých monitorech, měl by být layout široký (je potřeba hodně místa). Naopak na malou obrazovku chytrého telefonu by se mělo vejít vše, co uživatel potřebuje.
#3 Vyhledávání. Člověk hledá webové stránky na internetu, člověk bude hledat i na webových stránkách. Uživatel by měl najít to, pro co přišel, na tři kliknutí (nebo dokonce na jedno) a nestrávit tím více času, než zamýšlel.
#4 Kontakty. Pokud uživatel hledá na webu kontakty na podporu, neusiluj o to, aby se na ni dostal, protože tě sice bude kontaktovat, ale bude naštvaný.
#5 Méně znamená více. Je snazší najít něco v přehledné místnosti než v nepořádku. Webové stránky nebo aplikace by proto měly být bez vizuálního a informačního šumu.
Co je to trénované oko v UX/UI?
Pro UX/UI designéry znamená trénované oko rychlé pochopení toho, co je pro uživatele pohodlné a jednoduché a co ne. Uživatelský zážitek je cesta zákazníka na webových stránkách, v aplikaci nebo jiném produktu, při kterém je nalezení správného tlačítka snadné a příjemné.
Tuto cestu lze přirovnat k chůzi po ulici: člověk se musí dostat na určité místo, a to pokud možno rychle, aniž by bloudil mezi budovami, novostavbami a barokními kostely.
Rozpoznávání krásného a ošklivého je dovednost. Pokud ji nemáš, tvá práce (včetně designu a vývoje produktů) nebude estetická. Schopnost rozlišovat mezi krásným a ošklivým není sval, ale vyžaduje trénink. Když jdeš poprvé do posilovny, neočekáváš od sebe, že zvedneš 120kg činku. S vizuálním vkusem je to stejné – vyžaduje čas a úsilí. To je v pořádku.
Zkušené oko v oblasti UX/UI není totéž jako zkušené oko například v oblasti ilustrace nebo grafického designu. Grafický designér pracuje s plakáty, letáky, infografikami, obálkami a logy. UX/UI designér vytváří webové stránky a aplikace a je důležité, aby se naučil vidět nejen to, co je atraktivní, ale také to, co je funkční.
Tyto oblasti se liší v následujících ohledech:
#1 Statika a dynamika. Grafický design a ilustrace jsou o statických obrázcích, zatímco design UX/UI je o statických obrázcích + interakci mezi prvky. Zákaznický zážitek zde utvářejí animace, přechody mezi obrazovkami a interaktivní tlačítka. Uživatelsky orientovaný designér trénuje oko, aby pochopil: a) zda jsou jednotlivé prvky na stránce kombinované, b) zda fungují v rámci dynamiky, c) jak to plní uživatelův cíl.
#2 Tisk a číslo. Stejná barva bude vypadat jinak na obrazovce notebooku a jinak na banneru na billboardu. Grafik hodnotí svou práci (i práci jiných lidí) na obrazovce i na papíře, takže musí myslet na to, jak bude klient vnímat vizuál v různých médiích. Návrháři UX/UI pracují především v digitální oblasti, takže musí trénovat svůj zrak na digitální produkty.
#3 Cíl uživatele. Grafický design předává informační sdělení, zatímco UX/UI zajišťuje pohodlné používání webových stránek nebo aplikací. Funkční UX/UI je jako estetická silnice s pohodlným systémem odboček a značek (v dobře navrženém městě se řidiči, cyklisté a chodci neztratí a vzájemně si nepřekážejí). Proto by se oko UX/UI designéra mělo zaměřit na uživatelský zážitek: zda se klient neztratí, zda získá vizuální potěšení, zda odejde s tím, pro co přišel.
Jak trénovat oko v UI/UX
Pro ty, kteří si chtějí vycvičit oči, je nejsamozřejmějším prvním krokem přečíst si několik knih na toto téma a zhlédnout několik případů na Awwwards, UX Design Awards nebo Behance. To je základ. Ale můžeš jít ještě dál:
#1 Analyzuj generační rozdíl fyzických věcí. Výrobky, které jsou dnes světoznámé, se vyvíjely několik desetiletí. Zatímco první verze stolních lamp, ledniček, praček, vysavačů a telefonů byly zaměřeny spíše na funkci než na estetiku, v aktualizovaných verzích se to změnilo. Stejné věci se používají mnohem pohodlněji a jejich vzhled odpovídá modernímu kontextu.
Chladničky GE Monitor Top a Hotpoint z první poloviny dvacátého století (vlevo), chladnička Samsung Food Centre z roku 2022. Zdroje: americanhistory.si.edu, suter.ch
Pokud chceš pochopit, proč technologie a další věci z minulosti již nejsou uživatelsky přívětivé, podívej se do archivu. Za zmínku stojí několik z nich:
Old Computer Museum. Toto online muzeum je vytvořeno ve stylu webových stránek z 90. let a obsahuje řadu počítačů, které byly v té době populární. Jsou zde kvalitní fotografie těchto historických modelů zvenčí, takže si je můžeš prohlédnout i zevnitř. V muzeu jsou také popisy toho, jak se změnil jejich design a funkčnost.
Mobile Phone Museum. V tomto muzeu jsou k vidění rozkládací a vysouvací telefony, které byly populární v devadesátých letech. Tento archiv ukazuje, jak se telefony stávaly funkčnějšími a co výrobci změnili, aby estetika telefonů odpovídala době.
Museum of Obsolete Media. Autoři webu sestavili hodnocení „stability“ věcí: co již zaniklo nebo zanikne kvůli nevyhovující funkčnosti nebo nepovedené estetice a co bude žít dlouho a přizpůsobí se uživateli.
Obsolete inc. Účet pomáhá rozlišovat mezi moderním a zastaralým nábytkem, protože ukazuje, jak je starý nábytek modernizován. Je natřen, opraven a zjednodušen. Tak se nábytek stává estetickým a pohodlným pro moderního uživatele.
#2 Podívej se na věci, které se používají každý den. Bankovky, šeky, dopravní značky – to jsou věci, se kterými přicházíme do styku každý den. Tyto předměty jsou funkční a pohodlné (jinak by neexistovaly). Jejich vzhled byl vylepšen, ale nijak dramaticky se nezměnil. Snadno se používají, takže jsou uživatelsky přívětivé a mohou být příkladem toho, jak udělat produkt praktický pro uživatele.
Vezměme si dopravní značky. Jsou jasné a pohodlné. Tato značka ukazuje, kudy se máš dostat na požadované místo:
Návěst před křižovatkou u Letenského tunelu. Zdroj: Wikimedia Commons
Je jasné, že cestou na Letnou se musíš držet vlevo, zatímco do centra se dostaneš po odbočení do tunelu. Totéž udělej i u aplikací – uživatel by měl být schopen pochopit, po které cestě se má dostat do bodu B.
Na bankovkách také není nic zbytečného. Vidíme nominální hodnotu bankovky (ta se dokonce několikrát opakuje), nezbytné státní symboly a osobu, které je bankovka věnována. Při používání peněz informace nehledáme, vždy si nás najdou. Právě o tom je uživatelsky přívětivý design.
Pro urychlení učení se z každodenních věcí jsme připravili následující výběr:
The Sign Guy. Tento tvůrce sbírá dopravní značky, sám vyrábí tematické značky a o každé z nich vypráví.
Proč mají čtvrťáky vroubky. Krátké video ukazuje, jak se mění forma nejen podle funkce, ale i podle potřeby.
Lékárny-muzea. Po celém světě existují lékárenská muzea. V těchto muzeích mohou návštěvníci pochopit, jak se mění vzhled oblíbených léků v závislosti na jejich funkčnosti.
#3 Rozvíjej představivost. Vytváříme nové obrazy na základě toho, co již známe. Představivost vede k vhledům a pomáhá nám být kreativní. Představivost můžeš stimulovat následujícími způsoby:
Psaní deníků. Napiš si, co se ti na designu líbilo (a nelíbilo), co můžeš změnit a co si můžeš ponechat. Po nějaké době si to přečtěš znovu a zjistíš, jak se tvůj vizuální vkus mění.
Sleduj film bez zvuku. Vyber si neznámý film nebo seriál, dívej se na něj 5 minut a vypni zvuk. Představivost si sama vymyslí, co se na obrazovce děje, a tím si procvičíš flexibilitu.
Vymýšlej životopisy pro cizí lidi. Když cestuješ metrem nebo vlakem, vymysli pro cestujícího životopis – jméno, příjmení, rok narození, zajímavosti z jeho života, koho má rád, co čte, kde pracuje.
Proveď cvičení „Dobrý, špatný a úžasný“. Vytvoř si sbírku webových stránek a aplikací, které se ti líbí, jsou pro tebe matoucí nebo otravné. Každý den si z nabídky vyber tři a zamysli se nad tím, která z nich je „dobrá“, „špatná“ a „úžasná“. Analyzuj, co se ti na těch dobrých líbí, co tě na těch špatných odrazuje, a zkritizuj úžasnou stránku.
Choď do kostela, nejlépe katolického nebo protestantského. Církve vědí, jak přilákat a udržet uživatele. Například katolíci si nechali vyrobit lavice, na kterých se pohodlně sedí i během dlouhé bohoslužby. Existují také stojany s polštáři na kolena, které se používají k modlitbě. Existují také obrazovky, na kterých si můžeš přečíst modlitbu, pokud ji neznáš.
#4 Diskutuj a kontroluj. Práce by měla být prodiskutována. S ostatními designéry, klienty nebo babičkou. Diskuze prověří návrh z různých úhlů pohledu a naučí tě podívat se na výsledek své práce očima jiného člověka. Přináší to znalosti, které můžeš aplikovat na nové případy.
#5 Cvič všímavost. Trénovaný pohled je o přítomnosti tady a teď. Pokud chybí soustředění a uvědomění si okamžiku, může i eso proklouznout mezi prsty. Všímavost lze praktikovat prostřednictvím meditace, a to 10–15 minut denně. K tomu je potřeba klidné místo, kde se můžeš soustředit na to, co slyšíš, jak dýcháš a na co myslíš. Tak se naučíš ovládat své myšlenky a všímat si krásy okamžiku.