UX a UI. Som presvedčená, že o týchto pojmoch ste už počuli, no možno neviete, čo presne znamenajú, ako fungujú a ako ich aplikovať na vašu webstránku.
Tieto dva pojmy sú často buď zamieňané, kombinované alebo spájané dohromady. Môže to byť aj preto, lebo sú v jednej, nazvime to „harmónii“. Poďme si na UX a UI posvietiť detailnejšie.
UX, teda User Experience a UI, ako User Interface, sú kľúčové elementy vo svete, v ktorom sa spája kretíva s technológiou. Inak povedané, ak sa spýtam na výrazy, ktoré sa vám spájajú s online marketingom, medzi odpoveďami by sme určite našli aj UX a UI. Medzi týmito výrazmi sú dva podstatné rozdiely. Tieto rozdiely sa prejavujú v ich rozsahu a pôsobnosti. Porozumenie UX a UI je kľúčom k vybudovaniu lepšieho produktu aj celkovej značky. No a to je to, čo by sme v tomto článku chceli odhaliť.
Poďme na to pekne po poriadku.
Čo je to User Experience (UX)?
Podľa definície je UX: Budovanie spokojnosti a lojality zákazníkov prostredníctvom optimálneho rozvíjania použiteľnosti, pozitívnych emocionálnych reakcií a používateľských skúseností s vašimi webovými stránkami.
Preložené do bežnej reči, dokážu sa používatelia na vašej stránke jednoducho orientovať? Komentujú používatelia váš obsah? Zdieľajú ho na sociálnych sieťach? To všetko sú otázky, ktoré sa UX bytostne dotýkajú.
Ak chcete vytvoriť dobrú používateľskú skúsenosť (UX), mali by ste predovšetkým:
- Dobre poznať používateľskú základňu
- Zladiť obchodné ciele s tým, čo chcú vaši zákazníci
- Poznať podstatu a víziu vašej značky
- Mať skúsenosti so správaním zákazníkov
Je dôležité uvedomiť si, že v tomto čase stačí používateľovi pár sekúnd na to, aby si uvedomil, či ostať na vašom webe naozaj stojí za to. V tomto prípade zohráva používateľ hlavnú úlohu a rozhoduje o úspechu alebo neúspechu vašej webstránky. Moja rada znie: Dajte svojej stránke “osobnosť”, s ktorou sa budú môcť používatelia stotožniť.
Pozitívna používateľská skúsenosť by mala zahrňovať:
- Responzívny webdesign
To by už malo byť dnes samozrejmosťou. - Vizualita
Dobre si premyslite tiež rozloženie prvkov na stránke. Stránka má byť funkčná, prehľadná, ale aj dobre dizajnovo navrhnutá. - Relevantnosť
- Pozitívna emocionálna odozva
- Jednoduché pochopenie
Veľmi pekné príklady dokonalého UX a UI nájdete v článku 15 WordPress stránok, ktoré zmenili pohľad na dizajn. Inšpirujte sa.
Čo je to User Interface (UI)?
UI alebo používateľské rozhranie predstavuje technické prvky, ktoré umožňujú používateľovi komunikovať s ovládacími prvkami, tlačidlami a ďalšími zobrazovacími prvkami. UI zahŕňa všetko od typografických prvkov, cez ikony až po rôzne iné interaktívne elementy.
Myslím, že teraz je vám už úplne jasné, prečo je UI tak dôležité a čo sa stane, ak niektoré zo spomenutých prvkov nebudú fungovať tak, ako majú. Pri UI sa zamerajte na to, aby vaša stránka bola čistá, intuitívna a efektívna.
Základné charakteristiky dobrého UI som zhrnula do pár bodov uvedených nižšie.
- Konzistentnosť: Dizajn a správanie celej stránky by mali byť v súlade.
- Intuitívnosť: Stránka by sa mala správať podľa očakávania používateľa a mal by ju vedieť ľahko intuitívne ovládať.
- Citlivosť: Stránka by mala byť responzívna.
- Čistota: Alebo elegancia a jednoduchý funkčný dizajn.
- Efektivita: Tá je rovnako dôležitá ako dizajn. Stránka musí byť pre používateľa prehľadná a efektívna. Najmä, ak na nej mieni stráviť dlhší čas.
- Obsah: Nezabúdajte na kvalitný a relevantný obsah.
Aké sú aktuálne trendy v UI?
Material dizajn:
Ak ste už počuli o Flat dizajne, tak material dizajn je niečo veľmi podobné. Je to druh flat dizajnu. Takýto dizajn využíva interakciu a vizuálny pohyb. Aktuálne je to najhorúcejší trend v dizajne webstránok.
Card layout:
Predstavuje jednoduchý a čistý look. Tiež veľmi obľúbený medzi dizajnérmi.
Micro – interaction:
Sú to malé, takmer neviditeľné interakcie, ktoré sú však veľmi dôležité. Príkladom takejto micro-interakcie je napríklad stlmenie telefónu alebo nastavenie budíka. Dobrým príkladom je ešte aj známe tlačidlo “like” na Facebooku.
Aké sú možnosti?
Inšpirujte sa napríklad témou Twenty Fifteen. Je čistá, jednoduchá, intuitívna a samozrejme responzívna.
Aké sú možnosti?
K pozitívnej používateľskej skúsenosti vám určite pomôže výber vhodnej témy.
Konkrétne príklady WordPress tém vám ale nepoviem. Každá stránka je jedinečná a aj UX a UI sa nedá nastaviť podľa nejakých tabuliek alebo štatistík. Možno vám pomôže, ak si skúsite odpovedať na to, či podporuje téma, ktorú ste si vybrali vaše ciele, alebo či vedie používateľa k tomu, čo chcete, aby na webe urobil. Používa téma jazyk, ktorému vaši používatelia rozumejú? Tieto otázky by vás mali naviesť k téme, ktorá bude pre vašu stránku najlepšia.
Verím, že sa vám článok páčil a že máte zas o kúsok viac jasno v rozdieloch medzi UX a UI. Je jasné, že jedno na druhé nadväzuje a najlepší účinok bude mať správne prepojenie týchto dvoch elementov. Presný a jednoznačný návod na spomenuté správne a dokonalé prepojenie asi neexistuje. Bude potrebné testovať, testovať a testovať.
Poznáte ešte nejaké svoje overené tipy, ako vylepšiť webstránku? Budem rada, ak sa s nimi podelíte v komentároch nižšie 🙂
[…] Rýchlosť stránky spomínam v článkoch dosť často. Pomalé načítanie stránky môže výrazne znížiť váš konverzný pomer. Štatistiky hovoria, že v prípade, ak sa vaša stránka načíta viac ako je odporúčané, môžete stratiť až 40% návštevníkov. S rýchlosťou stránky vám môžu pomôcť aj moduly, ako WP SuperCache či WP3 Total Cache. Svoju rýchlosť si môžete jednoducho odmerať. Viac o UX si prečítajte v článku UX a UI nie sú iba šifry. Odhaľte,čo všetko sa za nimi skrýva. […]
[…] Stalo sa ti niekedy, že si ťahal dvere, na ktorých bolo napísané tlačiť? Narazil si, cítil si sa trápne ale hlavne otrávene. Prečo nie je očividné, či máš dvere ťahať alebo tlačiť? Strana dverí, ktorú tlačíš by predsa nemala mať kľúčku a naopak. Aký význam má kľúčka na dverách na tlačenie? Rovnaký princíp platí pre web dizajn. Chceš dosiahnuť, aby bolo pre ľudí používanie tvojej stránky jednoduché a nechceš ich vytáčať kvôli nesprávnym prvkom. Ako to použiť: Prvky na tvojej stránke musia byť konzistentné. Ak je jeden odkaz podčiarknutý, potom všetky odkazy musia byť podčiarknuté. Nechceš predsa, aby si návštevnici mysleli, že môžu kliknuť na nejaký odkaz a potom zistia, že nie je klikateľný. O tom sa viac dočítaš v článku UX a UI nie sú iba šifry. […]