Dvije stranice mogu koristiti iste boje i fotografije, a ipak djelovati potpuno drukčije. Na jednoj osoba za nekoliko sekundi pronađe uslugu i pošalje upit. Na drugoj traži cijenu u podnožju, ne zna što znači gumb i odustane na obrascu. Razlika je u tome koliko dizajn podržava zadatak, ne samo u tome koliko je privlačan.
Hijerarhija odgovara na prvo pitanje
Na vrhu stranice treba biti jasno gdje se osoba nalazi i što se ondje nudi. Naslov, kratko objašnjenje i glavni poziv na radnju imaju prednost pred ukrasnim elementima. Ako svaka kartica, oznaka i gumb traži jednaku pažnju, nijedna odluka nije laka.
Dobar raspored grupira povezane informacije. Usluga, uvjeti i cijena trebaju biti blizu; kontakt uz trenutak kada je osoba spremna pitati. Boja može označiti važnu radnju, ali ne smije biti jedini način da se razumije stanje obrasca ili poveznice.
Hijerarhiju možete provjeriti i bez dizajnerskog alata: pročitajte samo naslove stranice, redom. Ako iz njih nije jasno što nudite i kako su cjeline povezane, ni lijep raspored neće riješiti nejasnu poruku. W3C-ov vodič za naslove objašnjava da naslovi prenose strukturu sadržaja i služe za navigaciju uz pomoć asistivnih tehnologija. Zbog toga naslov nije samo veći tekst.
Čitljivost nije detalj za kraj
Provjerite kontrast teksta i podloge, veličinu slova, duljinu redaka i razmake između elemenata. Gumb koji izgleda dobro na širokom monitoru može biti premalen ili preblizu drugom gumbu na telefonu. Tekst na slici može postati nečitljiv kada se kadar promijeni. Zato dizajn treba gledati na stvarnim širinama zaslona, uključujući mali mobitel.
Isprobajte stvarni zadatak
Dajte osobi koja nije sudjelovala u izradi jednostavan zadatak: „Pronađi uvjete ove usluge i pošalji upit.” Gledajte gdje zastane, bez objašnjavanja sučelja. Je li naziv usluge razumljiv? Vodi li gumb na očekivano mjesto? Vraća li obrazac jasnu potvrdu? Takva provjera često otkrije više od rasprave o nijansi boje.
Uzmite sadržaj prije crtanja detalja
Raspored koji dobro izgleda s dvije kratke rečenice može se raspasti kad u njega dođe stvarni naziv usluge i točan uvjet plaćanja. Zato pri provjeri dizajna koristite stvarne naslove, cijene i poruke obrasca. Posebno pogledajte dugačke riječi i hrvatske znakove na malom zaslonu. Ako se sadržaj stalno krati samo da bi „stao u karticu”, možda je problem u kartici, a ne u tekstu. Vizualni sustav treba nositi informacije koje tvrtka mora objaviti.
Prvo odredite zadatak, zatim izgled
Profesionalna stranica posjetitelju omogućuje da brzo prepozna nudi li tvrtka ono što traži. To zvuči jednostavno, ali zahtijeva odluke o redoslijedu informacija. Na stranici usluge naslov treba imenovati uslugu, uvod objasniti ishod, a sljedeći blok odgovoriti na praktična pitanja. Ako prvi zaslon zauzmu animacija i općenita tvrdnja, osoba mora tražiti osnovne podatke. Dizajn tada izgleda atraktivno u prezentaciji, ali otežava stvarni posao.
Prije crtanja izgleda napišite jednu rečenicu o glavnoj radnji svake stranice. Primjerice: „posjetitelj treba razumjeti uvjete usluge i poslati smislen upit”. Ta rečenica usmjerava odluke o sadržaju, gumbu i obrascu. Ako stranica pokušava istodobno prodavati, zapošljavati i prikazivati sve objave, nijedna radnja neće imati jasan prioritet.
Vizualni identitet nije zbir ukrasa
Boje, tipografija, razmaci i fotografije trebaju imati dosljednu ulogu. Primarna boja može označavati radnju, tamni naslov hijerarhiju, a svijetla podloga odvajati cjeline. Kada svaki blok koristi drukčiji oblik gumba i novu sjenu, korisnik mora iznova učiti sučelje. Dosljednost ne znači da sve stranice izgledaju jednako: opis usluge, cjenik i kontakt imaju različit sadržaj, ali dijele ista pravila čitljivosti i navigacije.
Stvarne fotografije i ilustracije trebaju pomoći razumjeti temu. Nasumična slika poslovnog sastanka ne objašnjava hosting, a dekorativna slika virusa ne govori ništa o razini zaštite. Bolje je odabrati manje vizuala koji imaju jasan odnos s tekstom. Ako slika nosi važnu informaciju, tekst uz nju mora omogućiti razumijevanje i osobi koja je ne vidi.
Razmaci i širina teksta utječu na čitanje
Na širokom zaslonu dugačak red teksta zahtijeva napor pri prelasku na sljedeći redak; na mobitelu premalen razmak između gumba uzrokuje pogrešne dodire. Zbog toga se raspored ne smije svesti na „smanjivanje” desktop verzije. Svaki prijelom treba provjeriti s pravim naslovima, opisima i obrascima, ne samo s kratkim probnim tekstom. Dugačka hrvatska riječ ili stvarna adresa mogu otkriti problem koji predložak s engleskim primjerima ne pokaže.
Odaberite nekoliko stvarnih uređaja ili širina zaslona i prođite cijelu radnju: od izbornika do potvrde obrasca. Pritom povećajte tekst preglednika i provjerite može li se sadržaj i dalje čitati. Takva provjera je pouzdanija od ocjene izgleda iz jedne slike dizajna.
Brzina i stabilnost dio su dizajna
Velika naslovna fotografija, teški fontovi i nepotrebne animacije mogu odgoditi ono zbog čega je posjetitelj došao. Ako se sadržaj pomiče dok se učitavaju slike, korisnik može dodirnuti pogrešan gumb. Zato slike trebaju prikladne dimenzije, fontovi promišljen način učitavanja, a elementi prostor koji neće iznenada promijeniti veličinu. Vizualni dojam nije dobar ako se ključni sadržaj pojavi prekasno ili se obrazac teško koristi.
Ne optimizira se napamet. Izmjerite stranicu i utvrdite što je stvarni najveći vidljivi element te što ga zadržava. Nekad je to slika, nekad font naslova, a nekad odgovor poslužitelja. Intervencija treba slijediti uzrok; uklanjanje sitne dekoracije neće riješiti čekanje glavnog sadržaja.
Kako procijeniti nacrt prije izrade?
Dajte osobi koja ne poznaje projekt tri zadatka: pronaći što je uključeno u uslugu, saznati kako se šalje upit i pronaći uvjet koji joj je važan. Nemojte joj objašnjavati kamo kliknuti. Zabilježite gdje zastane i što očekuje da će se dogoditi. Jedan takav pregled ne daje statistički dokaz za sve korisnike, ali otkriva jasne prepreke prije nego što se uloži vrijeme u završne detalje.
Zatim provjerite može li se sadržaj uređivati bez rušenja izgleda. Ako svaka nova rečenica zahtijeva pomoć dizajnera, stranica će brzo zastarjeti. Kvalitetan dizajn nije samo prvi prikaz, nego sustav koji ostaje uredan kad se promijeni cijena, doda usluga ili objavi nova fotografija.
Obrasci i poruke pokazuju kvalitetu detalja
Na urednoj maketi obrazac je često prikazan kao nekoliko praznih pravokutnika. U radu su važni naziv polja, objašnjenje zašto se podatak traži, poruka o pogrešci i potvrda nakon slanja. Ako osoba pogriješi u jednom polju, već uneseni tekst treba ostati sačuvan kad je moguće. Ako sigurnosna provjera traži dodatni korak, on mora biti razumljiv i ne smije blokirati legitimnog korisnika bez korisne povratne informacije.
Provjerite i e-poštu koju sustav šalje nakon obrasca. Ona je dio korisničkog iskustva, iako je nema na dizajnerskoj slici. Pošiljatelj, predmet, sažetak zahtjeva i sljedeći korak trebaju biti jasni. Stranica koja izgleda profesionalno, a nakon upita šalje nečitljivu automatsku poruku, djeluje nedovršeno.
Provjerite dosljednost izvan početne stranice
Dobar dizajn mora izdržati članak s dugim naslovom, uslugu bez fotografije, tablicu cijena, prazno stanje pretrage i stranicu koja kaže da traženi URL ne postoji. Ako su ti slučajevi zanemareni, posjetitelj će u jednom koraku vidjeti pažljivo uređen hero, a u sljedećem nedovršen obrazac. Zato dizajn pregledajte kroz nekoliko stvarnih putanja, ne samo kroz početni ekran. Dogovorite jednostavna pravila za tipične komponente kako se svaka nova stranica ne bi izmišljala ispočetka.
Jednostavnost uređivanja posebno je važna na stranicama s često promjenjivom ponudom. Testirajte nacrt tako da zamijenite kratki naslov dugim, dodate još jednu stavku i uklonite naslovnu fotografiju. Ako se raspored raspadne, pravila nisu dovoljno robusna za svakodnevni rad. Predlošci trebaju dati uredniku siguran prostor za promjene, a ne zahtijevati ručno popravljanje svake margine. Dokumentirajte i gdje se mijenjaju zajednički elementi poput zaglavlja i podnožja. Tako će redizajn ostati dosljedan i kada ga nakon nekoliko mjeseci uređuje druga osoba.
Dobro je isti nacrt pokazati i osobi koja će ga svakodnevno uređivati. Njezina pitanja često otkriju ograničenja prije objave.
Vizualni identitet, pristupačnost i brzina učitavanja međusobno su povezani: teška animacija može odgoditi sadržaj, a presvijetla marka otežati čitanje sitnog teksta. Nije cilj ukloniti osobnost stranice, nego je provesti kroz sustav koji ljudima pomaže. Pogledajte kako pristupamo dizajnu web stranica.
