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

Dugogodišnji borac za zaštitu korisničkog iskustva na svim online i offline frontovima. Kod njega je svaki vebsajt, aplikacija i servis istraživanje, analiza i učenje, a onda i primjena na svojim projektima. Kombinuje dizajn i programiranje, matematiku i psihologiju, u proizvode i servise uz puno ljubavi. Vječiti istraživač i hodajuća enciklopedija.

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

Dugogodišnji borac za zaštitu korisničkog iskustva na svim online i offline frontovima. Kod njega je svaki vebsajt, aplikacija i servis istraživanje, analiza i učenje, a onda i primjena na svojim projektima. Kombinuje dizajn i programiranje, matematiku i psihologiju, u proizvode i servise uz puno ljubavi. Vječiti istraživač i hodajuća enciklopedija.

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!