Savjeti za dizajn gumba: jednostavni, mali i vrlo važni
Puno razgovaramo o detaljima u dizajnu. To je s dobrim razlogom. Obraćajući pažnju i na najmanje detalje, može se napraviti ili pokvariti dizajn.
Danas ćemo zaroniti dublje u jedan od tih detalja i pogledati načine dizajniranja gumba na koje korisnici žele kliknuti (ili dodirnuti). Iako su gumbi mogu jedan od najmanjih elemenata u vašem dizajnu, oni su jedan od najvažnijih. Kako biste drugačije priopćili radnje korisniku? Kako bi u protivnom osigurali informacije u toj petlji povratnih informacija?
Pomislite na trenutak na jedan od velikih prigovora zbog ravnog dizajna u ranim fazama: Korisnici nisu znali što je, a što nije interaktivno u dizajnu. Stoga je važnost velikog dizajna gumba.
Istražite dizajnerske resurse
Trebao bi izgledati dirljivo
Korisnici bi trebali vidjeti gumb u dizajnu i misliti da im treba - htio, htjeti - pružiti ruku i dodirnuti je. Iako se na ekranu može kliknuti gotovo bilo koju veličinu, veličina i obloga oko gumba na dodirnom uređaju su vitalni.
Prosječni korisnik ima veličinu prsta koja iznosi između 8 i 10 milimetara. S tim na umu meta od 10 do 10 milimetara je velika početna ciljna veličina za gumbe na dodirnim uređajima. (To je nešto manje od standardnih tipki na vašoj tipkovnici.)
Postoji nekoliko dizajnerskih stvari koje možete učiniti kako biste i jedan element izgledali dirljivo.
- Suptilna sjena može "podići" element s pozadine kako bi se osjećao malo bliže korisniku.
- Povećana obloga oko gumba čini ih lakšim za klikanje i pomaže korisniku da usmjeri element.
- Akcijske akcije pokazivača miša ili prebacivanja mogu u stvarnom vremenu pokazati što rade i označiti akciju.
Materije u boji
Boja gumba mora biti posebna u dizajnu web stranice. Ovo je dobro mjesto za korištenje određene naglasne boje i korištenje samo za akcije gumba.
Boja gumba treba biti svijetla i privlačna. Postoji razlog zašto toliko mnogo dizajna uključuje gumene žute, plave ili zelene. Jednostavno ih je vidjeti i istaknuti od ostatka dizajna. Za gumb koji se zaista ističe, odaberite boju koja je komplementarni par glavnoj boji u dizajnu (suprotstavlja se kotaču u boji).
Druga boja je marka. Želite odabrati boju gumba koja funkcionira s vašom paletom boja i identitetom marke. Bez obzira koliko želite da se boja gumba istakne u dizajnu, ona bi trebala raditi - ne protiv - vaše glavne sheme boja.
Veličina je bitnija
Učinite to velikim!
Gumbi je potrebno malo premotati tako da ih korisnici odmah privuku na ekranu. Trend gumbenih gumba - obrisi bez izrazite boje gumba - fokusiran na velike tipke u smislu broja piksela, ali bez vizualne težine. U pogledu veličine, gumb mora biti velik u oba aspekta. (To je jedan od razloga što je trend ispao iz mode.)
Postoji malo škakljivo mjesto kada gumb pređe iz savršeno veličine u neugodno preveliku veličinu. Točno kada se to dogodi ovisi o skali drugih elemenata dizajna, ali sigurno ćete znati kada se to dogodi. Ako je gumb sve što vidite u dizajnu, velike su šanse da je prevelik.
Položaj je ključan
Gdje bi u dizajnu gumb trebao ići? Postoji li lokacija koja će pomoći generiranju klikova više od ostalih?
U većini slučajeva, gumbi trebaju slijediti sadržaj koji su osmišljeni da nadopunjuju.
- Na kraju obrasca
- Desno od poruke poziva na akciju
- Pri dnu stranice ili zaslonu
- Centrirano ispod poruke
Zašto ovi položaji? Jer slijedi prirodni put akcije i način na koji korisnici čitaju i komuniciraju s web stranicama.
Usredotočite se na kontrast
Uz sve elemente dizajna, kontrast je važno razmatranje. To se odnosi na tehnike koje se koriste unutar samog elementa, ali i na odnos elementa i njegovog položaja u dizajnu i okoline.
Ne zaboravite razmisliti o sljedećim tehnikama u ovom dualnom okruženju:
- Boja
- Vrsta težine i veličine
- Veličina elemenata
- Oblik u odnosu na pozadinu
- Transparentnost ili animacija
- Sjene ili graida
- Prostor i podloga
Koristite standardne oblike
Kad su u pitanju gumbi, imajte u vidu samo dva oblika:
- Krugovi. Kružni gumb postao je popularan zahvaljujući Material Design i Material Lite konceptima. Uz bilo koju sličnu estetiku, okrugli gumb djeluje s dizajnom i uklapa se u obrazac korisnika.
- Pravokutnici. Ovaj bi zadani oblik trebao biti vaš dodatak za sve gumbe osim ako krug ne koristite u gornjoj instanci. To je ono što korisnici znaju i na što su navikli. Većina pravokutnika tipki obično je barem dvostruko veća (ponekad tri ili četiri puta veća). Korisnici vide ovaj oblik i odmah znaju što učiniti. Iako neki mogu argumentirati prednosti zaobljenih uglova nasuprot kutovima od 90 stupnjeva, bilo je podjednako prikladno na temelju vašeg stila dizajna.
Recite korisnicima što učiniti
Svaki gumb treba sadržavati tekstualnu uputu koja korisnicima točno kaže što će gumb učiniti. Želite zadržati kratak i jednostavan jezik, a trebao bi odgovarati tonu ostatka dizajna web stranice.
Zatim, ispunite to obećanje. Sljedeće što iskoči trebao bi reći korisniku da je stigao na očekivano odredište. Bez obzira na to je li poslao obrazac, kupio ili samo prešao na drugu vezu, korisnik bi trebao ostvariti željeni rezultat interakcijom s gumbom. (Ako ne, provjerite ima li pogrešaka navedenih u petlji povratnih informacija za vas, tako da znate koje se ispravke trebaju dogoditi u dizajnu web stranice.)
Primjeri gumbenih poruka uključuju:
- Kliknite ovdje
- Kreirajte račun sada
- Isprobajte besplatno
- Dodaj u košaricu
- Čitaj više
Dajte gumbama veliku vizualnu važnost
Većina dizajna je ispunjena malim elementima UI. Jedna zamka koja se događa je dizajn ovih elemenata koji se gura dok se projekt ne završi. A onda odaberete jedan dizajn za sve UI elemente, s nekoliko malih razlika.
Nemojte se zaglaviti u ovoj opasnoj situaciji.
U dizajnu, gumbi trebaju izgledati kao samo gumbi! Ništa drugo u dizajnu ne bi trebalo imati isti oblik, boju i vizualnu težinu kao gumb. Moraju biti drugačiji. Razmislite o stvaranju stila za gumbe veće od bilo kojeg drugog sličnog elementa u dizajnu ili upotrijebite akcentnu boju koja je samo za gumbe. Ove tehnike mogu vam pomoći da gumb izgleda posebno i naglašava njegovu uporabu.
Zaključak
Počinjete li preispitati neke od svojih izbora dizajna gumba? Mislite li da možete stvoriti nešto što će bolje potaknuti klikove?
Isprobajte neke od ovih savjeta, istovremeno pazeći na analitiku svoje web stranice da biste točno vidjeli na koji dizajn utječe odgovor vaše baze korisnika. Pomoću tih podataka možete stvoriti još više gumba za klikanje za buduće projekte.
