”Toimintakutsun” painikkeet Ohjeet, parhaat käytännöt ja esimerkit

Sivuston kutsupainikkeita ei usein oteta huomioon. Suunnittelijat eivät joskus ymmärrä tarkalleen, mikä tekee hyvän toimintakutsupainikkeen sen lisäksi, että se on houkutteleva ja sopiva koko muotoiluun. Toiminta-painikkeet ovat kuitenkin liian tärkeitä, jotta ne voidaan suunnitella ilman minkäänlaista ymmärrystä siitä, mikä tekee niistä tehokkaita. Loppujen lopuksi toimintapainikkeen painopiste on saada kävijät tehdä jotain.

On tärkeää saada ainakin peruskäsitys siitä, miten väri, mittakaava, kieli ja muut tekijät vaikuttavat toimintopainikkeen muuntokurssiin. Tässä esitetyt käsitteet eivät ole monimutkaisia, mutta ne vievät hieman ennakoitua ja suunnittelevat, että luodaan tehokkain kutsupainikkeita, jotka ovat mahdollisia tietyssä mallissa. Lue lisää näistä kohdista ja lisää.

"Toimenpide" -painikkeiden tarkoitus

Toimintopainikkeet voivat palvella erilaisia ​​toimintoja. Kuitenkin, “kehotus toimintaan” on todella vähän epämääräinen. Kaikki se tarkoittaa sitä, että sen päätarkoitus on saada sivustosi kävijä tee jotain. Se, että jotain voisi lisätä tuotetta ostoskoriinsa, ladata jotain, pyytää tietoja tai vain muuta.

Koska toimintopainikkeilla on niin monipuolisia tarkoituksia, on paljon huomiota kiinnitettävä siihen, mitä painike pyrkii saavuttamaan. Sivuston tyyppi, kohdemarkkinat ja haluttu toiminta voivat kaikki vaikuttaa siihen, miten toimintakutsupainike voidaan parhaiten suunnitella.

Toimintopainikkeiden tyypit

Toimintopainikkeita on muutamia erilaisia. Kunkin tyypin tavoitteena on saada kävijät suorittamaan tietty toiminta, mutta toiminta voi vaihdella huomattavasti. Alla on yleisimpiä toimintopainikkeita, jotka perustuvat toimiin, joita he haluavat tehdä.

1. Lisää ostoskoriin painikkeet

Sähköisen kaupankäynnin sivustot käyttävät yleensä useita soittopainikkeita, mutta yleisimmin käytetty “Lisää koriin” painiketta. Nämä painikkeet näkyvät yleensä yksittäisillä tuotesivuilla. Niiden tarkoituksena on houkutella asiakkaita ostamaan kohde. Tavallisissa muotoiluelementeissä lisätään korin painikkeisiin yksinkertainen sanamuoto (kuten “Lisää koriin>” tai “Lisää kassiin” tai “Osta nyt“) ja kuvakkeiden käyttö (yleensä pussi tai kori).

2. Lataa painikkeet

Latauspainikkeet ovat samanlaisia, kun lisäät koripainikkeisiin, koska he yrittävät houkutella kävijää ottamaan kohteen haltuunsa. Latauspainikkeiden tapauksessa monet suunnittelijat valitsevat lisää tietoja kuin muut painikkeet (kuten versiotiedot tai latauskoko).

3. Kokeilupainikkeet

Jotkut sivustot yrittävät houkutella kävijöitä kokeilemaan tarjouksiaan yleensä ilmaisen kokeilun muodossa. Tämä voi olla ilmainen lataus tai ilmainen tili tietystä sivustosta riippuen. Jotkut sivustot käyttävät “vähemmän on enemmän” filosofia ja pidä kieli painikkeillaan mahdollisimman vähäisinä, kun taas toiset haluavat tarjota enemmän tietoa siitä, mitä oikeudenkäynti sisältää.

4. Lue lisää painikkeita

Lue lisää painikkeita käytetään yleensä teaser-tietojen lohkon lopussa (usein kotisivulla). Nämä painikkeet ovat yleensä yksinkertaisia, mutta usein liian suuria houkuttelemaan kävijöiden huomiota.

5. Rekisteröidy -painikkeet

Rekisteröidy-painikkeet näkyvät yleisimmin kahdessa eri versiossa. Ensimmäinen tyyppi liittyy yleensä suoraan rekisteröintilomakkeeseen. Toista tyyppiä käytetään yleensä samalla tavalla “Lisää koriin” painikkeita, jotta käyttäjät voivat ostaa tai kirjautua palveluun tai tiliin, ennen kuin ne todella saavuttavat ilmoittautumislomakkeen.

Toimintopainikkeita on muitakin, mutta ne ovat yleisimpiä. Edellä mainittuihin suuntaviivoihin sovelletaan todennäköisesti myös mitä tahansa muuta toimintopainiketta, jota voit suunnitella.

Negatiivisen tilan käyttäminen tehokkaasti

Haluatko kutsua toimintopainikkeesi erottumaan ympäröivästä sisällöstä ja todella ohjata sivustosi kävijöitä. Tätä varten sinun on käytettävä näiden painikkeiden ympärillä olevaa negatiivista tilaa. Sisällytä tyhjä tila sisällön ja toimintopainikkeen välillä. Vaikka tämä on vähemmän tärkeää (ja vähemmän yleistä) joillakin painikkeilla, kuten lisätä koripainikkeisiin, toiset, kuten ne, jotka oppivat lisää, toimivat paremmin enemmän tilaa.

On tärkeää tasapainottaa negatiivisten tilojen määrä painikkeiden ympärillä itse painikkeiden koon kanssa. Kyse on suhteesta. Haluatko, että painike, sen ympärillä oleva tila ja ympäröivä sisältö näyttävät samalta kuin ne menevät yhteen, vaikka koossa olisikin eroja. Saatat joutua viettelemään hieman asioiden parissa, jotta heidät katsottaisiin juuri oikein.

Jotkin ohjeet:

• Varmista, että painikkeen ympärillä on tarpeeksi tilaa, jotta se ei tuntuisi sekavalta
• Mieti periaatteita, kuten kolmansien sääntöjä tai kultaista suhdetta, kun määrität, kuinka paljon tilaa on
• Negatiivinen tila antaa soittopainikkeellesi huoneen erottua toisesta sisällöstäsi ja asettaa sen erilleen

Koko ja Väri

Kuinka suuri painopiste on erittäin tärkeä. Liian suuri painike voittaa kaiken sen ympärillä. Liian pieni painike häviää sivun kaikkien muiden sisältöjen sekoittamisessa. Haluat, että painikkeenne on tarpeeksi suuri erottumaan ylivoimaisesta suunnittelusta.

Väriä voidaan käyttää tehokkaasti painikkeiden tasapainon tasapainottamiseen. Suuremmille painikkeille valitse väri, joka on vähemmän näkyvissä suunnittelussa (mutta silti erottuu taas taustasta). Pienemmälle painikkeelle voit halutessasi valita kirkkaamman ja kontrastisemman värin, jotta voit tehdä painikkeen popista. Kummassakin tapauksessa varmista, että käyttämäsi väri asettaa painikkeen toisistaan ​​ilman, että se kohtaa sivuston kokonaissuunnittelua.

Jotkin ohjeet:

• Toimintopainikkeiden pitäisi mieluiten olla tietyn sivun suurimmat painikkeet
• Käytä pienempiä painikkeita erottuvilla väreillä
• Käytä vähemmän erillisiä värejä, jotta ylisuuret painikkeet sopivat paremmin
• Voit kutsua toimintopainikkeita ohjaamaan huomiota ilman, että suunnittelette

Kieli

Tarkka sanamuoto, jota haluat käyttää toimintopainikkeissa, voi vaikuttaa valtavasti muuntamiseen. Vertailla “Osta nyt” kanssa “Lisää koriin>“. Yksi on paljon kiireellisempi kuin toinen. Tai miten “Kokeile sitä ilmaiseksi” kanssa “Ilmainen kokeilu“? Yksi on paljon punchier kuin toinen ja erottuu enemmän.

Toimintopainikkeissa käytettävän kielen tulisi olla mahdollisimman suoraviivainen ja yksinkertainen. Haluat, että kävijät tietävät vain yhdellä silmäyksellä, mitä he saavat, kun painat painiketta. Jos ne kyseenalaistavat, se tarkoittaa, että he ovat keskeyttäneet, mikä voi johtaa pienempiin muuntokertoihin.

Älä unohda myös kirjasinkokojasi. Toimintopainikkeen tekstin tulee olla suuri ja lihavoitu, sopiva oikein itse painikkeen koko ja väri. Varmista, että kontrastia on riittävästi ja että tekstiä on helppo lukea.

Jotkin ohjeet:

• Käytä yksinkertaista ja suoraa kieltä
• Käytä suurta, lihavoitua fonttia päätekstin painikkeessa
• Varmista, että kieli vaatii tiettyä toimintoa

Luo kiireellisyys

Haluat, että sivustosi kävijät suorittavat halutut toimet mahdollisimman vähän ajatellen. Vaikka et halua pettää kävijöitäsi, sitä enemmän mahdollisuuksia annat heille pysähtyä ja pohtia, mitä he tekevät, sitä enemmän mahdollisuuksia annat heille sanoa “ei”.

Haluat, että painikkeet antavat heille vaikutelman, että heidän täytyy toimia heti. Haluatte rohkaista heitä tekemään päätöksensä heti, hetkestä lähtien. Vaikka tämä ei toimi jokaiselle toimintakutsupainikkeelle (erityisesti niille, jotka ostavat korkean lipun kohteita), halpojen tai ilmaisten toimien osalta on toivottavaa, että kävijät napsauttavat vähän ennakoimattomasti..

Jotkin ohjeet:

• Kannusta kävijöitäsi toimimaan välittömästi
• Älä anna kävijöille mitään syytä keskeyttää
• Vaikka kiireellisyys on tärkeää, älä harjoita kävijöitä millään tavalla

Anna lisätietoa

Käytä tarvittaessa soittopainikkeita antamaan kävijöille lisätietoja siitä, mitä he saavat, jos he napsauttavat painiketta. Tämä näkyy yleisimmin kokeilupainikkeilla tai latauspainikkeilla. Yleisiä esimerkkejä ylimääräisistä tiedoista ovat se, kuinka kauan vapaa kokeilu kestää tai tiedoston koko. Myös versiotiedot ovat yleisesti nähtävissä.

Kun lisäät lisätietoja, muista, että sinun täytyy keskittyä todelliseen toimintakutsuun. Varmista, että kävijöiden houkuttelevan kielen teksti on näkyvin, ja muita tietoja on vähemmän näkyvissä.

Jotkin ohjeet:

• Sisällytä vain ylimääräisiä tietoja, kun se lisää käyttäjäkokemusta
• Lisätiedot ovat tarkoituksenmukaisia ​​vain tietyntyyppisissä soittopainikkeissa, erityisesti lataus- tai kokeilupainikkeissa
• Varmista, että pääpuhelu on edelleen painikkeesi näkyvin teksti

asettaa etusijalle

On tärkeää priorisoida sivun puhelutoimintopainikkeet, jos niitä on enemmän kuin yksi. Tämä voidaan tehdä useilla tavoilla, mutta yleisimmät ovat värin ja koon käyttö.

Korosta sivun tärkein painike käyttämällä väriä tai vähäisempien tekeminen näyttävät vähemmän näkyviltä. Tai käytä kokoa, jotta tärkein painike erottuu (tekemällä se suuremmaksi) ja vähennä vähemmän tärkeitä painikkeita.

Kuvakkeet ja kuvat

Visuaalisten vihjeiden sisällyttäminen soittopainikkeisiin voi myös auttaa parantamaan tulosprosentteja. Kuvake ostoskorista “Lisää koriin” esimerkiksi, tai nuolipainike on molemmat hyviä esimerkkejä. Ajattele myös ainutlaatuisia kuvakkeita, joita voit käyttää, mutta varmista, että kuvake lisää käyttäjäkokemusta selventämällä mitä painike on, eikä lisää sekaannusta.

Jotkin ohjeet:

• Varmista, että käyttämäsi kuvakkeet selventävät painikkeen merkitystä, eivätkä sekoita sitä
• Helposti tunnistetut kuvakkeet voivat välittömästi ilmoittaa kävijöillesi merkityksen
• Älä pelkää käyttää vähemmän yleisesti käytettyjä kuvakkeita, kunhan niiden merkitys on edelleen selvä

esimerkit

Tässä muutamia esimerkkejä suurista soittopainikkeista. Vaikka ne eivät kaikki ole täysin edellä mainittujen suuntaviivojen mukaisia, ne täyttävät riittävästi kriteereitä, joita pidetään suurina.

livestream - "Osta nyt" (maksullisten vaihtoehtojen) ja "rekisteröinnin" (maksuttomia vaihtoehtoja) -painikkeiden erottaminen on hyvä strategia.

Windows 7 - Iso, vihreä "Get Windows7" ​​-painike on helppo kävijöille.

Fileshare HQ - Kirkas vihreä painike erottuu todella valkoisesta taustasta.

lokikirja - Erilaisten värien käyttö "Lataa" - ja "Osta" -painikkeissa asettaa ne erilleen ja asettaa etusijalle "Osta" -painikkeen.

TasteBook - Tämä painike hyödyntää suuresti kuvaketta ja käyttää suurempaa, lihavoitua tekstiä.

GoodBarry - Toinen kirkkaan vihreä toimintopainike.

Lifetree Creative - Saman kirjasimen jatkaminen kehon kopiosta toimintopainikkeeseen luo koheesiotunteen.

Resumator - Kirkas punainen toimintopainike lihavoituina erottuu sinistä taustaa vasten.

Notepod - Hyvä esimerkki ylimääräisten tietojen sisällyttämisestä toimintakutsupainikkeeseen.

Inkd - Hyvä esimerkki painikkeiden priorisoinnista.

Elegantit teemat - Toinen erinomainen esimerkki värin käytöstä erottuu ilman ympäröivien muotoiluelementtien tarttumista.

Zendesk - Toinen loistava esimerkki painikkeen erottamisesta värin avulla.

Storenvy - Pyöreä painike on odottamaton ja erottuu erityisesti valkoisen reunan ympäröimänä.

Bara'Mail - Joskus painike, joka sulautuu, toimii paremmin koko sivuston suunnittelussa, varsinkin silloin, kun toiminta on vähemmän kiireellistä.

Lisää resursseja

• Toimintopainikkeet: esimerkit ja parhaat käytännöt - Smashing Magazine -lehdestä
• Hyvät toimintapainikkeet - UX Boothista
• Toiminta-painikkeet: Onko koko merkitystä? - Get Elasticista
• 10 Tehokkaat tekniikat “Kehotus toimintaan” - Boagworldista
• 5 Vinkkejä tehokkaan puhelun soittamiseen -painikkeeseen - SitePointista