Kad od korisnika očekujete da izvrše neku akciju za koju je potrebno da kliknu na link ili dugme, naročito ako od te akcije imate finansijsku korist, od ogromne je važnosti da element na koji očekujete da neko klikne izgleda tako kao da je na njega moguće kliknuti. Dugmad treba da budu ispupčena, linkovi upadljivo obojeni (po mogućnosti plavi) i/ili podvučeni, kursor iznad tih objekata treba da bude ruka a njihova površina mora biti dovoljno velika da ne predstavlja problem ni korisnicima telefona koji imaju najdeblje prste i najmanje ekrane.

Akcija pritiskanja dugmeta mora da korisnicima da povratnu spregu koja im govori “pritisnuo si dugme”, da ne bi ostali čekajući i razmišljajući o tome da li je njihov klik ispravno registrovan. Uz malo truda, svaka interakcija sa dugmetom može se obogatiti tako da korisnik koji je vrši dobije mikro-gratifikaciju. Za ovaj tutorial sebi smo zadali zadatak pravljenja dugmeta koje ispunjava sledeće uslove:

Milutin Pavićević

Milutin Pavićević

UX dizajner

Red programiranja, red dizajna, red SEO analize, a između redova sati i sati istraživanja, razumijevanja korisnika, tumačenja analitike, testiranja i tek onda primjene na konkretnim projektima. U slobodno vrijeme pobjeđuje u asocijacijama, igra i pravi video igre ili nas uporno ubjeđuje u ispravnost rješenja zadataka iz matematike.

Dugme izgleda kao dugme

Ispupčeno je, zeleno je, i ima zaobljene ivice. Na prvi pogled je jasno da je ovo dugme.

Jasno je kad je pritisnuto

Kad korisnik pritisne dugme, ono se očigledno “udubi”

“Cakli” se pod kursorom

Kad korisnik prevuče kursor preko dugmeta, ono se “zacakli”, simbolizujuči  da je “spremno da bude kliknuto”

Ne treba mu JavaScript

Po mogućnosti, sve akcije i animacije trebalo bi da budu riješene samo CSS-om, bez potrebe za JavaScript kodom. 

Proces pravljenja jednog ovakvog dugmeta možete pogledati u video-tutorijalu ispod, a čitav kod korišten u projektu (uz mali bonus) nalazi se na dnu članka.

Milutin Pavićević

Milutin Pavićević

UX dizajner

Red programiranja, red dizajna, red SEO analize, a između redova sati i sati istraživanja, razumijevanja korisnika, tumačenja analitike, testiranja i tek onda primjene na konkretnim projektima. U slobodno vrijeme pobjeđuje u asocijacijama, igra i pravi video igre ili nas uporno ubjeđuje u ispravnost rješenja zadataka iz matematike.

Ostanite u toku!

Ostanite u toku!

Prijavite se na Alicorn e-mail časopis i budite u toku sa najnovijim člancima našeg tima. Nema spama. Poruke šaljemo rijetko, isključivo kad imamo nešto važno da kažemo.

Hvala! Uspješno ste se prijavili!