Poglavlje 11: Korisnički interfejs i iskustvo
Priča za početak. U subotu, 13. januara 2018. godine, u 8:07 ujutro, na mobitele stanovnika i turista na Havajima stigla je poruka: „PRIJETNJA BALISTIČKE RAKETE PREMA HAVAJIMA. ODMAH POTRAŽITE SKLONIŠTE. OVO NIJE VJEŽBA.” Ljudi su zvali porodice da se oproste, sakrivali se u kupatila hotela, a neki roditelji spuštali su djecu u šahtove kanalizacije. Rakete nije bilo. Poruku je poslao radnik državne agencije za vanredne situacije tokom smjene u kojoj se izvodila vježba. Savezna komisija za komunikacije (FCC) kasnije je utvrdila da je radnik pogrešno razumio poruku vježbe i povjerovao da je napad stvaran, ali i da sam sistem nije imao razumne zaštite: ekrani za vježbu i za pravu uzbunu koristili su iste upite, tekst je bio unaprijed pripremljen, pa se kroz postupak moglo proći klikom bez razmišljanja, a za slanje stvarne uzbune nije trebala potvrda druge osobe. Najgore je bilo što ni za ispravku nije postojao spreman postupak: zvanična ispravka kroz isti sistem uzbunjivanja stigla je tek 38 minuta kasnije. Poslije toga uvedeno je pravilo da stvarnu uzbunu mora potvrditi drugi čovjek. Pouka je da se korisnički interfejs ne projektuje samo da bude lijep, nego da čovjek koji je umoran, uplašen ili zbunjen teško napravi tešku grešku, i da je lako ispravi.
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.
Literatura. Osnovna literatura predmeta:
- B. Popović, K. Kuk: Informacioni sistemi, Kriminalističko-policijski univerzitet, Beograd, 2017.
- J. S. Valacich, J. F. George: Modern Systems Analysis and Design, 9th ed., Pearson, 2020.
- L. Jelenković: Sustavi za rad u stvarnom vremenu – skripta, FER, Zagreb, 2015.
- D. Milićev: Programiranje u realnom vremenu – skripta, Beograd, 2002.
- V. Kovačević, M. Popović: Sistemska programska podrška u realnom vremenu 1, FTN, Novi Sad, 2013.
Riječi ovog poglavlja.
- 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.
- 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.
- 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
| Čas | Sadržaj | Na času |
|---|---|---|
| Teorija 1 | 11.1–11.3 UI i UX; persone; putanja korisnika | Tri persone DeliveryApp; 3 minute do narudžbe |
| Teorija 2 | 11.4–11.6 Skice i prototipi; heuristike; mobilni ekran | Ocjena ekrana korpe |
| Teorija 3 | 11.7–11.9 Pristupačnost; test s pet korisnika; opasne radnje | 4,5 : 1; 84 %; Havaji 2018 |
| Praksa 1–3 | Papirni prototip; Figma; test upotrebljivosti | Četiri ekrana i izvještaj o testu |
Dio 1 – Korisnik u centru
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.
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.
- 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:
| P-1 Studentica | P-2 Penzioner | P-3 Kuhar u R-2 | |
|---|---|---|---|
| Godine | 21 | 68 | 45 |
| Situacija | naručuje između predavanja, često s drugaricama | živi sam, slabije vidi, naručuje kad ne može izaći | radi s masnim rukama, u buci |
| Uređaj | novi telefon, uvijek pri ruci | stariji telefon s velikim slovima | tablet na zidu kuhinje |
| Cilj | brzo i jeftino (kod STUDENT10) | sigurno, bez greške, da zna kada stiže | da vidi sljedeću narudžbu bez dodirivanja |
| Nervira je/ga | dugi obrasci, sporo učitavanje | sitna slova, dugmad koja se ne vide, engleske riječi | zvuk koji se ne čuje, sitan tekst, previše dodira |
| Rečenica | „Ako traje duže od minute, zovem telefonom.” | „Bojim se da ću pritisnuti nešto pogrešno.” | „Ruke su mi uvijek zauzete.” |
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.
Česta zabluda. „Persona je marketinški izmišljotina.” Loša persona jeste: izmišljena za stolom, bez ijednog intervjua. Dobra persona je sažetak stvarnih razgovora i mijenja se kad se sazna nešto novo. Ako tim ne može reći iz kojeg intervjua dolazi rečenica persone, persona nije dobra.
Ukratko.
- 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:
| Korak | Šta radi | Šta misli | Osjećaj | Prilika za dizajn |
|---|---|---|---|---|
| 1. Otvara aplikaciju | traži Piceriju | „Gdje je meni?” | zbunjen | restorani odmah na početnom ekranu, velikim slovima |
| 2. Bira jela | dodaje Margaritu | „Je li dodano?” | nesiguran | jasna potvrda: „Dodano u korpu (1)” |
| 3. Unosi adresu | kuca ulicu | „Koliko će koštati dostava?” | zabrinut | cijena dostave odmah poslije adrese |
| 4. Pregled | vidi ukupno | „24,50 €, u redu.” | smiren | velik i jasan zbir, bez skrivenih troškova |
| 5. Plaća | unosi karticu | „Je li sigurno?” | nervozan | poznati znak sigurnog plaćanja, jasan tekst |
| 6. Čeka | gleda status | „Kad stiže?” | strpljiv | stanje narudžbe riječima i procijenjeno vrijeme |
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.
- 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.
- 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.
- Iz čega se pravi dobra persona? – Iz stvarnih intervjua i posmatranja korisnika.
- Kako ekran treba prikazati stanje U_PRIPREMI? – Riječima korisnika, npr. „Restoran priprema vašu hranu”.
Dio 2 – Od skice do prototipa
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):
- 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.
- Maketa (mockup) – izgled koji liči na konačni: boje, slova, slike, ali se ne može kliknuti. Odgovara na pitanje „kako izgleda”.
- 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.
- 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.
| Heuristika | Šta znači | Na ekranu DeliveryApp |
|---|---|---|
| 1. Vidljivo stanje sistema | korisnik uvijek zna šta se dešava | „Dodano u korpu (2)”; traka „Restoran priprema” |
| 2. Jezik korisnika | riječi i pojmovi koje korisnik zna | „Dostava”, a ne „logistička naknada”; nikad U_PRIPREMI |
| 3. Kontrola i sloboda | lako se vratiti i poništiti | „Ukloni” uz svaku stavku; „Nazad” na svakom ekranu |
| 4. Dosljednost | isto izgleda i radi isto svuda | dugme za glavnu radnju uvijek iste boje i na istom mjestu |
| 5. Sprečavanje grešaka | bolje spriječiti nego poslije javiti | izvan zone: dugme „Plati” nije aktivno, uz objašnjenje |
| 6. Prepoznavanje, ne pamćenje | ne tjerati korisnika da pamti | sačuvana adresa; slike jela uz nazive |
| 7. Fleksibilnost | prečice za iskusne | „Ponovi posljednju narudžbu” za P-1 |
| 8. Jednostavnost | samo ono što treba | na ekranu korpe nema reklama ni nepotrebnih opcija |
| 9. Pomoć pri greški | poruka kaže šta nije u redu i šta raditi | „Najmanja narudžba je 5,00 €. Dodajte još 0,50 €.” |
| 10. Pomoć i dokumentacija | kratka pomoć kad zatreba | „Kako se računa dostava?” uz cijenu dostave |
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.
- 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:
- 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.
- 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.
- 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.
- Sadržaj prije ukrasa. Na malom ekranu svaki piksel je vrijedan. Cijena i dugme su važniji od velike slike pozadine.
- 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).
- Tastatura po polju. Za broj telefona aplikacija otvara brojčanu tastaturu, a za e-mail tastaturu sa znakom @. Sitnica koja štedi vrijeme.
Na času. Uzmite telefon i otvorite bilo koju aplikaciju za naručivanje ili kupovinu. Možete li glavnu radnju na ekranu korpe pritisnuti palcem ruke kojom držite telefon? Šta je najsitnije dugme koje vidite i koliko je široko u odnosu na vaš prst?
Ukratko.
- 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.
- Koja je razlika između skice i prototipa? – Skica je grub crtež rasporeda, a prototip se može isprobati.
- 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.
- Koliko otprilike treba biti područje za dodir? – Oko 44 do 48 jedinica, oko 7 do 10 milimetara.
Dio 3 – Pristupačnost, test i opasne radnje
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:
| Princip | Pitanje | Primjer u DeliveryApp |
|---|---|---|
| Opažljivo (Perceivable) | Može li se sadržaj vidjeti ili čuti? | slike jela imaju opis za čitač ekrana; tekst se može povećati |
| Upravljivo (Operable) | Može li se koristiti bez miša, s malo pokreta? | sve radi i tastaturom; dugmad dovoljno velika |
| Razumljivo (Understandable) | Je li jasno šta se dešava? | jednostavan jezik; poruke o greški kažu šta uraditi |
| Robusno (Robust) | Radi li s pomoćnim tehnologijama? | ispravno označena dugmad koja čitač ekrana pročita |
Omjer kontrasta
Najčešći i najlakše provjerljiv zahtjev je kontrast: koliko se tekst razlikuje od pozadine. WCAG definiše omjer kontrasta:
\[ K = \frac{L_1 + 0{,}05}{L_2 + 0{,}05} \]
Č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:
| Tekst / pozadina | Omjer | Običan tekst (≥ 4,5) | Veliki tekst (≥ 3) |
|---|---|---|---|
| crno na bijelom | 21 : 1 | da | da |
| tamnoplava (#1B2A41) na bijelom | 14,4 : 1 | da | da |
| bijelo na plavom dugmetu (#1F5FA8) | 6,4 : 1 | da | da |
| bijelo na crvenom (#C0392B) | 5,4 : 1 | da | da |
| siva (#767676) na bijelom | 4,5 : 1 | da (tačno na granici) | da |
| siva (#7F8C8D) na bijelom | 3,5 : 1 | ne | da |
| bijelo na narandžastom (#E67E22) | 2,9 : 1 | ne | ne |
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.
- 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:
- 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 +”).
- Učesnici. Pozovite ljude koji liče na persone, ne kolege iz tima.
- 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.
- Mjerenje. Za svaki zadatak zabilježite: je li uspio, koliko je trajalo (za NZ-4: ispod 180 sekundi?) i koliko grešaka je napravio.
- 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:
\[ P(n) = 1 - (1 - 0{,}31)^n \]
Č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.
Broj za pamćenje. Pet korisnika otkrije oko 84 % problema upotrebljivosti. Bolje tri kruga po pet nego jedan krug sa petnaest.
Ukratko.
- 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:
- 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.
- Potvrda s konkretnim tekstom. Ne „Da li ste sigurni?”, nego „Platiti 24,50 € karticom •••• 4242?”. Konkretan tekst natjera čovjeka da pročita.
- Mogućnost poništavanja kad god se može. Bolje „Narudžba je otkazana. [Poništi]” u narednih 10 sekundi nego deset pitanja unaprijed.
- 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.
- 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.
- 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.
- Prolazi li siva #7F8C8D na bijelom za običan tekst? – Ne; omjer je oko 3,5 : 1, a treba 4,5 : 1.
- Koliki dio problema otkrije pet korisnika na testu? – Oko 84 %.
- Š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.
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)
- U
ux/persone.mdprepišite tri persone iz 11.2 i dodajte jednu svoju, na osnovu intervjua iz poglavlja 3 (npr. dostavljač). - Za svoju personu napišite putanju korisnika od šest koraka, s mislima, osjećajem i prilikom za dizajn.
Korak 2 – Papirni prototip (45 minuta)
- 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.
- Na ekranu pregleda moraju biti brojevi N-1001: artikli 21,50 €, dostava 3,00 €, ukupno 24,50 €.
- Nacrtajte i dva „ekrana greške”: N-1003 (manje od 5,00 €) i N-1004 (izvan zone), s porukama koje kažu šta uraditi.
- Slikajte papire telefonom i stavite slike u
ux/papir/.
Korak 3 – Klikabilan prototip u Figmi (60 minuta)
- Napravite besplatan nalog na figma.com i novi Design file.
- Napravite četiri okvira (Frame) veličine telefona (npr. 390 × 844) i prenesite skice. Koristite jednu boju za glavnu radnju i dvije veličine slova.
- U kartici Prototype povežite dugmad: „Dodaj” → korpa, „Nastavi” → pregled, „Plati” → praćenje.
- Dugmad neka budu najmanje 48 jedinica visoka. Glavno dugme stavite dole.
- 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
- 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.”
- 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.
- Za svaki zadatak zapišite: uspjeh (da/ne), vrijeme u sekundama, broj grešaka, gdje je zastao.
- U
ux/test.mdnapiš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žbe
Vježba za studenta 1 – UI ili UX.
Koji problem je pretežno UI, a koji UX? a) dugme „Naruči” je svijetlosivo na bijelom; b) kupac ne zna da li je narudžba primljena dok ne stigne hrana; c) ikonice jela su različitih veličina; d) cijena na ekranu se razlikuje od iznosa na računu.
Rješenje. a) pretežno UI (izgled), ali s posljedicom na UX i pristupačnost; b) UX (nema vidljivog stanja sistema, heuristika 1); c) UI (dosljednost izgleda); d) UX (povjerenje i ispravnost, i greška u sistemu, ne samo u dizajnu).
Vježba za studenta 2 – poruka o greški.
Prepišite poruke po heuristici 9: a) „Greška: invalid distance”; b) „Neuspjelo”; c) „Kod nije validan”.
Rješenje. a) „Ova adresa je 11 km od restorana. Dostavljamo do 10 km. Izaberite drugu adresu ili restoran bliže vama.” b) „Plaćanje nije uspjelo. Novac nije skinut s kartice. Pokušajte ponovo ili izaberite drugu karticu.” c) „Kod STUDNT10 ne postoji. Provjerite da li ste ga dobro upisali, npr. STUDENT10.”
Vježba za studenta 3 – kontrast.
Relativna svjetlina bijele je 1, a tamnoplave #1F5FA8 oko 0,113. Izračunajte omjer kontrasta bijelog teksta na tom dugmetu i recite da li prolazi za običan tekst.
Rješenje. K = (1 + 0,05) / (0,113 + 0,05) = 1,05 / 0,163 ≈ 6,4. To je više od 4,5, pa prolazi i za običan i za veliki tekst.
Vježba za studenta 4 – broj korisnika.
Koliki dio problema, po formuli iz 11.8, otkriju 2 korisnika, a koliki 4? Koliko korisnika treba da se otkrije bar 90 % problema?
Rješenje. P(2) = 1 − 0,69² = 1 − 0,4761 ≈ 52 %. P(4) = 1 − 0,69⁴ ≈ 1 − 0,2267 ≈ 77 %. P(6) = 1 − 0,69⁶ ≈ 1 − 0,1079 ≈ 89 %; P(7) = 1 − 0,69⁷ ≈ 1 − 0,0745 ≈ 93 %. Za bar 90 % treba 7 korisnika.
Vježba za studenta 5 – mračni obrazac.
Na ekranu pregleda DeliveryApp neko predloži: kućica „Doniraj 1,00 € za lokalni sport” unaprijed označena, a ukupni iznos se prikazuje tek na sljedećem ekranu. Šta nije u redu i kako popraviti?
Rješenje. To su dva mračna obrasca: unaprijed označena dodatna stavka (korisnik plaća nešto što nije izabrao) i skriveni trošak (ukupno se vidi tek kasnije), što krši i obećanje iz vizije „bez skrivenih troškova”. Popravka: kućica neoznačena, uz jasan tekst; ukupni iznos, s donacijom ili bez nje, vidljiv na istom ekranu prije plaćanja.
Sažetak u pet rečenica
- 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.
- 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.
- Ekrani se prave od skice preko makete do papirnog i klikabilnog prototipa, a ocjenjuju se Nielsenovim heuristikama i pravilima mobilnog ekrana.
- 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.
- 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.