A legtöbb vizsgálatban a legrosszabbul teljesítő űrlap-beküldő gomb mindig ugyanolyan. Nincs saját színe. Beleolvad az oldalba. A felirata egyetlen szó. És megbízhatóan működik minden olyan weboldalon, amely kevesebb konverziót szeretne.
Ez a gomb azt mondja: „Küldés.”
Nem minden látogató áll készen a kattintásra, aki eljut a gombodig. Egyesek még döntenek. Egyesek idegesek. Egyesek megnyugtatást keresnek arról, hogy érdemes időt szánni az űrlapra. A gomb gyakran az utolsó benyomás, amely eldönti, végigviszik-e. Az egyszavas, általános felirat rájuk hagyja, hogy maguk töltsék be a megnyugtatást. Az átgondolt, konkrét szövegű gomb eloszlatja a kétséget.
Ez a fejezet azt mutatja meg, mit változtat a gomb szövege, színe és elhelyezése az űrlapbeküldések arányán, hogyan hat az űrlap környezete arra, melyik gombszöveg működik, és hogyan kerüld el azokat a tervezési és szövegezési mintákat, amelyek észrevétlenül ölik a konverziót.
Mely gombszövegek befolyásolják valóban a konverziót?
A cselekvésre hívó gombokról szóló kutatások következetes mintákat mutatnak. Az olyan általános gombok, mint a „Küldés” és az „Elküld”, 30-40 százalékkal alulmaradnak a cselekvésspecifikus szöveggel szemben. Az a gomb, amelyik azt mondja: „Kérem az ingyenes ajánlatomat”, jobban konvertál, mint amelyik azt: „Küldés”. Az a gomb, amelyik azt mondja: „Megerősítem a regisztrációmat”, jobban működik, mint a „Küldés”. De ez nem a szövegbeli okoskodásról szól. Hanem arról, hogy világos legyen az eredmény.
Amikor a látogató egy „Küldés” feliratú gomb fölé viszi az egeret, egy kimondatlan kérdésre válaszol. Mit küldök? Hová megy? Mi történik ezután? Nincs rá válasza. Feltételez. Az általános gombszöveg nehézséget okoz, mert arra kényszeríti a látogatót, hogy kitalálja, mi jön.
A konkrét, cselekvésre irányuló gombszöveg azonnal megválaszolja ezt a kérdést. A „Kérem az ingyenes ajánlatomat” pontosan megmondja a látogatónak, mi történik a kattintáskor. A „Megerősítem a regisztrációmat” elmagyarázza a következő lépést. A „Demót kérek” világossá teszi, hogy beszélgetést kezd, nem valami ismeretlenre köteleződik el.
A minta űrlaptípustól és ágazattól függetlenül igaz. Egy UX-kutatóintézet pénztári űrlapokról szóló vizsgálatában a „Rendelés befejezése” 25 százalékkal jobb konverziót hozott a „Küldés” feliratnál. Egy marketingszoftver kapcsolatfelvételi űrlapokon végzett tesztjében az „Elküldöm a megkeresésemet” 18 százalékkal verte a „Küldést”. Egy 50 webshopot átfogó konverziótesztelési elemzésben az előnyt vagy következő lépést tartalmazó gombok átlagosan 23 százalékkal teljesítettek jobban az egyszavas műveleteknél.
A javulás nem csekély. Ez nem 2 százalékos optimalizálás. Ez azt jelenti, hogy az űrlapbeküldési arányod 15 százalékról 19 százalékra nő. Vagy havi 300 beküldésről 370-re. A gombszöveg az egyik legnagyobb hatású változtatás, amit egy űrlapon megtehetsz.
Gombszöveg űrlaptípusonként
Ugyanaz a cselekvésre hívó szöveg nem működik minden űrlapnál. Az határozza meg, melyik gombszövegre reagálnak, hogy miért tölti ki valaki az űrlapot.
Feliratkozó és regisztrációs űrlapok
Amikor valaki fiókot hoz létre, elköteleződik valami mellett. A döntés általában már megszületett. Már nem azt kérdezi: „megtegyem?”. Hanem azt: „működni fog?” és „biztonságos?”. A regisztrációs gomb szövege erősítse meg a műveletet, és adjon megnyugtatást.
Hatásos minták: „Létrehozom a fiókomat”, „Kezdjük el”, „Megerősítem a regisztrációmat”. Kerüld az általános „Küldést”. Kerüld azokat a feliratokat, amelyek véglegesnek vagy nehéznek tűnnek, mint például „Elköteleződöm a fióklétrehozás mellett”. Tartsd a hangnemet könnyűnek és előrelendítőnek.
A jelszóval védett regisztrációknál a gomb szövege elismerheti a nehézséget: „Jelszó létrehozása és tovább”. Ez azt mondja a látogatónak, hogy nem ok nélkül hoz létre jelszót. Ez egy lépés valami felé. A művelet világos.
Kapcsolatfelvételi és megkeresési űrlapok
A kapcsolatfelvételi űrlapok profitálnak a beszélgetős, emberi gombszövegből. A látogató megkeres téged. Kér valamit. A gomb úgy szóljon, mintha elismernéd a kérését.
Hatásos minták: „Elküldöm a megkeresésemet”, „Felveszem a kapcsolatot”, „Elküldöm az üzenetemet”, „További információt kérek”. Ezek miatt az űrlap beszélgetésnek tűnik, nem adatkiöntésnek.
Kerüld a klinikai vagy formális nyelvet. Ne azt mondd: „Megkeresés beküldése”. Azt mondd: „Elküldöm a megkeresésemet”. A különbség finom. Az egyik tranzakciónak érződik. A másik úgy, mintha emberrel beszélnél.
Foglalási és időpontfoglaló űrlapok
Mire valaki a foglalási űrlapot tölti, a szándéka megerősített. Szeretné az időpontot. A gomb szövege legyen közvetlen, és szüntesse meg a kétséget arról, mi következik.
Hatásos minták: „Megerősítem az időpontomat”, „Lefoglalom az alkalmamat”, „Beütemezem a hívásomat”, „Lefoglalom a helyemet”. Ezek elismerik, hogy a személy már döntött. A gomb a végső megerősítő lépés.
Kerülj mindent, ami kétértelműséget okoz. A „Lefoglalom” működik. A „Feliratkozom” kevésbé világos abban, mit foglalnak le. Az egyértelműség ebben a szakaszban növeli a kitöltési arányt.
Pénztári és fizetési űrlapok
A webshop pénztárnak van a legtöbb vesztenivalója a homályos gombszövegből. Itt minden szó közvetlenül hat a bevételre. A látogató vásárolni készül. Ne okozz habozást.
Hatásos minták: „Befejezem a vásárlást”, „Fizetek most”, „Rendelés véglegesítése”, „Megveszem most”. Egyes kereskedők olyan előnyt előtérbe helyező szöveget tesztelnek, mint „Kérem a [terméknév] terméket”, hogy azt erősítsék, mit kap, nem azt, mit fizet.
Soha ne használd az általános „Küldést”. Teszteld, hogy a „Befejezem a vásárlást” vagy a „Megveszem most” teljesít-e jobban a közönségednél. Egyes ágazatok és árszintek más nyelvre reagálnak. De mindkettő jobb az általános felirat használatánál.
Visszajelzési és kérdőíves űrlapok
A kérdőívek gombjai legyenek gyorsak és könnyűek. A látogató szívességet tesz neked. A gomb szövege ismerje el ezt, és tegye súrlódásmentessé.
Hatásos minták: „Elküldöm a visszajelzésemet”, „Elküldöm a válaszomat”, „Megosztom a gondolataimat”. Ezek gyorsnak tűnnek. Kerüld azt a nyelvet, amely a visszajelzést hivatalos beküldésnek tünteti fel. Az „Elküldöm a visszajelzésemet” könnyebbnek érződik, mint a „Kérdőív beküldése”.
Érdeklődőminősítő és B2B űrlapok
A B2B űrlapok gyakran több információt kérnek, mert szűrik az érdeklődőket. A gomb szövege elmondhatja, mi jön, anélkül hogy elriasztana.
Hatásos minták: „Ajánlatot kérek”, „Konzultációt egyeztetek”, „Elindítom az ingyenes próbát”, „Egyedi árajánlatot kérek”. Ezek világossá teszik, mi a következő lépés. A látogató nem aggódik, hogy valami homályosra köteleződik el.
A gomb megjelenése jobban befolyásolja a kattintási arányt, mint gondolnád
A gomb szövege csak a történet egy része. Az is számít, hogyan néz ki a gomb, és hol áll az oldalon, hogy valaki egyáltalán kattinthatónak lássa.
Színkontraszt és vizuális hangsúly
Az oldal hátterébe olvadó gomb kevesebb kattintást kap, mint a nagy kontrasztú. Ez nem a hivalkodó tervezésről szól. Hanem arról, hogy megtalálható legyen. Ha a gomb vizuálisan nem válik el az űrlaptól, a látogató egyszerűen elnézheti.
A hatásos gombok színkontrasztja legalább 4,5 az 1-hez a háttérhez képest. A gyakorlatban ez azt jelenti, hogy a gomb színe észrevehetően különbözzön az oldal hátterétől és az űrlap többi elemétől.
Teszteld, mi működik a márkádnál. Egyes márkák olyan márkaszínt használnak, amely magától kitűnik. Mások meleg színeket, például narancsot vagy pirosat használnak hideg háttéren, például szürkén vagy fehéren. A konkrét szín kevésbé számít a kontrasztnál. Tedd megtalálhatóvá a gombot.
Méret és üres tér
A túl kicsi gombok nem tűnnek kattinthatónak. A túl nagyok tolakodónak. A megfelelő méret az űrlaphoz és az oldalhoz viszonyított. Az a gomb, amely az űrlap szélességének felét kitölti, agresszívnek tűnik. A 150 pixel széles gomb egy teljes szélességű kapcsolatfelvételi űrlapon megfelelőnek tűnik.
A gomb körüli üres tér növeli a kattintási arányt. Az a gomb, amelyet más űrlapelemek vesznek körül, beleolvad. Az a gomb, amelyet tiszta tér vesz körül, kitűnik, és kattinthatónak érződik. Adj belső margót a gomb fölé és alá. Hagyd levegőzni.
A gomb alakja és stílusa
A lekerekített sarkok modernebbnek és barátságosabbnak hatnak. Az éles sarkok vállalatibbnak vagy technikaibbnak. Egyik sem általánosan jobb. Teszteld, melyik stílus illik a márkádhoz és a közönségedhez.
A tömör, tiszta hátterű gombok a legtöbb űrlap-környezetben jobban teljesítenek a körvonalas vagy szellemgomboknál. Az űrlap stílusához illő körvonalas gomb beleolvad. A tömör, kontrasztos gomb kitűnik.
Az árnyékok és az egérrel fölé vitel hatásai növelik azt az érzetet, hogy valami kattintható. Az a gomb, amely színt vált, vagy látható az állapota, ha fölé viszik az egeret, megmutatja a látogatónak, hogy reagál az interakcióra.
Gombméret mobilon
A mobilfelhasználók hüvelykujjal koppintanak. A túl kicsi gombot elvétik. Az egyik nagy mobilplatform irányelvei legalább 44 x 44 pixeles érintési célt javasolnak, egy másiké 48 x 48 pixelt. A mobilos űrlapokon a gombokat elég nagyra kell tenni, hogy egy hüvelykujjnyi célt megbízhatóan eltaláljanak.
Mobilon a gombok gyakran egymás alá kerülnek. A teljes szélességű gomb kattinthatóbbnak tűnik, mint az, amelyik csak részben látszik. Az a rögzített gomb, amely görgetés közben is látható marad az űrlapon, mobilon növeli a kitöltési arányt.
Az elhelyezés dönti el, ki látja a gombot
A legjobb gombszöveg és tervezés sem segít, ha az emberek észrevétlenül elgörgetnek mellette. Az, hogy hol áll a gomb az oldalon, hat a láthatóságra.
Az első képernyőn lévő gombok
Ideális esetben az elsődleges gomb asztali gépen görgetés nélkül látható. Ha az űrlap a képernyő nagy részét kitölti, lehet, hogy a gombhoz görgetni kell. Ez elkerülhetetlen. De ha van hely az első képernyőn, tedd oda a gombot, hogy a látogatónak ne kelljen keresnie.
Rögzített gombok mobilon
A mobilos űrlapokhoz gyakran görgetni kell. A képernyő alján látható maradó, rögzített gomb növeli a kitöltési arányt. A látogató soha nem veszíti szem elől a gombot, miközben a mezőket tölti. Bármikor befejezheti, anélkül hogy az aljára kellene görgetnie.
Elsődleges és másodlagos gombok
Egyes űrlapokon több gomb van. „Küldés”, „Mentés piszkozatként”, „Következő lépés”. Ha több gombod van, az elsődleges műveletet tedd vizuálisan dominánssá. Az erős elsődleges gomb legyen nyilvánvalóan kattinthatóbb a másodlagos lehetőségeknél. Színnel, mérettel vagy pozícióval mutasd a hierarchiát.
Gyakori hiba, hogy az elsődleges és a másodlagos gomb egyforma. Ha a „Mégse” és a „Küldés” azonos méretű és színű, egyes látogatók a rosszat kattintják. A tervezők tesztelik ezt, és azt találják, hogy ha az elsődleges gomb 30-40 százalékkal nagyobb a másodlagosnál, csökken a véletlen megszakítások száma.
A gomb alatti szöveg növeli a kitöltést
Maga a gomb csak az utolsó interakció. A gomb alatti vagy melletti szöveg az utolsó pillanatban ad megnyugtatást, amely a bizonytalankodó látogatókat kattintásra készteti.
A megnyugtató szöveg az utolsó ellenvetést kezeli. Ha az űrlapod e-mail-címet kér, a gomb alatti sor, amely azt mondja: „Soha nem osztjuk meg az adataidat”, megszünteti az utolsó okot a beküldés elmaradására. Ha az űrlapod telefonszámot kér, a „Nincs spamhívás, egy munkanapon belül felvesszük veled a kapcsolatot” bizalmat épít.
Ez a megnyugtató szöveg legyen kicsi és másodlagos. Már nem eladsz. Az utolsó kétségre válaszolsz. Példák: „24 órán belül válaszolunk”, „Az adataid mindig védettek”, „Az ingyenes próba indításához nem kell bankkártya”, „A magánszférád az elsőbbségünk”.
A tesztek szerint a gombok alatti megnyugtató szöveg a nagy nehézségű űrlapokon 3-5 százalékkal növeli a kitöltési arányt. Az olyan kis nehézségű űrlapoknál, mint a hírlevelek, a hatás kisebb. A sok információt kérő B2B űrlapoknál a megnyugtató szöveg 10 százalékkal vagy többel is növelheti a kitöltést.
Hibaállapotok és betöltési visszajelzés
Az dönti el, hogy magabiztosnak érzi-e magát valaki a beküldésével kapcsolatban, hogy mi történik a gombra kattintás után.
Letiltott állapot beküldés közben
Amint valaki rákattint a gombra, tiltsd le azonnal. A letiltott gomb megakadályozza a dupla beküldést. Ennél is fontosabb, hogy megmutatja a látogatónak, hogy a kattintása megtörtént. A gomb mutasson betöltési állapotot: „Küldés folyamatban...” vagy forgó jelzőt vagy animált szöveget.
Betöltési állapot nélkül a látogató nem tudja, hogy működött-e a kattintása. Lehet, hogy újra kattint. Lehet, hogy bezárja a böngészőt. A kattintás és bármilyen visszajelzés között eltelt egy másodperc hosszúnak tűnik a felhasználónak. Azonnal mutasd meg, hogy történik valami.
Hibajavító szöveg
Amikor egy beküldés meghiúsul, a gomb és a körülötte lévő szöveg magyarázza el, mi romlott el, és mit tegyen a látogató. Ne csak az űrlap tetején mutass hibaüzenetet. Frissítsd magát a gombot is.
Az a gomb, amely azt mondja: „Próbáld újra”, hasznosabb a „Küldésnél”, ha hiba történik. A gomb melletti szöveg magyarázza el konkrétan, mi hiúsult meg: „Ez az e-mail-cím már regisztrálva van” vagy „Kérjük, töltsd ki az összes kötelező mezőt.”
Tedd egyértelművé a hibajavítást. Egyes űrlapok kiemelik a hibás mezőt. Egyesek mezőn belüli hibaüzeneteket mutatnak. Egyesek mindkettőt. Minél világosabb a hiba, annál gyorsabban javíthatja a látogató.
WEMASY űrlapok és a beküldő gomb optimalizálása
A WEMASY űrlapszerkesztőjében testre szabhatod a gomb szövegét, megjelenését és elhelyezését az űrlapstratégiádhoz. Különböző űrlaptípusokhoz más-más gombszöveget állíthatsz be. Feltételes logikát adhatsz hozzá, amely az űrlap válaszai alapján változtatja a gombfeliratot. A gomb színét, méretét és stílusát a márkádhoz igazíthatod.
Az űrlap-analitika megmutatja, mely mezők okoznak elhagyást. Ha a gombnál kifejezetten magas az elhagyás, az jele annak, hogy a gomb szövegét vagy tervezését tesztelni kell. Ha a látogatók eljutnak a gombig, de nem kattintanak, teszteld a különböző szövegeket és terveket az űrlap újraépítése nélkül.
Nézd meg, hogyan kezeli a WEMASY űrlapszerkesztője a gombok testre szabását és az űrlap-analitikát. Az űrlapszövegekről, amelyek kitöltést hoznak, olvass az hatékony űrlapfeliratok és súgószövegek írásáról, és arról, hogy mi okozza az űrlap elhagyását, és hogyan előzheted meg.