Upotreba ikona u web dizajnu

Pregled sadržaja

Ikone su svugdje oko nas, na znakovima u cestovnom prometu, u logotipovima brendova, na tipkovnici i drugim uređajima koji nas okružuju. Ikone nam pomažu da bolje razumijemo i protumačimo informacije, kako u offline životu tako i na internetu u svijetu web stranica. U članku ćemo razlučiti razloge zašto bi trebali uključiti ikone u web dizajn te kako ih efikasno koristiti.

Što su ikone

Ikona je znak, reprezentativni simbol, mala sličica koja predstavlja neku ideju i informacija koja nosi određeno značenje za korisnika. Ikona može biti interaktivna te se na klik miša ili prelazak miša preko nje može okinuti određena funkcija a također se mogu i animirati.

Prednosti korištenja ikona u dizajnu

Kada se pravilno implementiraju, nekoliko je prednosti upotrebe ikona u web dizajnu. Pogledajmo zašto je dobro koristiti ikone na web stranicama, kako poboljšavaju korisničko iskustvo i zašto su dobro rješenje za privlačenje pažnje korisnika.

  • Privlače pažnju korisnika
  • Pojednostavljuju informacije korisnicima
  • Povećavaju čitljivost
  • Povećavaju cjelokupni vizualni ugođaj

Privlače pažnju korisnika

Budimo realni, svi mi rijetko čitamo tekstove od početka rečenice do kraja. Naše čitanje je zapravo skeniranje stranice radi vizualno zanimljivog sadržaja, tek nakon što nam nešto privuče pažnju počinjemo čitati što nas zanima. Ikone su jednostavan a efikasan način kako možemo privući korisnika i skrenuti mu pozornost na ono bitno.

Jednostavne su za razumjeti

Velik broj ikona je univerzalan, ne poznaje granice i nije bitno koji jezik se koristi na web stranici. Ikone stoge ruše sve jezične barijere (premda postoje neke kulturološke varijacije) a omogućuju nam da sažmemo osnovnu ideju i jednostavno prezentiramo informaciju. Ikone je i lakše za pamtititi od samog teksta.

Primjer takvih ikona u prometu može biti crveni stop znak u prometu ili zeleno i crveno svjetlo na semaforu. Uz neke varijacije, oni su u cijelom svijetu univerzalno priznati.

U web dizajnu isto tako postoje uobičajene ikone koje svakodnevno koristimo u raznim komponentama:

  • prikaz košarice u web trgovini
  • povećalo za pretragu u polju interne tražilice
  • omotnica (koverta) kod prikaza e-mail adrese
  • telefon radi telefonskog broja – bilo fiksna linija ili za mobitele, premda ako su oba broja prikazana tada mobilni može imati zasebnu ikonu
  • lokot koji na adresnoj traci preglednika s lijeve strane od URL-a prikazuje HTTPS sigurnosnu vezu

Ikone podržavaju sadržaj

Informacije su najvažnija stvar na web stranicama. Kvalitetno prezentiran sadržaj omogućuje korisnicima lakše shvatiti glavne točke i obraditi podatke koje se nude. Ikone nam mogu pomoći da razbijemo blokove teksta i raščlanimo ih na više dijelova.

Pružaju bolji dizajn i poboljšavaju korisničko iskustvo

Kada ugledamo dizajn, istog trena dajemo svoj sud. Prvi utisak nam je jako bitan. Kažemo da je nešto ljepše od drugog, premda možda ne znamo točnije zbog čega je to tako. Ponekad je upravo razlog u detaljima. Upotreba ikona može dati svježinu dizajnu i oplemeniti ga na višu razinu.

Slika govori više od tisuću riječi a slično bi mogli reći i za ikone. Pravilno korištene ikone mogu pomoći u kretanju web stranicom bez da se korisnik uopće oslanja na tekst, stoga ih koristimo kao smjernice za pomoć u navigaciji. S druge strane, ako se koriste neoptimalno, mogu zbuniti korisnika. Ikone ne trebaju preuzeti previše pažnje, već djelovati komplementarno. Moramo uvijek imati na umu digitalnu pristupačnost kako bi se svi korisnici mogli služiti sadržajem bez obzira na poteškoće koje ih ograničavaju.

Ikone igraju vitalnu ulogu u web dizajnu. Mogu biti male ali su dinamitne, čine se suvišnima ali su važan kotačić u široj slici. Privlače veliku pažnju i pomažu posjetiteljima pronaći i skenirati sadržaj.

Pružaju osobnost brendu

Pod uvjetom da se ne koriste generičke ikone odabir prikladnih ikona može biti stil koji odgovara vašem brendu. Savršeno se mogu uklopiti u osobnost koju projiciramo i dobro dizajnirana ikona snažno poveća utisak kod korisnika. Favikona kao simbol prezentira brend u adresnoj traci a isto tako ponekad se prikazuje i u rezultatima tražilice.

Prikladna mjesta za korištenje ikona

Pružamo pregled nekih primjera kada je dobro koristiti ikone koje će dodatno oplemeniti grafički dizajn i potaknuti pozitivno korisničko iskustvo.

Liste su preglednije uz pomoć ikona

Informacije koje su dobro strukturirane uvijek je lakše čitati za razliku od ogromnog bloka teksta. Liste ili popisi klasičan su primjer i koristimo ih svakodnevno. Primjerice, kod pregleda glavnih usluga, isticanja prednosti nekog proizvoda, prikaz planova…

Liste mogu biti samo običan popis pojedinačnih riječi ili cijelih rečenica koje su vertikalno razdijeljene. Klasična je upotreba standardnih točkica (bullets) ali isto tako mogu se koristiti privlačne ikone za nabrajanje, kvačice koje afirmiraju kvalitetu proizvoda, kratke strelice itd.

Liste mogu biti i pažljivije osmišljenog dizajna te svaka stavka može sadržavati više elemenata; naslov elementa, opis, oznaku, link… Bez nekog vizualnog usidrenja posjetitelj teže prolazi kroz popis što će rezultirati da ga brzo skenira i prođe. Ako dizajn nije zanimljiv da ga privuče, manje su šanse da se korisnik zadrži na tim informacijama. Stoga je vrlo popularno koristiti ikone za svaki element da privuku pažnju i vizualno oplemene sekciju a time i cjelokupnu web stranicu.

Upotreba i odabir ikona

Odabir ikona temelji se na metaforama koje razumijemo i nadopunjuju opisni tekst ako postoji. Kada se postavljaju na web stranice, dobro je imati na umu načelo blizine i grupirati ih sa sadržajem na kojeg se odnose.

Optimizacija brzine web stranice

Prilikom korištenja ikona u sklopu web dizajna dobro je imati na umu optimalno učitavanje web stranica radi bolje brzine. Nema puno smisla učitavati cijelu knjižnicu ikona kao što se to često radi, ako od tih nekoliko stotina koje korisnik preuzima na računalo, prikazujemo na web stranici tek nekolicinu. U tom slučaju više ima smisla koristiti pojedinačni SVG element (koji ubacujemo inline, bez da se poziva kao vanjska datoteka radi optimizacije brzine).

Sažetak

Ikone trebaju biti općenito prepoznati simboli koji u roku nekoliko sekundi mogu korisnicima prenijeti svoju poruku. Vidjeli smo kako ikone igraju važnu ulogu na web stranicama te u čemu je njihova prednost.