Korisnički interfejs i iskustvo

Šta učimo ovog semestra

Petnaest sedmica, svaka s tri časa teorije i tri časa prakse. Danas: poglavlje 11 (Sedmica 11, označeno). Isti primjer kroz knjigu: DeliveryApp, narudžba N-1001 (24,50 €).

Literatura

1. B. Popović, K. Kuk: Informacioni sistemi, Kriminalističko-policijski univerzitet, Beograd, 2017.
2. J. S. Valacich, J. F. George: Modern Systems Analysis and Design, 9th ed., Pearson, 2020.
3. L. Jelenković: Sustavi za rad u stvarnom vremenu – skripta, FER, Zagreb, 2015.
4. D. Milićev: Programiranje u realnom vremenu – skripta, Beograd, 2002.
5. V. Kovačević, M. Popović: Sistemska programska podrška u realnom vremenu 1, FTN, Novi Sad, 2013.

Priča za početak

Zašto ovo poglavlje

U poglavljima 3 do 10 projektovali smo šta DeliveryApp radi, šta zna, od čega je napravljen i kako dijelovi razgovaraju. Sve to korisnik nikad ne vidi. Vidi samo ekran: jelovnik, korpu, dugme „Naruči”. Ako je ekran zbunjujući, ni najbolja arhitektura neće spasiti DeliveryApp, jer kupci će nazvati restoran telefonom, kao prije. Ovo poglavlje uči kako se projektuje ono što korisnik vidi i osjeća. Prvo upoznajemo korisnike kroz persone i putanju kroz aplikaciju. Zatim pravimo skice i prototipe i ocjenjujemo ih poznatim heuristikama. Na kraju učimo pristupačnost, za ljude koji slabije vide ili se teže kreću, i kako se ekran provjerava s pet stvarnih korisnika. Na praktičnoj nastavi crtamo papirni prototip, prenosimo ga u Figmu i testiramo ga.

Riječi ovog poglavlja (1/3)

• Korisnički interfejs (UI, user interface) – ono što korisnik vidi i dodiruje: ekrani, dugmad, tekst, boje.
• Korisničko iskustvo (UX, user experience) – kako se korisnik osjeća dok koristi sistem: da li uspijeva, koliko brzo, da li je zbunjen ili zadovoljan.
• Upotrebljivost – koliko lako, brzo i bez grešaka korisnik postiže svoj cilj.
• Persona – opis izmišljenog, ali tipičnog korisnika, s ciljevima i problemima.
• Putanja korisnika (user journey) – koraci kroz koje korisnik prolazi od namjere do cilja.
• Skica (wireframe) – grub crtež rasporeda ekrana, bez boja i slika.

Riječi ovog poglavlja (2/3)

• Prototip – model ekrana koji se može isprobati (papirni ili klikabilan, npr. u Figmi).
• Heuristika – iskustveno pravilo za procjenu, npr. „sistem uvijek pokazuje šta se dešava”.
• Pristupačnost – osobina da sistem mogu koristiti i ljudi s oštećenjem vida, sluha, pokreta ili pažnje.
• WCAG (Web Content Accessibility Guidelines) – međunarodne smjernice za pristupačnost web sadržaja.
• Omjer kontrasta – koliko je tekst svjetliji ili tamniji od pozadine; najmanje 4,5 : 1 za običan tekst.
• Čitač ekrana – program koji slijepim i slabovidnim osobama naglas čita sadržaj ekrana.

Riječi ovog poglavlja (3/3)

• Test upotrebljivosti – posmatranje stvarnih korisnika dok rješavaju zadatke na prototipu ili aplikaciji.
• Mračni obrazac (dark pattern) – dizajn koji namjerno navodi korisnika na nešto što ne želi.

Ciljevi poglavlja

Nakon poglavlja možete:

razlikovati UI i UX; napisati personu i putanju korisnika za DeliveryApp; nacrtati skicu ekrana i objasniti razliku između skice, makete i prototipa; napraviti papirni i klikabilan prototip; ocijeniti ekran pomoću deset heuristika upotrebljivosti; navesti pravila za mobilni ekran (veličina dugmeta, jedna glavna radnja); izračunati omjer kontrasta i reći da li zadovoljava WCAG; objasniti četiri principa pristupačnosti; organizovati test upotrebljivosti s pet korisnika i izračunati koliki dio problema otkriva; projektovati opasne radnje tako da se greška teško napravi, a lako ispravi; prepoznati mračne obrasce.

Plan poglavlja – Sedmica 11: tri časa teorije i tri časa praktične nastave

11.1 UI i UX

Dvije skraćenice se često miješaju.

Korisnički interfejs (UI, user interface) je ono što korisnik vidi i dodiruje: raspored ekrana, dugmad, tekst, boje, ikone. Korisničko iskustvo (UX, user experience) je ono što korisnik doživi: da li je uspio naručiti, koliko je trajalo, da li se osjećao sigurno ili zbunjeno, da li će sutra opet otvoriti aplikaciju.

Slika iz života: kvaka na vratima. UI je izgled kvake: oblik, boja, materijal. UX je da li znate, bez razmišljanja, treba li vrata gurnuti ili povući. Lijepa kvaka na vratima koja se otvaraju na pogrešnu stranu je dobar UI i loš UX. Svi smo bar jednom gurali vrata na kojima piše „vuci”.

UX nije samo ekran. UX DeliveryApp uključuje i to da li je hrana stigla topla, da li je cijena bila ista kao na ekranu i da li je dostavljač našao ulaz. Ali ekran je mjesto gdje projektant najviše može pomoći, ili odmoći.

11.1 UI i UX

Za DeliveryApp već imamo jedan UX zahtjev iz poglavlja 3: NZ-4: novi kupac završi prvu narudžbu za najviše 3 minute bez pomoći; kontrast teksta najmanje 4,5 : 1. Ovo poglavlje pokazuje kako se do toga dolazi i kako se provjerava.

Ukratko – 11.1 UI i UX

• UI je ono što korisnik vidi i dodiruje, a UX ono što doživi.
• Kao kvaka: lijep oblik je UI, a znati bez razmišljanja da li vrata gurnuti ili povući je UX.
• Za DeliveryApp važi NZ-4: prva narudžba za najviše 3 minute i kontrast najmanje 4,5 : 1.

11.2 Persone

Projektant nije korisnik. Student informatike koji projektuje DeliveryApp zna šta je korpa, prevlačenje prstom i ikonica s tri crtice. Kupci DeliveryApp to ne moraju znati. Zato UX počinje upoznavanjem korisnika: intervjuima i posmatranjem iz poglavlja 3. Ono što se sazna sažima se u persone.

Persona je opis izmišljenog, ali tipičnog korisnika, napravljen od stvarnih podataka iz intervjua. Ima godine, situaciju, cilj, uređaj i ono što je nervira. Persona pomaže timu da na sastanku ne kaže „korisnik bi htio…”, nego „da li bi P-2 ovo razumio?”.

Tri persone DeliveryApp:

11.2 Persone

Primijetite da su persone različite. Ekran koji odgovara P-1 (gusto, brzo, puno opcija) može biti nemoguć za P-2. Dobar dizajn radi za sve tri, a ako se mora birati, bira se za onoga kome je najteže. Ono što je lako za P-2 obično je lako i za P-1, ali ne i obrnuto.

Ukratko – 11.2 Persone

• Projektant nije korisnik; zato UX počinje upoznavanjem stvarnih korisnika.
• Persona je izmišljen, ali tipičan korisnik sažet iz stvarnih intervjua: godine, situacija, uređaj, cilj, problemi.
• DeliveryApp ima tri persone: studenticu P-1, penzionera P-2 i kuhara P-3.
• Kad se mora birati, dizajn se prilagođava onome kome je najteže.

11.3 Putanja korisnika

Putanja korisnika (user journey) je niz koraka kroz koje korisnik prolazi od namjere („gladan sam”) do cilja („jedem”), uz ono što misli i osjeća na svakom koraku. Ona pokazuje gdje korisnik zastane, sumnja ili odustane.

Putanja P-2 (penzioner) pri prvoj narudžbi:

11.3 Putanja korisnika

Putanja se mjeri. NZ-4 traži da novi kupac završi narudžbu za najviše 3 minute (180 sekundi). Ako na testu (11.8) P-2 potroši 60 sekundi samo na korak 1, jasno je gdje dizajn treba popraviti.

Svaki red putanje je povezan s modelima iz ranijih poglavlja: koraci su glavni tok UC-01 (poglavlje 5), poruka „Je li dodano?” je pitanje stanja korpe, a „Kad stiže?” je stanje narudžbe iz poglavlja 7, koje ekran mora pokazati riječima koje P-2 razumije („Restoran priprema vašu hranu”), a ne U_PRIPREMI.

Ukratko – 11.3 Putanja korisnika

• Putanja korisnika pokazuje korake od namjere do cilja, uz misli i osjećaj na svakom koraku.
• Putanja otkriva gdje korisnik zastane ili odustane i daje prilike za dizajn.
• Putanja se mjeri u sekundama; NZ-4 dozvoljava 180 sekundi za prvu narudžbu.
• Stanja iz modela ekran prikazuje riječima korisnika, a ne imenima iz koda.

Provjeri se

1. Koja je razlika između UI i UX? UI je ono što korisnik vidi i dodiruje, a UX ono što doživi dok koristi sistem.
2. Iz čega se pravi dobra persona? Iz stvarnih intervjua i posmatranja korisnika.
3. Kako ekran treba prikazati stanje U_PRIPREMI? Riječima korisnika, npr. „Restoran priprema vašu hranu”.

Odgovori: tipka R ili klik na zamućeno polje.

11.4 Skica, maketa, prototip

Ekran se ne pravi odmah u konačnom obliku. Ide se u koracima, od jeftinog ka skupom, da bi se greške našle dok su jeftine (sjetite se slike 1.3):

1. Skica (wireframe) – grub crtež rasporeda: gdje je naslov, gdje lista jela, gdje dugme. Bez boja, bez slika, često olovkom. Odgovara na pitanje „šta je gdje”. Pravi se za nekoliko minuta i baca bez žaljenja.
2. Maketa (mockup) – izgled koji liči na konačni: boje, slova, slike, ali se ne može kliknuti. Odgovara na pitanje „kako izgleda”.
3. Prototip – model koji se može isprobati. Papirni prototip su nacrtani ekrani na papirićima: korisnik „dodirne” dugme prstom, a član tima mu dodaje sljedeći papirić. Klikabilan prototip pravi se u alatu kao što je Figma: ekrani su povezani, dugme vodi na sljedeći ekran, ali iza njih nema servera ni baze.

Slika iz života: arhitekt kuće prvo nacrta tlocrt na salveti (skica), zatim napravi lijep crtež fasade (maketa), pa trodimenzionalni model kroz koji se može „prošetati” (prototip). Tek onda se zida.

Papirni prototip zvuči djetinjasto, ali je jedan od najkorisnijih alata u UX-u. Pravi se za sat vremena, ljudi se ne ustručavaju kritikovati papir (dok im se uglađen ekran „ne da kvariti”), i odmah se vidi gdje korisnik zastane.

Za prvu verziju DeliveryApp dovoljno je četiri ekrana: jelovnik restorana, korpa, pregled i plaćanje, praćenje narudžbe.

Ukratko – 11.4 Skica, maketa, prototip

• Ekran se pravi u koracima: skica (šta je gdje), maketa (kako izgleda), prototip (može se isprobati).
• Papirni prototip je jeftin, brz i ljudi ga slobodno kritikuju.
• Klikabilan prototip u Figmi povezuje ekrane bez servera i baze.
• Prva verzija DeliveryApp ima četiri ekrana: jelovnik, korpa, pregled i plaćanje, praćenje.

11.5 Deset heuristika upotrebljivosti

Kako ocijeniti ekran prije nego što ga vide korisnici? Danski stručnjak za upotrebljivost Jakob Nielsen objavio je sredinom devedesetih deset heuristika: iskustvenih pravila po kojima stručnjak pregleda ekran i traži probleme. I danas se koriste svuda.

11.5 Deset heuristika upotrebljivosti

11.5 Deset heuristika upotrebljivosti

Primijetite heuristiku 9 na primjeru N-1003 (voćna salata za 4,50 €). Loša poruka je „Greška 422”. Bolja je „Narudžba nije ispravna”. Najbolja kaže šta nije u redu i šta uraditi: „Najmanja narudžba je 5,00 €. Dodajte još 0,50 €.” Server vraća 422 (poglavlje 10), a aplikacija ga prevodi na jezik korisnika.

Heuristička procjena radi se tako da dva ili tri člana tima, svaki sam, prođu kroz prototip s listom heuristika i zapišu svaki problem, uz ozbiljnost od 0 (nije problem) do 4 (katastrofa, mora se popraviti prije puštanja). Zatim se spiskovi spoje. Više ocjenjivača nađe više problema, jer svako primijeti nešto drugo.

Ukratko – 11.5 Deset heuristika upotrebljivosti

• Nielsenovih deset heuristika su iskustvena pravila za pregled ekrana.
• Među najvažnijima su vidljivo stanje sistema, jezik korisnika, sprečavanje grešaka i jasna pomoć pri greški.
• Dobra poruka o greški kaže šta nije u redu i šta uraditi, npr. „Dodajte još 0,50 €”.
• Heurističku procjenu radi više ocjenjivača odvojeno, s ozbiljnošću od 0 do 4.

11.6 Pravila mobilnog ekrana

Kupci DeliveryApp naručuju uglavnom s mobitela, često jednom rukom, u hodu, na suncu. Nekoliko pravila iz prakse:

1. Mobilno prvo (mobile first). Ekran se projektuje prvo za mali telefon, pa se proširuje za tablet i računar. Obrnuto ne ide: ono što stane na veliki ekran rijetko stane na mali.
2. Dovoljno velika dugmad. Prst je širok oko jednog centimetra. Smjernice proizvođača preporučuju područje za dodir od oko 44 do 48 jedinica (Apple 44 tačke, Google Material 48 dp), a to je oko 7 do 10 milimetara. Sitna dugmad jedno do drugog su recept za pogrešan dodir, posebno za P-2.
3. Jedna glavna radnja po ekranu. Na ekranu korpe glavna radnja je „Nastavi na plaćanje”: najveće dugme, istaknuta boja, dole gdje palac lako dosegne. Sporedne radnje („Ukloni”, „Dodaj kod”) su manje.
4. Sadržaj prije ukrasa. Na malom ekranu svaki piksel je vrijedan. Cijena i dugme su važniji od velike slike pozadine.
5. Brzina je dio dizajna. Ako jelovnik učitava 5 sekundi, P-1 će zatvoriti aplikaciju. Ovdje se UX dodiruje s arhitekturom (keš jelovnika, poglavlje 9).
6. Tastatura po polju. Za broj telefona aplikacija otvara brojčanu tastaturu, a za e-mail tastaturu sa znakom @. Sitnica koja štedi vrijeme.

Ukratko – 11.6 Pravila mobilnog ekrana

• Ekran se projektuje prvo za mali telefon.
• Područje za dodir treba biti oko 44 do 48 jedinica, odnosno oko 7 do 10 milimetara.
• Svaki ekran ima jednu glavnu radnju, velikim dugmetom tamo gdje palac lako dosegne.
• Brzina učitavanja i prava tastatura po polju dio su dizajna.

Provjeri se

1. Koja je razlika između skice i prototipa? Skica je grub crtež rasporeda, a prototip se može isprobati.
2. Koju heuristiku krši poruka „Greška 422”? Pomoć pri greški (i jezik korisnika): ne kaže šta nije u redu ni šta uraditi.
3. Koliko otprilike treba biti područje za dodir? Oko 44 do 48 jedinica, oko 7 do 10 milimetara.

Odgovori: tipka R ili klik na zamućeno polje.

11.7 Pristupačnost

Pristupačnost znači da sistem mogu koristiti i ljudi koji slabije vide, ne vide, slabije čuju, teže pomjeraju ruke ili se teže koncentrišu. To nije mala grupa: tu su stariji ljudi (kao P-2), ljudi s trajnim oštećenjem, ali i svi mi u nekim trenucima, na primjer s telefonom na jakom suncu ili s jednom rukom zauzetom (kao P-3 u kuhinji).

Međunarodne smjernice za pristupačnost weba zovu se WCAG (Web Content Accessibility Guidelines), a važeća verzija je 2.2, iz 2023. godine. U Evropskoj uniji Evropski akt o pristupačnosti od juna 2025. traži pristupačnost za mnoge digitalne usluge, uključujući e-trgovinu, pa je to za aplikaciju kao što je DeliveryApp i zakonska, a ne samo dobra praksa.

WCAG ima četiri principa, čija početna slova na engleskom daju riječ POUR:

11.7 Pristupačnost

11.7 Pristupačnost

Omjer kontrasta

Najčešći i najlakše provjerljiv zahtjev je kontrast: koliko se tekst razlikuje od pozadine. WCAG definiše omjer kontrasta:

Čemu služi. L₁ je relativna svjetlina svjetlije boje, a L₂ tamnije; svjetlina je broj od 0 (crno) do 1 (bijelo), koji se računa iz crvene, zelene i plave komponente boje (alati to računaju sami). Omjer ide od 1 : 1 (ista boja) do 21 : 1 (crno na bijelom). Za običan tekst WCAG traži najmanje 4,5 : 1, a za veliki tekst (oko 24 piksela i više, ili podebljan od oko 19 piksela) najmanje 3 : 1. DeliveryApp je to već upisao u NZ-4.

Provjereni primjeri boja koje bi tim mogao izabrati:

11.7 Pristupačnost

11.7 Pristupačnost

Lijepa narandžasta boja DeliveryApp s bijelim tekstom ne prolazi ni za veliki tekst. Rješenje nije odbaciti boju, nego staviti tamni tekst na narandžasto, ili narandžastu koristiti samo za ukras, a dugme napraviti tamnijim.

Još tri pravila koja se lako zaborave:

• Ne prenositi informaciju samo bojom. „Crveno = nedostupno” ne vidi osoba koja ne razlikuje crvenu i zelenu (a takvih je među muškarcima oko osam od sto). Uz boju ide i riječ: „Nedostupno”.
• Svaka slika i ikonica ima tekstualni opis (alt), koji čitač ekrana pročita: „Pizza Margarita, 9,50 €”, a ne „slika123.jpg”.
• Tekst se može povećati u postavkama telefona, a ekran se ne raspada kad P-2 uključi velika slova.

Ukratko – 11.7 Pristupačnost

• Pristupačnost znači da sistem mogu koristiti i ljudi s oštećenjem vida, sluha, pokreta ili pažnje, a često i svi mi u teškim uslovima.
• WCAG 2.2 ima četiri principa: opažljivo, upravljivo, razumljivo i robusno.
• Omjer kontrasta je (L₁ + 0,05) / (L₂ + 0,05); običan tekst traži najmanje 4,5 : 1, veliki 3 : 1.
• Bijelo na narandžastoj #E67E22 daje samo 2,9 : 1 i ne prolazi.
• Informacija se ne prenosi samo bojom, slike imaju opis, a tekst se može povećati.

11.8 Test upotrebljivosti s pet korisnika

Heuristike pomažu, ali ništa ne zamjenjuje posmatranje stvarnog čovjeka dok koristi prototip. To je test upotrebljivosti. Postupak je jednostavan:

1. Zadaci. Pripremite 3 do 5 realnih zadataka, rečenicama korisnika, bez nagovještaja gdje kliknuti. Npr. „Naručite dvije pizze Margarita i sok na adresu Ulica lipa 7.” (a ne „kliknite na Picerija pa na +”).
2. Učesnici. Pozovite ljude koji liče na persone, ne kolege iz tima.
3. Glasno razmišljanje. Zamolite učesnika da govori šta misli dok radi („tražim gdje je korpa…”). Vi ne pomažete i ne objašnjavate; samo bilježite gdje zastane.
4. Mjerenje. Za svaki zadatak zabilježite: je li uspio, koliko je trajalo (za NZ-4: ispod 180 sekundi?) i koliko grešaka je napravio.
5. Izvještaj. Spisak problema, po ozbiljnosti, s prijedlogom popravke.

Koliko korisnika treba? Nielsen i Landauer su devedesetih pokazali da jedan korisnik, u prosjeku, otkrije oko 31 % problema upotrebljivosti jednog interfejsa. Ako svaki korisnik nezavisno otkrije 31 %, dio problema koji otkrije n korisnika je:

11.8 Test upotrebljivosti s pet korisnika

Čemu služi. Formula pokazuje kako se korist testa smanjuje sa svakim novim korisnikom. Za n = 3: 1 − 0,69³ ≈ 0,67, dakle oko 67 %. Za n = 5: 1 − 0,69⁵ ≈ 0,84, oko 84 %. Za n = 10: oko 98 %. Prvih pet korisnika otkrije većinu problema; dalji korisnici uglavnom ponavljaju iste. Zato je preporuka: testirati s pet korisnika, popraviti, pa ponovo testirati s pet, umjesto jednog velikog testa s petnaest. Broj 31 % je prosjek iz istraživanja i u konkretnom projektu može biti drugačiji, ali smjer zaključka vrijedi.

11.8 Test upotrebljivosti s pet korisnika

Ukratko – 11.8 Test upotrebljivosti s pet korisnika

• Test upotrebljivosti je posmatranje stvarnih korisnika dok rješavaju realne zadatke, uz glasno razmišljanje i bez pomoći.
• Mjere se uspjeh, vrijeme (za NZ-4 ispod 180 s) i broj grešaka.
• Po formuli P(n) = 1 − (1 − 0,31)ⁿ pet korisnika otkrije oko 84 % problema.
• Bolje je testirati u više malih krugova nego jednom velikom.

11.9 Opasne radnje i poštene radnje

Priča s Havaja pokazuje da je najvažnija UX odluka često ona o opasnim radnjama: radnjama koje se teško ili nikako ne mogu poništiti. U DeliveryApp to su plaćanje, otkazivanje i, za restoran, odbijanje narudžbe. Pravila:

1. Opasna radnja izgleda drugačije. Dugme „Odbij narudžbu” nije iste boje i na istom mjestu kao „Prihvati”. Na Havajima su vježba i prava uzbuna izgledale isto; to se ne smije ponoviti nigdje.
2. Potvrda s konkretnim tekstom. Ne „Da li ste sigurni?”, nego „Platiti 24,50 € karticom •••• 4242?”. Konkretan tekst natjera čovjeka da pročita.
3. Mogućnost poništavanja kad god se može. Bolje „Narudžba je otkazana. [Poništi]” u narednih 10 sekundi nego deset pitanja unaprijed.
4. Plan za ispravku. Ako greška ipak prođe, mora postojati brz, uvježban način da se ispravi. Na Havajima je ispravka trajala 38 minuta jer niko nije predvidio taj slučaj.
5. Dvije osobe za najopasnije. Gdje greška može uplašiti hiljade ljudi ili prebaciti velik novac, radnju potvrđuje druga osoba. Za DeliveryApp to nije potrebno za narudžbu, ali jeste, na primjer, za administratorsko brisanje restorana.

Na drugoj strani su mračni obrasci (dark patterns): dizajn koji namjerno navodi korisnika na nešto što ne želi. Primjeri: unaprijed označeno „Dodaj napojnicu 15 %”; skriveni trošak koji se pojavi tek na posljednjem ekranu; dugme „Ne, ne želim uštedjeti” umjesto običnog „Ne, hvala”; otkazivanje pretplate skriveno u pet nivoa menija. Mračni obrasci mogu kratkoročno donijeti novac, ali uništavaju povjerenje, a u Evropskoj uniji mnogi su i zabranjeni propisima o zaštiti potrošača. DeliveryApp je u viziji (poglavlje 1) obećao „bez skrivenih troškova”: cijena dostave vidi se prije plaćanja, i to je i UX i etička odluka.

Ukratko – 11.9 Opasne radnje i poštene radnje

• Opasne radnje moraju izgledati drugačije od običnih i tražiti potvrdu s konkretnim tekstom.
• Gdje god se može, nudi se poništavanje, a za grešku koja prođe postoji uvježban plan ispravke.
• Najopasnije radnje potvrđuje druga osoba, kao na Havajima poslije 2018.
• Mračni obrasci navode korisnika na ono što ne želi i uništavaju povjerenje; DeliveryApp pokazuje dostavu prije plaćanja.

Provjeri se

1. Prolazi li siva #7F8C8D na bijelom za običan tekst? Ne; omjer je oko 3,5 : 1, a treba 4,5 : 1.
2. Koliki dio problema otkrije pet korisnika na testu? Oko 84 %.
3. Šta je bila glavna greška interfejsa na Havajima 2018? Vježba i prava uzbuna koristile su iste upite, bez potvrde druge osobe i bez spremnog postupka ispravke.

Odgovori: tipka R ili klik na zamućeno polje.

Praktična nastava – prototip i test DeliveryApp

Cilj je napraviti prototip četiri ekrana DeliveryApp, ocijeniti ga heuristikama, provjeriti kontrast i testirati ga s korisnicima. Rezultati idu u folder ux/ repozitorija deliveryapp-projekat.

Korak 1 – Persone i putanja (30 minuta)

1. U ux/persone.md prepišite tri persone iz 11.2 i dodajte jednu svoju, na osnovu intervjua iz poglavlja 3 (npr. dostavljač).
2. Za svoju personu napišite putanju korisnika od šest koraka, s mislima, osjećajem i prilikom za dizajn.

Korak 2 – Papirni prototip (45 minuta)

1. Na četiri papira (ili kartice veličine telefona) nacrtajte olovkom ekrane: jelovnik R-1, korpa, pregled i plaćanje, praćenje narudžbe. Bez boja; samo raspored, tekst i dugmad.
2. Na ekranu pregleda moraju biti brojevi N-1001: artikli 21,50 €, dostava 3,00 €, ukupno 24,50 €.
3. Nacrtajte i dva „ekrana greške”: N-1003 (manje od 5,00 €) i N-1004 (izvan zone), s porukama koje kažu šta uraditi.
4. Slikajte papire telefonom i stavite slike u ux/papir/.

Korak 3 – Klikabilan prototip u Figmi (60 minuta)

1. Napravite besplatan nalog na [figma.com](https://www.figma.com) i novi Design file.
2. Napravite četiri okvira (Frame) veličine telefona (npr. 390 × 844) i prenesite skice. Koristite jednu boju za glavnu radnju i dvije veličine slova.
3. U kartici Prototype povežite dugmad: „Dodaj” → korpa, „Nastavi” → pregled, „Plati” → praćenje.
4. Dugmad neka budu najmanje 48 jedinica visoka. Glavno dugme stavite dole.
5. Link na prototip (Share → Copy link) upišite u ux/README.md.

Korak 4 – Kontrast

Za svaki par boje teksta i pozadine u svom prototipu izmjerite omjer kontrasta (Figma dodatak Contrast, ili stranica WebAIM Contrast Checker) i upišite u tabelu: par boja, omjer, prolazi li za običan i za veliki tekst. Popravite svaki par koji ne prolazi 4,5 : 1 za običan tekst.

Korak 5 – Heuristička procjena

Dvoje studenata (ne autor prototipa) odvojeno pregleda prototip po deset heuristika iz 11.5 i zapiše svaki problem: ekran, heuristika, opis, ozbiljnost 0–4. Spiskove spojite u ux/heuristike.md.

Korak 6 – Test s pet korisnika

1. Pripremite tri zadatka: (1) „Naručite dvije pizze Margarita i sok na Ulicu lipa 7 i recite koliko plaćate.” (2) „Iskoristite studentski kod.” (3) „Recite kada će stići vaša hrana.”
2. Testirajte s pet osoba koje nisu u vašem timu (bar jedna starija od 50 godina, ako je moguće). Ne pomažite; zamolite ih da glasno razmišljaju.
3. Za svaki zadatak zapišite: uspjeh (da/ne), vrijeme u sekundama, broj grešaka, gdje je zastao.
4. U ux/test.md napišite izvještaj: tabela rezultata, tri najozbiljnija problema s prijedlogom popravke, i odgovor na pitanje da li prvi zadatak staje u 180 sekundi (NZ-4).

Korak 7 – AI kao pomoćnik dizajnera (opcionalno)

Opišite AI asistentu svoj ekran korpe riječima (ili mu, ako alat to dozvoljava, pokažite sliku prototipa, bez ičijih ličnih podataka) i zatražite: „Ocijeni ovaj ekran po Nielsenovih deset heuristika i predloži tri popravke.” Uporedite s nalazima heurističke procjene i testa. Koji problem je AI primijetio, a ljudi nisu, i obrnuto? Primijetite da AI ne može zamijeniti test sa stvarnim ljudima: ne zna gdje će P-2 zastati.

Rezultat koji se predaje: folder ux/ sa personama i putanjom, slikama papirnog prototipa, linkom na Figma prototip, tabelom kontrasta, heurističkom procjenom i izvještajem o testu s pet korisnika.

Vježba za studenta 1 – UI ili UX.

Vježba za studenta 1 – UI ili UX. – rješenje

Vježba za studenta 2 – poruka o greški.

Vježba za studenta 2 – poruka o greški. – rješenje

Vježba za studenta 3 – kontrast.

Vježba za studenta 3 – kontrast. – rješenje

Vježba za studenta 4 – broj korisnika.

Vježba za studenta 4 – broj korisnika. – rješenje

Vježba za studenta 5 – mračni obrazac.

Vježba za studenta 5 – mračni obrazac. – rješenje

Sažetak u pet rečenica

1. Korisnički interfejs je ono što korisnik vidi i dodiruje, a korisničko iskustvo ono što doživi, i priča s Havaja 2018. pokazuje da loše projektovan ekran može uplašiti hiljade ljudi.
2. UX počinje upoznavanjem korisnika kroz persone sažete iz intervjua i putanju korisnika koja se mjeri u sekundama, za DeliveryApp najviše 180 sekundi do prve narudžbe.
3. Ekrani se prave od skice preko makete do papirnog i klikabilnog prototipa, a ocjenjuju se Nielsenovim heuristikama i pravilima mobilnog ekrana.
4. Pristupačnost po WCAG-u traži opažljiv, upravljiv, razumljiv i robustan sadržaj, s kontrastom najmanje 4,5 : 1, koji bijelo na narandžastoj (2,9 : 1) ne ispunjava.
5. Test s pet korisnika otkrije oko 84 % problema, a opasne radnje moraju izgledati drugačije, tražiti konkretnu potvrdu i imati plan ispravke, bez mračnih obrazaca.

Pitanja za ponavljanje

1. Šta se desilo na Havajima 13. januara 2018. i koje su bile greške interfejsa?
2. Koja je razlika između UI i UX? Objasnite primjerom kvake.
3. Šta je persona i iz čega se pravi? Opišite jednu personu DeliveryApp.
4. Šta je putanja korisnika i kako se mjeri?
5. Koja je razlika između skice, makete i prototipa? Zašto je koristan papirni prototip?
6. Navedite pet Nielsenovih heuristika s primjerom iz DeliveryApp.
7. Kako izgleda dobra poruka o greški? Dajte primjer za N-1003.
8. Navedite četiri pravila mobilnog ekrana.
9. Šta je pristupačnost i koja su četiri principa WCAG-a?
10. Napišite formulu omjera kontrasta i navedite granice za običan i veliki tekst.
11. Zašto se informacija ne smije prenositi samo bojom?
12. Kako se izvodi test upotrebljivosti?
13. Koliki dio problema otkrije pet korisnika i kako se to računa?
14. Kako se projektuju opasne radnje? Šta su mračni obrasci?