Dizajniranje korisničkog iskustva

30. novembar 2017.

Uvod

● Dizajniranje korisničkog iskustva

● Korisnički orijentisana metodologija razvoja

● 7 osnovnih faktora koji utiču na korisničko iskustvo

Šta je dizajniranje korisničkog iskustva (UX dizajn)?● “Proces kojim se kreira iskustvo interakcije korisnika sa proizvodom”,

Laura Klein, autor knjige UX for Lean Startups

● “Kombinovanje nauke i umetnosti u cilju podsticanja pozitivnih emocija u interakciji sa proizvodom”, Tomer Sharon, senior UX istraživač u Google-u

● “Proces dizajniranja sistema koji će krajnjim korisnicima pružiti sjajno iskustvo”, Justin Mifsud, osnivač firme Usability Geek

● “Rešenost da se razvoj vodi korisnicima”, Marieke McCloskey, istraživač u UserTesting

Odnos korisničkog iskustva i korisničkog interfejsa

Osnovna metodologija UX dizajna“Design thinking”

Osnovna metodologija UX dizajna“Design thinking”1. Poistovećivanje sa korisnicima2. Definisanje potreba korisnika i njihovih problema3. Pravljenje inovativnih idejnih rešenja na osnovu korisničkih potreba i

problema4. Pravljenje prototipa, kao prva faza razvoja rešenja5. Testiranje rešenja

Proces modelovanja je iterativan, što znači da će se neke od faza (ili sve) ponoviti više puta dok se ne dođe do krajnjeg rešenja

Poistovećivanje sa korisnicima

● Ko je grupa korisnika koja nam je važna?○ Koja je njihova starosna dob?○ Kojim profesijama se bave?○ Koja su njihova predznanja?○ Kakve navike imaju?

● Kave su njihove kulturološke osobenosti?

Definisanje potreba korisnika● Kakva je motivacija korisnika da koristi aplikaciju?● Šta je ono što korisnici očekuju?● Kako se osećaju zbog sadržaj koji pružamo ili usluga koju obezbeđujemo?● Da li njihova potreba privremena ili je nešto trajnijeg karakter?

Idejna rešenja

● Definisanje preseka korisničkih potreba i vlastitih potreba● Analiza mogućih tehnologija i sadržaja koji najverodostojnije oslikavaju

ove potrebe

Kreiranje prototipa● Model kojim se oponaša proizvod i

njegovo korišćenje● Vođeno je finansijskim i tehničkim

mogućnostima● Detaljnije o tome u nastavku

Testiranje rešenja● Izbor odgovarajućih metodologija i pristupa koji bi omogućili prikupljanje

korisničih mišljenja i utisaka● Mogu biti bazirana na upitnicima, analitikama, monitoringu korisničkog

ponašanja, ...

Faktori koji utiču na UX dizajn

1. Korisnost (eng. usefulness)

2. Upotrebljivost (eng. usability)

3. Jednostavnost pronalaženja (eng. findability)

4. Uverljivost (eng. credibility)

5. Efakat poželjnosti (eng. desirability)

6. Dostupnost (eng. accessibility)

7. Vrednost (eng. valuability)

Faktori koji utiču na UX dizajn: korisnost● Proizvod koji se razvija mora da ima svrhu inače ne može da opstane na

današnjem tržištu koje je puno inovativnih i vrlo korisnih proizvoda ● Proizvod može da se smatra korisnim i ako nužno nema praktičnu korist,

kao što je zabava ili umetnički doživljaj● Student može da koristi igricu kako bi se odmorio nakon teškog ispita● Posetilac muzeja može da koristi sliku kako bi naučio nešto o tehnici

kojom je slikana

Kratki upitnik: korisnost ● Da li proizvod rešava korisničke potrebe?● Da li je proizvod prijemčiv?● Da li je proizvod tolerantan na moguće greške?● Da li se lako može naučiti kako da se koristi proizvod?

Faktori koji utiču na UX dizajn: upotrebljivost ● Svaki korisnik koji koristi neki proizvod ima neki cilj koji želi da ostvari

korišćenjem tog proizvoda. Upotrebljivost se odnosi na brzo i efikasno ostvarivanje tog cilja.

● Igrica koja zahteva tri skupa kontrola nije baš upotrebljiva jer čovek raspolaže sa dve ruke. :)

● Upotrebljivost je veoma bitan faktor za uspešan razvoj nekog proizvoda

Kratki upitnik: upotrebljivost● Da li sve informacije prisutne?● Da li su sve informacije jasne i jednoznačne?● Da li pratimo korisničku intuiciju ili idemo protiv nje?● Da li smo sveli količinu korisničkih unosa na minimum?● Da li postoji mogućnost za sprečimo moguće greške?

Faktori koji utiču na UX dizajn: jednostavnost pronalaženja● Proizvod koji nam treba bi trebalo da možemo lako da pronađemo

○ Ako bi tekst u novinama bio nasumično raspoređen (umesto tematske podele na sport, zabavu, politiku, itd. ) verovatno bi iskustvo čitanja takvih novina bilo poprilično frustrirajuće.

○ Korisnik koji želi da sačuva izmene u dokumentu očekuje dugme “Save” na vidljivom mestu.

● Danas je vreme neprocenjiv i vrlo ograničen resurs i korisnici izuzetno cene ako neki posao mogu da urade za što manje vremena. Ovo čini faktor jednostavnosti pronalaženja izuzetno važnim za korisničko iskustvo.

Kratak upitnik: jednostavnost pronalaženja

● Da li postoji mogućnost pretrage po sadržaju?● Da li su obezbežene potrebne navigacije?● Da li ima smisla razmotriti sistem preporuka?

Prema izvorima marketinških istraživanja 78% Google pretraga u Americi u decembru 2014. godine se odnosilo napotragu proizvoda ili usluge.

Faktori koji utiču na UX dizajn: kredibilitet● Potrebno je da proizvod ima kredibilitet koji će zadržati korisnike. ● Kredibilitet se odnosi na poverenje koje korisnik ukazuje proizvodu - ne samo sa

aspekta usluge koju proizvod treba da pruži, već i sa vremenskog aspekta (da će ta usluga biti omogućena dovoljno dugo vremena), kao i sa aspekta pouzdanosti (da su informacije koje su pružene korisniku tačne).

● Ako korisnik stekne utisak da iza proizvoda stoje neke loše namere ili da je na bilo koji način prevaren, vrlo brzo će potražiti rešenje svog problema na nekom drugom mestu.

● Pored toga, utisci se razmenjuju među korisnicima i vrlo brzo će i do drugih potencijalnih korisnika doći informacija o tome da li proizvodu treba verovati ili ne.

Kratak upitnik: kredibilitet● Da li su informacije tačne?

● Da li su informacije razumljive?

● Da li su informacije odgovarajuće?

● Da li su informacije iskrene i dobronamerne?

Faktori koji utiču na UX dizajn: efekat poželjnosti Škoda i Porše:

Obe kompanije proizvode automobile. Obe grupe automobila su korisne, upotrebljive, dostupne, uverljive, vredne, laki za pronaći.

Da su besplatni, da li bi radije imali porše ili škodu?

Većina kupaca bira Porše. Ovo ne znači da Škoda nije poželjan automobil - oni prodaju dosta automobila, ali Porše je značajno poželjniji od Škode.

Efekat poželjnosti se postiže kroz brendiranje, vizuelni identitet i estetiku.

Faktori koji utiču na UX dizajn: dostupnost● Dostupnost govori o tome da treba voditi računa o korisničkom iskustvu i

korisnika koji imaju neki hendikep ( slabovidost, oslabljen sluh, ograničeno kretanje,...) ili posebne potrebe.

● Kompanije često zanemaruju ovaj faktor (gledaju na to kao na bacanje novca) sa objašnjenjem da to pogađa mali procenat korisnika.

● Po istraživanju iz 2010. godine, u Americi 19% populacije ima neki od pomenutih potreba.

● Ako se vodi računa o dostupnosti, može se primetiti da će rezultujući proizvod biti jednostaviniji za upotrebu za sve korisnike, a ne samo za one sa posebnim potrebama.

Kratak upitnik: dostupnost● Da li su funkcionalnosti i doživljaji isti za sve?● Da li su uz sve slike, mape ili grafikone prisutne i tekstualne informacije?● Da li i kada se izuzmu grafički elementi zadržavamo osnovno značenje?● Da li su sadržaji dostupni kroz ustaljene navigacije i skraćenice?

Ali i:

● Da li su sadržaji dostupni i na drugim jezicima i u formatima koje bi korisnici očekivali?

● Da li su informacije grupisane na pravi način?● Da li su korišćeni konzistentni stilovi prikaza?

Faktori koji utiču na UX dizajn: vrednost● Proizvod mora da ima vrednost.● Korisnik koji koristi ili kupuje proizvod treba da može da oseti vrednost

proizvoda koji ima. ● Ako proizvod nema vrednost, inicijalni uspeh će potisnuti ekonomski

faktori

Proizvod koji košta $100 i rešava problem od $10,000 će vrlo verovatno da uspe (ima veoma visoku vrednost), a proizvod koji košta $10,000 i rešava problem od $100 će vrlo verovatno propasti.

Kratak upitnik: vrednost● Da li su karakteristike proizvoda takve da zadovoljavaju korisničke

potrebe?● Da li je dizajn proizvoda takav da zadovoljava korisničke potrebe?● Koje su dodatne potrebe koje proizvod zadovoljava?

Pravljenje prototipa

● Uloga prototipa

● Prototip niske verodostojnosti

○ Na papiru

○ Clickable Wireframe

● Prototip umerene verodostojnosti

● Prototip visoke verodostojnosti

Uloga prototipa● Prototip treba da pruži aproksimaciju korisničkog iskustva i treba da

omogući korisniku što verniju simulaciju korišćenja krajnjeg proizvoda● Sa druge strane, ovaj efekat treba postići sa što manje napora, što čini

izbor alata za pravljenje prototipa izuzetno važnim● Izbor alata zavisi od:

○ Ciljne grupe ○ Očekivanja od prototipa○ Vremena kojim raspolažemo

● Poznavanje ciljne grupe nam omogućava da sa što manje napora dobijemo povratnu informaciju ○ Ako koncept ideje prikazujete članovima svog tima, možete to uraditi sa mnogo manje

verodostojnim prototipom, nego što je to slučaj sa krajnjim klijentima.

Vrste prototipa● U zavisnosti od nivoa detalja koji sadrže, mogu se razmatrati vrste/grupe

prototipa kao što su: prototipi niske verodostojnosti, prototipi umerene verodostojnosti i prototipi srednje verodostojnosti

● Detalji:○ Tekstualni sadržaj○ Elementi interfejsa: dugmići, formulari, navigacije, ... ○ Grafički koncept: slike, video zapisi, ...○ Elementi korisničkih reakcija

● Različiti prototipi vode do različitih povratnih informacija

Manje verodostojan prototip: na papiru

Manje verodostojan prototip: na papiru

Manje verodostojan prototip: Na papiruMane:

● Nakon nekoliko iteracija ovakav prototip može da postane zbunjujući i da zahteva više vremena za razumevanje

● Simulacija je dosta veštačka jer se ne koriste mehanizmi za interakciju kao što su miš, tastatura, ekran osetljiv na dodir i slično

● Ovo je high-level prototip, pa je samim tim i povratna informacija koju možemo da očekujemo high-level

Prednosti:

● Može da se napravi za kratko vreme● Lako se uređuje● Jeftin je● Pravi se od materijala koje je raspoloživ

u kancelariji (papiri, olovke, markeri, tabla, selotejp, ...)

● Predstavlja zabavnu aktivnost u kojoj članovi timski učestvuju

Manje verodostojan prototip: Clickable wireframe

Manje verodostojan prototip: Clickable wireframeMane:

● Većina korisnika kojima se prikaže ovakav prototip primećuju da on nekako predstavlja “nedovršen posao”

● Puno vremena i pažnje se troši na označavanje komponenti i kopiranje elemenata

Prednosti:

● Realističniji od papirne varijante jer je moguće ostvariti neku interakciju

● Otkriva osnovni način kako će biti realizovano ostvarivanje krajnjeg cilja korišćenja proizvoda

● Može da se koristi kao brzo rešenje “po kom može da se klikće”

Alati koji se mogu koristiti: Balsamiq, Microsoft Visio, OmniGraffle, Microsoft PowerPoint, Fluid Designer, ...

Umereno verodostojan prototip

Umereno verodostojan prototipMane:

● Interakcija je i dalje ograničena u odnosu na potpuni prototip

● Korisnici obično ne mogu da rade sa pravim podacima, pa je ograničen i domen za koji se ova prototip može koristiti

● Vremenski zahtevno

Prednosti:

● Vrlo realističan prototip● Vizuelni izgled i komponente mogu

da se testiraju● Može se dobiti dosta korisnih

povratnih informacija od korisnika

Alati koji se mogu koristiti: Axure R P, Adobe Fireworks, ...

Vrlo verodostojan prototip: Kodirani prototip

Vrlo verodostojan prototip: Kodirani prototip

Vrlo verodostojan prototip: Kodirani prototip

Vrlo verodostojan prototip

Mane:

● Tim može izgubiti dosta vremena u debati oko finesa

● Da bismo došli do željenog korisničkog iskustva potrebno je uložiti puno truda i vremena

Prednosti:

● Može se iskoristiti za krajnji proizvod

● Daje najrealističniju simulaciju● Može da se napravi od nekih već

postojećih komponenti

Evaluacija● Značaj

● Vrste

● Metodologija

Šta je evaluacija?● Analiza korisničkih utisaka i zapažanja● Upoređivanje sa vrednostima koje su važne za inicijalne aktivnosti

○ broj prodatih proizvoda○ broj pregleda strane○ broj klikova na link sa reklamom○ društveni domet○ ...

● Značaj:○ Uočavanje poteškoća prilikom korišćenja proizvoda○ Otkrivanje novih korisničkih potreba i ponašanja○ Profinjivanje postojećih funkcionalnosti○ ...

Na koji način može da se realizuje?● Upitnici namenjeni korisnicima

○ Pitanja u vezi sa sadržajem, dizajnom, organizacijom, udobnošću, ...

● Intervjui sa korisnicima○ Konstruisani ili slobodni

● Mišljenje eksperata● Terenska istraživanja

○ Posmatranje kako korisnici koriste proizvod u prirodnom kontekstu○ U obzir se uzimaju potrebe različitih nacionalnosti, etničkih grupa, kulturološke

specifičnosti, ...

● Praćenje korisničkih ponašanja (pogleda, pokreta, ...)● Analiza log datoteka u kojima se beleže relevantne informacije

A/B testiranje● Dve različite grupe korisnika koriste različite proizvode● Rezultati (po meri od važnosti) se statistički upoređuju

○ T-test, hi-kvadrat-test, Man-Vitni test, ..

● Moguća su i uopštenja A/B/n stim što bi varijacije između rešenja trebalo da budu takve da se promene mogu lako interpretrirati

Analitika● Analiziranje log datoteka ● Otkrivanje korisničkog ponašanja● U kontekstu veba:

○ Broj poseta strane○ Strane sa kojih korisnici dolaze○ Geografska analiza○ Dužina trajanja posete○ Uređaji koji se koriste○ Praćenje ruta korisnika○ Profilisanje korisnika

Komponente korisničkog iskustva

● Formulari

● Navigacija

● Potrošačka korpa

● Tabele, grafikoni

● Galerija slika

● Internacionalizacija

● ...

NavigacijaSluži da korisnici pronađu sadržaj koji im treba.

Korisnici primećuju navigaciju samo ukoliko ona ne radi kako treba, u suprotnom, navigacija treba da bude nešto što se podrazumeva, nešto što je svim korisnicima prirodno.

Da bi se navigacija ispravno realizovala, potrebno je da UX dizajner potpuno razume proizvod i način na koji su komponente proizvoda povezane.

Različite vrste navigacija odgovaraju različitim potrebama (horizontalne, vertikalne).

Navigacija: osnovna korisnička očekivanja

● Da ih usmeri na sadržaje za koje nisu znali da postoje● Da im prikaže gde se trenutno nalaze i gde sve mogu da odu dalje● Da im bude jasno koje su im trenutne opcije● Da im prikaže progres u ispunjavanju zadatka● Da im prikaže sadržaje koji su slični sadržajima koje trenutno koriste● Da razumeju način organizacije sadržaja

Navigacija: osnovna poslovna očekivanja

● Vođenje korisnika kroz neki proces i usputno prikazivanje povezanih sadržaja

● Što efikasnije vođenje korisnika kroz procese kao što su registracija ili kupovina

● Dobro rangiranje kod pretraživača stavljajući često pretraživane fraze kao stavke u navigaciji

● Omogućavanje efikasnog korisničkog iskustva● Ostvarivanje novčane dobiti kroz realizaciju uzajamnih dogovora o

upućivanju na stranice poslovnih partnera (eng. referral deals)● Otežavanje korisnicima pronalazak stranice za brisanje naloga i sl.

Navigacija: položaji

1. Pretraga2. Globalna navigacija3. Navigacija kao promocija4. Podnavigacije5. “In-page” navigacija6. Navigacija u podnožju

Navigacija: vrste1. Breadcrumbs2. Akcije3. Kartice4. Kontekstualna navigacija

(preporuke)5. Navigacija koja ističe popularne

sadržaje6. Navigacija po kategorijama

Početna stranica

Predstavlja putokaz za ostatak proizvoda.

Treba da prikaže osnovne informacije o proizvodu, kao i da upućuje na najkorisnije sadržaje i funkcionalnosti.

Često greška je zatrpavanje početne stranice gomilom informacija jer onda korisnik od svih tih informacija ne može da pronađe ono što mu je zaista potrebno.

Početna stranica: korisnička očekivanja/pitanja

● Znam šta mi treba, da li vi to pružate?● Kako da vas kontaktiram?● Ko ste vi i kakve usluge pružate?● Da li treba da vam verujem?● Tu sam da uradim jednu jednostavnu specifičnu radnju, ne

želim da budem opterećen dodatnim akcijama.● Pokažite mi informacije relevantne za mene i moje aktivnosti.● Pokažite mi aktuelnosti vezane za vaš proizvod.

Početna stranica: poslovna očekivanja

● Promocija novih proizvoda i usluga● Omogućiti što više linkova ka različitim sadržajima kroz

navigaciju, zaglavlja, itd.● Prikazivanje oglasa● Prikazivanje informacija koje su prilagođene ulogovanom

korisniku● Da ostavlja sjajan prvi utisak● Da prikaže da se sadržaj stalno osvežava● Da uliva poverenje korisnicima

FormulariPredstavljaju jedan vid komunikacije između organizacija i korisnika.

Dobri formulari se lako popunjavaju i mogu da pruže osećaj da se jako komplikovana razmena informacija realizovala izuzetno brzo.

Korisnici obično popunjavanje formulara doživljavaju kao “nužno zlo” i cilj je da se ovaj proces što više uprosti.

Sa druge strane, poslovnim licima je važno da formulari zahtevaju od korisnika sve neophocne informacije za uspešno izvršavanje negog poslovnog procesa.

Formulari: korisnička očekivanja● Da što brže popune formular● Da razumeju šta se od njih traži (kako ispravno da odgovore na dato

pitanje)● Da daju minimum informacija● Da imaju poverenja da su njihove privatne informacije u sigurnim rukama● Da popune formular u jednom prolasku. Ako iz nekog razloga moraju da

prekinu popunjavanje formulara kako bi došli do informacije koju nisu imali, ne žele se ono što je uneto izgubi.

Formulari: poslovna očekivanja● Da obezbedi sve potrebne podatke za obavljanje nekog posla● Da obezbedi dodatne podatke koji će se koristiti za marketing i poslovne

analitike● Da obezbedi čiste podatke (da nema duplikata, da su podaci tačni, dobro

formatirani, ...)● Da obezbedi da se korisnik složi sa uslovima koji su relevantni za

obavljanje datog posla● Da ohrabri korisnika da se prijavi za neke marketinške sadržaje

(newsletters i slično)

Formulari - primeri

Na sledećoj adresi se mogu naći neke smernice za pravljenje dobrih formulara:

https://uxdesign.cc/design-better-forms-96fadca0f49c

Potrošačka korpaZa transakcione sajtove koji omogućavaju online kupovinu, ova komponenta je od ključnog značaja.

Bez obzira na to koliko su korisnici zainteresovani za neki proizvod ili uslugu, ako im nije omogućeno da uspešno realizuju plaćanje, vrlo brzo će odusatati od kupovine.

Sam proces kupovine je osetljiv i zahteva od korisnika neke osetljive podatke i kao takvog ga treba osmisliti tako da korisnik ima poverenja da će proces biti završen bez grešaka.

Potrošačka korpa - korisnička očekivanja

● Da razumeju koliko novca treba da plate za proizvod ili uslugu● Da budu upoznati sa svim dodatnim troškovima (dostava, porezi, itd.)● Da mogu da dogovore vreme dostave● Da su njihovi podaci sigurni● Da izbegnu unos viška podataka● Da razumeju zašto je neka “nestandardna” informacija potrebna● Da izbegnu prijavljivanje za “spam” sadržaje● Da dobiju potvrdu da je njihova kupovina zabeležena● Da razumeju šta su njihovi naredni koraci● Da znaju šta da rade ukoliko se desi neka problematična situacija

Potrošačka korpa - poslovna očekivanja

● Da naplate proizvod ili uslugu● Da imaju što manje kupaca koji odustaju od kupovine● Što veća prosečna vrednost potrošačke korpe (ohrabrivanje korisnika da

kupe još nešto)● Dobijanje dozvole korisnika za prikupljanje podataka o kupovini● Ohrabrivanje korisnika da se registruju● Ohrabrivanje korisnika da preuzmu dodatne sadržaje (kataloge i sl.)● Inspirisanje korisnika da se opet vrate● Minimizacija komunikacije sa korisničkim servisom (call centrom)

Potrošačka korpa - komponente1. Slika proizvoda i naziv proizvoda na koje je

moguće kliknuti2. Opis proizvoda3. Podaci o količini i ceni (koje je moguće

promeniti)4. Unos koda sa popustom5. Informacije o dostavi i ceni dostave6. Jasno istaknuta ukupna cena (i sve međucene)7. Istaknuta opcija za kupovinu8. Dodatne informacije9. Security message

10. Proizvodi koji će ohrabriti korisnika da još nešto kupi

Primeri iz prakse

Zanimljivi linkovi

● https://speckyboy.com/5-simple-ux-exercises-will-change-decision-makers-think/● http://echesters.co.uk/2017/04/22/exercises-to-explain-UX.html● http://labs.minutelabs.io/Mass-Energy-Scale/● http://i-remember.fr/en● https://www.interaction-design.org/literature/article/bad-design-vs-good-design-5-examples-w

e-can-learn-frombad-design-vs-good-design-5-examples-we-can-learn-from-130706