Postoji razlog zašto se neke web stranice osjećaju ispravno u trenutku kada na njih dođete. Sve je tamo gdje očekujete. Tekst je lako čitljiv. Brzo nalazite ono što trebate. Uopće ne razmišljate o dizajnu. Jednostavno funkcionira.
A onda postoje one druge stranice. One na kojima žmirite na sitni tekst preko šarene pozadine, lovite navigaciju i odlazite unutar 10 sekundi.
Razlika nije u talentu ili budžetu. Radi se o poznavanju pravila kojih se treba držati i pogrešaka koje treba izbjegavati. Raščlanimo to.
Stavite funkcionalnost ispred svega
Posao web stranice je pomoći ljudima da nešto učine. Kupe proizvod. Saznaju o usluzi. Dobiju kontakt informacije. Sve ostalo je sporedno.
Prekrasna stranica koja zbunjuje posjetitelje gora je od jednostavne stranice koja je kristalno jasna. Prije nego što se zabrinete oko animacija, gradijentnih boja ili onog parallax efekta koji ste vidjeli na Awwwardsu, postavite jedno pitanje: može li posjetitelj koji je prvi put na stranici ostvariti svoj cilj u manje od 30 sekundi?
Ako je odgovor ne, dizajn treba doradu. Ljepota ne plaća račune. Jasnoća plaća.
Nemojte pretrpati vizualni dizajn
Znate onaj restoran s 200 jela na jelovniku? Ne možete se odlučiti pa naručite sigurnu opciju ili odete.
Web stranice funkcioniraju isto. Previše boja, fontova, slika i međusobno konkurirajućih elemenata stvara vizualni kaos. Mozak korisnika ne može shvatiti na što se fokusirati, pa se ne fokusira ni na što.
Držite se dvije do tri boje. Koristite jednu obitelj fontova (najviše dvije). Ostavite puno bjelina. Svaki element na stranici trebao bi imati jasan razlog zašto je tamo. Ako ne možete objasniti zašto nešto postoji, maknite to.
Usavršite tipografiju
Tipografija je najpodcijenjeniji element web dizajna. Većina vaše web stranice je tekst. Ako je tekst teško čitljiv, ništa drugo nije važno.
Evo što funkcionira:
- Osnovna veličina fonta najmanje 16 px. Bilo što manje naprezanje je za oči na zaslonima.
- Prored (line-height) od 1.5 do 1.6 za tekst tijela. Tijesan prored ubija čitljivost.
- Visok kontrast između teksta i pozadine. Sivi tekst na svijetlosivoj pozadini izgleda "moderno" ali je grozan za čitanje.
- Ograničite širinu retka na oko 65-75 znakova. Retci koji se protežu preko cijelog zaslona iscrpljujući su za čitanje.
Dobra tipografija je nevidljiva. Ljudi čitaju vaš sadržaj bez napora. Loša tipografija je zid između vaše poruke i vaše publike.
Nemojte zaboraviti na mobilne uređaje
Preko 60% web prometa dolazi s mobilnih uređaja. Ako vaša stranica ne radi na telefonima, većina vaših posjetitelja ima loše iskustvo.
Responzivni dizajn nije izbor. Već godinama nije. Gumbi moraju biti dovoljno veliki za dodir. Tekst mora biti čitljiv bez zumiranja. Obrasci moraju biti jednostavni za ispunjavanje na zaslonu osjetljivom na dodir. Navigacija mora raditi bez hover stanja.
Testirajte svoju stranicu na stvarnim telefonima. Ne samo smanjivanjem prozora preglednika. Razlika je stvarna i vaši posjetitelji će je primijetiti.
Učinite navigaciju očiglednom
Ljudi nikada ne bi trebali razmišljati o tome kako se kretati vašom stranicom. Navigacija bi trebala biti vidljiva, dosljedna i logična.
Stavite glavnu navigaciju tamo gdje je ljudi očekuju. Vrh stranice ili lijeva bočna traka. Koristite jasne, opisne oznake. "Usluge" je bolje od "Što radimo." "Kontakt" je bolje od "Razgovarajmo." Kreativnost čuvajte za sadržaj, ne za oznake navigacije.
Breadcrumb navigacija pomaže na dubljim stranicama. Funkcija pretraživanja pomaže na stranicama bogatim sadržajem. I svaka stranica bi trebala omogućiti lak povratak na početnu. To nisu uzbudljive značajke. To su nužne značajke.
Nemojte zanemariti brzinu stranice
Lijepa stranica kojoj treba 5 sekundi da se učita nije lijepa. Napuštena je.
Korisnici očekuju da se stranice učitaju za manje od 3 sekunde. Google koristi brzinu stranice kao faktor rangiranja. Svaka sekunda kašnjenja smanjuje vašu stopu konverzije.
Uobičajeni krivci: neoptimizarane slike (daleko najveći problem), previše skripti trećih strana, CSS i JavaScript koji blokiraju renderiranje, bez strategije predmemoriranja i napuhan sadržaj stranice od nepotrebnih frameworka.
Testirajte brzinu kroz Google PageSpeed Insights. Ako je vaš rezultat ispod 80, počnite optimizirati. Rezultati su trenutačni.
Dizajnirajte za pristupačnost
Pristupačnost nije ugodna opcija za kvačicu. Radi se o tome da vaša stranica bude upotrebljiva za sve, uključujući osobe s oštećenjima vida, motoričkim poteškoćama ili kognitivnim razlikama.
Osnove nisu teške. Dovoljan kontrast boja. Alt tekst na slikama. Podrška za navigaciju tipkovnicom. Pravilna hijerarhija naslova. Oznake obrazaca koje čitači zaslona mogu razumjeti.
Pristupačna stranica ujedno je i bolje dizajnirana stranica. Principi se gotovo potpuno preklapaju s dobrim UX dizajnom. Kada dizajnirate za najširi raspon korisnika, svi profitiraju.
Nemojte koristiti automatsku reprodukciju
Automatsko pokretanje videozapisa sa zvukom najbrži je način da natjerate nekoga da zatvori vašu karticu. Automatsko pokretanje pozadinskih videozapisa koji usporavaju stranicu je drugi najbrži.
Ako imate video sadržaj, dopustite korisnicima da sami odaberu reprodukciju. Ako morate koristiti pozadinski video, neka bude bez zvuka, lagane težine i neobavezan. Sadržaj treba funkcionirati savršeno i bez njega.
Isto vrijedi za automatske karusele i slidere. Istraživanja dosljedno pokazuju da ih ljudi ignoriraju. Prvi slajd dobije nešto pozornosti. Sve iza njega moglo bi i ne postojati.
Pišite sadržaj koji ljudi zapravo žele čitati
Dizajn i sadržaj neodvojivi su. Dobro dizajnirana stranica s lošim sadržajem propada. Stranica bogata sadržajem s pristojnim dizajnom uspijeva.
Pišite za svoju publiku, ne za sebe. Koristite jezik koji oni koriste. Odgovarajte na pitanja koja stvarno imaju. Dođite do poante brzo. Razbijte dugačak tekst podnaslovima, kratkim odlomcima i povremenim listama.
I vodite računa o SEO-u usput. Koristite pravilnu strukturu naslova (jedan H1, logični H2 i H3 naslovi). Pišite meta opise koji potiču klik. Uključite relevantne ključne riječi prirodno, ne nabijene u svaku rečenicu.
Nemojte kopirati ono što izgleda cool bez razumijevanja zašto
Najčešća dizajnerska pogreška koju vidimo? Kopiranje trenda jer super izgleda na tuđoj stranici, bez razumijevanja svrhe koja stoji iza toga.
Onaj golemi video hero preko cijelog zaslona? Funkcionira za filmsku produkcijsku kuću. Ne funkcionira za vaš računovodstveni ured. Onaj hamburger izbornik na desktopu? Funkcionira za minimalistički portfolio. Ali svima ostalima skriva navigaciju.
Dizajnerske odluke trebale bi biti vođene potrebama vaših korisnika, vašim sadržajem i vašim ciljevima. Ne onim što je prošli mjesec osvojilo dizajnersku nagradu.
Zaključak
Dobar web dizajn slijedi obrazac. Stavlja korisnike na prvo mjesto. Uklanja trenje. Komunicira jasno. Učitava se brzo. Radi na svakom uređaju.
Loš web dizajn stavlja ego dizajnera na prvo mjesto. Daje prednost stilu nad supstancom. Tjera posjetitelje da se muče kako bi pronašli ono što trebaju.
Pravila nisu komplicirana. Slijedite ona koja služe vašim korisnicima i bit ćete ispred većine web stranica na internetu.
Želite stranicu koja slijedi sva prava pravila i ne krši nijedno pogrešno? Pogledajte kako Version2 pristupa web dizajnu ili započnite besplatnom analizom web stranice.
