Ključni grafički koncepti dizajniranja UXUI

Ključni grafički koncepti dizajniranja UXUI

Korisničko sučelje važan je dio bilo kojeg softverskog proizvoda. Kad se ono dobro napravi, korisnici ga zapravo i ne primijete. Kada je loše izvedeno, korisnici ga itekako primijete, te će takvo loše i neintuitivno sučelje stvoriti frustraciju i rezultirati vrlo vjerojatnim prestankom korištenja aplikacije.

Cjeline koje je potrebno međusobno uskladiti kako bi polučili uspjeh i angažiranost kod korisnika su:

Boje;
Tipografija;
Ikonografija

Boje

Izbor boje je iznimno važan. Svaka boja priziva neku određenu vizualnu sliku ili emociju kod onih koji je vide. Boje mogu govoriti na načine koji su jednako snažni kao i jezik. One mogu odražavati osobnost mobilne aplikacije i bolje prenijeti poruku korisnicima koja se želi prenijeti. Boja može postaviti osnovno raspoloženje, ton, koncept i konotaciju za mobilnu aplikaciju. Istraživanje koje je proveo Institut za boje pokazuje da korisnicima treba oko 90 sekundi da procijene kvalitetu internetskih proizvoda. Iz toga slijedi da odabir točnih boja za mobilnu aplikaciju ili mobilnu web stranicu ne smije biti slučajan i hirovit. Dobar izbor boja može poslužiti za povećanje snage elemenata poput poziva na akciju. I na kraju, može potaknuti intuitivne interakcije korisnika i aplikacije. nužno razumjeti značenje različitih boja jer boje mogu stimulirati kemiju mozga i generirati osjećaje u skladu s tim. Rezultati mogu biti fizički, ali i mentalni. Zelene i plave boje koje se najčešće mogu naći u prirodi mogu smiriti ljudski mozak u stresnim situacijama. Zbog toga se, na primjer, plava boja često koristi u mentalnoj terapiji za smanjenje stresa.

Boja je, međutim, previše ovisna o osobnim iskustvima da bi se univerzalno pretočila u određene osjećaje. Neke nijanse ili tonovi mogu imati vrlo različita značenja. Istraživanja pokazuju da se pojedinačne boje mogu suprotno percipirati zbog osobnih preferencija, iskustava, odgoja, kulturnih razlika i konteksta. Uz to, predviđanje korisničkih reakcija na prikladnost boja mnogo je važnije od same pojedinačne boje kada je u pitanju odabir prave palete za sučelje.

Komponente boja

Prema Munsellovom sustavu, boje sadrže tri dimenzije:

Nijansa/Ton (Hue) - opisuje boju čistog spektra: crvenu, žutu, ljubičastu, plavu itd. Hue je stupanj na kolu s bojama (od 0 do 360°) gdje je 0 (ili 360) crvena, 120 je zelena, 240 je plava.
Zasićenost (Chroma) - može se definirati kao dominacija nijanse. Čiste boje su potpuno zasićene. Intenzivnost je također postotna vrijednost: 0% znači sjenu sive, a 100% pune boje.
Svjetlina (Value) - pokazuje ukupni intenzitet. To je jedina komponenta boje koja može postojati sama po sebi. Svjetlost se mjeri u postocima: 0% je crno, 100% je bijelo.

Počevši od osnovne boje, paleta boja za dizajnerski projekt razvija se postupnim odabirom drugih boja koje čine vizualni sklad s bazom. Poigravanje vrijednošću boje (nijansa, zasićenost) pomaže u finom podešavanju kontrasta, stvarajući osjećaj ravnoteže.

Također važno je uzeti u obzir dvije različite vrste boja pri odabiru palete: „opipljive“ boje (površina predmeta) i ostale koje čine svjetlost. Obje vrste proizvode dva modela boja koji oblikuju kotačić u boji: aditivni i subtraktivni. Model boja aditiva razmatra primarne boje: crvenu, plavu i zelenu, pa je poznat i kao RGB sustav boja.

Cijan, magenta, žuta i crna supstraktivan je model boje koji se naziva CMYK. Za razliku od RGB, mješavina osnovnih boja CMYK stvara čistu crnu boju dok je odsutnost svih 100% bijela, stoga se često koristi u tisku. RGB shema boja, naprotiv, široko se koristi u digitalnim projektima, posebno tijekom dizajniranja web stranica ili mobilnih aplikacija.

Najbolje prakse za korištenje boja za dizajn korisničkih iskustava

Korisničko iskustvo skup je aktivnosti kojima se želi optimizirati mobilna aplikacija za učinkovitu i ugodnu upotrebu. Ukupni osjećaj sučelja ključni je fokus dizajna korisničkog iskustva.

Kada se razmatraju boje prilikom dizajna uvijek treba uzeti u obzir određene točke i pravila prilikom razvijanja korisničke aplikacije:

Svjesnost o sljepoći/daltonizam

Različiti oblici daltonizma pogađaju oko 8 posto muškaraca i 0,5 posto žena. Ljudi s crveno / zelenom daltonizmom imaju problema s razlikovanjem crvenih, zelenih i žutih sa sličnim vrijednostima. Iz tog razloga dobra praksa je upotreba posebnih alata za provjeru funkcionalnosti mobilne stranice ili aplikacije. Simulator sljepoće za boje za Windows, Mac i Linux se može preuzeti s Color Oraclea. Korisnici koji ne mogu vidjeti crvene znakove mogu se suočiti s određenim poteškoćama ako prime poruku o pogrešci kao npr. 'Ispravite polja označena crvenom bojom'. Sugerira se ne pozivati se na određenu boju već dati precizniji opis poput "Molimo, ponovo unesite svoju adresu e-pošte i telefonski broj".

Utjecaj kombinacija boja na čitljivost

Svaka boja ima vrijednost koja se temelji na položaju kotačića boja (Munsellov sustav), što određuje koliko dobro funkcionira s drugim bojama. Preklapanje boja na suprotnim krajevima kotačića u boji može olakšati čitanje, posebno za korisnike koji nešto čitaju sa zaslona telefona u jakom svjetlu. S druge strane, postavljanje teksta iznad pozadina sa sličnim vrijednostima boja može zakomplicirati čitanje. Postoje neke kombinacije boja (jarko crvena / plava ili crvena / zelena) koje treba izbjegavati prilikom dizajniranja sheme boja za aplikacije. Učinak je poznat pod nazivom „chromostereopsis“. Ova pojava stvara iluziju dubine na slici ili tekstu i prilično često može izazvati negativan učinak kod korisnika.

Boje u mikro interakcijama

Prilikom dizajniranja mobilne aplikacije, interakcije poput plutajućih (hover) i aktivnih stanja trebaju biti uključene u kontekst boja. Primjerice, mijenjajući razinu zasićenosti osnovne boje gumba i čineći ga prozirnijim ili, naprotiv, svijetlim, dizajneri čine aplikaciju interaktivnijom i intuitivnijom za upotrebu.

Testiranje opcija

Testiranje opcija odnosno tzv. A/B test ima jednako važnu ulogu u dizajnu korisničkog iskustva kao i u marketingu. Boja ima informativnu ulogu i pomaže korisnicima u navigaciji aplikacijom. Ako su boje aplikacije previše ujednačene i korisnici imaju problema s pronalaženjem primarne radnje na svakom zaslonu, tada je potrebno suptilno promijeniti nijansu različitih elemenata. Ako to ne uspije, potrebno je u potpunosti promijeniti boju i provesti A/B test kako bi potvrdili je li promjena boje potrebna za poboljšanje navigacije otklonila probleme.

Primjene boja za mobilne operativne sustave definirane su i mobilnim platformama te iste treba primijeniti prilikom dizajna:

Primjena boja za Android OS (Materijalni dizajn)29 - Sustav boja za "Materijalni dizajn" pomaže pri smislenoj primijeni boja za korisničko sučelje. U ovom sustavu potrebno je odabrati primarnu i sekundarnu boju koje će predstavljati glavne aplikacijske boje. Tamne i svijetle varijante svake boje mogu se primijeniti na različite načine.
Primjena boja za Apple iOS30 - Apple je kreirao standarde boja kako bi se iOS aplikaciji pružila vitalnost, vizualni kontinuitet i kako bi se komunicirale informacije o statusima na koje je potrebna korisnikova reakcija.
Primjena boja za HarmonyOS31 - Huawei je također definirao standarde kojih se treba pridržavati, a kojima se definira skup boja, kao i maksimalni broj boja prilikom dizajna korisničkog sučelja te slično.

Tipografija

Budući da je razvoj aplikacija usko povezan sa značajkama operativnog sustava svaka mobilna platforma daje smjernice za razvoj. U nastavku je dan pregled preporuka Materijalnog dizajna za Android i smjernice za ljudsko sučelje za iOS koje je potrebno primjenjivati.

Minimalna veličina fonta/slova

Apple u svojim smjernicama za ljudsko sučelje preporučuje postavljanje minimalne veličine teksta tijela na 17pt.

Google u smjernicama za dizajn materijala preporučuje postavljanje minimalne veličine teksta tijela(body) postavljanje na 16sp (sp = scale-independent pixels, jednako 16pt u iOSu). Apple za svoj mobilni operativni sustav iOS koristi dva komplementarna tipa slova koje su samostalno dizajnirali:

San Francisco (SF). San Francisco je obitelj slova bez serifa koja uključuje SF Pro, SF Pro Rounded, SF Mono, SF Compact i SF Compact Rounded. SF Pro je sistemski tip slova u iOS-u, macOS-u i tvOS-u; SF Compact je sistemski tip slova u watchOS-u. Dizajnirani da odgovaraju vizualnoj jasnoći korisničkog sučelja platforme, sistemski tipovi slova su čitljivi i neutralni.
New York (NY). New York je serifski tip slova koji pruža jedinstveni ton osmišljen kao dopuna SF slovima. NY djeluje jednako dobro u kontekstu grafičkog prikaza (pri velikim veličinama) kao i u kontekstu čitanja (u veličinama teksta).

Minimalna veličina fonta za ostale fontove može se razlikovati ovisno o njihovim karakteristikama. Na primjer, fontovi koji imaju vrlo tanke linije zahtijevaju veću veličinu osnovnog teksta.

Također, standard W3C preporučuju poštivanje minimalne veličine slova od 18pt za normalan i 14pt za podebljani tekst.

Huawei kao primarni tip slova također koristi Roboto, za koji preporuča da se prilagođava prema smjernicama.

Veličine naslova/zaglavlja

Kad je riječ o mobilnim aplikacija treba biti vrlo oprezan kada se upotrebljavaju velika zaglavlja. Upotreba velike veličine slova za naslove u mobilnim aplikacijama rezultira činjenicom da je naslov razvučen na 3-4 retka, a sadrži 1 ili 2 riječi po retku. Takva zaglavlja izgledaju neuredno i teško ih je pročitati. Preporuka je odabir veličine naslova koja je u kontrastu s osnovnim tekstom i odgovara dužini od prosječno 2-3 reda.

Kontrast

Također zbog osobitosti korištenja mobilnih aplikacija, omjer kontrasta pozadine i teksta vrlo je važan parametar.

Stoga je potrebno:

Slijediti WCAG 2.033 standarde kontrasta;
Provjeriti ima li tekst koji postavljate preko slika dovoljan kontrast;
Omogućiti dva načina za postavljanje teksta na svijetlu i tamnu pozadinu.

Sistemski fontovi/slova

Trenutno se za iOS mogu koristiti dva sistemska fontova: San Francisco i New York, dok je font Roboto sistemski font za Android i HarmonyOS. Sistemski fontovi čine dizajn mobilne aplikacije usklađenijim s operativnim sustavom. Najjednostavniji i najčešći način dodavanja naglaska i jedinstvenog izgleda tipografije mobilne aplikacije je upotreba sistemskog fonta za tekst tijela i raznih kontrola te ne-zadani font za naslove koji će biti jedinstven za Android, iOS i HarmonyOS verziju aplikacije.

Komercijalni fontovi/slova

Čest je slučaj da se tijekom dizajna identificira da sistemski ili besplatni fontovi ne mogu zadovoljiti potrebe prilikom razvoja mobilne aplikacije te je potrebno odabrati komercijalni fonta. Razlika u cijeni između fonta za upotrebu unutar aplikacije i stolnih računala može biti drastična.

ukoliko se integrira kupljeni ne-standardni font u dizajn aplikacije, potrebno je uzeti u obzir sljedeće:

Saznati sve detalje licence. Uvjeti distribucije fontova mogu se uvelike razlikovati.
Saznati sve tehničke detalje fonta, poput čitljivosti u malim veličinama.
Razmisliti o tome kako će se mobilna aplikacija skalirati u budućnosti. Na primjer, može se ispostaviti da odabrani font ne podržava posebne dijakritičke znakove (č,ć,đ,š,ž).
Saznati detalje o tome ima li font dovoljan broj stilova.

Besplatni fontovi/slova

Danas postoji sve više dobrih besplatnih fontova koji su jednako dobri kao i komercijalni. Odabirom besplatnog fonta moguće je bez kvalitete ili jedinstvenosti dizajna smanjiti troškove razvoja. Pri odabiru besplatnog fonta morate uzeti u obzir iste detalje kao i pri kupnji komercijalnog. U nastavku je dan pregled ključnih web mjesta gdje je moguće naći kvalitetne besplatne fontove:

• Google fonts - https://fonts.google.com/

• Inter - https://rsms.me/inter/

• Fontfabric - https://www.fontfabric.com/fonts/?sort=free-fonts

• IBM Plex - https://www.ibm.com/plex/

Bijeli prostor (Whitespace) i margine

Mobilni uređaji imaju vrlo ograničenu veličinu zaslona, stoga je potrebno smjestiti što više teksta na jedan vidljivi zaslon. Potrebno je dizajnirati izgled tako da je dio vidljivog sadržaja iznad pregiba. Na taj način pokazuje se korisniku da ima više sadržaja i potiče ga se na pomicanje.

Ikonografija

Ikone, osim što se koriste za stvaranje upečatljivijih i atraktivnijih ciljeva dodira, postoje i drugi načini za koje se prilikom dizajna mobilnih aplikacija mogu koristiti ovi maleni elementi a u cilju da se aplikaciju učini još privlačnijom.

Korištenje ikona ima slijedeće velike prednosti:

• Smanjeno ometanje korisnika u interakciji s aplikacijom (distrakcije);

• Atraktivnija korisnička sučelja;

• Uklanjanje jezičnih barijera;

• Poboljšanje prepoznatljivosti mobilne aplikacije.

Ikone je potrebno koristiti smisleno kako bi se maksimiziralo razumijevanje i smanjilo kognitivno opterećenje dok se poziva korisnik da učini na određenu radnju.

Budući da mobilne platforme imaju definirane smjernice za razvoj, prilikom dizajna mobilnih aplikacija za javne usluge iste je potrebno slijediti:

Za Android platformu definiran je vodič za ikonografiju u Google-ovom Materijalni dizajn (Material Design) koji definira:

• Ikone za aplikacije

o https://material.io/design/iconography/product-icons.html#design-principles

• Sistemske ikone

o https://material.io/design/iconography/system-icons.html#design-principles

• Animirane ikone

o https://material.io/design/iconography/animated-icons.html#usage

• Setovi ikona

o https://material.io/resources/icons/?style=baseline

Za Apple-ov iOS vodič za ikonografiju definira:

• Ikone za aplikacije