Umjetnost dizajniranja gumba korisničkog sučelja web stranice: 10 trendova i savjeta
Izvrstan dizajn gumba nešto je o čemu većina korisnika web stranica nikada ne razmišlja ... jer kad dobro funkcionira, gotovo je nevidljivo. Najbolje gumbe možete jednostavno kliknuti ili dodirnuti, očiti su funkcija i pomažu korisnicima da bez razmišljanja komuniciraju s dizajnom.
To je prilično jednostavna formula, ali može je biti teško dizajnirati ako je ostavite kao naknadnu misao.
Danas proučavamo trendove u dizajnu gumba, plus nekoliko savjeta koji će vam pomoći u dizajniranju UI gumba na koji ljudi ponovno i ponovno kliknu. Potaknite dizajn gumba uz pomoć ovih savjeta, trendova i ideja kako biste potaknuli inspiraciju.
Istražite dizajnerske resurse
1. Neka bude jednostavno
Sve se vraća na klasičnu frazu u teoriji dizajna: Držite je jednostavno, glupo (ili glupo, ako vam je draže).
Dizajn gumba web stranice nije ništa drugačiji. Dizajn gumba ne mora biti pretjerano složen. Trebao bi biti očit i funkcionalan. Ponekad to mogu spriječiti i drugi trendovi dizajna, što može utjecati na pretvorbe na vašoj web stranici.
Dakle, kad je riječ o dizajnu gumba, razmišljajte ovako - i nemojte ga pretjerivati. Gumb bi trebao izgledati poput gumba. To je tako jednostavno.
2. Omogućite obilje kontrasta
Gotovo jednako važno kao što je prepoznavanje gumba osigurava da ga je lako vidjeti.
Razlozi stilova tipki duhova na vrhu slika koji se trendiraju i izblijedjuju brzo su zato što gumbi nisu imali dovoljno kontrasta da bi ih bilo lako uočiti. Korisnici ih nisu mogli pronaći odmah.
Ne skrivajte gumbe s slabim kontrastom. Izdvojite ih i vikajte s puno kontrasta boja i prostora tako da se izdvajaju od ostalih elemenata na zaslonu. Ostavite obilje podmetača oko gumba kako bi mogli disati.
Na taj način korisnici jednostavnije pronalaze gumbe i identificiraju se kao elementi na koje se može kliknuti, a fizičkim olakšava klikanje bez pogreške pogrešnim elementom.
3. Koristite boju
Jeste li ikad primijetili koliko je gumba crveno ili narančasto? To je zato što svijetle boje privlače pogled na te elemente i potiču akciju.
Upotreba boja također je prilično trendi tehnika dizajna. Od svijetlih boja do gumba s jednostavnim gradijentima, boja bi mogla biti jedan od lakših načina za pomoć ljudima u interakciji s dizajnom.
4. Napišite mikrokopiju koja stvara očekivanje
Ne napravite ovu pogrešku: gumb s natpisom "Kliknite ovdje" na njemu. (Koliko je to neželjene pošte?)
Mikrokopija unutar dizajna gumba trebala bi stvoriti jasno očekivanje što će se dogoditi jednim klikom. Recite korisnicima što će dobiti sljedeće. Ovo može biti jednostavno kao "Pošalji" za unos podataka ili klikom na vezu "Saznajte više" ili gledanje videozapisa. Bez obzira na to što je radnja, recite korisnicima u mikrokopiji.
Te informacije mogu pomoći u stvaranju povjerenja kod korisnika i povećati konverzije radnjama / interakcijama za koje korisnici smatraju da su poželjni.
5. Bavite se suptilnom animacijom
Postoji trend u dizajnu gumba gdje web stranice koriste dva gumba jedan pored drugog. Jedna je ispunjena, a druga je stil duhova. Oba uključuju lebdeću animaciju koja dodatno naglašava dva izbora koja je moguće kliknuti.
Animacija može pomoći u privlačenju pozornosti na gumbe i čak potiče klikove. Postao je općeprihvaćeni uzorak korisnika za uključivanje lebdeće animacije na gumbe i korisnicima pruža jednostavan znak za angažiranje.
Samo nemojte pretjerivati. Okretanje, okretanje, treptanje gumba više su neugodno nego korisno.
6. Učinite ga velikim za dodir
Gumbi trebaju sadržavati područje na koje se može kliknuti (za dodir) promjera najmanje 10 milimetara, a veće je uvijek u redu. Ovaj savjet dolazi iz studije MIT Touch Lab-a koja je izgledala veličine jastučića za prste u odnosu na uređaje koji dodiruju.
Stavimo to u perspektivu. Tipična tipka na fizičkoj tipkovnici računala iznosi 15 milimetara na 15 milimetara. To je dobar cilj. (Samo ne zaboravite uzeti u obzir različite veličine zaslona kako se vaš gumb ne bi izgubio na malim ekranima.)
Ako trebate koristiti manje gumbe, razmislite o tome da dodate široki polumjer klika. Na taj način, ako korisnik propusti gumbe, ima dovoljno mjesta oko njega, tako da se željena radnja i dalje događa. (Posjetitelji vaše web stranice zahvaljuju vam.)
7. Koristite poznati stil
Postoji nekoliko općih stilova gumba s kojima su svi upoznati. Upotrijebite jedan od njih.
- Pravougaoni gumb ispunjen kvadratnim rubovima i tekstom iznutra
- Pravougaoni gumb ispunjen sa zaobljenim rubovima i tekstom iznutra
- Pravougaoni gumb ispunjen s vidljivom kapom sjena (gore)
- Pravougaoni gumb duha
- Jednostavni gumbi za krug, koji se najčešće koriste u donjem desnom kutu za označavanje podrške, pomoći ili chatanja
8. Stavite na očekivano mjesto
Ne samo da se gumbi moraju pojavljivati i očekivano funkcionirati, već se moraju nalaziti na mjestu koje će ih korisnici tražiti.
- Za početne stranice, to uključuje položaj gumba ispod glavnog naslova ili bloka teksta. Gumbi su obično lijevo poravnani s tekstom ili u sredini ekrana.
- Za obrasce, gumbi se pojavljuju nakon unosa. Neki obrasci za pojedinačni unos poravnavaju gumb u istom retku desno od unosa.
- Opći CTA gumbi pojavljuju se neposredno ispod sadržaja na koji upućuju.
- Gumbi za reprodukciju ili pokretanje videozapisa ili igre često su na sredini zaslona za pregled.
- Košarica ili gumbi za e-trgovinu obično su u gornjem desnom kutu.
9. Ne zaboravite povratne informacije
Odgovara li gumb na interakciju? Provjerite je li u dizajn sučelja tipki uključena očita petlja za povratne informacije.
Navedite vizualni ili instruktivni znak da je gumb učinio svoj posao. Neki će gumbi potrajati više posla nego drugi. Na primjer, gumbi koji se povezuju s drugom stranicom ili web-lokacijom daju povratne informacije da je gumb funkcionirao ako se nova stranica učita. Gumb za predaju obrasca mogao bi na zaslonu pružiti poruku zahvale ako se informacije dostave ispravno.
10. Upotrebljavajte gumbe namjerno
Previše tipki stvara kaos.
Koristite gumbe tamo gdje imaju smisla. Dizajn nemojte preopteretiti tipkama po cijelom mjestu. Korisnici neće imati jasnu ideju gdje i što je najvažnije kliknuti.
Spremi gumbe za upotrebu s ciljevima web lokacije. Oni bi trebali posjetitelje privući elementima koji su najvažniji u vašem cjelokupnom dizajnu.
Zaključak
Gumb za web mjesto je element koji vaš poziv na radnju pretvara u rezultat. Uzmite vremena da razmislite o ovom dizajnu, od boje do funkcije do mikrokopije. Dizajn tipki dizajnira kako bi se osiguralo da imate najfunkcionalniju verziju na vašem sučelju.
Ako imate gumb koji radi, ne upadajte u zamku trendova i ne mijenjajte dizajn. Kad je riječ o gumbima, funkcija bi trebala biti glavni prioritet.
