Mnogi iskusni poznavaoci interneta tvrde da je tipografija najbitniji element web dizajna. Pa ipak, previše dizajnera na tipografiju obraća premalo pažnje… Nekako su svi u fazonu “ok brate, tipografija, to mora da se stavi, ajd’ nek’ ide ovaj font, prvo treba sve ukrasiti i načičkati”… Što je pogrešan pristup. Naročito na našim prostorima, gde se RSS čitači i sl. ređe koriste. Pre izbora fonta treba rešiti druge, esencijalne stvari. Ukazaću na tri najčešće greške.
Greška broj jedan – Mali vam je
Pogledajte internet oko sebe. Ovaj naš, domaći. Velika većina blogova i magazina ima jako malu veličinu fonta. Prosek je, po slobodnoj proceni, 12-13 piskela. Da li ste svesni da se na taj način vređaju ljudi koji prave internet pregledače (iliti browsere) ? Da li je to saopštenje ljudima iz Googlea, Mozille, Opere, Applea da su glupi? Pojasniću.
Podrazumevano podešavanje veličine fonta svakog browsera iznosi 16px (odnosno 12pt, 1em ili 100% u drugim mernim jedinicama). Možda ćete na trenutak pomisliti da je to preveliko, ali varate se. Kada počnete koristiti ovu veličinu fonta, sve će vam drugo biti malo. Znate li koliko ljudi ima koji primenjuju CTRL+ScrollUp na vašim stranicama? I dva je previše.
Hajde da razmislimo malo o ovome: 16px na ekranu jednako je kao 11px ili 12px u štampi. Čudno? Ni malo.
Pogledajte sliku ispod:
Da li je jasno da, kada uporedimo distance knjige i ekrana od očiju, tekst kao da se nastavlja sa ekrana na knjigu? Šesnaest piksela (100%) nam se samo čini prevelikom veličinom jer smo navikli da gledamo u male. Kada jednom budemo počeli da je koristimo, sve ostalo će nam biti premalo i u priču će uskakati zumiranje.
Slova koja sada čitate nisu velika. Takva su kakvim je vaš pregledač u startu želeo da ih prikaže. 100%. Skinite naočare, odvojite facu od ekrana, zavalite se i čitajte!
Greška broj dva – Mislite da je rolanje loše
Primetio sam kod mnogih web dizajnera da polaze od toga da su ljudi lenji i da brzo beže sa web stranica. Samim tim, bacaju svakakve informacije na posetioce. Ne razmisle šta je bitno i šta treba istaći u prvi plan, već, bojeći se da će slučajni prolaznik brzo otići i da neće videti sve, zbudže previše detalja na vrh strane, na premalo prostora. Na taj način vređate korisnike. Mislite da su lenji? Da ih mrzi da skroluju stranicu? Ili im saopštavate da su glupi što to rade po ceo dan, jer nema potrebe? Obrazložiću i ovo.
Ako je skrolovanje loše, onda su svi sajtovi loši. U skrolovanju nema ama baš ničeg pogrešnog – baš ni kao u listanju kanala na TVu ili u okretanju stranica knjige.
Korisnici ne treba sami da prave selekciju, posao dizajnera je da im prezentuje informacije na najbolji mogući način. Zaintrigirajte ih. Pa će skrolovati i na taj način svojevoljno zaći u svaki kutak sajta i videti sve informacije.
Treća greška – aktivno belo
Active white space – kako ga zovu ljudi sa engleskog govornog područja, izuzetno je bitan segment svakog paragrafa i u štampi i na ekranu. Gledajući balkanske sajtove često primećujem pokušaje za uništenjem prostora oko teksta na kome se ne nalazi ništa. Mogu da izdvojim dva najzastupljenija pokušaja: trpanje svega i svačega u sidebar i predugačke linije teksta.
Prvi je pogrešan jer nepotrebne informacije odvlače pažnju posetioca od sadržaja – same srži svake stranice. Drugi je pogrešan jer zamara oči. Za ekran je deset do petnaest reči u jednom redu idealno. Sve preko toga je previše. Izbrojite broj reči u redu prve knjige koje se dohvatite. Možda ih ima i manje. Ako preterate sa dužinom reda, oči će imati veći problem da kad završe njegovo čitanje pronađu početak sledećeg. Kao što ne želite da čitaoci zumiraju stranicu da bi povećali font, isto tako ne želite da menjaju veličinu prozora da bi im bilo prijatnije oku.
Dodatni saveti
Ako ste pročitali gore navedeno, razumeli i složili se, upamtite još tri pravila:
- Visina reda je jako bitna. Ako su redovi previše zbijeni operećuju i mute vid. 150% od veličine fonta je odličan početak.
- Kontrast. Malo tamniji font na malo svetlijoj pozadini ume da bude lep, ali nikako ne i koristan. Ukoliko imate prenapadan dizajn, morate se plašiti da niko neće primetiti šta pokušavate da kažete. Pustite čitaoce da čitaju šta pišete! Ni potpuni kontrast (crno na belo) nije idealan. Benchmark kaže: #333 na #fff (dizajneri će znati o čemu pričam). Više na sajtu Contrast Rebelion.
- Tekst u vidu slike je odličan. Ali samo za izbegavanje. Korisnici žele da pretražuju tekst, da kopiraju tekst, da selektuju tekst… Jednom rečju, da se poigravaju sa tekstom. Zato zavrnite rukave i naučite taj CSS malo bolje ako želite da ukrasite naslove! Bolje je i za SEO.
Reč autora: Nikome ja ovde ne solim pamet, niti sam sve ovo izmislio. Samo mislim da korisnici ne bi trebalo da rade posao dizajnera, i pokušavam da doprinesem što upotrebljivijem domaćem webu. Hvala.
❧
Ima blogova i sajtova koje prosto ne čitam, jer su mi prenaporni vizuelno. Ako su mi BAŠ jako zanimjivi, što je retko, stavim ih u Google reader.
Kad sam ja počinjala da blogujem, dosta vremena sam izgubila na traženje dizajna koji mi odgovara i svi su mislili da gubim vreme na gluposti.Jako mi je bilo teško da objasnim ljudima da vizuelno nije važno zbog samog ,,pakovanja” već i čitljivosti.
Odlično si skrenuo pažnju na čete greške u dizajnu sajtova. Primetio bih ipak da imaš i nekih propuusta.
Najpre veličina fonta je prilično nezgodno pitanje. Možda na tvom monitoru 16px izgleda ok, ali to važi na rezoluciji koju koristiš i veličini tvog monitor. Kod nekoga drugoga to može da izgleda poprilično drugačije. Zato i služi opcija u veb čitaču da korsinik može da menja veličinu fonta i prilagodi sebi. Zato j emnogo važno strukturu strane urediti tako da ako i korsinik poveća (ili smanji font) strana i dalje izgleda kako treba.
Drugo, ljudi zaista uglavnom ne čitaju dugačke tekstove na stranama. Ne bih ulazio u to da li se radi o njihovoj lenjosti ili ne, pošto to zavisi od slučaja do slučaja. to narvno ne upravdava natrpavanja gomile informacija u vrh strane, koji se vidi bez skrolovanja. Dobra praksa je podeliti sadržaj na više strana a tekst na strani organizovati tako da na početku stoji uvodni deo na osnovu koga će posetilac zaključti da li ga ceo tekst interesuje i da li da ga čita.
Čitajući odeljak o aktivnom belom stekao sam utisak da ti redom nazivaš pasus? To je pogrešno jer red nije pasus. Red je isto što i linija. Ostalo je ok, s tim da bih ja dodatno naglasio da je za čitak tekst NAROČITO važna širina reda (linije) mereno u broju znakova. Prema opštim tipografskim standardima, red treba da sadrži između 66 i 72 znaka da bi tekst bio čitak. Valja se toga držati i na veb stranama, a mnogi na to zaborave.
Što se tiče prvog dela, najbolje je staviti veličinu na 100%. Tako će se kod svih automatski prilagoditi. Čak i na moblinim telefonima. Pogledaj ovaj sajt na tabletu, mobilnom ili bilo kom prenosivom uređaju i videćeš :)
Drugo i treće, savršeno se razumemo. Bitno je imati kvalitetnu posetu, ne samo posetu (pisaću o tome), sadržaj treba dobro organizovati, i mislio sam na red, a ne na pasus.
Hvala ti što si odvojio vreme da podeliš svoje mišljenje sa ostalima.
Jedna od jako bitnih stvari vezaih za text na sajtu je da treba bežati od justified texta ako nemate iskustva ni vremena potrebnog za sredjivanje istog.
Ne mora da znači. Evo ti pozitivnog primera justified teksta: http://www.maxvoltar.com/
Poravnanje po obe ivice teksta je stvar izbora, ukusa i konkretne primenljivosti. Ne treba to propisivati (Nedavno videh na blogu jednog veb dizajnera stav da je obostrano poravnanje obavezno).
Treba znati da obostrano poravnanje traži određene preduslove da bi bilo dobro. Nažalost, veb okruženje ne daje baš dovoljno alata da se tekst tipografski kontroliše na način koji zadovoljava norme tako da je u praksi obično bolje ako tekst nije obostrano poravnat.
Trent Walton ovde ima odlično rešenje koje omogućava kontrolu baš svakog slova (pogledajte naslove njegovih tekstova) – Lettering.js : http://trentwalton.com/2011/01/18/controlling-web-typography/
To je JavaScript. Nikako nije rešenje već samo test koncepta.
Iz ličnog iskustva do rolanja dolazi ako je sadržaj dovoljno dopadljiv za čitanje. Dakle, važan je “above the fold”. Uticaj tipografije je u onoj meri u kojoj je korisniku strana pregledna i čitljiva. Ne smatram da je izbor fonta odlučujući faktor u odluci korisnika da nastavi sa čitanjem ili da zatvori tab/stranicu. Ali opet, treba obratiti pažnju na tipografiju i izbegavati ekstreme.