Veliki broj današnjih igara ima tutorijale u vidu iskačućih poruka koje vam kažu nešto poput “pritisnite A da skočite” ili “kliknite na zemlju da posadite jagode”. Jeste li se pitali zašto “Super Mario Bros” nema te poruke, a ni u jednom trenutku ne izgleda kao da ste izgubljeni. Igre se sa “dopremanjem” – problemom balansiranja potrebe za kompleksnošću i potrebe da ne “smaraju” korisnika suočavaju od prvih dana. Posmatrajući načine na koje se bore sa komunikacijom onoga što korisnik može i treba da uradi možemo naučiti mnogo toga što se može primijeniti i na dizajn korisničkog iskustva sajtova i aplikacija.

Autor:

Milutin Pavićević

Milutin Pavićević

UX dizajner

Dugogodišnji borac za zaštitu korisničkog iskustva na svim online i offline frontovima. Kod njega je svaki vebsajt, aplikacija i servis istraživanje, analiza i učenje, a onda i primjena na svojim projektima. Kombinuje dizajn i programiranje, matematiku i psihologiju, u proizvode i servise uz puno ljubavi. Vječiti istraživač i hodajuća enciklopedija.

Kad startujete partiju Super Marija dočekaće vas ekran sa malim čovječuljkom na zemlji, na lijevoj strani ekrana. U rukama vam je kontroler sa dva dugmeta i četiri strelice (lijevo, desno, gore i dolje). Čovječuljak u crvenom (očigledno je da je to igrač) okrenut je na desno, i pred njim je prazni prostor. Bez strelice ili teksta koji vam eksplicitno to kaže, jasno vam je da treba da idete desno. Strelica na desno na kontroleru je prirodan taster za kretanje u tu stranu.

Par koraka ispred, i shvatate da kamera prati Marija. Sa desne strane, van igračevog dometa nailazi kutija sa znakom pitanja. Jasno vam je da je namijenjena vama, ali ne možete tek tako došetati do nje. Možda kad biste skočili? Strelica na gore ne radi ništa. Možda neko od crvenih dugmadi? AHA! Ding! iz kutije izlijeće novčić. Dobijate bodove! Nešto je dobro.

Još nekoliko koraka i prema vama kreće namrgođena živuljka (Gumba). Ako je ovo vaš prvi susret sa igrama, ginete. Cijena koju plaćate je mala – gubite tek nekoliko sekundi igre, ali vam je jasno da to nije dobro. Ponavljate proceduru, ali sad pokušavate da preskočite Gumbu. Udarate glavom u zid iznad, padate joj pravo na glavu i ubijate je, dobijajući poene. Ding! Bravo! Udarate glavom u kutiju sa znakom pitanja da biste pokupili novčić, ali iz nje izlazi pečurka…

Pogledajte video esej kanala Sequelitis o lukavim i genijalnim dizajnerskim rješenjima koja su iskorištena u serijalu Mega Man kako bi se stvorio intuitivni jezik kojim igra, bez pisanja o tome što treba uraditi, “telepatski” objašnjava pravila igraču.

Prvi nivo igre Super Mario Bros jedan je od najboljih primjera dizajna nivoa u kojima igrač intuitivno uči pravila igre imajući osjećaj da uči, a ne da igra. Ništa na nivou nije slučajno – normalna pozicija Marija nije na lijevoj strani ekrana, nego pri sredini, zidovi su namjerno postavljeni nisko, mjesto na kome se gine je namjerno postavljeno veoma blizu početnog ekrana, a čitav nivo sastoji se od kratkih i prostih sekcija koje vas uče kako da igrate igru, a da niste ni svjesni da je to što radite učenje. Preći ovaj nivo veoma je lako, i kad ga pređete, spremni ste za ostatak igre.

Korištenje intuitivnih signala za obuku igrača bez pretjeranog objašnjavanja jedna je od najpoželjnijih i najtežih stvari u dizajnu korisničkog iskustva. Prva asocijacija su ranije igre sa ograničenim mehanikama, ali najbolji i danas koriste istu ovu filozofiju u dizajnu – Naughty Dog (Uncharted serijal, The Last of Us) koristi strateški pozicionirane visoke građevine kako bi igraču dao vodilje za orijentaciju u otvorenom svijetu i eliminisao potrebu za korištenjem mape.  Portal (i Portal2) vješto kriju činjenicu da učite egzotične mehanike igre time što lokacije u kojima to radite stavljaju u narativni kontekst i istovremeno od vas traže da te mehanike koje iskoristite za rešavanje zagonetke.

“Her Story” je detektivska igra u kojoj pokušavate da istražite slučaj ubistva tako što kroz interfejs sličan Guglu pretražujete kratke klipove sa saslušanja žrtvine supruge.

Igra vam ne objašnjava kako da je igrate. Jedino uputstvo koje imate je riječ “UBISTVO” koja je za vas, kad počnete igru, već upisana u polje za pretragu.

Šta ja imam od toga?

Na većinu aplikacija i gotovo na sve sajtove možete gledati kao na igre iz ranih devedesetih. To su tehnički ograničena iskustva koja kontrolišete sa dvije direkcione kontrole (točkić miša ili “swipe” gore-dolje i pozicioniranje kursora ili odluka o tome gdje ćete postaviti prst) i jednim akcionim dugmetom (lijevi klik ili “tap”). Sve ostalo, uključujući i skrolovanje lijevo-desno su dodatne kontrole koje su jednom dijelu publike neprirodne, a ostatku neočekivane.

Paralaksno skrolovanje na koje ste tako ponosni? Imao ga je Moon Lander, davne 1982. godine!

Ako ima nečega do čega treba skrolovati – učinite to očiglednim

Ako postoji sadržaj koji nije na ekranu i do njega treba skrolovati, učinite očiglednim da skrolovanje ima svrhe. Sve češći trend u dizajnu je da prvi blok vebsajta ili aplikacije zauzima tačno 100% visine prvog ekrana. Opijeni kompletnošću koju “bilbord na ekranu” proizvodi, programeri i dizajneri pribjegavaju raznim trikovima da natjeraju taj blok da ispuni svaki ekran i izgleda normalno na svakom ekranu, ne razmišljajući o tome da na taj način čine nejasnim činjenicu da ispod tog ekrana ima nešto.

Trenutak u kome (ako uopšte mjere takve stvari) izmjere drastično manju stopu skrolovanja na takvim sajtovima nego što je očekivano, odlučuju se da pribjegnu sve popularnijem rješenju i na dno ekrana stave ikonicu koja kaže “skroluj dolje”.

Uporedite to sa početnim ekranom Microsoftove konzole Xbox. Dizajneri su se potrudili da na desnoj strani ekrana (skroluje se lijevo-desno) uvijek imate komadiće ikonica do kojih ćete doći skrolovanjem. Ništa ne kaže “ima da se skroluje” kao komadić sadržaja koji viri sa strane do koje prirodno dolazite skrolovanjem. Ista stvar se dešava i na Windows 10 operativnom sistemu, gdje sa dna “Start” menija (skroluje se gore-dolje) uvijek viri ikonica koja se otkriva skrolovanjem.

 

Mapiranje: gore-dolje je gore-dolje

Zašto se Start ekran na Xboxu skroluje lijevo-desno, a Start meni na Windowsu gore-dolje? Ne radi se samo o estetskoj odluci – dizajneri Microsofta obožavaju ekrane koji se skroluju nadesno i probali su da ih korisnicima računara nametnu kroz Windows 8. Problem leži u tome što je glavni instrument za skrolovanje točkić miša koji je postavljen tako da se okreće u smjeru koji odgovara vertikalnoj, a ne horizontalnoj osi.  Korisnicima je ova kretnja bila neprirodna, remetila je iskustvo interakcije sa operativnim sistemom, i naredna verzija Windowsa donijela je prirodno skrolovanje u start meniju (gore-dolje).

Isto kao što strelica na desno gura Marija ka desnoj strani ekrana, skrol na dolje treba da skroluje ekran na dolje. Pouka ide dalje od jednostavnog “sajtovi koji se skroluju horizontalno su lijep eksperiment ali očajno rješenje” i obuhvata i druge pokušaje mapiranja akcija za pogrešne ose.

Lijep primjer toga su tačkice ili crvene linije u vrhu članaka na određenim sajtovima koje označavaju progres čitanja članka u zavisnosti od skrolovanja. Zanimljiva ideja koja je za cilj imala da korisniku da bolji osjećaj progresa dovršenosti na sajtovima koji su ispod članaka imali jako puno prostora za skrolovanje. Veliki broj velikih, ozbiljnih internet portala usvojio je prije par godina ovu vrstu markiranja progresa, da bi je većina njih u toku protekle godine uklonila sa sajtova. Razlog su poražavajući rezultati istraživanja koji su pokazali da gotovo niko od korisnika nije obraćao pažnju na ovaj element, koji je linijom koja se popunjava horizontalno markirao progres vertikalnog skrolovanja.

 

Pregled – Suština treba da bude jasna nakon prvog kratkog pogleda

Kritična stvar u velikom broju igračkih žanrova je potreba da prvi pogled na ekran treba da vam pojasni što je moguće više toga o trenutnom stanju stvari. Dizajneri aplikacija moraju se pobrinuti da svi važni podaci za donošenje odluke u trenutnom kontekstu lako uočljivi i označeni konzistentnim vizuelnim jezikom.

Downwell

Prvi pogled na ekran frenetične platformske igre Downwell govori vam sve što treba da znate – crvene stvari ubijaju, bijele su bezbjedne. Ovo je od ključne važnosti za igru gdje odluke o kretanju i akciji treba da donosite više puta u sekundi.

DOTA2

Čak i ako ne znate mnogo o MOBA igrama, pogled na ekran u DOTI vam vrlo brzo može otkriti dosta toga o stanju stvari u igri. Pozicije neprijatelja, stanje snaga, predmeti u vašem inventaru… iskusni igrači jednim pogledom na ekran ove informacije čitaju u dijelu sekunde.

RPG igre

Gotovo univerzalni vizuelni jezik kojim se obilježava vrijednost predmeta u RPG igrama (sivo < bijelo< zeleno < plavo < žuto < narandžasto) omogućava igraču da lako odluči šta će pokupiti, a šta ostaviti na zemlji čak i kad su na ekranu stotine predmeta.

Pri dizajniranju nečega što korisnik vidi kao sajt nemate ni luksuz inicijalnog vremena za komuniciranje inicijalnih dizajnerskih pravila, pošto se vrijeme trajanja korisničkih sesija mjeri sekundama. Prinuđeni ste da se oslonite na kamen temeljac od neprocjenjive vrijednosti – univerzalna pravila interneta. Linkovi su obojani i podvučeni. Dugme izgleda kao dugme. Klik na logotip u gornjem lijevom uglu vodi na naslovnu stranu. Kontakt informacije su u dnu stranice. Korpa za trgovinu i dugme za logovanje na ecommerce sajtovima su gore desno…

Dizajneri, zaboravljajući na vrijeme koje je korisnik spreman da posveti njihovom proizvodu, vrlo često, zarad vizuelne upečatljivosti, odustaju od ovih pravila. Trenutno je poguban trend primjene “flat design” filozofije na sve. Redizajn zbog trendova, a ne zbog funkcionalnosti doveo je do toga da se “fletuje” sve – uključujući i dugmad. Istraživanje koje je sprovela Nielsen-Norman grupa pokazalo je da je ovaj trend ubitačan za konverziju. Stvari postaju samo gore sa narednim korakom ka besmislenosti – “ghost” dugmićima. Ivice pravougaonika sa tekstom unutra vjerovatno bolje laskaju dizajnu vašeg bilborda na ekranu, ali korisniku koji tu dolazi na 15 sekundi mnogo je manje jasno da na taj oblik može da klikne, nego kad bi to bilo pravo dugme, sa gradijentom i/ili simuliranom visinom.

Lijeva (“ružnija”, non-flat) verzija pokazala je značajno bolju konverziju i osjetno povoljnije šablone pogleda (gaze patterns) od desne, modernije i “ljepše”.

Ne tretirajte korisnika kao da je glup

Mike's World je manje-više kopija Super Mario Brosa za Android, i uprkos dokazano intuitivnoj (i tri decenije testiranoj) igrivosti kojoj ne treba pojašnjavanje, presrijeće igrača pop-ap porukama na svakom koraku i objašnjava mu očigledne stvari, prekidajući igru. Ovo je zamka u koju upadaju mnoge igre – uprkos evidentnom trendu pomjeranja tržišta ka odraslima i sve većem procentu gejmera u populaciji, autori pojedinih igara vole da tretiraju igrača kao apsolutnog glupana i ne dozvole mu da počne igru prije nego što, u nekoj misiji izvučenoj iz konteksta, prođe polučasovnu obuku koja ga obrazuje za očigledne stvari.

Ne upadajte u ovu zamku – ne prisiljavajte korisnike da prođu kroz pop-ap obuku za korištenje vašeg ecommerce rešenja koje je isto kao i svako drugo. Ne posvećujte prvi ekran sajta apartmana koji izdajete priči o tome kako je Crna Gora lijepa, kao da onaj ko je odlučio da dođe to već ne zna. Preimenujte dugme na kome piše “klikni ovdje da kupiš” u “kupi”. Poštujte inteligenciju svojih kupaca i ne ponašajte se kao da je vaš sajt prvi na koji ljudi dolaze.

“Ali, Alikorne”, reći ćete, “vi ste licemjeri! I vi imate ghost i flat dugmiće! I vi imate horizontalne slajdere u kojima sledeći slajd ne viri sa desne strane! I vaši članci često zarad vizuelnog utiska ne poštuju univerzalni jezik veba” – i bićete u pravu. Teško je ne upasti u zamke trendova, čak i kad znaš da su pogrešni, naročito na tržištu gdje je jedan od zadataka da pokažeš da pratiš trendove. Radimo na tome i postajemo bolji, zajedno sa vama.
Milutin Pavićević

Milutin Pavićević

UX dizajner

Dugogodišnji borac za zaštitu korisničkog iskustva na svim online i offline frontovima. Kod njega je svaki vebsajt, aplikacija i servis istraživanje, analiza i učenje, a onda i primjena na svojim projektima. Kombinuje dizajn i programiranje, matematiku i psihologiju, u proizvode i servise uz puno ljubavi. Vječiti istraživač i hodajuća enciklopedija.

Ostanite u toku!

Ostanite u toku!

Prijavite se na Alicorn e-mail časopis i budite u toku sa najnovijim člancima našeg tima. Nema spama. Poruke šaljemo rijetko, isključivo kad imamo nešto važno da kažemo.

Hvala! Uspješno ste se prijavili!