Ikonice na sajtu: SVG ili font, doslednost, natpisi i pristupačnost

Ikonice na sajtu su sitni elementi koje posetilac retko svesno primeti, ali ih stalno koristi: lupa za pretragu, korpa, telefon, strelica, meni sa tri crte. Dobre ikonice ubrzavaju snalaženje i čine dizajn urednijim. Loše – nejasne, neusklađene ili bez natpisa – zbunjuju, a ako su pogrešno ugrađene, mogu i da uspore sajt i da budu nevidljive za čitače ekrana. U ovom tekstu objašnjavamo kako da izaberete format, zadržite doslednost i napravite ikonice koje su razumljive i pristupačne.

Čemu ikonice služe, a čemu ne

Ikonica je koristan prečac kada predstavlja nešto što svi prepoznaju bez razmišljanja. Takvih simbola je manje nego što se misli:

• univerzalno prepoznatljive: lupa (pretraga), korpa, kućica (početna), telefon, koverta (mejl), X (zatvori), strelice;
• uglavnom prepoznatljive: tri crte za meni, zupčanik za podešavanja, srce za omiljeno;
• dvosmislene: zvezdica (ocena ili omiljeno?), oblak, munja, sijalica, ikonice za apstraktne pojmove kao što su „kvalitet“ ili „poverenje“.

Ikonica ne treba da zameni tekst, već da ga prati. Česta greška je niz od šest usluga predstavljenih samo ikonicama bez naziva – posetilac mora da pogađa. Još češća je dekorativna upotreba: uz svaki pasus po jedna generička ikonica koja ništa ne objašnjava. Ako ikonica ne pomaže da se nešto brže razume ili pronađe, verovatno vam ne treba.

SVG ili font sa ikonicama

Ikonice se na sajt najčešće ugrađuju na dva načina: kao SVG grafika ili preko fonta sa ikonicama (icon font). Dugo su fontovi bili standard, ali danas je SVG u većini slučajeva bolji izbor.

Icon font ima smisla uglavnom kada ga već koristi postojeća tema ili dodatak i kada biste promenom dobili malo. Za novi sajt preporučujemo SVG – ugrađen direktno u HTML (inline) za ikonice u zaglavlju i dugmadima, ili kao SVG sprajt kada se iste ikonice ponavljaju na mnogo mesta.

A PNG ikonice?

Rasterske ikonice (PNG, JPG) su danas retko opravdane: mutne su na ekranima visoke rezolucije, a za oštriji prikaz morate pripremiti više veličina. Izuzetak su logotipi partnera ili sertifikata koje ste dobili samo u tom formatu.

Doslednost: jedan set, jedan stil

Najuočljivija greška na sajtovima je mešanje ikonica iz različitih izvora – neke su popunjene, neke konturne, jedne imaju zaobljene uglove, druge oštre, debljina linija se razlikuje. Svaka pojedinačno izgleda dobro, ali zajedno deluju neuredno. Pravila za doslednost:

• izaberite jedan set ikonica i držite ga se; ako vam fali ikonica, potražite je u istom setu ili je nacrtajte u istom stilu;
• odlučite se za konturni ili popunjeni stil (popunjeni se može koristiti za aktivno stanje, npr. izabranu stavku menija);
• koristite istu debljinu linije i istu osnovnu veličinu (na primer 20 ili 24 piksela);
• ikonice bojite bojama iz palete sajta, a ne proizvoljno.

Otvoreni setovi kao što su Lucide, Heroicons, Tabler ili Material Symbols imaju stotine ikonica u doslednom stilu i besplatnim licencama – ipak pročitajte uslove licence pre upotrebe. Pravila o ikonicama je dobro zapisati u dizajn sistem sajta; kako se on pravi objašnjavamo u tekstu dizajn sistem i doslednost sajta.

Natpisi i pristupačnost

Ikonica bez teksta je problem za dve grupe ljudi: one koji ne prepoznaju simbol i one koji koriste čitač ekrana. Zato:

• uz ikonicu pišite tekst kad god ima mesta – „Pozovite“ pored slušalice, „Korpa“ pored korpe;
• dekorativne ikonice (one pored kojih već stoji tekst) sakrijte od čitača ekrana atributom aria-hidden="true";
• dugmad samo sa ikonicom moraju imati dostupan naziv, na primer aria-label="Otvori meni" ili skriveni tekst;
• kontrast ikonice u odnosu na pozadinu treba da bude dovoljan (za grafičke elemente WCAG traži najmanje 3:1);
• površina za klik treba da bude veća od same ikonice – oko 44 × 44 piksela na telefonu, čak i kad je ikonica 20 piksela.

Ne oslanjajte se samo na boju ikonice da prenesete značenje (zelena kvačica, crveni X) – dodajte i tekst. Više o osnovama pristupačnosti u tekstu pristupačnost sajta: WCAG osnove, a o ikonici za meni na telefonu u tekstu mobilni meni: najbolje prakse.

Ikonice i brzina sajta

Pojedinačna SVG ikonica ima tipično svega nekoliko stotina bajtova, pa ikonice same po sebi retko usporavaju sajt. Problem nastaje kada se zbog desetak ikonica učitava cela biblioteka. Na šta paziti:

• ne učitavajte ceo icon font ili CSS biblioteku zbog nekoliko ikonica – izdvojite samo potrebne;
• očistite SVG fajlove od suvišnih podataka koje ostave programi za crtanje (alati poput SVGO to rade automatski);
• ako koristite font, obezbedite da se tekst sajta ne blokira dok se font sa ikonicama učitava;
• izbegavajte animirane ikonice koje zahtevaju dodatne JavaScript biblioteke.

Kako se meri uticaj ovakvih elemenata objašnjavamo u tekstu Core Web Vitals objašnjeno jednostavno.

Kratka provera ikonica na vašem sajtu

1. Da li sve ikonice potiču iz istog seta i imaju isti stil?
2. Da li svaka ikonica bez teksta ima jasno i univerzalno značenje?
3. Da li dugmad sa samo ikonicom imaju naziv za čitače ekrana?
4. Da li se ikonice lako pritiskaju palcem na telefonu?
5. Da li se učitava ceo font ili biblioteka zbog nekoliko ikonica?

Dobre ikonice su nenametljive: pomažu da se stvari brže pronađu, a ne privlače pažnju na sebe. Ako želite da uredimo ikonice i ostale detalje dizajna vašeg sajta, pošaljite nam upit za besplatnu analizu i ponudu.