Nemojte ponoviti 5 najčešćih grešaka u izradi sučelja vaše Android, Symbian ili iPhone aplikacije

Svijet mobilnih aplikacija doista je prepun raznovrsnih i neobičnih sučelja. Neovisno o kojoj mobilnoj platformi govorimo, svakodnevno nailazimo na sučelja koja ne rješavaju osnovne probleme i ne uspijevaju dovoljno jasno prenijeti svoju poruku.

Mali ekrani mobilnih uređaja ne dozvoljavaju velik broj informacija te je na dizajneru da stvori jednostavno, smisleno i funkcionalno sučelje. Kao što u poznatom citatu kaže Antoine De Saint-Exupery, dizajneri će se približiti savršenom sučelju ne kada više nemaju što dodati, nego kada nemaju što oduzeti.

Pravilo “manje je više” vrijedi i za ideju aplikacije. Najuspješnije su aplikacije koje se fokusiraju na jednu određenu funkciju, umjesto da pokušavaju zadovoljiti što više korisnika nudeći all in one rješenja.

Serijom članaka o razvoju mobilnih aplikacija za Android, Symbian, iPhone i druge mobilne platformeNetokracija vas uvodi uz vodeće hrvatske stručnjake za mobilne i internetske tehnologije u svijet appova.

Od planiranja i izrade do promocije i slaganja korisničkog sučelja, u tome nas podržava Ovi by Nokia na kojemu možete naći pregršt mobilnih aplikacija kao i objaviti vlastitu.

Što se korisničkog sučelja tiče, vješti dizajneri će se pridržavati postavljenih pravila. Tako Appleova iPhone platforma primjerice ima detaljno opisane smjernice za dizajn, koje otkrivaju kako dizajnirati elegantno sučelje i korisnički doživljaj, no mnogi ih se dizajneri i developeri ne pridržavaju.

Odabrao sam pet vrlo čestih pogrešaka koje susrećem u svakodnevnom radu s aplikacijama, bilo domaćim ili stranim. Svojim primjerima nisam nikog htio predstaviti u negativnom svjetlu, niti odabrane aplikacije okarakterizirati lošima. Postoje određeni nedostaci spomenutih korisničkih sučelja za koje ćete u nastavku naći konkretna rješenja, kako bi im se korisnici lakše služili.

Loš uvod? Loša ikonica.

Prvo što će korisnik vidjeti je ikonica aplikacije. Upravo ovdje leži važnost dobro dizajnirane ikonice, no mnogo aplikacija jednostavno nemaju dovoljno dobru ikonicu i propuštaju jedinstvenu priliku da privuku potencijalne korisnike. Zamislite da uđete u trgovinu u potrazi za osvježavajućim pićem i naiđete na nepoznato piće u pakovanju koje vas ni na koji način ne privlači. Biste li se odlučili na kupovinu tog pića ili bi prošli pored njega?

Prvi je dojam itekako važan, pogotovo u brzom svijetu informacijskih tehnologija i ako se potencijalnom korisniku vaše aplikacije na prvi pogled neće svidjeti ikonica, tu će vjerojatno i prestati interes za vašu aplikaciju. Znamo da dobar dizajn prodaje aplikacije, a ikonica je prvi korak k boljoj prodaji. Kao i kod cjelokupnog dizajna mobilne aplikacije, jednostavnost je ključ. Ikonica mora imati jasan koncept i dosljedno predstavljati aplikaciju i platformu.

Nepisano pravilo je da se u ikonicama mobilnih aplikacija ne koristi tekst. Poruka koju šalje aplikacija može se mnogo bolje prenijeti simbolima ili ilustracijama. Uz korištenje simbola, korisnici će lakše vizualizirati i pamtiti aplikaciju, te ju kasnije prepoznati na ekranu svog uređaja, gdje se nalazi uz bok mnoštva drugih. Imajte na umu da su ikonice uglavnom vrlo malih dimenzija i lako čitljive riječi je u pravilu teško ukomponirati u samu ikonicu. Osim toga, mobilne se aplikacije predstavljaju pomoću ikonica uz koje dolazi ime aplikacije pa je poželjno izbjegavati svaki višak informacija ili njihovo ponavljanje.

Aplikacija Dubrovnik koristi ikonicu koja sadrži kraticu DBV i slogan in your pocket. Dok je kratica velikih slova vidljiva, upitno je koliko je pamtljiva jer niti tipografija niti cjelokupna ikonica ne sadrži originalne, lako prepoznatljive elemente vizualnog identiteta. Slogan je veoma malen i na ekranu mobilnog uređaja teško čitljiv u svim situacijama.

TVRaspored, Fly Zagreb – Croatia i StopDebljino koriste vlastito ime aplikacije unutar ikonice, što sam već napomenuo kao suvišno. Malen i teško čitljiv tekst uzrokuje više štete nego koristi i trebalo bi ga sasvim ukloniti te poraditi na boljem vizualnom identitetu te jasnoj i prepoznatljivoj ikonici.

Ove ikonice koriste i sjaj (gloss) koji je uveo i popularizirao Apple. Dok je taj efekt primjenjiv na dobrom dijelu ikonica za predinstalirane (native) iPhone aplikacije, ne može se primijeniti u svakom slučaju. Ikonice ponekad fukncioniraju mnogo bolje kada se efekt sjaja ublaži ili sasvim ukloni.

Ikonica Mobile Placea sadrži (odrezani) logo, ime aplikacije i nekoliko sitnih mobilnih telefona, koje je veoma teško razaznati. U cjelini, elementi ne funkcioniraju dobro i predstavljaju vizualni šum, a informacije se u tom šumu gube. Drugim riječima, ikonica ima potpuno suprotni efekt od željenog. Nepotrebno je koristiti ovoliki broj elemenata u dizajnu ikonice aplikacije, te bi rješenje problema bilo da ikonica sadrži samo logotip na pozadini prepoznatljive boje, odnosno boje koja je dio vizualnog identiteta aplikacije ili branda.

Zašto izmišljate toplu vodu uz nestandardno sučelje?

U želji da aplikaciju učine originalnijom ili naizgled privlačnijom, dizajneri često pokušavaju stvoriti sučelja koja ne prate konvencije platforme. Ako stvorite sučelje koje izgleda ili se ponaša na način drugačiji od uobičajenog, korisnik mora iznova učiti kako se snaći unutar platforme na koju je navikao.

Najbolji put koji možete odabrati prilikom dizajniranja aplikacije jest da slijedite pravila koja vam sama platforma nameće. Koristite standardizirane elemente umjesto da kreirate sasvim nove elemente. Tako ćete stvoriti intuitivno sučelje, koje će korisnik lako prepoznati i lako se njime služiti. Iznimka u ovom pravilu su igre — jedine aplikacije koje opravdano koriste sasvim originalno sučelje. Kako se u našem narodu rado kaže: ne izmišljajte toplu vodu.

Detalji su neobično važan element korisničkog sučelja, bilo u ponašanju ili izgledu aplikacije. No, ako se detaljima pogrešno barata, oni će zakomplicirati sučelje aplikacije, umjesto da ga pojednostave i stvore ugodniji korisnički doživljaj. Dodavanjem nepotrebnih detalja u službi vizualne atrakcije korisničko će sučelje postati manje jasno, dok će dodavanjem smislenih detalja u službi sadržaja korisničko sučelje postati jasnije.

Popularna aplikacija Croatia Traffic & Weather odnosno Traffic HR vas drži u toku sa stanjem na cestama, informacijama o cestarinama, vremenu i još mnogo više. Aplikacija na Symbianu i iPhone odskače od standarda platforme. Teško bi sučelje bilo opravdano da se radi o aplikaciji zabavnog tipa, no kako se radi o aplikaciji čiji je primarni cilj prenijeti informacije – sučelje je neprikladno. Pozadinske slike odvraćaju pažnju sa sadržaja i temelj su neurednog i nedovoljno jasnog sučelja.

Ova bi popularna aplikacija zasigurno imala još više uspjeha da pojednostavi korisničko sučelje, jer postojeće sučelje ne doprinosi sadržaju niti rješava probleme, već ih stvara. Propust je još veći ako se sjetimo da se korisnici ovom aplikacijom služe i za vrijeme vožnje. Ovakva aplikacija morala bi imati mnogo jednostavnije sučelje.

Nadalje, Croatia Traffic & Weather u sučelju sadržava pomoć za korisnika, govoreći mu kako da se služi aplikacijom. Ako postoji potreba da se korisniku pruži dodatna pomoć u obliku poruka ili cijelih help ekrana, aplikacija nema dovoljno logično, intuitivno sučelje. Izrada pomoćnih sadržaja je u rijetkim slučajevima opravdana.

Na sličnu sam poruku naišao u ShoutEmu, koja korisniku na početnom ekranu govori kako započeti rad s aplikacijom. Korisniku je potrebno mnogo više vremena da poruku pročita i shvati, nego što mu je potrebno da sam dokuči kako krenuti. Na spomenutom ekranu postoje svega dvije tipke, od kojih je jedna jasno manje bitna jer se nalazi na dnu ekrana i vodi do informacija o proizvođaču aplikacije. Poruka korisniku je suvišna. Ako aplikacija slijedi konvencije platforme, čemu objašnjenje?

Svaki element sučelja koji je nepotreban, valja ukloniti. Korisnicima je sasvim dovoljan jedan jedini, očiti i vidljivi put do sljedećeg ili prethodnog ekrana ili informacije. Aplikacija mPBZ se odlučila koristiti dvije tipke sa identičnom funkcijom, povratka na glavni izbornik. Ova odluka je neshvatljiva jer su dizajneri na ovaj način bezrazložno korisniku oduzeli desetinu radne površine. Tipka na dnu ekrana je sasvim nepotrebna.

Kada govorimo o tipkama kao dijelu sučelja na ekranu osjetljivom na dodir, minimalna površina za dodir prstom mora biti oko 45×45 pixela. Drugim riječima, ciljane površine moraju biti veličine vrha prsta. Ovo je razlog zašto su interaktivni elementi sučelja određenih dimenzija, pa treba biti itekako pažljiv da se korisniku omogući dovoljno prostora za rad. Tipke nikada ne bi smjele biti mnogo manje od standardnih dimenzija, a elementima se mora osigurati dovoljan razmak kako korisnik ne bi greškom odabrao neku opciju.

Fast Food Diagnostics koristi neobično, šareno sučelje, koje nije nalik standardnom Androidovom. Na prvi pogled se ovakvo sučelje može činiti zabavnim, no većini korisnika predstavlja problem. Potrebno je upoznati se s novim sučeljem, za što je potrebno vrijeme koji neki možda nisu spremni uložiti.

Sučelje koristi i nekoliko jarkih boja, što u nestandardnim elementima, što u tipografiji, čineći snalaženje otežanim, a tekst teško čitljivim. U dijelovima aplikacije, naslovi su samo centrirani i nedovoljno istaknuti, čineći informacije nepreglednima. Sučelje bi moralo biti intuitivnije, jednostavnije i jasnije.

U grafičkom sučelju aplikacije Pliva zdravlje nailazimo na mnogo mjesta za poboljšanje. Samo zaglavlje aplikacije pati od sličnog problema kao i Liderova aplikacija, jer sadrži suvišan logo. Dizajneri su ga smanjili kako bi zauzimalo što je manje moguće mjesta, no traka na kojoj se nalazi svejedno nepotrebno zauzima desetinu ekrana. Na istoj traci, tipka Povratak je sićušna, mnogo manja od preporučene veličine. Osim što je premalih dimenzija, preblizu je interaktivne površine koja se nalazi ispod nje i korisnik vrlo lako može napraviti grešku ciljajući na određeno područje. Rezultat je manje ugodno sučelje, jer se korisnik mora fokusirati na sučelje koje bi moralo biti praktički neprimjetno.

Odabir tipografije je bitnije nego što mislite

Baza svakog dobrog dizajna je dobra tipografija, a ranije spomenuta pravila i smjernice određene mobilne platforme imaju definirane i tipografske standarde koje valja poštivati. Korisnici određene platforme su naviknuti na veličinu teksta koja je za tu platformu uobičajena i na ovom području ne valja mnogo eksperimentirati. Ukoliko niste sigurni kako postaviti tipografske temelje prilikom izrade vlastitog proizvoda, ne možete pogriješiti ako se ugledate na srodne predinstalirane aplikacije i njihov odabir fontova, veličina teksta i boja.

Pogrešno je smanjivati tekst na malu veličinu kako bi što je moguće više sadržaja stalo na jedan ekran. Nekima će se ovo rješenje na prvi pogled činiti dobrim, no zapravo će dovesti do novih problema. Čitanje malog teksta na malom ekranu nije ni malo ugodno i lako umara oči, čineći korisničko iskustvo lošim.

Ukoliko je osnovna funkcija aplikacije čitanje većih blokova teksta, kao što su članci, odlična je ideja omogućiti korisniku promjenu veličine teksta ili promjenu samog fonta, kao što to primjerice čini aplikacija Večernjeg lista. Neki korisnici preferiraju sans-serif pisma, dok će drugi radije odabrati sans. Neke aplikacije omogućavaju i promjenu boje pozadine ekrana s tekstom, što je također vrlo korisno, jer će okruženje velikog kontrasta čitanje učiniti mnogo ugodnijim.

Korištenje all-caps teksta je neprikladno zato što tekst u tom slučaju može biti teško čitljiv. Osnovni cilj je da korisnici mogu lako čitati tekst. Također, tekst pisan isključivo velikim slovima se smatra agresivnim, odnosno sugerira vikanje. Radi se o jednom od pravila ponašanja koje se na druge medije preslikalo sa WWW-a.

Sučelje mobilne aplikacije nije sučelje web stranice

Čini mi se da je velik broj dizajnera sučelja mobilnih aplikacija došlo iz svijeta web dizajna, ili slijede praksu koju sreću kod web stranica. Bilo kako bilo, u spomenuta dva medija nikako ne vrijede ista pravila. Svaki medij ima svoja pravila i standarde te preslikavanje konvencija s jednog na drugi nije dobro rješenje. Zahvaljujući velikim rezolucijama zaglavlja web stranica mogu sadržavati velike logotipove ili druge elemente koji se pojavljuju na svakoj podstranici. Na ekranu mobilne aplikacije ovakvi elementi kradu dragocjen prostor za informacije i predstavljaju prepreke korisniku.

Mnoge aplikacije odlučuju smjestiti svoj logo u navigation bar, odnosno na sam vrh ekrana. Na taj se potez odlučila i domaća aplikacija Lider Pressa, te stavila poveći logo na vrh svakog ekrana aplikacije i time korisniku uzela čak šestinu radne površine. Ako govorimo o ekranu mobilnog uređaja, radi se o velikom propustu.

Logotip u ovom slučaju nema funkciju sadržaja i trebalo bi ga u potpunosti ukloniti, ako ne sa svih ekrana osim uvodnog, tada bar s ekrana na kojem se kompletni članci mogu čitati. Elementi koji nisu dio sučelja su suvišni. Uklanjanje logotipa bi omogućilo povećanje teksta, koji je premalen, čime bi se znatno poboljšala čitljivost. Samo brandiranje aplikacije trebalo bi biti suptilnije, uz boje i elemente koji komuniciraju na mnogo manje nametljiv način.

Ista aplikacija koristi animirani logotip, čiju animaciju korisnik mora gledati prilikom svakog pokretanja aplikacije i tako gubi vrijeme. Ovaj scenarij podsjeća na staromodne web stranice, koje su sadržavale uvodne animacije. Animacija prilikom učitavanja aplikacije je interesantna prvi puta, no svakim novim pokretanjem aplikacije gubi smisao. Korisnik želi što ranije krenuti s radom i doći do željenih informacija. Suptilne je animacije poželjno koristiti u svrhu komunikacije, no ne ako su same sebi svrha.

Dizajneri aplikacije Pliva zdravlje su također odlučili zadržati logo na vrhu svakog ekrana. Iako je logo mnogo manji nego u slučaju Liderove aplikacije, vrijedi isto – logo krade dragocjen prostor, koji valja iskoristiti za sadržaj.

Split aplikacija na uvodnom ekranu sadrži veliki, dominantni Enter button, kojim se ulazi u aplikaciju i kreće s radom. Zašto korisnik mora svaki put raditi dodatni dodir i gubiti vrijeme da bi pokrenuo aplikaciju?

Previše informacija na ekranu

Mobilne aplikacije su ograničene malenim ekranom, no radna površina po kojoj se može kliziti uz dobru informacijsku arhitekturu može omogućiti velik komfor u korištenju. Korisnici očekuju da aplikacija bude intuitivna i jednostavna za korištenje, čemu uvijek trebate težiti. Ako na malen prostor smjestite velik broj informacija, korisniku otežavate snalaženje na ekranu. Prilikom osmišljavanja izgleda i ponašanja aplikacije, potrebno je ustanoviti koje je informacije nužno uključiti u sučelje, a koje ne. Informacije koje nisu nužne na prvom ekranu, možda više odgovaraju sljedećem, a možda su sasvim nepotrebne. Oduzimanjem manje važnih elemenata doći ćete do onih najbitnijih.

Sučelje mobilne aplikacije ponekad sadržava previše informacija, a da na prvi pogled uopće ne izgleda prenatrpano ili komplicirano. Za ovaj primjer ću se vratiti na Liderovu aplikaciju.

Traka s naslovom “Zadnjih 30 članaka” je nepotrebna i poput logotipa zauzima dragocjen prostor. Traka nije od velikog značaja korisniku i nema drugu funkciju osim da prenosi poruku da se na ekranu može naći sažetak posljednjih 30 članaka. Kako bi se poboljšalo sučelje, traka bi trebala kliziti zajedno sa sadržajem i tako osloboditi prostor koji zauzima. Ovaj princip možemo vidjeti na iPhoneovom Safari pretraživaču, gdje gornja traka nestane kada se korisnik počne kretati po stranici, čime sadržaj i informacije postaju sučelje i između njih i korisnika ne stoji baš ništa.

Zbog načina na koji korisnici drže mobilne uređaje i pregledavaju ekran, logično je na vrh sučelja smjestiti elemente koji će se najviše koristiti. Informacije na vrhu su najlakše vidljive i dostupne.

Pošto nije od velikog značaja, dobar bi potez bio da se traka sasvim ukloni iz sučelja, a malo važnu informaciju o broju članaka bi se moglo premjestiti na dno površine, možda nudeći učitavanje dodatnih sažetaka na istoj radnoj površini.

Donja traka, takozvani button bar, sadrži samo tipku za dohvaćanje članaka i back tipku koja također uzima dragocjen prostor. Traka bi trebala biti prozirna, kako bi se stvorio dojam veće i komfornije radne površine, a kroz prozirnu traku korisnik može vidjeti što ga još čeka. Pošto je aplikacija u potpunosti na hrvatskom jeziku, tipku back bi trebalo prevesti i zamijeniti ju sa intuitivnijom tipkom, onom u obliku strelice.

Mnoge aplikacije padaju već na ovoj prepreci, stavljajući stavljajući naglasak na ukrase, umjesto na informacije. Prije ili kasnije, ovakve se greške odraze i na prodaji. Često viđamo primjere gdje se postojeće ideje u rukama konkurencije nadograđuju i poboljšavaju u novim aplikacijama, kroz nova i bolja korisnička sučelja, te uspijevaju kao novi proizvod. Stvorite li aplikaciju s lošim grafičkim sučeljem i korisničkim iskustvom, širom otvarate vrata konkurenciji da vas pretekne i ostavi u svojoj prašini.