Gumbi so med najbolj priljubljenimi in nujnimi interaktivnimi elementi uporabniškega vmesnika spletne strani ali aplikacije. Še več, so najbolj pomembni za ustvarjanje trdnih interakcij in pozitivne uporabniške izkušnje. Danes podrobneje pogledamo in definiramo, kateri so gumbi na spletni strani in mobilni aplikaciji.
Kazalo
Kaj so gumbi na spletni strani?
Gumb je interaktivni element, ki omogoča, da pride do interaktivne povratne informacije iz sistema po določenem ukazu. Gumb je pravzaprav ukaz, ki omogoča uporabniku, da neposredno komunicira z digitalnim izdelkom in pošlje potrebne ukaze za doseganje določenega cilja. Na primer, to je lahko ukaz, da se pošlje e-pošto, kupi izdelek, prenesejo podatki ali vsebina, vklopi predvajalnik in številna druga dejanja. Eden od razlogov, zakaj so gumbi tako priljubljeni in uporabniku prijazni je, da učinkovito posnemajo interakcijo s predmeti v fizičnem svetu.
Sodobni UX (uporabniška izkušnja) gumbi so res raznoliki in lahko služijo veliko namenom. Tipični gumb je jasno prepoznaven z določeno geometrično obliko in tekstom, ki pojasnjuje, kakšno dejanje bo preko njega izpolnjeno.. Oblikovalci si morajo vzeti kar precej časa in se potruditi, da bi ustvarili učinkovite in opazne gumbe, ki se vključijo v splošni stilski koncept, a so vendar dovolj kontrastni, da izstopajo v zasnovi.
Vrste gumbov, ki se pogosto uporabljajo v mobilnih in spletnih vmesnikih
CTA gumb ali gumb za poziv k dejanju
CTA (Call to Action) gumb je interaktivni element uporabniškega vmesnika, ki je namenjen spodbujanju uporabniku, da izvrši določeno dejanje oz. akcijo. To dejanje predstavlja konverzijo za določeno stran ali aplikacijo (na primer nakup, kontakt, naročilo, itd.). Z drugimi besedami, pasivni uporabnik postane aktivni. Tehnično je torej to lahko katerikoli gumb, na katerem se nahaja tekst za poziv k akciji. Kar ga razlikuje od vseh drugih gumbov na strani je njegova naravnanost k izvrševanju dejanja: mora vzbuditi pozornost in spodbuditi uporabnike, da opravijo zahtevano dejanje.
Gumb grafično oblikovanje Majda Rogelj
Na primeru moje spletne strani, kjer je glavna dejavnost grafično oblikovanje, vidimo, kaj pomeni hierarhija gumbov. Prvi, glavni CTA gumb poziva h kontaktu in je največji, najbolj opazen. Spodnji gumbi, ki vodijo naprej v podstrani pa so manjši, a še vedno vidni in jasni.
Tekstovni gumb
Definicija tega gumba je preprosta – to je gumb, ki ga predstavlja neko besedilo. To pomeni, da tekst ni del neke oblike, zavihka ali česa podobnega. Lahko bi rekli da pravzaprav ne izgleda ravno kot klasični spletni gumb, saj je predstavljen zgolj s tekstom. Kljub temu pa uporabnikom omogoča interakcijo z vmesnikom. Te gumbe pogosto prepoznate zato, ker so označeni z drugo barvo kot tekst ali podčrtani. Tekstovni gumbi se običajno uporabljajo za ustvarjanje sekundarnih interaktivnih območij, ne da bi pri tem „motili“ glavne gumbe, kot so gumbi za poziv k dejanjem.
Spustni gumb
Ko kliknete na spustni gumb, ta prikaže spustni seznam določenih elementov. Pogosto je tak gumb npr. Nastavitve. Ko uporabnik izbere eno od možnosti na seznamu, je običajno označena kot aktivna, na primer z barvo.
Gumb hamburger
To je gumb, pod katerim se skriva meni. Ko nanj kliknete, se meni razširi. Ta vrsta gumba oz. menija je dobila ime zaradi svoje oblike iz treh vodoravnih črt, ki izgledajo kot hamburger. Danes je to široko uporabljen interaktivni element spletnih in mobilnih aplikacij.
Debate o tem, ali je ta element učinkovit ali ne pa še vedno potekajo.
Redni obiskovalci spletnih strani vedo, da ta gumb skriva različne kategorije vsebine spletnega mesta, tako da ne potrebujejo dodatnih pojasnil in pozivov. Prednost hamburger menija oz. gumba je, da zavzame zelo malo prostora in s tem naredi spletno stran bolj minimalistično in zračno. Z vidika funkcionalnosti prihrani veliko prostora za druge pomembne elemente postavitve. Dodatna prednost je tudi, da gre za odziven in prilagodljiv navigacijski element za vse naprave, predvsem mobilne telefone.
Ena največjih slabosti se kaže predvsem pri nerednih obiskovalcih spleta. Ti mogoče ne znajo prepoznati tega znaka kot gumba oz. menija. Zna imeti negativen vpliv na navigacijo in lahko postane razlog za slabo uporabniško izkušnjo. Zato se je treba o uporabi gumba hamburger odločiti šele potem, ko raziščete profil in potrebe vaših uporabnikov ter računalniško pismenost vaše ciljne skupine.
Čeprav hamburger meniji in gumbi še vedno sprožajo številna vprašanja in dvome v sodobnem spletnem in aplikacijskem oblikovanju, se vseeno pogosto uporabljajo.
Gumb SQS industrijska oprema
Podjetje SQS je specialist za industrijsko opremo, v njihovem prodajnem programu se nahaja številna kakovostna oprema, tako profesionalen varilni aparat in varilna žica kot zmogljiv industrijski sesalec in odsesovalna roka. Ker je ciljna skupina precej specifična in je bolj usmerjena v končne izdelke kot dizajn, je tako tudi oblikovana uporabniška izkušnja. Opazen, rumen gumb se nahaja nad menijsko strukturo in kar kliče po pozornosti. Ne glede na to, kje na strani se uporabnik nahaja ima v vidnem polju vedno CTA gumb, preko katerega lahko pošlje povpraševanje.
Gumb za dodajanje
Klik na gumb za dodajanje uporabniku omogoča, da v sistem doda nekaj novih vsebin. Glede na vrsto aplikacije je to lahko nova objava, kontakt, lokacija, opomba, element na seznamu – vse, kar je osnovno dejanje za digitalni izdelek. S klikom na gumb so uporabniki včasih neposredno preusmerjeni na okno za ustvarjanje vsebine, v določenih primerih pa se odpre vmesno okno z dodatnimi možnostmi, kjer lahko izberejo in dodajajo vsebine še bolj usmerjeno.
Gumb za deljenje
Zaradi visoke priljubljenosti socialnih omrežij, klepetov in pošiljanja e-pošte, ti gumbi poenostavijo proces povezovanja aplikacije ali vsebine spletnega mesta z družbenimi profili uporabnika. Gumb te vrste uporabniku omogoča, da deli vsebino neposredno na profile družabnih omrežij. Da je takoj razvidno, na katero omrežje vodi povezava, so gumbi predstavljeni z ikonami socialnih omrežij, ki so takoj prepoznavna.
Ena od oblik teh gumbov so tudi gumbi, ki sicer ne omogočajo delitev vsebine, uporabnika pa pripeljejo na izbrano družabno omrežje.
Nevidni gumb
Nevidni gumb je prozorni gumb, ki izgleda prazno. Zato se pogosto imenuje tudi “prazen”, “votel” ali celo “gol”. Njegova vizualna prepoznavnost kot gumb je običajno zgolj tanek rob okoli teksta. Ta vrsta gumba pomaga postaviti vizualno hierarhijo v primeru, da obstaja več elementov CTA: glavni CTA gumb je klasičen, poln, medtem ko je sekundarni CTA gumb (še vedno aktiven) v obliki nevidnega gumba.
Gumb infrapaneli Planet Infrapanel
Eden od specialistov podjetja Panheat je tudi Planet Infapanel, ki zagotavlja panele najvišje kakovosti. Sredi barvne sheme, ki je sicer oranžno-rdeča izstopa velik CTA gumb, ki je umeščen na stran in ga ni mogoče spregledati.
Lebdeči gumb (FAB)
FAB (floating action button) ali lebdeči gumb predstavlja predstavlja primarno delovanje na zaslonu aplikacije. Običajno je to okrogla ikonica, dvignjena (lebdi) nad drugo vsebino strani. Ta gumb običajno omogoča takojšen dostop do bistvenih ali priljubljenih dejanj, ki jih uporabniki opravijo v aplikaciji. Glede na oblikovanje in informacijsko arhitekturo mobilne aplikacije, lebdeč gumb lahko:
- opravi glavno dejanje (odpre zaslon nove e-pošte, odpre zaslon za dodajanja vsebine, poišče potrebno vsebino v galeriji itd.)
- pokaže dodatna dejanja
- se preoblikuje v druge elemente UI
Položaj lebdečega gumba na zaslonu se običajno določi s faktorjem visoke vidljivosti in se lahko razlikuje glede na splošni koncept oblikovanja zaslonov aplikacij. Pravilo palca pravi, da se uporabi samo en tak gumb na zaslonu.
Na kaj paziti pri oblikovanju gumbov, da bodo ti učinkoviti?
Velikost
Velikost je eden najpomembnejših načinov obveščanja uporabnikov o pomembnosti elementa postavitve in hierarhije komponent. Privlačen in učinkovit gumb za poziv k dejanju npr. mora biti dovolj velik, da ga hitro opazimo, vendar ne prevelik, da ne ni bi porušili strukture strani.
Marketinški specialisti pogosto podajajo smernice za ustrezne velikosti gumbov. Apple recimo pravi, da morajo biti CTA v mobilnem uporabniškem sistemu vsaj 44 х 44 slikovnih pik, Microsoft pa priporoča 34 х 26 slikovnih pik. Če gumbe načrtujete za mobilne naprave, so lahko zahteve za različne vrste gumbov precej stroge, zato temeljito preučite smernice, da zmanjšate tveganje zavrnitve aplikacije zaradi slabega oblikovanja UI.
Barva
Da bi lahko razlikovali, kateri gumbi so pomembni in kateri sekundarni, je nujno, da izberete ustrezno barvo. Dejstvo je, da sta naše razpoloženje in vedenje zelo odvisna od vizualnega okolja, in barva je kar se tega tiče eno izmed najmočnejših orodij. Ko izbiramo barve za CTA gumbe je pomembno, da upoštevamo sledeče – gumbe in barve ozadja je treba dobro razlikovati, da bi gumb hitro izstopal od drugih komponent UI.
Oblika
CTA gumbi pogosto izgledajo kot vodoravni pravokotniki. Razlog je v tem, ker mora takoj razvidno, da je gumb klikabilen in interaktiven – pravokotne oblike pa obiskovalci zaznavajo točno tako. Lahko se ga oblikuje z zaobljenimi ali ravnimi vogali, odvisno od splošnega slogovnega koncepta spletne strani.
Postavitev
Namestitev gumbov je ključnega pomena za izgradnjo trdne vizualne hierarhije in jasne navigacije. Če se gumbi nahajajo na območjih, kjer jih uporabniki ne vidijo, tudi drugi vizualni faktorji, kot so barva in velikost, morda ne bodo delovali učinkovito. Oblikovalci se morajo zavedati, katera območja uporabniki skenirajo najprej in postaviti gumbe tja, kjer bodo najbolj opazni.
Besedilo
Učinkovit tekst je običajno kratek, vendar jasen in jedrnat, da lahko hitro ujame pozornost uporabnikov. Pogosto se zapiše z velikimi črkami, da je gumb še bolj privlačen in opazen. Kljub temu, da ni potrebno, se oblikovanje gumba izvede po splošnem oblikovalskem konceptu, tipografiji in razpoloženju besedilnega sporočila.