Čo je UI dizajn?
UI je skratka od User Interface. V preklade do slovenčiny znamená užívateľské rozhranie. UI predstavuje stránky, ikony, tlačidlá a vizuálne prvky pomocou ktorých ľudia komunikujú so zariadením. Dôležitou súčasťou je to, aby web, e-shop alebo aplikácia dobre vyzerala.
UI dizajnér musí navrhnúť softvér, ktorý bude vizuálne príťažlivý a jednoducho použiteľný. Taktiež musí dobre fungovať na rozličných typoch zariadení.
Veľmi dobrá pomôcka pre dizajnovanie UI rozhrania môže byť „Osem zlatých pravidiel Bena Schneidermana“, ktoré som rozpísal nižšie.
„Dizajn nie je len o tom ako to vyzerá, ale o tom ako to funguje.“
Steve Jobs
Osem zlatých UI pravidiel Bena Shneidermana
Ben Shneiderman je americký informatik, ktorý založil laboratórium pre interakciu človeka s počítačom v rokoch 1983 až 2000. Je to teda veľmi relevantný človek na to, aby sme sa inšpirovali pravidlami, ktoré definoval.
1. Usilujte sa o konzistenciu
Používajte konzistentné farby, fonty, tlačítka a ďalšie UI prvky. Možno vás prekvapím, ale je možné používať aj konzistentné odstupy (medzery) v rámci UI rozhrania. Znižujeme tým totiž kognitívnu záťaž uživateľov.
2. Umožnite používateľom používať skratky
Dovoľte uživateľom používať klávesové skratky pre opakované úkony. Ak by sme sa bavli o webe, napr. odoslať formulár klávesou „Enter“, prípadne prepínať fotografie v galériách šípkami doprava a doľava.
3. Ponúknite informatívnu spätnú väzbu
Uživateľ by mal jasne vedieť, čo sa v UI rozhraní deje. Skúsme si uviesť pár príkladov:
- Ak uživateľ vyplní pole správne, malo by sa označiť zelenou farbou.
- Ak máte viac-krokový formulár, alebo nákupný proces, malo by byť jasne zobrazené, na ktorom kroku sa uživateľ nachádza, ktoré kroky má úspešne za sebou a ktoré ho ešte čakajú.
- Ak uživateľ ukáže na tlačítko, malo by zmeniť farbu, prípadne iným spôsobom komunikovať že je možnosť tlačidlo použiť.
- Ak uživateľ odošle formulár, mala by byť jasná hláška o úspešnom odoslaní, prípadne doplniť informácie, čo da bude ďalej diať.
4. Navrhnite dialógy s jasným ukončením
V podstate tento bod naväzuje na predošlí. Ide o to, aby ste uživateľovi dali jasnú spätnú väzbu, kde v rámci nejakého procesu sa nachádza (na začiatku, v strede, na konci). A na záver jasnú hlášku, že proces bol úspešne dokončený.
5. Ponúknite jednoduché riešenie chýb
V UI rozhraní sa môže stať, že vyskočí nejaká chyba. Napríklad používate aplikáciu na mobile a zrazu chyba. Je potrebné, aby vám UI rozhranie dalo možnosti, čo teraz, ako tento problém riešiť. Poďme na pár príkladov:
- Real time overovanie informácií, kt. zadávate do formulárov. Okamžite vám dá systém spätnú väzbu čo je zle a hlavne ju presne pomenuje.
- Poskytnutie návodu. Ak sa stane nejaký problém, je vhodné ak UI rozhradnie poskytne návod, ako tento problém riešiť.
6. Umožnite jednoduché vrátenie akcií
Umožnite používateľom experimentovať bez strachu z chýb tým, že im poskytnete možnosť jednoducho vrátiť alebo zrušiť svoje akcie.
7. Podporte vnútorný pocit kontroly u používateľov
Navrhnite aplikáciu tak, aby používatelia cítili, že oni riadia dianie a systém len odpovedá na ich pokyny. Tým sa posilňuje ich istota a celkový zážitok z používania.
8. Znížte záťaž krátkodobej pamäte používateľov
Navrhnite systém tak, aby si používatelia nemuseli pamätať veľa detailov medzi úlohami. Používajte prvky, ktoré sú ľahko rozpoznateľné, a zabezpečte, aby bolo rozhranie jednoduché a jasné.
Prečo kvalitne spracované UI
Dobre pripravené UI rozhranie pomáha uživateľom lepšie sa orientovať či už na webovej stránke, alebo v aplikácii. Takýto uživateľ je menej stresovaný z používania UI rozhrania a z pohľadu biznisu lepšie naplní vytýčené ciele.
Uvedieme si aký ekonomický dopad môže mať investícia do kvalitného UI:
- Zvýšenie konverzií: Prehľadné a intuitívne UI na e-shopoch uľahčuje zákazníkom nákupný proces, čo môže viesť k vyšším predajom.
- Zníženie nákladov na podporu: Používateľsky prívetivé rozhranie minimalizuje počet chýb a otázok zo strany používateľov, čím sa znižuje potreba zákazníckej podpory.
- Budovanie lojality zákazníkov: Pozitívna používateľská skúsenosť podporuje opakované návštevy a odporúčania, čo dlhodobo zvyšuje príjmy.
V akých oblastiach sa rieši UI
UI sa navrhuje v podstate všade, kde je interakcia používateľa s displayom. Dnes sa napríklad stretávate s UI rozhraním pri automatických pokladniach v obchode, alebo vo svojom automobile. Uveďme si ešte pár ďalších príkladov:
- Mobilné aplikácie: Intuitívne UI umožňuje používateľom ľahko navigovať a využívať funkcie aplikácie, čo zvyšuje ich spokojnosť a lojalitu.
- Webové stránky a e-shopy: Prehľadné a esteticky príjemné UI zlepšuje používateľský zážitok, čo môže viesť k vyššej miere konverzie a spokojnosti zákazníkov.
- Softvérové aplikácie: Efektívne UI umožňuje profesionálom rýchlo a presne vykonávať úlohy, čím sa zvyšuje produktivita a znižuje chybovosť.
UI pre webové stránky
Ak máte webovú stránku, ktorá vám neprináša to, čo by ste potrebovali, vieme sa pozrieť aj na vaše UI, prípadne UX a navrhnúť zlepšenia, ktoré budú mať biznisovú pridanú hodnotu. Nemyslíme len na to, aby veci atraktívne vyzerali, ale aj na to, aby prinášali obchodné ciele. Stačí nás kontaktovať tu.
Aký je rozdiel medzi UI a UX?
UX a UI sú si blízke. Sú to dve strany jednej mince. Majú odlišné funkcie, ale obe rozhodujú o tom, čo by mal používateľ vidieť na obrazovke. Dokonalý a úspešný dizajn UX a UI, môže priniesť produkt na úplne novú úroveň, ktorý používateľovi vytvorí jednoduchý a pozitívny zážitok.
UX teda User Experience, môžeme do slovenčiny preložiť ako užívateľská skúsenosť. Je to pocit, ktorý človek zažíva pri používaní vašej aplikácie, webovej stránky alebo e-shopu. Pri UX je veľmi dôležité, aby sa vám informácie na danej webovej stránke hľadali intuitívne.
UX sa zaoberá celkovým zážitkom používateľa, či je pre neho produkt zrozumiteľný a ľahko použiteľný. Produktom môžeme chápať webovú stránku, eshop, prípadne aplikáciu. UI sa naopak týka vizuálnej stránky, teda toho, ako produkt vyzerá a aké grafické prvky obsahuje.
Príklad rozdielu UX a UI
UX a UI môžeme vysvetliť aj jednoduchým príkladom z reálnej situácie. UX je spôsob akým sa auto riadi, jeho rýchlosť alebo ako vás chráni pri nehode. UI je značka, farba a dizajn auta.
