A hatékony webes űrlapok 8+1 pontja

Ha weboldaladnak üzleti célokat kell szolgálnia, elengedhetetlen hogy legyen az oldalon kitöltendő űrlap. A felhasználó kényelmes, ezért ha az ajánlat alatt egyből ott egy kapcsolat-felvételi mező, egy ajánlatkérési vagy egy megrendelési lehetőség, sokkal nagyobb megtérülése lesz honlapodnak, sokkal inkább fognak teljesülni a weboldaladdal kitűzött üzleti célok.

Azért sem elegendő csak egy telefonszámot vagy egy e-mail címet kitenni, mert mérhetetlenné (pontosabban fogalmazva sokkal nehezebben mérhetővé) teszi a honlap eredményeit. Ugyanis csak akkor lehetsz biztos a megtérülésben, ha méred a célteljesülést, azaz a konverziót.

És itt a lényeg: teljesüljön cél.

Az űrlap ergonómiájára azért kell kiemelt figyelmet fordítani, mert itt ér véget a sztori, ami azzal kezdődött, hogy megérkezett a látogató a honlapra. A honlap tette a dolgát, meggyőzte a látogatót, aki döntött: végrehajtja a honlap üzleti célját. Vásárol, megrendel, ajánlatot kér, feliratkozik, visszahívást kér, fel akarja venni a kapcsolatot, röviden: kitölti az űrlapot.

És ha itt a folyamat végén, valami homokszem kerül a gépezetbe, akkor bizony az összes eddigi erőfeszítés kárba vész.

Mire ügyelj az űrlap tervezésekor?

Az űrlap formai és technikai kialakításának tehát komoly szerepe van az online marketingben. Olyannyira, hogy  össze is gyűjtöttük azt a 8+1 legfontosabb tényezőt, amit az űrlap kialakítása során figyelembe kell venned.

1) Adj nevet az űrlapnak!

Első olvasatra azt gondolná az ember, hogy ennek nincs nagy jelentősége, pedig de! És a lényeg a következetességben van. Ügyelj arra, hogy az űrlap elnevezése egyértelműen mondja el, hogy az űrlapban lévő mezők mire szolgának! Regisztráció? Jelentkezés? Vásárlás? Ajánlatkérés? Bárhogy is nevezed el, egyrészt az elnevezés valóban utaljon a funkcióra, másrészt ezeket a szavakat használd konzekvensen! Azaz ha a szolgáltatás / termék leírásakor az a szót használod, hogy „jelentkezz az X órás tanácsadási programunkra”, akkor az űrlap elnevezése ez legyen: „jelentkezés” és ne „megrendelés”. Ha a látogatónak korábban azt ígérted, hogy az űrlap segítségével ajánlatot kérhet, akkor az űrlap neve ne “kapcsolatfelvételi űrlap” legyen, hanem “online ajánlatkérés”!

2) Mi fog történni? A folyamat leírása

Az űrlap kitöltését minden esetben egy kis gondolkodás előzi meg a felhasználó oldaláról. Bizonytalan abban, hogy mi fog történni az űrlap kitöltése után.
Viszont az űrlap kitöltése a konverziós cél, úgyhogy itt nem engedheted meg magadnak, hogy a látogató törje a fejét, és a felmerülő kérdésekre maga találja ki a választ. Ezért minden lehetséges kérdésre még előre lődd le a választ! Írd le a folyamatot részletesen! Mondd el a látogatónak, hogy mi fog történni az „elküld” gombra való kattintás után! Szépen lépésenként, még akkor is, ha Neked ez egy kicsit szájbarágósnak tűnik! Például:

Az OMA megrendelőlapján a folyamatleírás. www.oma.hu/megrendeles

Az OMA megrendelőlapján a folyamatleírás. www.oma.hu/megrendeles

3) A mezők csoportosítása

Amennyiben az űrlap nem néhány mezőből áll (max. 3-4), akkor érdemes lehet a mezőket csoportosítani. A jobb átláthatóság kedvéért strukturáld az űrlap elrendezését tematikus tömbökbe, úgy hogy a látogatónak egyértelmű legyen melyik mező hova tartozik. Ebben a formában sokkal egyszerűbb például megkülönböztetni a számlázási adatokat a postázási adatoktól.

4) A mezők elnevezése

Fordíts időt a mezők átgondolt elnevezésére! Legyen egyértelmű, mit kell beleírni! Nem elég például egy mezőt úgy elnevezni, hogy „név”, hanem ha szükség van rá tagold, hogy „vezetéknév” és „keresztnév”. Sokszor segítség lehet ha egyértelműen fogalmazol: „e-mail” helyett azt írod: „az Ön e-mail címe”. Kifejezetten akkor lehet ez érdekes, ha egy űrlapban bekérsz személyes és céges adatokat is, akkor itt fontos egyértelművé tenni, hogy melyik mezőbe melyiket kell beírni.

5) Az akciógomb

Ez is egy nagyon fontos pontja az űrlapnak, hiszen, itt ér véget a történet ezzel hagyja jóvá az űrlapot kitöltő a végső szándékát. Érdekes számok jöhetnek ki, ha például teszteled, hogy nagyobb-e a célteljesülés akkor, ha más az akciógomb neve. Van-e különbség akkor, ha a gombon ez áll: “Elküld”, vagy ez: “Igen, kérem!” Ezek tesztelésére kiválóan alkalmas a Google Website Optimizer által felkínált ingyenes A/B tesztelési lehetőség, amiről itt egy korábbi részletes bejegyzésünk: A/B teszt lépésről lépésre

6) Segítő szövegek és magyarázat

Akkor nevezünk egy űrlapot használhatónak, ha a látogató úgy tudja kitölteni és elküldeni az űrlapot elsőre, hogy semmilyen hibaüzenet nem ugrik fel.  Sajnos kevés az ilyen űrlap. Pedig nem kellene sokat tenni érte csak néhány apró dologra odafigyelni. Például, az űrlap kitöltése legyen alkalmas arra, hogy a felhasználó segítség nélkül ki tudja tölteni. Vagy ha bonyolultabb az űrlap, akkor legyen útmutatás az űrlap előtt, vagy akár minden egyes mezőnél. Ha ez túl zsúfolttá tenné az űrlapot, akkor oldd meg rejtett módszerekkel. Azaz segítség csak akkor jelenjen meg, ha a látogató éppen azt az adott mezőt tölti ki. Erre remek példa a Skype magyar nyelvű online regisztrációs űrlapja. Próbáld ki, kattints bele például a “mobiltelefon” mezőbe, és meglátod, hogy működik a segítség rész az űrlapban!

7) Ellenőrző üzenetek

Ha vannak az űrlapod kitöltésének szabályai, akkor minden esetben nyújts előre segítséget a látogatónak és utólag is ellenőrizd, azonnal az adott mezőből való „kikattintás” után. Azaz, ha például a telefonszám mezőnek van egy adott formátuma (06-30-…. vagy +36 20 …) akkor ezt a kitöltés után azonnal ellenőrizze le az űrlap, akkor amikor a beírás után a  látogató kikattint a mezőből. Ha hibás esetleg a szám formátuma, akkor ugorjon fel egy kis ablak, hogy hogyan érdemes javítani. Ezek az apró megoldások nagyon sokat érnek használhatósági szempontból!

Ha ezt nem tudod kivitelezni, akkor az is elfogadható megoldás (bár kétségkívül zavaróbb a felhasználónak) ha az űrlap kitöltése után jelöli ki az űrlap a hibásan kitöltött mezőket. Ezzel kapcsolatosan azonban két dolgot nagyon fontos megjegyezni:

  • Az űrlap, ilyenkor minden esetben őrizze meg a korábban bevitt adatokat! Nincs annál „konverziógyilkosabb” megoldás, amikor a látogató a legjobb tudása szerint kitölt egy űrlapot, majd a végén csak annyit kap, hogy bizonyos adatok hibásan lettek kitöltve, és az összes bevitt adat eltűnik. Ilyenkor a látogatók nagyon kis százaléka áll neki újra kitölteni az űrlapot.
  •  Ennek az egyik még rosszabb verziója, ha azt is a látogatónak kell kitalálnia, hogy mely adatok lettek rosszul kitöltve. Szóval, ha ilyen az űrlapod, mindenképpen emeld ki a hibás mezőket, és adj tippet arra, hogy hogyan kell(et volna) „helyesen” kitölteni!

Azonban a korábban említett megelőzés sokkal jobb megoldás!

8) Ellenőrző kód

Ha lehet, akkor hagyd el. Felesleges, gondolkodást és bosszúságot okozó mező ez. Ha nem lehet, és mindenképpen valami miatt szükséges egy ilyen mező, akkor próbáld meg a lehető leginkább megkönnyíteni a felhasználó dolgát!

Ellenőrző kód egy űrlap alatt. Csak akkor használd, ha nagyon muszáj.

Ellenőrző kód egy űrlap alatt. Csak akkor használd, ha nagyon muszáj.

Lehessen új kódot kérni az éppen aktuális nem látható rendesen, legyen lehetőség meghallgatni a kód egyes betűit, számait! Sőt adj hozzá kiemelt segítséget! Néha szükséges lehet egy kis magyarázkodás is, hogy miért van szükség erre a mezőre… A látogatók ezt nem szeretik, és jogos egy picit a bosszúság.

8+1) Zavaró tényezők: szabadulj meg tőlük!!

Amikor a látogató azon az oldalon áll épp, ahol a megrendelést adja fel, vagy ajánlatot kér, vagy feliratkozik (röviden éppen konverziót hajt végre), akkor Neked egyetlen célod lehet: minden lehetséges megoldással abba az irányba tolni a felhasználót, hogy ez a folyamat ne szakadjon meg, és ténylegesen elküldje az űrlapot. Azaz minden zavaró tényezőt ki kell iktatni az ilyen oldalról. Lesarkítva, egy konverziós oldalon összesen kettő kimeneti gomb lehet,  az „elküldés” gomb  és a böngésző vissza gombja. Illetve természetesen van egy harmadik lehetőség is, ha bezárja a böngészőt, de ez az eszköz bármikor ott van az internetező kezében.

Tüntess el tehát minden kifelé mutató linket erről az oldalról, ne legyen menüsor, ne legyen az űrlap alatt “Törlés” gomb, még a logó se legyen kattintható! És habár ez a módszer egy picit ellenkezik az ergonómiával, az üzleti érdek itt felülírja a szabályokat. Ennyi persze Nálad is megengedett!

Nos látható, hogy az űrlapok keze messzire ér, érdemes sok időt szánni arra, hogy a lehető legkényelmesebb legyen kitölteni, és menet közben tesztelni, csiszolgatni, hiszen az igazi egyedi tudás a saját tapasztalatból, mérések alapján szerezhető meg.

Neked melyik a legjobb űrlapod a weboldaladon? Mutasd meg!

Comments

  1. Nekem ez az egyik megrendelői űrlapom (domain+tárhely), melyre ha rámegy csak rendelni tud semmi egyéb lehetőség nincs másfele navigálni.
    http://bladeweb.hu/domain-tarhely-megrendeles
    Szerintetek?

    • A tartalom jó, de én biztos nem rendelnék. Fekete alapon kék és fehér betűkkel írva = nekem kifolyik a szemem. Én az ilyen oldalt azonnal bezárom, akármilyen tartalom van rajta. Kíváncsi lennék rá, miért használsz ilyen színeket.

      • Azért használok sötét színeket mert a névből (BladeWeb) adódóan ehhez ilyen arculat illik. Illetve a másik, hogy az oldal fő szolgáltatása a webfejlesztés és arculattervezés.

    • Az első ami nekem feltűnt, hogy az űrlap nincs egységben. Az egész aloldal maga egy nagy űrlap, aminek nincs egy jól étlátható kerete. Maga az űrlap így bele se fér egy képernyőbe. Janesz, ez ígí nagyon hosszú!

      Az elején mondjuk jelentősen lehetne rövidíteni, ha kiválaszthatja hogy milyen regisztráció érdekli (hu, com, eu stb) majd a regisztráció, átregisztráció stb, és a végéna darabszámot. Ez így egy sor lenne.

      • Igen tudom, hogy hosszú, de minden adat szükséges hiszen ezeket hivatalosan az ISZT felé be kell nyújtani, hogy domain delegálást lehessen végrehajtani.

        Az elejét gondoltam rövidíteni a kiválasztással úgy, hogy ki/be csukódna az adott keret tartalmra (domain és tárhely).

        Mert ugye ha csak egy rövid igénylőlapot tölt ki, akkor utána nekem kell küldeni neki egy mailt – amennyiben gép előtt ülök -, hogy milyen adatokat szükséges megadni ami alapján küldöm a szerződést és a proforma számlát. De így a rendszert úgy írtam meg, hogy azonnal kiküldi neki a proforma számlát a visszaigazolással együtt.

        Nem egyszerű a dolog , köszönöm az értékelést :)

  2. Nagyon jó összefoglaló, talán még a gomb design-on kicsit javíthatnátok. :)

    Nekem is még van mit javítanom, főleg a képek hiányoznak az oldalon: http://napiminimum.hu/elso-lepes/

  3. Ezek szerint a miénken is van mit javítani…
    http://szepkartya.hu/adatfelvetel

    • lacus szerint:

      8+2. pont:
      Minden webes űrlap alapja, hogy a legzordabb körülmények között is működjön, pl. kikapcsolt javascript esetén is.
      A másik, hogy legkésőbb szerver oldalon mindent ellenőrizni kell, nem elég, ha javascripttel csekkoljuk a dolgokat.

      A szépkártyás űrlap pl. nem működik javascript nélkül. A másik, még merdekebb dolog, hogy nem végez szerver oldali ellenőrzést. A formot üresen elküldve, megkapom a nyugtázó üzenetet, miszerint sikeresen elküldtem az adatokat.
      Szerintem mihamarabb beszélj a programozóddal ezügyben.

      Szóval először biztosan működjön minden, az összes többi dolog azután következik.

      • Lacus, köszönöm a hozzászólást, továbbítottam a programozónak.
        Készülőben van egy új, komolyabb űrlap. :)

      • A javascriptet el lehet felejteni, biztonsági okokból és a böngészők hibás kezelése miatt nem használom. Kipróbáltam egy weboldalon javascriptet kikapcsolva és adatok megadását már nem is ellenőrizte, simán tovább engedett. Aztán jöttek a hibaüzenetek, mert a függvények nem kapták meg a szükséges adatokat és nem voltak kezelve.
        Az meg a másik, hogy ha valaki nem használ javascriptet, alapból elesik azoktól a funkcióktól, ami azzal van megvalósítva.

  4. Én próbáltam kép nélkül is az űrlapomat, de úgy nem konvertált ilyen jól. Talán itt a kép nem zavaró? http://prodm.org/1579-2

  5. Sziasztok,
    köszönöm az ismét hasznos ötleteket! :)
    Ellentétben a javasolttal nálunk a “zavaró tényezők” fennállnak, szerintetek eltérítheti a vásárlókat? Mivel itt nincs kosár funkció így lehet, hogy visszamenne megnézni újra a térkő nevét.
    http://terko-viacolor.hu/ajanlatkeres

  6. Én úgy gondolom, nem minden esetben van szükség megrendelői űrlapra. Sokszor elég lehet egy telefon és egy e-mail cím is.
    Én évek óta csak így használom a lapomat, és így is megtalálnak.
    Igaz az évek során sokan megismertek és sokszor egymásnak adják a cégek az elérhetőségünket, de egy új érdeklődő sem tartja hátrányosnak, hogy nincs űrlap.
    Természetesen függ, ki mit értékesít a neten. Az én szolgáltatásom nagyon összetett és fontos a beszélgetés egy megrendelés előtt, mert nincs két egyforma rendezvény és feltétel. Ha kiraknék egy űrlapot, akkor is az első úgyis a telefon amit egy érdeklődő a kezébe vesz.
    Mikor pedig a lényegét megbeszéltük a rendezvénynek, akkor meg mindegy hol levelezzük le a szerződést és a megrendelést.

    • Károly, ok egyetlen kérdés: Honnan tudod hogy az aki felhív vagy e-mailt ír, pontosan minek a hatására vette fel veled a kapcsolatot? Hogyan méred, hogy akkor mi működik jól, és mi rosszul?

      Önmagában csak ezért is megéri űrlapot használni, ha mást nem egy kapcsolatfelvételi formot, vagy egy visszahívást kérő űrlapot.

      • Jó a kérdés…
        Egyszerűen nem mérem, minek a hatására vette fel a telefont.
        A szolgáltatásomat úgy próbálom optimalizálni, hogy célirányosan azért keressenek amiért működünk. Nézem a látogatói statisztikát a kulcsszavakat
        és az alapján tájékozódom a lapom érdekeltségéről, ha pedig valamit tudni akarok, akkor megkérdezem az érdeklődőt miért és hogyan talált ránk stb…
        Nekem az a tapasztalatom, hogy az emberek egy-két oldalnál többet nem nagyon néznek meg, legyen az bármennyire is érdekes vagy hasznos.
        Aki hozzám érkezik mint látogató az általában olyan, aki tudja mit akar
        és ténylegesen engem keres.
        Nem nagyon értem pontosan mire gondolsz a mérésekkel kapcsolatban, de hagyom magam meggyőzni, minden újra és hasznosra nyitott vagyok…:)

  7. Petrow szerint:

    Captcha helyett nekem sokkal szimpatikusabb és esztétikusabb megoldás a “melyik a hét után következő egész szám?” stílusú kérdések, bár technikailag nem tudom, mennyire megbízhatóbbak, mint a kriksz-krakszos verzió.

    • Programozásilag is le lehet tiltani, hogy ne tudjon levelet küldeni, csak akkor ha űrlap kitöltési feltételek teljesültek.

      Captcha-t azért szoktak még alkalmazni, hogy a robotok ne tudjanak maguk spam-et küldeni. A “kriksz-kraksz” azért szükséges, mert azt jelenleg még nem tudják elolvasni. Minden egyéb megoldást szinte igen.

      Én szerintem ha jól van megírva az űrlap scriptje akkor nem kell ellenőrző kód, ahogy fent a Zsolt is megírta.

      • Petrow szerint:

        Igen, ez világos volt. Én a technikai tapasztalatokra vagyok kíváncsi, hogy melyikkel értek el jobb eredményeket – bár ez gondolom, az űrlap struktúrájától is függ.
        Sajnos a spam-robotok programozói sem pihennek, és egyre több mindenen rágják át magukat; a humán kitöltő faktor pedig akkor még be se került a képbe :-)

      • Nálunk sehol semmilyen captcha nincs, sose volt, és valahogy mégse ömlesztenek el bennünket az űrlapspamek.

  8. Nemes Bertalan szerint:

    Kedves Zsolt!

    Nekem is lenne egy kérdésem. Van egy jelöltkereső oldalam hálózatépítéshez, ezen a szükséges kérdőívvel. Sajnos ez csak egy blog, ezért a környezete viszonylag merev. Nagyon sok mindent nem tudok belőlle kiszedni.
    Kicsit bő lére sikeredett, hiszen kell a sok információ, ez probléma hatékonyság szempontjából?
    Illetve mi a véleményed róla?
    Köszönettel:
    Bertalan

    • Nemes Bertalan szerint:

      Bocsánat, az oldal címe lemaradt:

      http://felhotlenelet.blogspot.com/p/kerdoiv.html

      Üdv.

    • Biztosan függ az űrlap kitöltőjének elkötelezettségétől is, hogy mennyi időt szán egy ilyen űrlapra, de ha csak néhány adatot kérnél be első körben, majd 2-3 hírlevél után kérnél tőle több infót, összeségében szerintem több regisztrációd lenne!

      Az első alkalommal minél kisebb a feladata a kitöltőnek, annál gyorsabban megoldja. Az idő sokat számít.

      • Nemes Bertalan szerint:

        Köszönöm.
        Szerintem ki fogom próbálni mindkettőt, már csak kiváncsiságból is, hogy melyik működik jobban.
        Ha majd lesz alkalmam azért beszámolok róla :)

  9. Ez elég egyszerűnek és átláthatónak tűnik?
    http://www.kutyabajom.hu/megrendeles
    Talán akkor ezek szerint az elküld gombon kellene még változtatnom kicsit :)
    Üdv: Viktor

  10. Üdv. mindenkinek.
    Én az ingyenes Google űrlapkezelővel készítettem egy ajánlatkérőt.
    Mi a véleményetek róla?

  11. Sziasztok,
    tudom, hogy még nem ehhez a bejegyzéshez tartozik,de érdekelne a véleményetek:
    a google új Pingvinjéről? :) Nekünk néhány oldalunkat már hátrasorolta …

    Előre is köszönöm!

  12. Nekünk ez a megrendelési oldalunk, lehetne változtatni rajta, de hirtelen most ez van.
    http://www.fagyvedelem.hu/beszerzes-gyartotol.php
    Köszi előre is a kommentárt. Zoli

  13. Az én oldalam, igaz csak részvényes vagyok, nem én készítettem.

    http://www.vipuzlet.hu/00842

    Mi a véleményetek róla kérek mindenkit nézzétek meg, és mondjátok el.

    köszönöm

  14. Sziasztok!

    Szokott valaki köztetek angol nyelvtanfolyamot keresni?
    Mit gondoltok erről a kapcsolat felvételi oldalról:

    http://www.behappynyelviskola......laszolunk/

    Nagyon kíváncsi lennék, hogy felhasználói szempontból mik az észrevételek.
    Mennyire hatásos az aloldal?
    Mit lehetne rajta esetleg javítani, hogy csökkenjen a visszafordulási arány?

    Köszönöm előre is!

    Ildikó

    • Kedves Ildikó! Nálunk az ügyfelek 90%-a vásárlási utalványokkal szerzi be a termékeket és szolgáltatásokat. A mai készpénz – hiányos világban ezt látom én is a leghatékonyabbnak, lehet bármely szép, és “megtartó” a weboldal, az emberek döntő többsége, ha fizetnie kell, a készpénzéből a legkevesebbet adja csak ki, az pedig a legtöbbször “kenyérre” kell. Segíthetek nektek, mert nagyon szimpatikus a hagyományoktól eltérő oldalatok, és az is lehet, hogy Pétert ismerem, így a kapcsolat is megvan…. Üdv: Zsolt

  15. kiskertész szerint:

    Akkor lehet, néhány dolgot változtatni szükséges ezen az oldalon is, igaz? Nem adunk el, csak informálnánk, így milyen irányba menjek?

    http://www.florimo.hu/hirlevel/

  16. Szerintem még érdemes lehet a fájl feltöltést is beletenni…
    http://ipari-alpinista.hu/alpi.....szolgalat/

  17. Nimmy szerint:

    Nagyon tipikus hiba, hogy ahol regisztrálni lehet, nem segítik a leendő felhasználót abban, hogy milyen követelmények vannak a jelszóra (minimum-maximum karakterszám, használható karakterek típusa, kötelező karakterek típusa, nem használható karakterek). Még több, mint 5 évvel a cikk születése után sem elég körültekintők az űrlapok létrehozói.

Trackbacks

  1. […] hibát tapasztalok, de ha elolvasod az OMA Blog egyik ezzel kapcsolatos korábbi bejegyzését (A hatékony webes űrlapok 8+1 pontja), akkor rá fogsz ismerni a […]

Szólj hozzá!

*