Veb dizajn: saveti za izgled i upotrebljivost stranice

Veb dizajn nije samo to kako sajt izgleda, već i koliko se lako čita i koristi. Dobar dizajn vodi pogled posetioca do onoga što je važno, ne tera ga da razmišlja gde da klikne i radi jednako dobro za svakoga ko ga otvori. Ovde su praktični saveti za tipografiju, boje, raspored, dugmad, forme, slike i pristupačnost.

Tehnički deo izrade – brzina učitavanja, prilagođavanje telefonima i sadržaj – opisan je u tekstu o izradi sajta, a raspored stranica i navigacija u tekstu o hijerarhiji sajta. Ovde je fokus na tome šta posetilac vidi na samoj stranici.

Tipografija koja se lako čita

• Najviše dva, eventualno tri fonta. Jedan za naslove, jedan za tekst. Svaki sledeći font čini stranicu nemirnijom, a svaki dodatni web font i usporava učitavanje.
• Dovoljno veliko slovo. Za osnovni tekst najmanje 16 piksela; na telefonu manje slovo tera korisnika da zumira.
• Dužina reda od oko 60 do 80 znakova. Predugački redovi se teško prate, pa tekst na širokom ekranu ne treba razvlačiti preko cele širine.
• Prored oko 1,5. Tesno složen tekst izgleda kao zid i teško se čita.
• Naslovi koji se razlikuju od teksta veličinom i debljinom, tako da se stranica može „skenirati“ pogledom.
• Font koji podržava naša slova. Za sajt na srpskom proverite da font ima č, ć, ž, š, đ i, ako koristite ćirilicu, sva ćirilična slova – inače će pregledač neka slova prikazati drugim fontom.

Boje i kontrast

• Mala paleta. Osnovna boja, jedna boja za isticanje i neutralne boje za pozadinu i tekst su dovoljne za ceo sajt.
• Dovoljan kontrast teksta i pozadine. Svetlosivi tekst na beloj pozadini ili sivi tekst na tamnoj izgleda elegantno, ali se teško čita, naročito na telefonu napolju. Smernice za pristupačnost (WCAG) preporučuju odnos kontrasta od najmanje 4,5:1 za običan tekst.
• Boja za isticanje samo za ono što je važno – dugmad, linkove, upozorenja. Ako je sve istaknuto, ništa nije.
• Informacija ne sme da zavisi samo od boje. Greška u formi treba da ima i tekst, ne samo crveni okvir, jer deo ljudi ne razlikuje boje dobro.
• Tamna tema, ako je imate, treba da bude posebno podešena, a ne samo obrnute boje: čisto bela slova na čisto crnoj pozadini zamaraju oči, pa se koriste malo ublažene nijanse.

Beli prostor i vizuelna hijerarhija

Beli (prazan) prostor nije izgubljen prostor. Razmak između delova stranice pokazuje šta ide zajedno, a šta je odvojeno, i daje oku mesta da se odmori. Stranica natrpana do ivica deluje nepregledno čak i kada je sadržaj dobar.

• Jedna glavna stvar po ekranu. Posetilac u prvih nekoliko sekundi treba da vidi o čemu je stranica i šta može da uradi.
• Važnije je veće i više. Veličina, položaj, boja i razmak govore šta je važno, pre nego što se išta pročita.
• Poravnanje po mreži. Elementi poravnati po istim linijama izgledaju uredno; nasumično postavljeni deluju amaterski.
• Kratki pasusi i podnaslovi. Ljudi na vebu tekst uglavnom prelete pogledom, pa ga treba podeliti na delove koji se lako prepoznaju.

Dugmad i poziv na akciju

• Dugme mora da izgleda kao dugme – ispunjena boja, dovoljna veličina, jasan tekst. Posetilac ne treba da pogađa šta je klikabilno.
• Tekst dugmeta kaže šta će se desiti: „Pošalji upit“, „Pogledaj cene“, „Preuzmi uputstvo“, umesto opštih reči kao što su „Klikni ovde“ ili „Pošalji“.
• Jedan glavni poziv na akciju po delu stranice. Kada su tri dugmeta iste boje i veličine jedno do drugog, posetilac često ne izabere nijedno.
• Dovoljno velika površina za prst – na telefonu dugmad i linkovi treba da budu dovoljno veliki i razmaknuti da se ne promaše.

Forme koje se popune do kraja

• Samo neophodna polja. Svako dodatno polje smanjuje broj ljudi koji formu pošalju. Za prvi upit često su dovoljni ime, email i poruka.
• Oznaka iznad polja, a ne samo sivi tekst u polju koji nestaje čim korisnik počne da kuca.
• Jasne poruke o greškama, uz polje na koje se odnose, sa objašnjenjem šta treba ispraviti.
• Odgovarajuća tastatura na telefonu – polje za email, telefon ili broj treba da bude tako i označeno (type="email", type="tel"), pa telefon sam ponudi pravu tastaturu.
• Potvrda posle slanja, da posetilac zna da je poruka stigla i šta sledi.

Slike i ikone

• Slike treba da pokazuju nešto stvarno – vaš proizvod, vaš prostor, vaše ljude, primer rada. Generičke fotografije „nasmejanih ljudi u kancelariji“ posetioci prepoznaju i preskaču.
• Jedan stil ikona na celom sajtu, iste debljine linija i veličine.
• Bez važnog teksta na slikama. Tekst u slici ne može da se kopira, prevede ni uveća, a pretraživači i čitači ekrana ga teško čitaju.
• Opisni alt tekst za slike koje nose informaciju, a prazan alt za čisto dekorativne.
• Odgovarajuća veličina datoteke – slika ne treba da bude veća nego što se prikazuje.

Animacije i efekti

Ovaj savet je iz starog teksta i važi i danas: i najlepši efekti brzo dosade, a ne smeju da odvlače od informacija. Animacija ima smisla kada nešto objašnjava – na primer, pokazuje da je stavka dodata u korpu ili da se meni otvorio.

• kratke, diskretne animacije (ispod pola sekunde) umesto dugih uvodnih efekata;
• bez automatskog pokretanja zvuka i videa sa zvukom;
• bez iskačućih prozora koji prekrivaju sadržaj čim se stranica otvori;
• poštovanje podešavanja „smanji pokrete“ (prefers-reduced-motion) koje neki korisnici uključuju u sistemu.

Pristupačnost

Pristupačan sajt mogu da koriste i ljudi koji slabije vide, koriste samo tastaturu ili čitač ekrana. Većina pravila pristupačnosti čini sajt boljim i za sve ostale:

• dovoljan kontrast i mogućnost uvećanja teksta bez „lomljenja“ stranice;
• vidljiv okvir fokusa kada se kroz stranicu kreće tasterom Tab;
• linkovi čiji tekst ima smisla i van konteksta („Cenovnik izrade sajta“, a ne „ovde“);
• naslovi (H1, H2, H3) poređani logičnim redom, jer se po njima kreću i korisnici čitača ekrana;
• oznake za sva polja u formama i alt tekst za slike.

Doslednost kroz ceo sajt

Isti elementi treba da izgledaju i ponašaju se isto na svim stranicama: meni na istom mestu, dugmad istog oblika, linkovi iste boje, naslovi istog stila. Posetilac tako jednom nauči kako se sajt koristi. Najlakše je to postići ako se na početku napravi mali skup pravila – boje, fontovi, veličine, razmaci, izgled dugmadi i formi – pa se svaka nova stranica pravi od istih delova.

I još dva saveta iz starog teksta koji ne zastarevaju: ne objavljujte nedovršene stranice sa natpisom „u izradi“ i linkove koji vode nigde, i redovno ažurirajte sadržaj – ništa ne izgleda gore od najave akcije koja je istekla pre nekoliko godina.

Šta je iz starih saveta zastarelo?

Ova stranica je nekada bila prevod nemačkog teksta o veb dizajnu iz perioda 1999–2004. Neki saveti iz tog vremena danas više ne važe:

• Flash i okviri (frames) – više se ne koriste; Flash pregledači ne podržavaju od 2021. godine.
• Testiranje dubine boja od 16 i 32 bita – danas se testira na različitim veličinama ekrana i uređajima, pre svega na telefonima.
• „Fontovi moraju biti instalirani na računaru posetioca“ – web fontovi se učitavaju sa sajta, pa ovo ograničenje više ne postoji, ali svaki font dodaje vreme učitavanja.
• Meta ključne reči i ručna prijava sajta pretraživačima – Google ne koristi meta keywords, a nove stranice pronalazi sam, preko linkova i sitemap-a.