Dizajn ekrana koji vodi do upita

Kratak odgovor

Na prvom ekranu mobitela, prije bilo kakvog skrolanja, posjetilac mora vidjeti četiri stvari: šta radite, za koga i gdje, jedan dokaz da vam može vjerovati i jedno dugme za sljedeći korak, obično poziv ili poruka. Sve ostalo može čekati ispod.

Ekran koji pokušava reći sve ne kaže ništa. Ekran sa jednim jasnim ciljem vodi do upita.

Zašto je prvi ekran toliko važan?

Nielsen Norman Group, istraživačka kuća za upotrebljivost stranica, u članku o “pregibu” stranice (liniji gdje se ekran završava prije skrolanja) navodi da ono što je vidljivo bez ikakve radnje podstiče ljude da skroluju dalje. U članku o naslovnoj stranici isti autori kažu da sadržaj na prvom ekranu djeluje kao čuvar kapije: odlučuje hoće li posjetilac istraživati dalje.

Njihovo istraživanje praćenja pogleda iz 2018. pokazuje da se na prvom ekranu provodi oko 57 posto vremena gledanja, a ispod njega pažnja naglo opada. Pažnja: ta studija je rađena na ekranima računara, ne mobitela. Uzmite je kao pokazatelj da je početak stranice najvažniji, a ne kao tačnu brojku za telefon.

Zamislite pacijenta koji sjedi u čekaonici drugog ljekara i traži zubara na telefonu. Otvori vašu stranicu. Ako u prvih nekoliko sekundi ne vidi da radite u njegovom gradu i kako da vas pozove, vraća se na rezultate pretrage i otvara sljedeću.

Šta tačno treba biti na prvom ekranu?

1. Naslov koji kaže šta radite i gdje. Na primjer “Stomatološka ordinacija u Tuzli” ili “Popravka vodovodnih instalacija u Zenici i okolini”. Nielsen Norman Group savjetuje da ne pretpostavljate da posjetioci znaju vaš naziv i da izbjegavate prazne pozdrave.
2. Jedna rečenica ispod naslova o tome ko ste i po čemu ste drugačiji: “Zakazivanje za isti dan”, “Hitne intervencije i vikendom”.
3. Jedno glavno dugme. “Pozovite” ili “Pošaljite poruku na WhatsApp”. Ne pet dugmadi iste veličine. Isti izvor upozorava da, ako je sve istaknuto, ništa se ne ističe.
4. Jedan znak povjerenja. Broj Google ocjena, godine rada, fotografija ljudi. Samo ono što možete dokazati.

Logo, meni i pozdravna slika su na ekranu prirodno prisutni, ali ne smiju potisnuti ovih četiri stvari.

Kako napraviti dugme koje će neko pritisnuti?

Dugme na mobitelu pritiskate prstom, ne mišem. Googleov razvojni sajt web.dev navodi da je preporučena minimalna veličina dodirne površine oko 48 piksela, uz razmak od oko 8 piksela između dugmadi. To je otprilike veličina vrha prsta. Dugme koje je premalo ili preblizu drugom vodi do pogrešnih dodira.

Praktično: dugme za poziv neka bude široko, ne sitna ikona. Tekst na njemu neka kaže šta će se desiti (“Pozovite ordinaciju”). Neka onaj ko pravi stranicu postavi dugme tako da jedan dodir odmah otvori biranje broja.

Zašto kontrast boja nije samo pitanje ukusa?

Svijetlosiv tekst na bijeloj podlozi izgleda moderno u računaru, a napolju na suncu postaje nečitljiv. Nielsen Norman Group piše da slab kontrast otežava čitanje ljudima sa slabijim vidom i svima koji koriste mobitel na jakom svjetlu.

Za mjerenje postoji pravilo. Smjernice WCAG (međunarodne smjernice o pristupačnosti stranica) traže omjer kontrasta od najmanje 4,5 prema 1 za običan tekst i 3 prema 1 za veliki. Ne morate računati: postoje besplatni alati koji prime dvije boje i kažu prolaze li. Otvorite svoju stranicu na telefonu i izađite na prozor. Ako ne možete lako pročitati naslov i dugme, kontrast je preslab.

Šta ne smije biti na prvom ekranu?

• Klizač sa pet slika koje se smjenjuju. Iskustvo pokazuje da posjetilac obično stigne pročitati samo prvu poruku.
• Prozor koji iskoči preko cijelog ekrana (obavijest o popustu, pretplata na bilten). Google u uputstvu o iskustvu na stranici savjetuje izbjegavanje prozora koji otežavaju pristup sadržaju.
• Preveliku sliku bez teksta ispod. Nielsen Norman Group upozorava na “lažni pod”: kad prvi ekran izgleda kao da je stranica gotova, ljudi mogu pomisliti da dalje nema ništa. Neka se vidi početak sljedećeg dijela.
• Pet različitih ciljeva. Poziv, forma, bilten, društvene mreže i katalog u istom trenutku. Odaberite jedan.

Kako da provjerite svoj prvi ekran za deset minuta?

Uzmite svoj telefon i otvorite stranicu. Ne skrolajte. Odgovorite na pet pitanja:

1. Jesam li razumio šta firma radi?
2. Znam li gdje radi?
3. Vidim li dugme za poziv ili poruku?
4. Da li je tekst čitljiv i napolju?
5. Vidim li bar jedan razlog da vjerujem ovoj firmi?

Zatim isti ekran pokažite osobi koja vas ne poznaje, na pet sekundi. Neka vam kaže šta je zapamtila. Ako ne pomene ono što ste htjeli, prvi ekran treba prepraviti.

Šta možete uraditi ovu sedmicu

1. Napravite snimak ekrana svoje stranice na telefonu, bez skrolanja, i zapišite šta na njemu stoji.
2. Odlučite koji je jedini cilj tog ekrana (poziv, poruka ili zakazivanje).
3. Prepišite naslov tako da sadrži šta radite i gdje.
4. Provjerite veličinu dugmeta za poziv i može li se pritisnuti jednim prstom bez greške.
5. Provjerite kontrast napolju, na dnevnom svjetlu.

Zapišite broj poziva i poruka u mjesecu prije promjene. Za tri-četiri sedmice poslije promjene imate s čime uporediti.

Ako želite da neko pogleda vaš ekran

Ako želite da vidite kako vaša stranica izgleda očima novog posjetioca, pogledajte kako radimo optimizaciju stranice za više upita. Srodne teme su greške na stranici koje tjeraju kupce i elementi koji donose više upita.