Spoznaj náš UI a UX dizajn proces v 8 krokoch

Kým sa tak stane, čaká nás dlhá cesta. Zo skúsenosti vieme, že realita sa smeje z konca ulice a teší sa na skoré stretnutie.

Poďme sa spolu pozrieť na to, po akej ulici sa budeme prechádzať.

Čo sa deje, kým sa dostanú webové a mobilné aplikácie k tebe?

Predtým, ako sa dizajnér prepracuje ku sexi pixelíkom a farbičkám, musí prekonať rozbúrené rieky zadaní, preskákať mínové polia prekvapení a vyhnúť sa paľbe spätnej väzby. Presne tak. Vzťah medzi klientom a dizajnérom je niekedy taká malá vojna. Až kým si neuvedomíme, že nebojujeme každý za seba, ale spoločne za úspešný digitálny produkt. A ten predsa patrí zákazníkom, používateľom a tým, ktorí zaň platia.

Každý, kto pracuje na tvorbe digitálneho produktu, by si mal uvedomiť, že všetky rozhodnutia sú subjektívne, ak nie sú založené aspoň na základnom prieskume spotrebiteľov. Byť v odvetví, rozprávať sa s kamarátmi a vymyslieť produkt pri pive je silný základ. Má to len jeden potenciálny problém. Ľudia sa radi obklopujú podobne zmýšľajúcimi ľuďmi, s ktorými sa cítia dobre. Produkty sú však tvorené pre niekoho iného a práve ich chceme spoznať.

Dôkladná príprava technickej špecifikácie je základ

‍Prvým krokom k skvelému produktu je produktová analýza. Chceme poznať odpovede na viaceré otázky, ako napríklad: Aký problém bude produkt riešiť? Pre koho je produkt určený? Ako ho vieme škálovať? Ako bude produkt na seba zarábať? A v neposlednom rade, veľmi dôležitá otázka pre digitálne produkty: Akými funkciami bude produkt riešiť daný problém? Otázky týkajúce sa problému, funkcionalít a spôsobu používania je vhodné konzultovať so samotnými zákazníkmi.

Tieto informácie nazývame insighty a tvoria skvelý základ pre vytvorenie úspešného digitálneho produktu. Následne ich pretavíme do zmysluplného dokumentu — technickej špecifikácie. Čím prepracovanejšia a podrobnejšia je špecka, tým lepšie sa dizajnérom a developerom odhaduje a pracuje na projekte.

Použiteľný digitálny produkt a UX

Na základe týchto podkladov môže dizajnér začať pracovať na návrhu webovej či mobilnej aplikácie. Prvá fáza návrhov je chaotická, plná počmáraných papierov a odpadu zo strúhadla. Skicovanie pomáha odosobniť sa od krásy a sústrediť sa na funkčnosť. Cieľom je rozvrhnúť všetky funkčné prvky na tie správne miesta v logickom slede udalostí tak, aby boli splnené požiadavky dobrej použiteľnosti. Snažíme sa vytvoriť efektívnu a príjemnú skúsenosť pre používateľa, teda User Experience (UX).

Už v tejto fáze dochádza k intenzívnej komunikácii medzi dizajnérom a klientom. Dolaďujú sa mnohé funkčné a procesné otázky, na ktoré nebol priestor alebo sa objavili počas prác.

Klikateľný produkt a Wireframes

Najlepšie skice vyrastú do digitálnych, ktoré sa odborne nazývajú Wireframes. Sú sivé, bez obrázkov a bez textov, zamerané na funkcionalitu. Digitalizácia však umožňuje lepšie pochopiť, ako sa bude produkt zobrazovať na obrazovkách mobilov či počítačov. Na papieri sa ťažšie odhaduje, koľko slov a elementov sa zmestí na iPhone X alebo dnes už drobný iPhone SE.

Tieto digitálne skice vieme navzájom prepájať do prototypov - jednoduchých simulácií produktu. V tejto fáze začína produkt naberať reálne kontúry, ktoré je vhodné otestovať na vzorke 6–8 ľudí z cieľovej skupiny a tiež konzultovať realizovateľnosť návrhu s developermi. Testovaním identifikujeme 80 % nedostatkov, ktoré následne zapracujeme do finálneho prototypu.

Nie len krásny digitálny produkt

Kvalitná špecifikácia, priebežná komunikácia a trpezlivosť privedú dizajnéra do momentu, kedy môže začať pracovať na vizuálnej stránke produktu. Tá, odborne User Interface (UI), je priamo ovplyvnená brandom spoločnosti. Odráža hodnoty definované v značke alebo v produkte. Hovoríme o výrazoch ako "mladistvý, žiarivý, veselý, odvážny" vs. "stabilný, profesionálny, dôveryhodný, dospelý". Už z týchto slov si vieš predstaviť, akým smerom sa bude uberať vizuál.

Z podkladov sa vytvorí digitálna nástenka plná inšpirácie — moodboard, ktorá bude formovať návrh vizualizácie celého produktu. Pri pohľade na ňu by mal klient vidieť a cítiť svoj vysnívaný produkt. Dizajnér pri návrhu používateľského rozhrania zvažuje desiatky variantov a kombinácií. Pracuje s veľkosťami, farbami, odtieňmi, priehľadnosťou, pomermi strán, ikonami, fotkami, fontami, hrúbkami čiar, tieňmi a mnohými inými. Všetky elementy sa navzájom ovplyvňujú a vytvárajú jeden celok.

UI je subjektívna a pocitová záležitosť. Každý dizajnér, produkťák, developer či používateľ by jednotlivé elementy navrhol inak. Trochu viac tu, trochu menej tam… S detailmi sa možno hrať aj celé týždne, a to pre vývoj digitálneho produktu nie je dobré.

Na výsledný dizajn sa pozeráme ako na celok z dvoch hľadísk. Prvé, ako sme vyššie spomínali, je emocionálne hľadisko. Prvý dojem s ľuďmi zamáva a vyvolá pocity, ktoré chceme ovládať aj v súlade s brandom produktu. Druhé hľadisko sa opiera o ciele, ktoré chceme dosiahnuť. Dizajn má byť v prvom rade účelný. Toto sme vo veľkej miere zabezpečovali už vo fáze UX návrhu, ale aplikáciou správneho UI dizajnu dokážeme naše zámery posilňovať alebo oslabovať. Je to predajný kanál? V poriadku, Call-To-Action tlačidlá budú výrazné. Potrebujeme odprezentovať vybrané informácie? Fajn, zväčšíme písmo, pridáme Bold.

Ste zmätení pojmami UX a UI dizajn? Nezúfajte, pripravili sme pre vás článok.

Produkt pre ľudí

Dizajn digitálneho produktu je dynamická vec. S časom sa mení aj návrh, aj náš pohľad naň. Preto je dobré návrhy podrobiť ďalšiemu testovaniu s používateľmi. Testovaním hotového návrhu získame tie najdôležitejšie informácie. Ich reakcie a spätná väzba sú v tomto momente smerodajné. Je lepšie spýtať sa na názor 5 ľudí než stráviť 1000 hodín prekresľovaním vlastných predstáv.

Ďalším krokom je teda vyhodnotenie zistení a optimalizácia produktu do finálnej podoby. V tomto momente môžu developeri začať pracovať na vývoji.

Zhrnutie - Proces dizajnu digitálneho produktu

1. Prieskum u spotrebiteľov — Spoznáme ľudí, pre ktorých produkt tvoríme.
2. Produktová analýza — Aký produkt pomôže týmto ľuďom? Ako bude generovať príjmy?
3. Technická špecifikácia — Zadefinujeme, čo a ako chceme vytvoriť.
4. UX návrh — Škaredo, ale funkčne privedieme produkt k životu.
5. Testovanie — Je to takto správne? Overíme a zapracujeme, čo sme sa dozvedeli.
6. UI návrh — Spravíme to krajšie a funkčnejšie.
7. Testovanie hotového návrhu a optimalizácia — Doladíme posledné detaily.
8. Development — Vytvoríme úžasný produkt.

Tak sme sa konečne stretli s realitou na konci ulice a môžeme sa smiať spoločne. Aké máš skúsenosti ty? Čo by si odporučil svojim klientom?

Čerstvé novinky z nášho sveta ti poskytne náš newsletter. Ak máš otázky, neváhaj a kontaktuj ma.
 

Ciao.