„Cselekvési felhívás” gombok Iránymutatások, legjobb gyakorlatok és példák

A webhelyeken található cselekvési gombok gyakran elhanyagolhatók. A tervezők néha nem értik pontosan, hogy mi teszi a jó cselekvési hívás gombját, hogy vonzó legyen és illeszkedjen a tervbe. De a cselekvési gombok túl fontosak ahhoz, hogy úgy tervezzék őket, hogy valamilyen megértés nélkül tudják, mi teszi őket hatékonynak. Végtére is, egy híváshívó gomb fő pontja, hogy a látogatókat megkapják csinál valami.

Fontos, hogy legalább egy alapvető megértést szerezzen arról, hogy a szín, a méret, a nyelv és más tényezők hogyan befolyásolják a híváshívó gomb konverziós arányát. A fogalmak itt nem bonyolultak, de egy kicsit elgondolkodtak és terveznek, hogy a lehető leghatékonyabb gombokat hozzanak létre egy adott terven belül. További információért olvassa el ezeket a pontokat és még többet.

A "Cselekvési felhívás" gombok célja

Az akciógombok számos funkciót szolgálhatnak. Végül, “cselekvési felhívás” valóban egy kicsit homályos. Mindössze annyit jelent, hogy fő célja az, hogy egy látogatót látogasson el a webhelyére csinálj valamit. Az, hogy valami hozzáadhat egy terméket a bevásárlókosárhoz, letölthet valamit, kérhet információt, vagy bármi mást.

Mivel az akciógombok változatos célokat szolgálnak, sok figyelmet kell fordítani arra, amit a gomb elérni kíván. A helyszín típusa, a célpiac és a kívánt cselekvés szerepet játszhat abban, hogy hogyan lehet legjobban meghívni egy cselekvési gombot.

A "Hívásra hívás" gombok típusai

Van néhány különböző típusú hívási művelet gomb. Bár minden típus célja, hogy a látogatók bizonyos műveleteket hajtsanak végre, az intézkedés jelentősen változhat. Az alábbiakban a leggyakrabban használt műveleti gombok az általuk kívánt művelet alapján.

1. Kosárba gombok

Az e-kereskedelmi webhelyek általában számos, a műveletre hívott gombokat használnak, de a legszélesebb körben használt “kosárba” gomb. Ezek a gombok általában az egyes termékoldalakon jelennek meg. Céljuk, hogy az ügyfeleket vonzzák egy termék megvásárlásához. A kosárba illesztés gombjainak közös tervezési elemei egyszerű megfogalmazást tartalmaznak (például “Kosárba” vagy “Zacskóba tesz” vagy “Vásárolj most“) és az ikonok (általában táska vagy kosár) használata.

2. Letöltés gombok

A letöltő gombok hasonlóak ahhoz, hogy a kosár gombjaihoz hozzáadjanak, hogy megpróbálják csábítani a látogatót egy elem birtoklására. Letöltő gombok esetében sok tervező több információt szeretne hozzáadni, mint más típusú gombok (például a verzióinformáció vagy a letöltési méret).

3. Próba gombok

Néhány webhely megpróbálja elcsábítani a látogatóikat, hogy kipróbálják kínálatukat, általában ingyenes próbaverzió formájában. Ez lehet ingyenes letöltés vagy ingyenes fiók, az adott webhelytől függően. Néhány webhely használja a “a kevesebb több” a filozófia és a nyelvük minimálisra tartása a gombokon, míg mások több információt nyújtanak arról, hogy mit tartalmaz a próba.

4. További gombok

További tudnivalók A gombok általában a teaser információk blokkjának végén használatosak (gyakran a kezdőlapon). Ezek a gombok általában egyszerűek, de gyakran túlméretesek ahhoz, hogy vonzza a látogatók figyelmét.

5. Regisztráció gombok

A regisztrációs gombok leggyakrabban két különböző változatban jelennek meg. Az első típus általában közvetlenül kapcsolódik egy regisztrációs űrlaphoz. A második típust általában hasonló módon használják “kosárba” gombok, a felhasználók számára, hogy vásároljanak vagy regisztráljanak egy szolgáltatást vagy fiókot, mielőtt ténylegesen elérnék a regisztrációs űrlapot.

Vannak más típusú hívási műveletek gombjai, de ezek a leggyakoribbak. A fentiekre alkalmazandó iránymutatások valószínűleg minden más, a tervezési művelethez kapcsolódó gombra is vonatkoznak.

A negatív tér hatékony használata

Azt szeretné, hogy a cselekvési gombok kitűnjenek a környező tartalmaktól, és igazán figyelmet fordítsanak a webhely látogatóira. Ebből a célból ki kell használni a gombok körüli negatív helyet. Tartalmazzon üres helyet a tartalom és a híváshívó gomb között. Bár ez kevésbé fontos (és kevésbé gyakori) néhány gombon, mint pl. A kosárba nyomógombok hozzáadása, mások, mint a többet megtanulók, jobban működnek több hely.

Fontos, hogy egyensúlyba hozzuk a gombok körüli negatív tér mennyiségét a gombok méretével. Ez arányos. Azt akarod, hogy a gombod, a körülötte lévő tér és a környező tartalom mindegyike úgy nézzen ki, mintha együtt lennének, még akkor is, ha a méretek eltérnek. Előfordulhat, hogy kicsit körbejárhat a dolgokkal ahhoz, hogy jobbra nézzen.

Néhány irányelv:

• Győződjön meg róla, hogy elegendő hely van a gomb körül, hogy ne érezze magát zavartan
• Ha figyelembe vesszük, hogy mennyi helyet foglaljon bele, úgy tekintsük meg az olyan elveket, mint a harmadik szabály vagy az Arany arány
• A negatív hely a hívás művelet gombjának helyiségét adja ki, hogy kitűnjön a másik tartalmától, és elválasztja egymástól

Méret és szín

Mennyire fontos a cselekvési gombok nagy száma. Egy túl nagy gomb megnyomja mindent, ami körülötte. Egy túl kicsi gomb eltűnik az oldal többi tartalmának keverésében. Azt akarod, hogy a gombod elég nagy legyen ahhoz, hogy kitűnjön a tervezés nélkül.

A színek nagy hatással lehetnek a gombok méretének egyensúlyára. Nagyobb gombok esetén válasszon olyan színt, amely kevésbé kiemelkedik a designban (de még mindig kiemelkedik a háttérben). Egy kisebb gomb esetén érdemes egy világosabb, kontrasztosabb színt választani, hogy a pop gombja legyen. Mindkét esetben győződjön meg róla, hogy az Ön által használt szín a gomb teljes elrendezése nélkül állítja be a gombot.

Néhány irányelv:

• A cselekvési gombok ideális esetben az adott oldal legnagyobb gombjai
• A kontrasztos színek használata a kisebb gombok kiemeléséhez
• A kevésbé eltérő színek használatával a túlméretes gombok jobban illeszkedhetnek
• A cselekvési gombokra hívja fel a figyelmet, anélkül, hogy túlnyomórészt megtervezné

Nyelv

A pontos megfogalmazás, amelyet a cselekvési gombjaira használ, óriási hatással lehet az átalakításra. Összehasonlítás “Vásárolj most” val vel “Kosárba“. Az egyik sokkal sürgetőbb, mint a másik. Vagy hogyan “Próbálja ki ingyen” val vel “Ingyenes próbaverzió“? Az egyik sokkal lyukasztóbb, mint a másik, és többet kiemel.

A híváshívó gombokon használt nyelvnek a lehető legegyszerűbbnek és egyszerűbbnek kell lennie. Azt akarod, hogy a látogatók egy pillantással pontosan tudják, mit kapnak, ha egy kattintás után kattanunk. Ha megkérdőjelezik, ez azt jelenti, hogy szüneteltettek, ami alacsonyabb konverziós arányhoz vezethet.

Ne felejtsük el a betűméreteket is. A híváshívó gombon lévő szövegnek nagynak és félkövérnek kell lennie, megfelelően illeszkedve a gomb méretéhez és színéhez. Győződjön meg arról, hogy elegendő kontraszt van, és hogy a szöveg könnyen olvasható legyen.

Néhány irányelv:

• Használjon egyszerű, közvetlen nyelvet
• Használjon nagy, félkövér betűtípust a fő szöveg gombjára
• Győződjön meg arról, hogy a nyelv egyértelműen konkrét műveletet igényel

Sürgősség létrehozása

Azt akarod, hogy a webhelyed látogatói a lehető legkevesebb gondolattal végezzék el a kívánt műveleteket. Miközben nem akarod megtéveszteni a látogatókat, annál több lehetőséget adsz nekik abbahagyni és meggondolni, hogy mit csinálnak, annál több lehetőséget adsz nekik, hogy azt mondja “nem”.

Azt akarja, hogy a gombok adjanak nekik azt a benyomást, hogy azonnal cselekedniük kell. Szeretné bátorítani őket arra, hogy azonnal hozzák meg a döntést, a pillanat pillanatában. Bár ez nem fog működni minden művelethívó gombnál (különösen azoknál, amelyek nagy jegyet vásárolnak), az alacsony költségű vagy ingyenes akciók esetében, ha a látogatóknak kevés előrelátása van, kívánatos.

Néhány irányelv:

• Ösztönözze a látogatókat, hogy azonnal cselekedjenek
• Ne adjon okot a látogatóknak, hogy szüneteljenek
• Bár a sürgősség fontos, ne tévessze meg a látogatókat semmilyen módon

Adjon meg további információkat

Adott esetben használja a híváshívó gombokat, hogy a látogatóknak további információkat adjanak arról, hogy mit kapnak, ha rákattintanak a gombra. Ez leggyakrabban próba gombokkal vagy letöltési gombokkal látható. Az extra információk általános példái közé tartozik az ingyenes próbaverzió időtartama vagy a fájl letöltése. A verzióinformációk is gyakran láthatók.

Ha további információkat is tartalmaz, ne feledje, hogy a tényleges cselekvési felhívásra kell összpontosítania. Győződjön meg róla, hogy a látogatók számára vonzó nyelvű szöveg a legjelentősebb, más információk sokkal kevésbé láthatóak.

Néhány irányelv:

• Csak akkor adjon meg további információkat, ha hozzáadja a felhasználói élményt
• A további információk csak bizonyos típusú hívási műveletek gombjaira vonatkoznak, leginkább a letöltési vagy a próbaverziókra
• Győződjön meg róla, hogy a főhívás még mindig a gomb legjelentősebb szövege

rangsorolása

Fontos, hogy prioritást adjon az akcióhívó gomboknak az oldalon, ha több mint egy. Ez többféle módon is elvégezhető, de a leggyakoribb a szín és a méret használata.

Használja a színt, hogy kiemelje az oldal legfontosabb gombját, vagy hogy a kevésbé fontosak kevésbé kiemelkedőek legyenek. Vagy használja a méretet a legfontosabb gomb kiemeléséhez (nagyobbá téve), és a kevésbé fontosak kiemelését.

Ikonok és képek

A vizuális jelzések bevonása a híváshívó gombokba szintén segíthet a konverziós arányok növelésében. Egy bevásárló kosár ikonja egy “kosárba” gomb, vagy egy nyíl a letöltési gombon egyaránt jó példa. Gondoljon az egyedi ikonok használatára is, de győződjön meg róla, hogy az ikon hozzáadja a felhasználói élményhez, és tisztázza, hogy mi a gomb, és nem ad össze zavart.

Néhány irányelv:

• Győződjön meg róla, hogy a használt ikonok segítenek tisztázni a gomb jelentését, nem pedig összekeverni
• A könnyen felismert ikonok azonnal jelezhetik a látogatók jelentését
• Ne félj a kevésbé gyakran használt ikonok használatára, amennyiben azok jelentése még mindig egyértelmű

Példák

Íme néhány példa a nagyszerű híváshívó gombokra. Bár nem mindegyik tökéletesen megfelel a fenti iránymutatásoknak, elégségesek a kritériumoknak.

Élő adás - A "buy now" (fizetett opciók) és a "feliratkozás" (ingyenes opciók) gombok megkülönböztetése jó stratégia.

Windows 7 - A nagy, zöld "Get Windows7" ​​gomb könnyű a látogatók számára.

Fileshare HQ - Az élénkzöld gomb itt kiemelkedik a fehér háttérrel szemben.

Hajónapló - A különböző színek használata a "Letöltés" és a "Vásárlás" gombokhoz egymástól elkülönül, és elsőbbséget biztosít a "Vásárlás" gombra.

TasteBook - Ez a gomb nagyszerűen használ egy ikont, és nagyobb, merész szöveget használ a kiemeléshez.

GoodBarry - Egy másik fényes zöld cselekvési gomb.

Lifetree Creative - Ugyanaz a betűtípus folytatása a test másolatától a híváshívó gombig létrehozza a kohézió érzetét.

A Resumator - A kék háttérrel szemben kiemelkedő, vöröses, félkövér hívó gomb jelenik meg.

Notepod - Jó példa arra, hogy további információkat tartalmazhat egy híváshívó gombra.

Inkd - Nagyszerű példa a gombok méretezésének prioritására.

Elegáns témák - Egy másik kiváló példa arra, hogy a színt a környező formatervezési elemekkel való ütközés nélkül használják ki.

ZenDesk - Egy másik nagyszerű példa arra, hogy a gombot színnel kiemeljük.

Storenvy - A kerek gomb váratlan, és kiemelkedik, különösen fehér szegély körül.

Bara'Mail - Néha egy gomb, amely összekapcsolódik, jobban működik az általános webhelytervezésben, különösen akkor, ha a művelet kevésbé sürgős.

További források

• Felhívás a cselekvési gombokra: példák és legjobb gyakorlatok - a Smashing Magazine-tól
• Jó hívás-to-action gombok - az UX Booth-tól
• Hívás a cselekvési gombokhoz: A méret lényege? - A Get Elastic-tól
• 10 A hatékony módszer “Felhívás a cselekvésre” - A Boagworld-tól
• 5 tipp a hatékony művelethívó gomb létrehozásához - a SitePoint-tól