1. Uvod u UX dizajn_Prezentacija (3).pdf

Uvod u UX dizajn Što ćemo naučiti? ● ● ● ● ● ● Što je korisničko iskustvo (UX)? Što je potrošačko iskustvo (CX)? Kako dizajn utječe na korisničko iskustvo? Što je korisničko putovanje? Što je motivacija korisnika? Kako izraditi mapu korisničkog iskustva? Izvor vizuala: Freepik Preporučena lite...

Uvod u UX dizajn Što ćemo naučiti? ● ● ● ● ● ● Što je korisničko iskustvo (UX)? Što je potrošačko iskustvo (CX)? Kako dizajn utječe na korisničko iskustvo? Što je korisničko putovanje? Što je motivacija korisnika? Kako izraditi mapu korisničkog iskustva? Izvor vizuala: Freepik Preporučena literatura ● ● ● ● ● ● UX Design: The Definitive Beginner’s Guide Design Thinking za Nedizajnere Change by Design The Design of Everyday Things Emotional Design Muzli, Mobbin, Instagram, Dribbble, Behance, LinkedIn, uxdesign.cc Izvor vizuala: Freepik Kreirajmo Figma korisnički račun ● ● ● ● Polaznici programa obrazovanja UX dizajner imaju pravo na besplatan edukacijski korisnički račun za Figmu i Figjam https://figma.com/education/apply Kliknite na gumb “Get verified” Kreirajte korisnički račun s Googleom ili email adresom Potvrdimo Figma korisnički račun ● ● ● ● ● Status: Student Razlog: Attending an in-person bootcamp Ime škole: Algebra (slobodni unos) Područje: UX/UI & Interaction Design Predviđeni završetak obrazovanja: 12 mjeseci od danas Što je FigJam? ● ● Alat za ideaciju, sastanke i radionice (“digitalna ploča”) Figjam datoteke su ljubičaste, a Figma datoteke su plave Izvor vizuala: figma.com/figjam Zadatak 1 Zašto ste ovdje? Uvod u UX dizajn Mikrovalna pećnica Kada ste zadnji puta koristili mikrovalnu pećnicu s kojom niste upoznati? Kakvo je bilo vaše iskustvo? Izvor vizuala: Freepik Korisničko iskustvo (UX) Spoj osjećaja i akcija koje korisnik ima prilikom interakcije s predmetom, proizvodom ili uslugom ● ● Uključuje ponašanja, stavove i emocije koje korisnik doživljava Tri čimbenika koja oblikuju korisničko iskustvo su sustav, korisnik i kontekst korištenja Potrošačko iskustvo (CX) CX (customer experience) podrazumijeva sve isto kao i UX, ali uz protok vremena ● ● ● Skup (zbroj) interakcija i iskustava kroz vrijeme Cjelokupna percepcija brenda ili tvrtke Rezultat je svake interakcije, od navigiranja digitalnog proizvoda poput aplikacije do razgovora s podrškom Koja je vama draga tvrtka/brend? Zašto? Kada ste se s njome prvi puta susreli? Što vas je osvojilo? Imate li neke zamjerke iako općenito na nju gledate pozitivno? Izvor vizuala: Freepik The best advertising you can have is a loyal customer spreading the word about how incredible your business is. Shep Hyken, CX stručnjak i autor Netflix Koje su dobre, a koje loše strane korisničkog iskustva? Izvor vizuala: Netflix Booking Koje su dobre, a koje loše strane korisničkog iskustva? Izvor vizuala: Booking Wolt Koje su dobre, a koje loše strane korisničkog iskustva? Izvor vizuala: Wolt Primjeri lošeg UX-a Pojedine tvrtke na različite načine pokušavaju “natjerati” korisnika na odabir određene opcije. Primjerice, Ryanair skriva “Don’t insure me” opciju u listi zemalja za osiguranje. Izvor vizuala: Ryanair Primjeri lošeg UX-a Kreiranje lozinke s mnogo nestandardnih uvjeta zahtjeva puno koncentracije i vremena korisnika. Vjerojatno je se neće sjećati te će je morati resetirati prilikom sljedeće prijave u korisnički račun. Izvor vizuala: zuko.io Primjeri lošeg UX-a Ponekad je teško pronaći balans između inovativnog i jednostavnog, ali ne smijemo olako žrtvovati korisničko iskustvo zbog “kreativnosti”. Iako je interesantan, naslov je za određene ljude djelomično ili u potpunosti nečitljiv. Izvor vizuala: Awwwards Korisničko iskustvo Korisničko iskustvo (UX) ● ● ● Svi aspekti interakcije s proizvodom, uslugom ili sustavom UX nije vezan samo za digitalne proizvode Korisnici su u središtu procesa ○ ○ ○ ● Što žele? Što im je potrebno? Kako razmišljaju i zašto? Nije bitna samo funkcionalnost, već i ugoda Dizajn usmjeren na ljude (HCD) ● ● ● Human-centered design Koncept ključan u svijetu dizajna i razvoja proizvoda Stavlja korisnike u središte procesa dizajna ○ ● Sve odluke donose se s obzirom na potrebe, želje i mogućnosti ljudskih korisnika Cilj je stvoriti proizvode koji su intuitivni, korisni i zadovoljavajući Dizajn usmjeren na ljude (HCD) ● ● Kao i UX, temelji se na razumijevanju korisnika, njihovih želja i potreba Korisnici su uključeni u iterativni proces dizajna ○ ○ ○ ● Od njih tražimo povratne informacije S njima testiramo koncepte Kontinuirano prilagođavamo dizajn na temelju saznanja UX se danas češće veže uz digitalne proizvode, a HCD generalno ima širi spektar primjene Zamislite… U novom ste restoranu – što sve utječe na vaše iskustvo? Što ga može učiniti pozitivnim? Što negativnim? Kakvo je vaše osobno, ukupno iskustvo ako je hrana ukusna, ali je restoran iznimno glasan ili je u njemu prevruće? Izvor vizuala: Freepik UX je ključan za uspjeh ● ● ● Razumijevanje korisnika i njihovih potreba, želja, očekivanja, prethodnih iskustava, pristranosti, navika… Korisnici napuštaju web stranice nakon nekoliko sekundi ako ne mogu pronaći ono što traže ili ako im dizajn nije privlačan i ne ulijeva povjerenje Dobar UX dizajn privlači i zadržava korisnike, povećava zadovoljstvo korištenja te poslovne rezultate Što čini korisničko iskustvo? ● Postoje četiri sile korisničkog iskustva ○ ○ ○ ○ Vrijednost (value) Iskoristivost (usability) Poželjnost (desirability) Mogućnost prihvaćanja (adoptability) Izvor vizuala: Freepik Vrijednost ● ● ● ● Donosi li proizvod neku korist korisniku? Ako korisnik ne vidi vrijednost proizvoda, neće ga koristiti Ako alternativa obavlja istu funkciju, ali ima dodatne pogodnosti, korisnik će odabrati taj proizvod Koji je vama vrijedan digitalni proizvod (stranica ili aplikacija)? Vrijednost ● Primjeri vrijednosti (value proposition) poznatih brendova ○ ○ ○ ○ Facebook: Poveži se i dijeli s ljudima u svom životu. Netflix: Gledaj serije i filmove bilo kad, bilo gdje. Paypal: Jednostavniji, sigurniji način plaćanja. Reddit: Naslovna stranica interneta. Iskoristivost ● ● Koliko je jednostavno izvršavati zadatke i ostvariti ciljeve? UX pomaže korisniku omogućiti što brže i bezbolnije obavljanje osnovnih funkcionalnosti Izvor vizuala: Freepik Iskoristivost Zamislite scenarij: Kopirali ste telefonski broj s određene web stranice i trebate ga nazvati. Ovo je ekran s kojeg ćete obaviti taj poziv. Gdje trebate zalijepiti taj broj? Izvor vizuala: GadgetHacks Poželjnost ● ● ● Je li iskustvo zabavno, privlačno, interaktivno ili na neki drugi način poželjno? Ako rezultat iskustva nije pozitivan osjećaj, mogućnost gubitka korisnika je velika Veliki faktor u poželjnosti je vizualni dizajn koji mora odgovarati ciljanoj skupini korisnika Mogućnost prihvaćanja ● ● ● ● Hoće li korisnici pronaći i prihvatiti proizvod? Kako bi proizvod bio prihvaćen od strane ciljane publike, mora biti adekvatno predstavljen Je li jasno tko je ciljana publika? Ako se proizvod predstavlja krivoj skupini, velike su šanse da neće biti prihvaćen Zadatak 2 Uloga UX dizajnera Što je po vama dizajn? Kada čujete riječ dizajn – koje asocijacije se bude u vama? Zašto? Izvor vizuala: Freepik Dizajn nije… ✖ ✖ ✖ ✖ Umjetnost Opcionalan Subjektivan Nemjerljiv ➔ ➔ ➔ ➔ Dizajn rješava problem korisnika Uvijek postoji, bio dobar ili loš Ne dizajniramo za sebe ili jednu osobu Uspješan dizajn ostvaruje postavljene i mjerljive ciljeve UX dizajner ● ● ● ● Osoba koja se bavi dizajniranjem korisničkog iskustva proizvoda ili usluge Razumije potrebe korisnika te dizajnira rješenja koja zadovoljavaju te potrebe Testira dizajn s korisnicima Kontinuirano iterira i dizajnira ovisno o novim saznanjima i povratnim informacijama Ključne vještine UX dizajnera ✓ ✓ ✓ ✓ ✓ ✓ ✓ Istraživanje korisnika Organizacija informacija Skiciranje i prototipiranje Testiranje dizajn koncepata i prototipa Dizajniranje korisničkih sučelja Razumijevanje poslovnih ciljeva Kolaboracija s timom i klijentom Ostale vještine UX dizajnera ✓ ✓ ✓ ✓ ✓ ✓ Komunikativnost Znatiželja Kreativnost Kritičko razmišljanje Empatija Storytelling Izvor vizuala: Freepik Prodiskutirajmo vještine! Koje od spomenutih vještina UX dizajnera ste već razvijali kroz život? U kojoj mjeri? Koje se najviše veselite razviti kroz ovaj program obrazovanja? S druge strane, koje vještine vas najviše brinu ili plaše? Kako to? Izvor vizuala: Freepik Uloga UX dizajnera ● ● ● Nije standardizirana (razlikuje se od tvrtke do tvrtke) Ponekad uključuje veći fokus na vizualni dizajn korisničkog sučelja, a ponekad se više fokusira na istraživanje korisnika, skiciranje i testiranje ranih faza sučelja U manjim timovima često obuhvaća veći set vještina, dok je u većim timovima uloga često specijalizirana, s manjim, fokusiranijim odgovornostima Bliske uloge ● Dizajner korisničkih sučelja ○ ● Dizajner korisničkih iskustava ○ ● UI designer UX designer Dizajner digitalnih proizvoda ○ Product designer UX u stvarnom životu Korisničko iskustvo u stvarnom životu ● ● U svakodnevnoj interakciji s predmetima također doživljavamo probleme s korisničkim iskustvom Predmeti koje koristimo moraju biti ugodni i intuitivni za korištenje Nedavni primjer iz stvarnog života Pada li vam na pamet nešto što ste nedavno proživjeli, a da vam je ostalo u sjećanju kao ugodno ili neugodno? Jeste li posjetili neki zanimljiv kafić? Ili ste možda bili frustrirani novim kuhinjskim priborom? Don Norman ● ● ● ● ● ● Američki istraživač, profesor i autor Nosi titulu “otac UX-a” Tvorac pojma “korisničko iskustvo” Design of everyday things Jedan je od osnivača Nielsen Norman grupe www.nngroup.com/articles Izvor vizuala: Interaction Design Foundation “Normanova” vrata Bilo koja vrata koja su zbunjujuća ili nepotrebno teška za korištenje jer dobra vrata ne trebaju upute “Treba li ova vrata povući ili gurnuti?” Izvor vizuala: UX Collective Serija nemogućih predmeta ● Katerina Kamprani, grčka arhitektica i 3D umjetnica kreirala je seriju nemogućih predmeta Izvor vizuala: theuncomfortable.com Zadatak 3 UX industrija Tipovi digitalnih proizvoda Web stranice ● ● ● ● ● Mala doza interaktivnosti i utjecaja na sadržaj proizvoda Fokus je na konzumiranju sadržaja i konverzijama Landing web stranice Prezentacijske web stranice eCommerce web stranice Web stranice Izvor vizuala: Framer Web aplikacije ● ● ● ● Velika doza interaktivnosti i utjecaja na sadržaj proizvoda Dvostrana komunikacija (korisnik ↔ server) Sadržaj ovisi o korisniku koji je prijavljen u aplikaciju Veza s internetom je nužna Web aplikacije Izvor vizuala: Asana SaaS ● ● ● ● Software as a Service Velika doza interakcije i utjecaja na vidljivi sadržaj Češće orijentirano na B2B (poslovne) korisnike Veza s internetom je nužna SaaS Izvor vizuala: Hubspot Mobilne aplikacije ● ● ● ● ● Aplikacije za pametne telefone i tablete Srednja do visoka doza interakcije i utjecaja na sadržaj Limitirana veličina zaslona uređaja Sadržaj ovisi o korisniku koji je prijavljen u aplikaciju Veza s internetom nije uvijek nužna, iako često je Mobilne aplikacije Ostali digitalni proizvodi ● ● ● ● ● ● Glasovna sučelja Aplikacije za wearable uređaje Veliki interaktivni zasloni Video igre Desktop aplikacije za računala Aplikacije za VR i AR sučelja Uloge s kojima ćete se susretati Što mislite, koje su uloge s kojima ćete se susretati kao UX dizajner? Izvor vizuala: Freepik Uloge s kojima ćete se susretati ● ● ● ● ● ● ● Programeri (inženjeri) Voditelji projekata i proizvoda QA specijalisti Data scientists Marketing specijalisti Grafički dizajneri Business development managers Izvor vizuala: Freepik Radna okruženja UX dizajnera ● ● ● ● ● Kreativne agencije Product i konzultantske agencije Startup tvrtke Korporacije Product tvrtke ➔ ➔ ➔ ➔ ➔ Dinamični web projekti Dugotrajniji web i mobile app projekti Mali timovi, široke obveze Specijalizirani, uski fokus Rad na jednom proizvodu (npr. Spotify) Koje je vaše idealno radno mjesto? Na kakvom biste tipu proizvoda voljeli raditi? U kakvom okruženju/organizaciji? U kakvom timu? Izvor vizuala: Freepik Motivacija korisnika Motivacija ● ● ● Utjecaj koji izaziva, usmjerava i održava željeno ponašanje U početku postoji motiv ili potreba za ostvarivanjem nekog cilja, a nakon toga slijedi ponašanje kojim nastojimo doprijeti do toga cilja Motivatori su stvari koje pojedinca potiču na djelovanje Glavni uzroci motivacije ● ● ● Unutarnji Vanjski Možete li pretpostaviti neke vanjske ili unutarnje podražaje koji mogu motivirati ljude? Izvor vizuala: Freepik Vanjski podražaji ● Donose korisniku direktnu dobit ○ ● Ako podijeli svoj kod s drugim korisnikom, dobit će 5 eura popusta prilikom svoje iduće narudžbe unutar aplikacije Dolaze iz okoline ○ ○ Obitelj, profesionalno okruženje, natjecanja U većini slučajeva nagrada je opipljiva (novac, diploma, medalja) ili neopipljiva (pohvala, podrška, prepoznavanje) Unutarnji podražaji ● Donose korisniku emocionalnu dobit ○ ○ ● Realizacija aktivnosti je sama sebi svrha, ostvarenje omogućava korisniku da se osjeća autonomno i kompetentno Ostvarenje osobno postavljenog cilja, kreiranje nove navike, učenje stranog jezika… Dolaze iz “unutarnjeg svijeta” svake osobe ○ Motivacija se formira iz interesa, znatiželje, želja i osobnih potreba Zašto je motivacija važna u UX-u? ● ● Moguće je motivirati korisnike da učine nešto prilikom interakcije s proizvodom ili uslugom S druge strane, bitnije je razumjeti unutarnju motivaciju korisnika kako bismo ih dizajnom podržali u ostvarivanju osobnih ciljeva Jeste li vi bili motivirani UX-om? Sjećate li se primjera aplikacije koja vas je motivirala da (u)činite nešto? Biste li to učinili bez dodatne motivacije? ● ● ● Je li to pridonijelo vašem iskustvu? Ili vam je to bilo negativno iskustvo? Zašto? Izvor vizuala: Freepik Vizualni dizajn i korisničko iskustvo ● ● ● Vizualni dizajn direktno utječe na korisničko iskustvo i motivaciju korisnika Neki od elemenata o kojima brinemo prilikom vizualnog dizajna su: svjetlina, linije, boja, tipografija, plohe, sjene, teksture, odnos pozitivnog i negativnog prostora, kontrast… Potrebno je pažljivo birati elemente dizajna kako bi odgovarali tematici, publici i željenom cilju proizvoda UX u kontekstu brenda Prepoznajete li ove logotipe? A sad? Što čini brend? ● ● ● Robna marka ili brend (eng. brand, što u prijevodu znači “označiti vrućim željezom”) je prepoznatljiva oznaka ili ime nekog proizvoda, a često podrazumijeva i razinu kvalitete Brend mora stvarati snažan i trajan identitet proizvoda ili usluge, sadržavati osobnost poduzeća i izazivati osjećaje Glavna prednost proizlazi iz nazočnosti u podsvijesti potrošača, odnosno prisjećanja i prepoznavanja brenda There is a specific, articulated outcome that a company should create or cultivate through the sum of all of the touch points that other people and organizations have with the branded thing. Dirk Knemeyer, direktor SciStoriesa Your brand is a story unfolding across all customer touch points. Jonah Sachs, autor i poduzetnik Dodirne točke brendova ● ● U direktnom dodiru s krajnjim korisnikom stvaraju se dodirne točke, spomenute u oba prethodna citata Dodirne točke (touch points) su prilika za povećanje svjesnosti i izgradnju vjernosti određenom brendu Izvor vizuala: Freepik Izvor vizuala: shiftcreative.com Odnos brenda i korisničkog iskustva ● UX se fokusira na manji opseg i trenutni kontekst ○ ● CX se fokusira na dugotrajnu vjernost brendu ○ ● Dodirne točke poput web stranice ili aplikacije Dodirne točke poput reklama, uniformi ili korisničke podrške UX utječe na dojam o brendu, a dojam o brendu također utječe na UX Service design ● ● Planiranje i organizacija infrastrukture, komunikacije i opipljivih komponenti usluge kako bi se osigurala kvaliteta i poboljšala interakcija između korisnika i pružatelja usluga UX dizajneri mogu raditi na projektima service designa Service blueprint Vizualni prikaz (mapiranje) svega što se događa u procesu pružanja usluge ○ ○ ○ Što radi klijent i kada? Što rade zaposlenici u dodiru s klijentom? Što se događa u pozadini? Izvor vizuala: ADK Group Zadatak 4 Psihologija korisničkog iskustva Psihologija ● ● ● Društvena znanost koja se bavi psihičkim procesima i njihovim izražavanjem u ponašanju Nastoji steći znanje o uzrocima i načinu ponašanja pojedinca te o tome na koji način ljudi doživljavaju svijet u kojem žive Psihologija je iznimno bitna za dizajn korisničkih iskustava Empatija ● ● ● Razumijevanje druge osobe (situacije u kojoj se nalazi, što proživljava i doživljava) Emocionalno uživljavanje u osjećaje druge osobe Gledanje svijeta “očima druge osobe” Izvor vizuala: Freepik Empatija i UX ● ● ● Unutar UX-a, u centar stavljamo korisnike i njihove ciljeve, želje, ukuse, osjećaje, strahove, prethodna iskustva, kulturu, očekivanja i slično Prilikom dizajna, nužno je postaviti sebe u položaj korisnika jer ne dizajniramo za sebe Empatiju prema ciljanoj skupini možemo razviti proučavanjem i intervjuiranjem korisnika te konstantnom znatiželjom Što su emocije? Kako biste vi definirali emocije? Koje emocije poznajete? Izvor vizuala: Freepik Emocije ● Prirodno su utkane u ljude, od rođenja ih komuniciramo prema okolini ○ ● ● Malena beba kroz plač daje do znanja da je nervozna Emocije su niz povezanih reakcija organizma na događaje koji su važni za potrebe, ciljeve ili opstanak Emocije nisu samo osjećaji jer kada osjećamo neku emociju, u nama se također stvara i biološka reakcija na nju Emocionalni dizajn ● ● ● ● Utjecaj na spontane reakcije korisnika i prve dojmove Kontroliranje podsvjesne procjene napretka prema postizanju cilja korisnika i utjecaj na dojam jednostavnosti prilikom korištenja Refleksija nakon susreta s dizajnom i dobivenom vrijednosti Stvaranje emotivne veze s proizvodom ili uslugom Emocije i izbor ● ● ● Moguće je povezati izbore s emocijama Emocije igraju veliku ulogu u procesu odlučivanja Snažne emocije često postižu bolje rezultate ○ ● ● Sreća, tuga, sram, ljubav, povezanost, odbojnost, ljutnja… Neugodne emocije dulje ostaju u sjećanju Ugodne emocije imaju veći trenutni utjecaj Što biste prvo otvorili? A podijelili? Izvor vizuala: Index Emocije i izbor ● ● ● Ugodne emocije rezultiraju većim brojem dijeljenja Neugodne emocije rezultiraju većim brojem klikova Pravilnim utjecajem na emocije korisnika možemo utjecati na izbor i dobiti željene rezultate Izbor ● ● ● ● Prilika ili moć donošenja odluke, to jest biranja između najmanje dvije opcije Kulturološka pozadina, životno okruženje i dosadašnja iskustva igraju ulogu u izboru Više izbora dovodi do “paralize”, a ne slobode – tako da je često “manje zapravo više” Pristranost (bias) je kada korisnici iz svjesnih ili nesvjesnih razloga biraju određenu opciju Persuazija ● ● UX dizajneri koriste različite tehnike kako bi potaknuli korisnike na određene akcije Tehnike persuazije: reciprocitet, dosljednost, društveni dokaz, simpatija, autoritet i oskudica Persuazija kroz dizajn Izvor vizuala: Netflix Persuazija kroz dizajn Izvor vizuala: Baremetrics Persuazija kroz dizajn Izvor vizuala: Travelocity Dizajn i moralnost ● ● ● ● S velikom moći dolazi i velika odgovornost Kroz persuaziju utječemo na korisnike i izbore koje donose Tanka je linija između dizajna koji koristi persuaziju za uvjerljiva ili primamljiva sučelja i onog koji koristi persuaziju kako bi natjerao korisnike na nešto što ne žele Kao dizajneri, ne smijemo manipulirati korisnicima na način koji bi im mogao naštetiti Primjer zlouporabe psihologije korisnika Kontekst ● ● ● Prije nekoliko godina preko određene internetske stranice korisnica starije dobi je naručila tablete za osteoporozu Nakon toga, periodično su stizali spam e-mailovi s novim ponudama i proizvodima Na idućim slideovima prikazan je pokušaj odjave s newslettera Na dnu newslettera skrivena je mogućnost odjave, postoji samo tekst “message clipped” Nakon klika, pojavila se dodatna rečenica na kojoj piše “kliknite ovdje”, ali nije stilizirana kao link Otvara se slatka, tužna ilustracija, a jezik prozora je postavljen na poljski iako je cijeli newsletter do sada bio na hrvatskom jeziku Prisjetite se tko je ciljana publika, zamislite da ste osoba od 60-70 godina koja prolazi kroz ovakav proces… “Bolje da ništa ne diram, možda sam nešto krivo kliknula, ne smeta mi baš toliko.” Ako se uspijete odjaviti, dobivate još jednu ilustraciju – tek toliko da se osjećate malo lošije oko svega Deceptive uzorci ● ● ● Trikovi koje tvrtke koriste prilikom dizajniranja proizvoda i usluga kako bi korisnike dovele do nečega što nisu namjeravali učiniti ili nisu u njihovom najboljem interesu Primjer neetičnog dizajna proizvoda Prethodno poznati i kao dark uzorci iako taj naziv danas izbjegavamo zbog neželjenih i krivih asocijacija Lažno kreiranje popularnosti E-commerce web stranice često stvaraju lažan osjećaj hitne reakcije korisnika i FOMO putem poruka poput ovih. FOMO (Fear Of Missing Out) je strah od propuštanja dobre prilike, često se koristi u marketingu. Izvor vizuala: ThredUp Nametljive akcije Windows tjera korisnika da kreira online korisnički račun, iako korisnik to ne želi, kontinuiranim otvaranjem prikazanog prozora. Ne postoji opcija “ne pitaj me ponovno”, samo “podsjeti me kasnije”. Izvor vizuala: Windows Privacy Zuckering Ovaj deceptive UX uzorak tjera korisnike na dijeljenje više osobnih informacija s tvrtkom nego što su namjeravali. Često se svodi na potvrdu odredbi i uvjeta nekog servisa unutar kojih su skriveni detalji o tome koje će podatke tvrtka skupljati, zbog čega i s kime će ih dijeliti. Izvor vizuala: Supercharge Design Ostali deceptive uzorci ● ● ● ● ● ● Skriveni troškovi otkriveni u zadnjem koraku prije kupnje Automatsko produživanje pretplata ili pokretanje pretplata nakon probnog perioda bez obavijesti korisnika Automatsko dodavanje proizvoda u košaricu Krađa kontakata Skriveni oglasi unutar sadržaja Pročitajte više ukoliko vas zanima ova tema Zakoni UX-a Zakoni UX-a ● ● ● Dobre i provjerene prakse koje se primjenjuju prilikom dizajna korisničkih iskustava i sučelja Uzimaju u obzir mentalne modele korisnika, to jest njihova uvjerenja u to kako bi neki sustav trebao funkcionirati Napomena: nije ih nužno učiti napamet niti znati točno po imenu, ali je dobro imati ih na umu prilikom dizajniranja Izvor vizuala: lawsofux.com Aesthetic-usability effect ● Ako je sučelje estetski privlačno, korisnik će dobiti dojam da je i lagano za koristiti ● Vizualna privlačnost ima velik utjecaj na dojam o sučelju, može i kompliciranije sučelje predstaviti kao jednostavnije Izvor vizuala: lawsofux.com Doherty threshold ● Produktivnost je na najvišoj razini za interakcije računala i korisnika koje su kraće od 400 ms ● Vratite povratnu informaciju korisnicima unutar tog vremena ili im zadržite interes animacijama (npr. progress bar) Izvor vizuala: lawsofux.com Fitts’ law ● Vrijeme potrebno za doseg mete je rezultat veličine mete i udaljenosti od početne pozicije ● Interaktivni elementi moraju biti dovoljne veličine te dovoljno udaljeni od drugih kako bi klik ili dodir bio što lakši Izvor vizuala: lawsofux.com Hick’s law ● Vrijeme potrebno za donošenje odluke povećava se s brojem i težinom opcija ● Minimizirajte opcije ● Razdvojite kompleksnije zadatke u više jednostavnijih koraka ● Sugerirajte akcije korisniku Hick’s law u stvarnom životu Izvor vizuala: NN Group, Apple Izvor vizuala: lawsofux.com Ziegarnik effect ● Ljudi se više sjećaju nedovršenih ili prekinutih zadataka od onih koje su uspješno dovršili ● Prikazujte dodatni ili nadolazeći sadržaj kako biste motivirali nastavak scrollanja ● Umjetni napredak prema cilju povećava šanse za dovršavanjem Izvor vizuala: lawsofux.com Miller’s law ● Prosječna osoba može zadržati 7 (plus/minus 2) informacija u kratkom vremenskom periodu ● Organizirajte sadržaj u manje, logične skupine Izvor vizuala: lawsofux.com Uniform connectedness ● Elemente koje vizualno spojimo smatramo povezanijim od elemenata koji nisu povezani vizualno ● Grupirajte elemente koji su slične prirode pomoću boja, linija, oblika ● Povežite elemente vizualno linijama ili strelicama Izvor vizuala: lawsofux.com Goal-gradient effect ● Šansa da osoba stigne na cilj povećava se s blizinom cilja ● Što je korisnik bliže cilju, više se trudi stići do cilja ● Vizualno prikažite cilj ● Motivirajte korisnike pomoću osjećaja napretka Goal-gradient effect u praksi Izvor vizuala: LinkedIn Izvor vizuala: lawsofux.com Jakob’s law ● Korisnici većinu svog vremena provode na drugim stranicama i unutar drugih aplikacija ● Korisnici vole kada vaš proizvod prati norme na koje su navikli ● Postoje usađena očekivanja korisnika, stoga promjene uvodite rijetko i pažljivo Izvor vizuala: lawsofux.com Law of common region ● Korisnici elemente doživljavaju kao grupe ako se nalaze u istom području s jasnom, vizualnom granicom ● Koristite linije i bordere kako biste grupirali elemente ● Koristite pozadine kako biste odvojili elemente u sekcije Izvor vizuala: lawsofux.com Parkinson’s law ● Svaki zadatak će rasti sve dok se ne iskoristi dostupno vrijeme ● Limitirajte vrijeme koje je potrebno kako bi se zadatak izvršio ● Skratite vrijeme popunjavanja formi pomoću auto-fill funkcionalnosti Izvor vizuala: lawsofux.com Law of proximity ● Korisnici grupiraju elemente koji su blizu jedan drugome ● Koristite veće i manje razmake kako biste informacije organizirali ovisno o tome koliko su svojstveno bliske ili udaljene (bliže = povezanije) Law of proximity u praksi Izvor vizuala: Google Izvor vizuala: lawsofux.com Law of Prägnanz ● Ljudi doživljavaju i interpretiraju dvoznačne i kompleksne vizuale u najjednostavnijoj formi pošto ta interpretacija zahtjeva najmanje kognitivnog opterećenja ● Tražimo jednostavnost i dojam uređenja u kompleksnim stvarima, vizualima i oblicima Izvor vizuala: lawsofux.com Law of similarity ● Ljudsko oko doživljava slične elemente kao povezane iako su vizualno razdvojeni ● Elemente koje prikazujemo kao slične vizualno, korisnici doživljavaju kao kontekstualno povezane ● Boja, oblik, veličina, orijentacija i pokret mogu signalizirati pripadnost istoj grupi Izvor vizuala: lawsofux.com Occam’s razor ● Ako postoji više hipoteza, trebalo bi odabrati onu koja podrazumijeva najmanje pretpostavki ● Najbolja metoda za smanjivanje kompleksnosti je ta da se kompleksnost izbjegne od početka ● Izbacite sve čijim izbacivanjem nećete negativno utjecati na korisničko iskustvo ili funkcionalnost Izvor vizuala: lawsofux.com Pareto principle ● Za velik broj događaja, 80 posto efekata je rezultat 20 posto uzroka ● Input i output često nisu jednako raspodijeljeni ● Najveći fokus stavite na područja koja donose najviše benefita korisnicima ● 20 posto uzroka stvara 80 posto problema korisnika Izvor vizuala: lawsofux.com Peak-end rule ● Korisnici prosuđuju iskustvo ponajviše po tome kako su se osjećali pri najintenzivnijoj točki i na kraju, a ne po prosjeku ili ukupnom iskustvu ● Dodajte važnost zadnjim trenutcima iskustva te intenzivnim točkama ● Identificirajte kada je iskustvo koje dizajnirate najkorisnije, najvrjednije ili najzabavnije Peak-end rule u praksi Izvor vizuala: Mailchimp Izvor vizuala: lawsofux.com Postel’s law ● Prihvaćajte liberalno, a šaljite konzervativno ● Budite fleksibilni oko toga što korisnik može i smije unijeti ili napraviti ● Pretpostavite razne mogućnosti unosa ● Ako postoje ograničenja, jasno ih komunicirajte ● Ako postoji povratna informacija, jasno ju vratite korisniku Izvor vizuala: lawsofux.com Serial position effect ● Ljudi se najviše sjećaju prve i zadnje informacije u nizu ● Postavite najmanje bitne podatke ili elemente u sredinu liste ● Glavne elemente u sučelju postavite lijevo i desno Izvor vizuala: lawsofux.com Tesler’s law ● Za svaki sustav postoji određena doza kompleksnosti koja se ne može smanjiti ● Svaki proces ima određenu kompleksnost koju na sebe mora preuzeti ili korisnik ili sistem ● Sve što korisnik ne mora nužno učiniti, preselite na sistem ● Želja za jednostavnošću ne smije stvoriti apstraktan rezultat Izvor vizuala: lawsofux.com Von Restorff effect ● Kada postoji više elemenata koji su slični, onaj koji se najviše razlikuje će se najviše istaknuti te će najvjerojatnije biti zapamćen ● Vizualno istaknite bitne elemente ● Ističite što manje elemenata Von Restorff effect u praksi Izvor vizuala: Miro Korisničko putovanje Korisničko putovanje ● ● ● User journey Niz koraka koje korisnik poduzima (ili bi mogao poduzeti) kako bi postigao određeni cilj Skala putovanja može biti kratka ili duga, ovisno o tome što promatramo i koji cilj imamo Izvor vizuala: Freepik Mapiranje korisničkog putovanja ● ● Proces mapiranja uključuje prikupljanje podataka o korisnikovim interakcijama, osjećajima i očekivanjima u svakoj fazi putovanja Proto-mape kreiramo pomoću mapiranja pretpostavki, one nisu bazirane na istraživanju, ali mogu pomoći otkriti jesu li naše pretpostavke točne ili krive Mapa korisničkog putovanja ● ● ● ● User (customer) journey map Grafički prikaz niza akcija koje korisnik poduzima u interakciji s proizvodom u zadanom periodu Vremenska crta uključuje i korisnikove misli i emocije kako bi kreirala sažetu priču i stvorila empatiju prema korisniku u određenom kontekstu Kreiramo ju s ciljem dubljeg razumijevanja korisnika, procesa, bolnih dodirnih točaka i mogućih prilika za poboljšanjem Glavne komponente ● ● ● ● ● ● Persona korisnika (mapu gledamo kroz tu leću) Scenarij i kontekst u kojem se korisnik nalazi Očekivanja korisnika Faze korisničkog putovanja kroz određeni period Akcije, razmišljanja i emocije Identificirane prilike Izvor vizuala: Freepik Izvor vizuala: NN Group Izvor vizuala: Interaction Design Foundation User journey map ili service blueprint ● ● Sjećate li se service blueprinta? Mape korisničkog iskustva vizualiziraju put korisnika, a service blueprint uzima u obzir i poslovne procese i radnike (dvostrana mapa iskustva) Izvor vizuala: NN Group Alati za kreiranje ● ● ● ● ● ● Papir i olovka ili ploča i markeri UXPressia FigJam LucidChart OmniGraffle Miro Demo: Korisničko putovanje Demo zadatak Zajednički kreirajmo proto-mapu korisničkog putovanja za naručivanje hrane putem nove mobilne aplikacije na tržištu. Ako ste ikad prošli taj proces u nekoj od postojećih aplikacija na tržištu, uključite se s prijedlozima o osjećajima, koracima koji su vas frustrirali ili oduševili i slično. Parcijalni ispit Hvala na pažnji!