Design
7
 min read
September 17, 2020

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

Peter Linek
UX, UI, Webflow Designer

Na začiatku nie je (skoro) nič. Približne takto sa začínajú projekty, s ktorými nás oslovia klienti. Na meetingoch sa stretávame s veľkými myšlienkami a odvážnymi predstavami o úspešnom produkte.

Index

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ý 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

ui ux dizajn aplikácie

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 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ý produkt a UX

Na základe týchto podkladov môže dizajnér začať pracovať na návrhu mobilnej či webovej 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

prototyp vo Figme

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 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.

koncept aplikácie

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 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, ale aplikáciou správneho UI 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.

Produkt pre ľudí

Dizajn 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

UX UI dizajn proces
  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?

Podrobnejšie sa môžeš pozrieť aj na náš celý proces vývoja mobilných a webových aplikácií.

Ak máš otázky, neváhaj a napíš nám na hello@goodrequest.com .

Ciao.

Like what you see?
Join our newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
High quality content once a month. No spam, we promise.
Your personal data is processed in accordance with our Memorandum on Personal Data Protection.

Páči sa vám náš content?
Odoberajte newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
Vaše osobné údaje sú spracované v súlade s našim Memorandom na ochranu osobných údajov.