Gumbi ... Na srajci? Ne, na spletni strani.

Kot zanimivost: zlate ribice so nas prehitele; imele naj bi 9-sekundni razpon pozornosti.Čedalje krajši razpon pozornosti je eden od razlogov, da v zadnjih letih prednjači minimalističen slog uporabniškega vmesnika, saj tako zmanjšamo število motečih elementov.Le-ta nam med drugim pomaga, da se osredotočimo samo na ključne elemente v uporabniškem vmesniku – eden od teh je gumb k pozivu (»call to action« button).

ZAKAJ JE POMEMBEN?

Gumb s pozivom k dejanju (CTA gumb) je interaktivni element uporabniškega vmesnika, tako spletnega kot mobilnega: njegov cilj je spodbuditi ljudi k določenim dejanjem, ki predstavljajo pretvorbo za določeno stran.

CTA gumb na vstopni strani Airbnb US

Načeloma je CTA gumbe enostavno opaziti, še več, oblikovalci jih namerno oblikujemo in postavimo tako, da bi spodbudili uporabnike h kliku. Običajno so to krepki gumbi, ki vsebujejo določen poziv k dejanju (npr. "Preberi več" ali "Kupite zdaj").

Privabljanje in ohranjanje novih uporabnikov so osnovni poslovni cilji, za katere je mogoče ustvariti pozive k dejanju. Kadar je oblikovanje gumbov dovolj prepričljivo, da takoj pritegne pozornost potencialnih strank, jih s CTA gumbom prepričamo, naj kliknejo in preidejo na naslednjo stopnjo, kot je izpolnjevanje obrazca za stike ali prednaročanje izdelka.

Spletna trgovina Best Secret  – izpostavljen CTA gumb »Add to cart« na desni strani

Na ta način vodimo uporabnike skozi prodajni lijak iz prve faze v naslednjo, kar jim omogoči, da se seznanijo s podrobnostmi o izdelku ali storitvi. Dogaja pa se, da tudi zelo strokovno zasnovane vsebine morda ne bodo zagotovile visoke uporabniške angažiranosti – toda brez CTA gumbov bodo ljudje verjetno še hitreje skenirali vsebino in jo pustili nedotaknjeno.

Nekateri morda mislijo, da je uspešen CTA gumb zgolj velike geometrijske oblike in svetle barve, s čimer doseže svoj cilj, toda – ni tako.

VELIKOST

Čim večji je element, bolj je viden. Glede na to, da je glavni cilj CTA gumbov, da pritegnejo uporabnikovo pozornost, ga želimo oblikovalci pogostokrat izpostaviti od ostalih gumbov.

Prepričljiv CTA gumb je običajno dovolj velik, da ga hitro najdemo, in obenem dovolj majhen, da ustrezno stoji v vizualni kompoziciji. V digitalnem svetu sicer obstajajo minimalne omejitve velikosti CTA gumbov v mobilni aplikaciji – Apple priporoča minimalno velikost 44x44px, Microsoft pa velikost 34x26px.

Na levi strani sta gumba pravilno oblikovana, na desni sta premajhna (slika: Apple).

BARVA IN OBLIKA

Najpogosteje so CTA gumbi videti kot vodoravni pravokotniki, saj smo ljudje že od samega začetka navajeni to obliko dojemati kot gumbe, na katere je mogoče klikniti.

Že dobri stari Windows 95 je vseboval gumbe v pravokotni obliki (slika: SlashGear).

Priporočljivo je tudi oblikovati CTA gumb z zaobljenimi vogali, saj oblika vogalov preusmeri pozornost na besedilo (copy) v gumbu.

Izbira barve je odvisna od grafične podobe spletnega mesta ali mobilne aplikacije − upoštevati moramo osnovno barvo kompozicije ter potencialne preference in psihološke posebnosti ciljnega občinstva. Ob izbiri barv za CTA je treba upoštevati pogoj: barva ozadja mora biti dovolj kontrastna, da bi CTA gumb izstopal od ostalih komponent uporabniškega vmesnika.

LEGA CTA GUMBA – KLJUČNEGA POMENA ZA DOSEG

Če se nahaja na območjih, kjer ga uporabniki ne morejo opaziti, ostale karakteristike gumba (barva, velikost) niti ne bodo prišle do izraza. Toda kako vedeti, katera umestitev bo bolj uspešna? Z uporabo vzorcev si pomagamo postaviti CTA gumb na mesta najvišje pozornosti.

Lahko si pomagamo z najpogostejšimi vzorci skeniranja spletnih strani in aplikacij: s F-vzorcem (F-pattern) in Z-vzorcem (Z-pattern).

F-VZOREC

F-vzorec je najpogostejši pri spletnih straneh z veliko vsebine, kot so blogi, novice. Uporabnik najprej pregleda vodoravno črto na vrhu zaslona, nato pa se malo premakne po strani in prebere čez vodoravno črto, ki običajno pokriva krajše območje. In zadnja je navpična črta navzdol na levi strani kopije, kjer uporabniki v začetnih stavkih odstavkov iščejo ključne besede.

Z-VZOREC

Z-vzorec je tipičen model skeniranja ciljnih strani ali spletnih mest, ki ne vsebujejo veliko »microcopyja« in ne potrebujejo drsenja po strani, kar pomeni, da so vsi osnovni podatki vidni v območju pred pomikanjem. Uporabnik najprej pregleda zgornji del strani, začenši od zgornjega levega kota, nato pa se po diagonali spusti do nasprotnega kota in konča z vodoravno črto na dnu strani, spet od leve proti desni.

BESEDILO (MICROCOPY)

Besedilo je prav tako pomembno pri učinkovitosti poziva k dejanju. »Microcopy« so manjša besedila, ki uporabnika pozivajo in vodijo po strani ali aplikaciji. Natančneje, vključujejo: besedilo v gumbih, sporočila o napakah, varnostne opombe, pogoje in kakršna koli navodila za uporabo izdelka.

»Microcopy« CTA gumb je pravzaprav klic, ki uporabnikom sporoči, kaj bodo storili, če kliknejo na ta gumb. Primeren »microcopy« za CTA gumb je običajno kratek in jasen.

CTA gumb, ki vabi k planiranju potovanja, nad njim se nahaja kreativno besedilo. Slika: Dribble (Kim Sullivan)

Priporočamo, da pri načrtovanju gumbov začnete s tistimi, ki so najbolj pomembni, in ne pozabite, da oblikovanje gumbov vedno govori o prepoznavnosti in jasnosti.