Mis on UI/UX ehk kasutajaliides ja kasutajakogemus?

by Forwardspace
kasutajakogemus

Oled äkki isegi tähele pannud, et mõne kodulehe või rakenduse kasutamine on nii kerge ja arusaadav, et suudad sekunditega alustada vasakule või paremale piltide tõmbamist (jah, vihjasin Tinderile, aga see tõesti on nii lihtne). Mõnes programmis on aga navigatsioon nagu hiinlasele eesti keele õpetamine. Hästi läbi mõeldud disain annab niivõrd palju juurde kliendi kogemusele teenuse kasutamisel.

Kliendile meeldimine ning müügi tegemine on põhiline, sest iga äriettevõte tegutseb selle nimel, et kasumit teenida. Meeldimaks kliendile peab läbi mõtlema teenuse või toote pakkumisel üsna palju – kust klient leida, kuidas kliendi poole pöörduda, kuidas klient toodet ostma panna. Selleks, et viimane küsimus oleks osaliselt lahendatud ning tohutult lihtsustatud tuleb mängu UI/UX.

UI – User Interface Design
UX – User Experience Design

UX ja UI on nagu kaksikud aga kahemuna kaksikud – õde ja vend. Nad näevad võõrastele sarnased välja, aga tegelikult on nad täiesti erinevad. UI ja UX peavad olema peaaegu alati koos, sest üks ilma teiseta on nagu pitsa ilma kastmeta – näeb väljast hea välja aga maitselt on kuiv, kare ja mitte üldse meeldiv.

Aga mis on UX disain?

Esmalt, user experience on eesti keeles kasutajakogemuse disain.

kasutajakogemuse disain

Lihtsamalt öeldes kasutajakogemuse disaini eesmärk on muuta kasutaja kogemus paremaks, olgu see siis mobiilirakenduse, kodulehe, tugitooli või käekoti jaoks. Kuigi kasutajakogemuse disainist väljaspool tehnoloogia ettevõtteid tihti ei räägita, siis tegelikkuses on see oluline osa iga valdkondade tootest/teenusest. Kasutajakogemuse disaini keskmeks on analüüsi tulemuste edastamine disaini.

Mida UX disainer teeb?

Kasutajakogemuse disaineri peamised vastutusvaldkonnad on strateegia ja sisu. Internetikuningas on teatavasti hea sisu ning kasutajakogemuse disainer peab selle sisu strateegiliselt nii sättima, et kliendi kogemus sisu käsitlemisel oleks mugav ning müügile orienteeritud. UX disainer peaks uurima konkurentide disaini – vaatama, mis sarnaste teenuste/toodete juures toimib ning aru saama, millised on head ja vead ning analüüsima seda kliendi seisukohast.

Teine oluline UX disaineri ülesanne on teenuse disaini raamistiku loomine ning aktiivne osalemine prototüübi valmimisel. See tähendab seda, et hea UX disainer osaleb (rääkides nt. veebilehe loomisest) pidevalt arendusprotsessis ning suunab visuaali loomisel disaineri kätt. Kuna igal tootel on eluiga siis UX disaineri eluiga liigub koos tootega. Kui tootele või teenusele tulevad võimalused, tuleb UX disaineril veebilehe kasutajakogemus sellega kaasajastada.

Lõplik eesmärk on UX disaineril muuta teenuse ostmine internetis võimalikult lihtsaks ja kiireks, et klienti inforägastikus mitte kaotada.

Mis on UI disain?

User interface on eesti keeles kasutajaliidese disain.

kasutajaliidese disain

Nagu olete juba mõistnud, need kaks on niivõrd kaksikud, et vahel tundub nagu nad ikkagi oleks ühemunakaksikud. Aga tegelikkuses on nende erinevus lihtne – UI disain on rohkem seotud graafilise disainiga. Selle alla kuulub värvide valik (värvipsühholoogia), fontide valik või piltide valik ning mis tunde need koos kasutajakogemusega loovad. UI disainer peab looma disaini nii, et näiteks ehitusfirmale loodav leht ei näeks välja nagu praegu iga esimene ilusalong – sama font, samad väädid ja sama tooni lilla.

Mida UI disainer teeb?

Kui vaadata UX disaineri tööpakkumisi, siis nendes on pigem lisaks disainiteadmistele ka erinevate programmeerimiskeelte nõudlus. UI disainer töötab peamisel ikkagi tehnoloogia valdkonnas, kuid on ka erandeid – tema töö võib ka näiteks olla lennuki kokpiti ‘disain’.

UI disaineri eesmärk on võtta kõik see, mida UX disainer ette on öelnud ning luua sellest reaalne asi – näiteks veebileht või mobiilrakendus. Ehk siis UX disainer annab UI disainerile skeleti, millele UI disainer loob naha, juuksed, silmad ja paneb riided ka selga.

 

Mida teha ja mida mitte?

Mida mitte teha on alati kõige lihtsam välja tuua, sest kõigile jubedalt meeldib vinguda, selle asemel, et lahendust leida. Proovime tuua teieni nii häid kui halbu näiteid, et saaksite oma teenuse või toote disaini arendada või vähemalt midagi juurde õppida.

1. Anna kliendile sama kogemus igal pool, erinevalt seadmest.

See tähendab, et kui külastaja kasutab kodulehte oma telefonis, peaks see olema võimalikult saranase ülesehitusega, mis desktop versioon, et kasutaja leiaks kõik vajaliku võimalikult lihtsalt. Disaini loomisel vaata, kuidas teised veebilehed on lahendanud mobiiliversiooni menüüjaotust ning ära leiuta jalgratast, vaid tee sarnaselt ka enda lahendus. Põhjuseks ei ole see, et soovitaksime kopeerida seda, mida teised teevad. Kasutaja on harjunud nuppude asetuste või disainielementidega, mis on üldkasutatavad ja erinedes täielikult ei tee sa kliendile kogemust lihtsamaks.

2. Call to Action – kutse tegutsema!

Kontrast ja rõhutamine – Proovi välja tuua seda, mis on oluline. Kui soovid, et klient ennast uudiskirjale registreeriks, siis toonita seda. Kui soovid, et klient kohtumise broneeriks, siis toonita seda. Too oma lehele kontrasti just nende kohtadega, mida sa tahad, et sinu klient müügi tegemiseks tähele paneks. Proovi oma eesmärgi saavutamiseks kutset rõhutada mitu korda. Ära muidugi viska igale poole oma soovi klienti ostma meelitada, liiga palju linke ajab inimese segadusse.

kutse tegutsema
Allikas: http://goodui.org/

3. Kontrolli, et kõik lingid lehel töötavad ja anna teada neile, kelle jaoks ei tööta

Lehekasutaja või potentsiaalne klient ei soovi teha läbi toote ostmise protsessi ning protsessi lõpus teada saada, et “Oih, me sinu riiki oma öko naturaalset näopesušvammi ei saadagi!” Kui pakud kliendile toote ostmise või tellimise võimalust, tee kindlaks enne kliendi edasi saatmist enda piiravad probleemid. Näiteks kui maksta saab ainult PayPal kontoga – siis alusta sellest ning juhata klient PayPal’i kontot tegema ning suuna pärast tagasi.

4.  Tekst ja taust

Kontrast on oluline. Siniselt taustalt sinist teksti lugeda on agoonia, valgelt taustalt halli tektsi lugeda on samuti risky business. Kui paned pildi kodulehele, siis tee kindlaks, et tekst pildil oleks loetav – astu samm arvutist eemale ja vaata, kas näed ikka veel, mida kirjutasid.

teksti kontrast

5. Valikuvariandid

Keep it simple, nagu öeldakse! Lihtsuses ja kiiruses peitub võlu. See on kui kirss tordil, kui ajalehte tellides pead lisaks oma aadressile ning nimele andma infot, mis kell eelmisel nädalal prügi välja viisid või kui tihti koera jalutamas käid. Kui soovid potentsiaalselt kliendilt midagi kätte saada, tee see talle lihtsaks ja küsi esialgu võimalikult vähe informatsiooni. Klienti abistavad soovitused – näiteks tõsta esile toode, mida tahad kõige enam müüa ning nimeta see “Populaarne!” tooteks. Sellisel juhul on kliendil lihtsam otsustada. Kõik tahavad seda, mis teisel on.

Allikas: http://goodui.org/

Kasulikud lingid:

www.hotjar.com

Hotjar’i eesmärk on näha, kuidas klient sinu kodulehel liigub, kuhu ta vajutab ning mis on arusaamatud kohad. Hotjar’iga saad luua lehtreid (funnels), mida mööda näed, kus ning millisel lehel klient huvi kaotab. Hotjariga on võimalik näha klientide tegevust sinu lehel videota näol ning soojuskaarti (heatmap), mis näitab, millised linke, nuppe või kohti klikitakse kõige rohkem.

Tasuta versioon on juba üsna hea teada saamaks vajaliku, soovitame.

www.appsee.com

AppSee keskendub äpp’idele ja nende analüüsile. Kui soovid mobiiliapi analüüsida, siis AppSee’ga näed visuaalselt, kuidas kasutajad sinu äppi kasutavad ning näitab ka kasutajate sessioonide videona, sellest loob programm aruande (report) ning toob vällja probleemid ja annab soovitusi äpp’i UI/UX’i parandamiseks.

www.trymyui.com

Leht, kus saad lasta inimestel oma kodulehte, äppi või e-poodi proovida, et saada tagasisidet kasutajakogemuse kohta.

Allikas nii mõnegi hea näite esitamisel siin ning ühtlasi ka üsna “piibli” sarnane leht, kui teemast rohkem teada soovid: GoodUI