30. mája 2020 / Martina Kertészová

DIGITAL INSPIRATION

Zvýšte návštevnosť vašej stránky | UX a UI dizajn pod jednou strechou

Návštevnosť vašej stránky môžete zvýšiť viacerými spôsobmi. Napríklad dobre cielenou platenou reklamou vo vyhľadávaní, či správne zvoleným archetypom značky, s ktorým sa vaši zákazníci rýchlo a radi stotožnia. Darmo však budete na vašu stránku prinášať návštevnosť z platených Google reklám, ak bude samotná stránka neprehľadná, užívateľovi sa na nej bude ťažko orientovať, jej vizuál bude neatraktívny a zastaralý.

Ak teda v štatistikách webu evidujete vysokú mieru opustenia vašej stránky (bounce rate), problém môže byť práve v nedotiahnutom UX či UI dizajne.

Význam skratiek UX a UI

UX (User Experience)

Pod skratkou UX rozumieme užívateľskú skúsenosť, pocit, ktorý návštevník zažíva pri návšteve vášho webu, aplikácie či softvéru a odnáša si ho so sebou. Jednoducho povedané, UX dizajn rieši, aby sa návštevníkovi na vašom e-shope dobre orientovalo a ľahko objednávalo produkty, aby vo vašej aplikácii rýchlo našiel to, čo potrebuje, aby váš softvér vedel intuitívne používať a pod.

Do oblasti UX patrí aj zisťovanie preferencií cieľovej skupiny danej stránky/ aplikácie/ softvéru, na základe ktorých sa samotný dizajn navrhuje. UX dizajnér teda pri tvorbe wireframov, prototypov webu, jeho informačnej schéme, interakčnom dizajne aj scenároch pracuje s informáciami, získanými priamo od užívateľov.

UI (User Interface)

UI známe aj ako používateľské rozhranie. Oblasť, ktorá sa zaoberá vývojom rozhrania webu, aplikácie či softvéru. UI dizajn teda rieši to, ako vaša aplikácia či e-shop vyzerá (jeho vizuálny dizajn, použitú farebnú škálu, voľbu typografie, ikoniek, rozloženie konkrétnych prvkov a ich interakcia medzi sebou aj s užívateľom). To všetko je náplňou práce UI dizajnéra.

UX a UI pod jednou strechou

Do nasledujúceho obrázku sme ukryli niektoré z vecí, ktoré patria do UX dizajnu aj tie, ktoré sa radia do UI oblasti.

Pre lepšie pochopenie problematiky si uvedieme príklad z bežného života.
Predstavte si, že staviate dom. Jeho konštrukcia je ako kód stránky. UX dizajn predstavuje nákresy jeho okien, dverí, stien, miestností, zabezpečenie domu aj to, ako rýchlo a ľahko sa dostanete z kuchyne do obývačky. UI dizajn zase predstavuje farby stien, materiál skríň či obývacej súpravy, veľkosť kuchynského stola, umiestnenie nábytku (napr. to, že sa váš písací stôl nachádza hneď vedľa knižnice, aby bol proces vášho vzdelávania čo najjednoduchší).

UX a UI teda majú dokopy za cieľ vytvoriť, čo najpríjemnejšie prostredie pre ľudí v dome aj na webovej stránke.

Rozdiel medzi UX a UI

Hlavným rozdielom medzi UX a UI dizajnom je to, že UX nie je na prvý pohľad viditeľný a UI áno. UX predstavuje to, čo je “za stránkou”, jej funkčnosť. Úlohou UX dizajnu nie je riešiť, ako stránka vyznie opticky, ale či sa s ňou ľahko a dobre pracuje. Naopak UI rieši to, ako stránka vyzerá a snaží sa jej funkčnosť (rýchlu a ľahkú manipuláciu) vhodne pretaviť do vizuálneho spracovania.

V UX dizajne ide o návrh webu, ktorý splní požiadavky a potreby užívateľov a v UI dizajne ide o návrh konkrétnych prvkov, animácií, interakcií na stránke tak, aby užívateľov webom vizuálne “previedol” a naplnil UX.

Úloha UX dizajnéra

Úlohou UX dizajnéra je navrhnúť stránku / aplikáciu tak, aby bola bezchybne funkčná, zrozumiteľná a jasná pre každého užívateľa. Aby však spĺňala potreby a požiadavky koncových používateľov, začína sa práca UX dizajnéra podrobným skúmaním, v ktorom sa snaží zozbierať čo najviac informácii, z ktorých pri tvorbe stránky môže vychádzať. Informácie o užívateľoch prostredníctvom rozhovorov či dotazníkov aj informácie o trhu.

Zo získaných dát vytvára pre stránku persóny, ktoré bližšie definujú cieľového užívateľa (vek, zamestnanie, finančné zabezpečenie, záľuby,...).

Následne navrhne informačnú schému alebo architektúru (IA) stránky. V tomto procese UX dizajnér pracuje na vzájomnej nadväznosti celého obsahu stránky a vytvára webu logickú štruktúru.

Následne dáta spracováva do podoby wireframu v digitálnej podobe, ktorému môže predchádzať tzv. microwireframe v podobe ručného nákresu webu. Wireframe slúži ako budúca skica webu.

Môžeme si to opäť vysvetliť na príklade s domom. Predtým než samotný dom začnete stavať, musíte mať nakreslený jeho plán a vizualizáciu. Až potom sa začína murovať. UX dizajnér má pri tvorbe wireframe 3 základné ciele:

  • 1. Zobraziť základný obsah
  • 2. Nakresliť rozloženie základných, stavebných celkov
  • 3. Načrtnúť a popísať užívateľské rozhranie

Z wireframe následne UX dizajnér vytvorí prototyp webu (klikateľnú verziu stránky bez grafiky). Prototyp webu pred grafickým doplnením vždy testuje (priamo s užívateľmi), aby zistil, či je stránka ľahko ovládateľná a funkčná.

Úloha UI dizajnéra

Hlavná úloha UI dizajnéra tkvie vo vzhľade samotného webu či aplikácie. V jednoduchosti, rozhoduje o tom, ako bude aplikácia vyzerať. Konkrétne volí farebné schémy, tvary gombíkov, šírku riadkov aj typy použitého písma. UI dizajnéri vytvárajú celkový dojem používateľského rozhrania webstránky / aplikácie. Musia mať estetické cítenie, pretože zodpovedajú za vizuálnu atraktívnosť webu, no tiež dbať na jeho funkčnosť. Musia sa ubezpečiť, že každý nimi zvolený vizuálny prvok pôsobí jednotne so stránkou, esteticky aj účelne.

Rovnako ako UX dizajnér aj UI dizajnér pracuje s požiadavkami a potrebami koncových užívateľov. Snaží sa dosiahnuť rýchlu (vizuálnu) orientáciu návštevníka na webe, jednoduché a jednoznačné zobrazenie funkcií, pocit bezpečnosti a estetickosť celého návrhu.

Na to, aby to všetko zvládol, Upmusí byť dobre oboznámení s cieľovou skupinou webu / aplikácie. Musí poznať ich správanie sa na stránke, technickú zdatnosť, no tiež výstupy UX dizajnéra, ktoré sa snaží naplniť, informačnú schému stránky a pod. Iba tak dokáže navrhnúť vhodný vizuál, ktorý ďalej testuje priamo v interakcii s koncovými užívateľmi.

UX a UI dizajn fungujú najlepšie spolu, pod jednou strechou. Ak máte záujem o tvorbu funkčnej a vizuálne atraktívnej webovej stránky či aplikácie, je potrebné UX aj UI dizajn poriadne dotiahnuť, navzájom prepojiť a výstupy testovať. Inak sa bude vaša stránka podobať skôr domčeku z karát ako pevnému domu na stabilných základoch.

V našej digitálnej agentúre UPVISION zabezpečujeme kompletnú tvorbu webov aj aplikácií pod jednou strechou, nevynímajúc kvalitný UX a UI dizajn. Postaráme sa, aby vaše produkty a služby boli správne odprezentované, aby sa u vás užívatelia dobre cítili, opakovane sa vracali a zvyšovali tak návštevnosť vašej stránky.

Chem pomôcť s UX a UI dizajnom

Ďalšie inšpirácie