Egy űrlapmező nem tűnik kicsi dolognak, amikor kitöltöd. Ez az a pillanat, amikor eldöntöd, hogy folytatod, vagy elmész. És ez a pillanat teljes egészében azon múlik, hogy maga a mező érthető-e, könnyen követhetők-e az utasítások, és van-e értelme a hibaüzeneteknek, ha valami elromlik.
A tanulmányok szerint az emberek 67%-a azért hagyja el az űrlapokat, mert nehéz eligazodni bennük. A nehézség nagy része nem abból adódik, hogy túl sok információt kérsz. Hanem abból, hogyan jelenik meg az információ a mezők szintjén. Egyetlen nem egyértelmű címke, zavaros helyőrző vagy homályos ellenőrzési hiba megakadályozhatja, hogy valaki kitöltsön egy űrlapot, amelyet amúgy szívesen kitöltene.
Ez a cikk a gyakorlati, elmélet nélküli szabályokat mutatja be, amelyek az űrlapmezőket súrlódási pontokból konverziós eszközzé alakítják. Megtanulod, hogyan működjenek a címkék, miért buknak el a helyőrzők, ha a tervezők rájuk támaszkodnak, és hogyan döntik el az ellenőrzési üzenetek, hogy a felhasználók megbíznak-e az űrlapodban, vagy elhagyják. Ha elsajátítod ezeket a részleteket, megérted, miért ér el egyes márka 80%-os űrlapkitöltést, míg mások az 50%-ot is alig érik el.
Mitől érződik egy űrlapmező könnyűnek vagy nyomasztónak
Az űrlapmező több, mint egy beviteli doboz. Beszélgetés a márkád és a látogató között. A mező maga kérdez, a címke elmagyarázza, mit szeretnél, a helyőrző pedig tippet ad. Az ellenőrzési üzenet reagál, ha valami nem teljesen jó. Minden elem együtt hoz létre egy érzést.
Ez az érzés lehet az, hogy „Pontosan tudom, mit kell tennem, és bízom ebben”, vagy az, hogy „Nem tudom, mi kerül ide, és ez az űrlap elromlottnak tűnik.” A különbség nem a szerencsén múlik. A szerkezeten.
Amikor a mezők könnyűek, erőfeszítés nélkülinek érződnek. A címke megmondja, milyen információ tartozik a mezőbe, mielőtt rákattintasz. A beviteli mezőnek elég helye van a gépeléshez. Ha hibázol, a hibaüzenet pontosan megmondja, mi ment félre, és hogyan javítsd ki. Magabiztosan haladsz végig az űrlapon.
Amikor a mezők nehezek, súrlódást okoznak. A címke hiányozhat vagy nem egyértelmű. Elkezdesz gépelni, a helyőrző eltűnik, és elfelejted, mit kellett beírnod. Hibaüzenet jelenik meg anélkül, hogy megmondaná a problémát, és találgatnod kell. Minden mező egy kis rejtvény. Három-négy ilyen rejtvény után az emberek elmennek.
Űrlapcímkék: legyenek egyértelműek és mindig láthatók
A címke nem dekoráció. Az az utasítás, amely megmondja valakinek, milyen információ tartozik egy mezőbe. A legjobb címkék egyértelműek, leíróak és mindig láthatók. Nem rejtettek. Nem tűnnek el. Mindig ott vannak.
Ezt mutatják a kutatások. Amikor a címke közvetlenül a mező fölött van, és látható marad, miközben a felhasználó gépel, nőnek a kitöltési arányok. Amikor a címkéket olyan helyőrzők helyettesítik, amelyek eltűnnek, amint valaki gépelni kezd, a kitöltési arányok csökkennek. Az ok egyszerű. Az embereknek emlékezniük kell arra, mit írtak be, ellenőrizniük kell az elgépeléseket, és ellenőrizniük kell a munkájukat a beküldés előtt. Ha a címke eltűnik, egyiket sem tudják megtenni.
A címke úgy írja le a mezőt, hogy egy kérdésre válaszoljon. Milyen információ kerül ide? Az „E-mail-cím” többet tesz, mint az „E-mail”. A „Telefonszám” egyértelműbb, mint a „Telefon”. A „Cégnév” jobb, mint a „Cég”. Ezek a pontosságbeli apró különbségek jelentik a különbséget az azonnali érthetőség és egy pillanatnyi tétovázás között.
Kerüld azokat a címkéket, amelyek elrejtik az információt. Ne használj olyan homályos címkéket, mint „Egyéb”, „További információ” vagy „Részletek”. Ezek arra kényszerítik a felhasználót, hogy rákattintson vagy fölé vigye az egeret, hogy megértse, mire való a mező. Egy konkrét címke, például „Honnan hallottál rólunk?” vagy „Mi a legnagyobb kihívásod?”, előre elvégzi a munkát, és mozgásban tartja az embereket.
A kötelező és az opcionális mezőknek vizuálisan kell különbözniük, de szóbeli magyarázat nélkül. A legtöbb űrlap azt mondja, hogy „A kötelező mezőket csillag jelöli”, aztán elvárja, hogy az emberek emlékezzenek erre a szabályra. Inkább jelöld láthatóan a kötelező mezőket (csillaggal vagy ponttal), az opcionális mezőket pedig tedd egyértelművé egy kis „(opcionális)” címkével. Az emberek első pillantásra tudni fogják, mi kötelező és mi nem.
A hosszú vagy összetett űrlapoknak jót tesz egy rövid súgószöveg a címke alatt. Ez nem életre szóló utasítás. Egyetlen mondat, amely tisztáz, ha szükséges. Ha telefonszámot kérdezel, és konkrét formátum kell, adj egy sort a címke alá: „Add meg a körzetszámot is. Nem hívunk fel vele anélkül, hogy előbb megkérdeznénk.” Ez az egy sor megelőzi a formátumhibákat, és bizalmat épít. De tartsd rövidnek. Minden mező alatt bekezdésnyi súgószövegtől nyomasztónak érződik az űrlap.
Ha mélyebben szeretnél betekinteni abba, hogyan befolyásolják az elrendezési döntések az űrlapok észlelését, olvasd el az útmutatónkat: űrlaptervezési alapelvek: elrendezés, térköz és vizuális hierarchia.
Miért buknak el a helyőrzők, és mit használj helyettük
A helyőrző olyan szöveg egy űrlapmezőben, amely eltűnik, amint valaki rákattint. Hasznosnak tűnik. Tippnek érződik. A gyakorlatban ez az űrlaptervezés leggyakoribb hibája.
Ez történik, amikor valaki címke helyett helyőrzőre támaszkodik. Egy látogató az űrlapra érkezik. A helyőrző azt mondja: „kata@pelda.hu”, hogy megmutassa, milyen formátumot vár. Rákattint az e-mail mezőre, és gépelni kezd. A helyőrző eltűnik. Most már nem látja, milyen formátumot vártak, ezért azon töpreng, jól csinálja-e. Befejezi a gépelést. Tabbal a következő mezőre lép. Most már nem emlékszik, helyesen írta-e be az e-mail-címét, de nem tud visszamenni ellenőrizni, mert a mező már nem mutatja a helyőrzőt. Ezért törli a bejegyzését, és újra begépeli. Ez megismétlődik minden mezőnél, ahol csak helyőrző az utasítás. A kitöltési arányok zuhannak.
A kutatások egyértelműek. A helyőrzők rontják az űrlapkitöltést, ártanak az akadálymentességnek (a képernyőolvasók nehezen kezelik őket), és súrlódást okoznak a kognitív fogyatékossággal élőknek, vagy bárkinek, aki figyelemelterelés közben, sietve tölt ki egy űrlapot. Ha a helyőrzőt nem elsődleges utasításként használod, és látható címkéket adsz hozzá, mérhetően nő a kitöltési arány.
Ez működik: használj címkéket az utasításhoz, a helyőrzőket pedig csak példákhoz. Az „E-mail-cím” címkéjű és „nev@cegnev.hu” helyőrzőjű mező csodásan működik. A címke megmondja a felhasználónak, mi kerül a mezőbe. A helyőrző megmutatja a formátumot anélkül, hogy elrejtené az utasítást. Amikor a felhasználó rákattint, és a helyőrző eltűnik, már tudja, mire való a mező, mert látható címke mondja meg neki.
Nem minden mezőnek kell helyőrző. Az egyszerű mezőkhöz, mint a „Keresztnév” vagy a „Cégnév”, elég a címke. A helyőrző azoknál a mezőknél hasznos, ahol a formátum számít (telefonszámok, dátumok, URL-ek), vagy ahol a felhasználó nem tudhatja, milyen példaadatot írjon be (közösségi oldali felhasználónév, ajánlókód).
Ha kísért, hogy helyet spórolj, és címke helyett helyőrzőt használj, építsd meg az űrlapot címkékkel, és hagyd, hogy egymás alá kerüljenek. A látható címkékkel és helyőrzők nélküli űrlap mindig jobban teljesít, mint a lebegő címkékkel és rejtett helyőrzőkkel rendelkező. A felhasználók gyorsabban töltik ki az űrlapokat, kevesebb hibát követnek el, és jobban megbíznak az űrlapban.
Ellenőrzési üzenetek: alakítsd a hibákat útmutatássá
Az ellenőrzés az, ami akkor történik, amikor valaki helytelenül tölt ki egy mezőt. Hibaüzenet jelenik meg. Ebben a pillanatban a felhasználó érez valamit. Vagy azt érzi, hogy az űrlap elromlott és zavaros, vagy azt, hogy az űrlap segít neki helyesen csinálni.
A rossz ellenőrzési üzenetek homályosak. Azt mondják, hogy „Érvénytelen bevitel” vagy „Hiba”, és semmi mást. A felhasználó nem tudja, mi ment félre. Rossz volt a formátum? Túl rövid volt a bevitel? Olyan karaktert használt, amely nem megengedett? Találgatnia kell, és újra próbálkoznia.
A jó ellenőrzési üzenetek konkrétak és cselekvésre ösztönzők. Az „Érvénytelen” helyett azt mondd: „A jelszó legyen legalább 8 karakter hosszú, és tartalmazzon egy nagybetűt és egy számot.” Ez pontosan megmondja a felhasználónak, mi ment félre, és mit tegyen a javításhoz. Az űrlap már nem érződik elromlottnak. Úgy érződik, hogy segít.
Az időzítés is számít. Az ellenőrzés kétféleképpen történhet. A valós idejű ellenőrzés a mezőt azután vizsgálja, hogy a felhasználó befejezte a gépelést, és azonnal hibát mutat. Ez reagálónak érződik, és a beküldés előtt segít elkapni a hibákat. Az űrlapszintű ellenőrzés a beküldésre kattintáskor történik, és az összes hiba egyszerre jelenik meg. Ez kevésbé érződik reagálónak, de egyszerű űrlapoknál jól működik. Kombináld a kettőt, ha tudod. Valós idejű ellenőrzés a kritikus mezőkhöz (e-mail-cím, jelszó, telefonszám), és űrlapszintű ellenőrzés beküldéskor mindenhez máshoz.
A hibaüzenetek elhelyezése befolyásolja, hogy az emberek ki tudják-e javítani őket. A hibaszöveg közvetlenül a problémát okozó mező alatt jelenjen meg, ne az űrlap tetején egy összesítő listában. Amikor a hiba a mező alatt van, a felhasználó egyszerre olvashatja a hibát és a mezőt. Láthatja, mit gépelt, megértheti, mi ment félre, és azonnal kijavíthatja. Amikor a hiba az űrlap tetején egy listában van, vissza kell görgetnie, meg kell keresnie a mezőt, és emlékeznie kell a hibára.
A szín önmagában nem elég a hiba jelzéséhez. Ne csak piros szegélyre vagy piros szövegre támaszkodj. Egyes felhasználók nem tudják megkülönböztetni a színeket. Adj hozzá ikont (X-et, figyelmeztető jelet) és kísérő szöveget, hogy a hiba mindenkinek egyértelmű legyen. A képernyőolvasóknak is szöveg kell a hiba felolvasásához, nem csak színváltozás.
A hibaüzenetek hangneme számít abban, hogyan éreznek az emberek az űrlapodról. A durva üzenet, például „Érvénytelen e-mail-címet adtál meg”, azt érezteti, hogy valamit rosszul csináltak. A segítő üzenet, például „Nem ismertük fel az e-mail-cím formátumát. Ellenőrizd, hogy nincs-e elgépelés, és próbáld újra”, azt érezteti, hogy segítettek nekik. A második üzenet ugyanazt a munkát végzi, de az élmény inkább együttműködésnek érződik, mint ítélkezésnek.
Ha útmutatást szeretnél arról, hogyan építhetsz mindenki számára hozzáférhető űrlapokat, nézd meg a cikkünket az akadálymentes űrlaptervezésről.
Hogyan befolyásolja a mezők térköze, hogy egy űrlap megközelíthetőnek érződik-e
Az űrlap vizuális környezet. Az egyes mezők körüli hely, a címkék és a beviteli mezők közötti távolság, valamint a mezőcsoportok közötti rések mind jelzést adnak arról, hogy az űrlap kezelhető vagy nyomasztó-e.
A szűk térköz miatt tíz mező harmincnak látszik. Minden mező versenyez a vizuális figyelemért. A felhasználó nem tudja, mely mezők tartoznak össze. A címkék közel ülnek a lenti beviteli mezőkhöz, a következő címke pedig csak néhány képponttal lejjebb. Az egész űrlap szűkösnek és nyomasztónak érződik. A lemorzsolódás az első mező kitöltése előtt megtörténik.
Az összetartozó mezők közötti bőkezű térköz és a mezőcsoportok közötti nagyobb rések ugyanazt a tíz mezőt rövid, rendezett folyamattá teszik. Először kitöltöd a számlázási adatokat. Aztán egy világos rés. Aztán a szállítási adatok. Aztán újabb rés. Fizetési adatok. Az űrlap strukturáltnak érződik, nem kaotikusnak. Ez nem pazarló üres hely. Ez információs architektúra, amely végigvezeti a felhasználót a folyamaton.
A mobilos űrlapok különös figyelmet igényelnek a térközre. Telefonképernyőn a szűk űrlap használhatatlan. Minden mezőnek elég függőleges helyre van szüksége ahhoz, hogy az ujj úgy érinthesse meg, hogy ne találjon el egy szomszédos mezőt. A bőkezű függőleges térközzel és egyértelműen elválasztott szakaszokkal rendelkező mobilos űrlap jelentősen jobban konvertál, mint az, amelyet asztali gépre terveztek, és összezsugorítottak mobilra. A hely nem elpazarolt. Funkcionális.
A címkék elhelyezése is hat a térközérzékelésre. A címkék közvetlenül a beviteli mezők fölött legyenek, ne mellettük. Amikor a címkék balra vannak, a címke és a beviteli mező közötti távolság nő, ami zavart okoz abban, melyik mező melyik címkéhez tartozik. Ez különösen igaz mobilon, ahol a bal oldali címkék a szöveg tördelésére vagy olvashatatlan méretűre zsugorítására kényszerítenek. A fent elhelyezett címkék kötődnek a beviteli mezőhöz, és tisztábbnak érződnek.
Opcionális és kötelező mezőjelzők, amelyek tényleg működnek
Minden mező vagy kötelező (ki kell tölteni), vagy opcionális (át lehet ugrani). A felhasználónak első pillantásra tudnia kell, melyik melyik, súgószöveg vagy utasítások olvasása nélkül.
A hagyományos megközelítés a kötelező mezőket csillaggal jelöli, és azt mondja: „A kötelező mezőket csillag jelöli”. Ez csak akkor működik, ha a felhasználók emlékeznek a szabályra. Sokan nem. Átfutják az űrlapot, és csillagokat látnak anélkül, hogy értenék, mit jelentenek.
Jobb megközelítés, ha a kötelező mezőket láthatóan jelölöd (csillaggal vagy színes ponttal), az opcionális mezőket pedig kifejezetten „(opcionális)” felirattal látod el a címke mellett. Így egy gyors átfutás megmondja a felhasználónak, hogy az adott mező szükséges-e. A kötelező mezők normálisnak látszanak jelölővel. Az opcionális mezőknek egyértelmű címkéjük van. Így nem kell megjegyezni egy szabályt.
Egyes űrlapok színnel különböztetik meg a kötelező és az opcionális mezőket. Ez működhet, de magas kontrasztot igényel, és szöveges címkékkel kell kombinálni, nem szabad önmagában használni. A címke melletti piros csillag jobban működik, mint a piros mezőháttér, mert a mezőháttér kevésbé láthatóvá teheti a beviteli mezőt.
Feltételes mezők, és csak annak megjelenítése, ami szükséges
Egyes mezőknek csak azután szabad megjelenniük, hogy a felhasználó választott az előző mezőben. Egy „Az Egyesült Államokban élek” jelölőnégyzet megjeleníthet egy állam legördülő listát. Ha a fióktípus mezőben a „Vállalkozás” opciót választod, megjelenhet egy cégnév mező. Ezek a feltételes mezők csökkentik a kognitív terhelést azzal, hogy csak azokat a mezőket mutatják, amelyeket a felhasználónak valóban ki kell töltenie.
Amikor a feltételes mezők megjelennek, megjelenésük legyen sima és egyértelmű. A hirtelen, animáció nélküli megjelenés megijesztheti. A kiúszó vagy lecsúszó effekt egyértelművé teszi a változást. Az újonnan megjelent mezőnek ugyanúgy saját címkéje és ellenőrzése legyen, mint egy rendes mezőnek. Ne feltételezd, hogy a felhasználó érteni fogja, mit kell tennie csak azért, mert a mező megjelent.
A feltételes mezők akkor működnek a legjobban, ha az őket kiváltó mező alatt jelennek meg, nem fölötte vagy mellette. A felhasználó választ, és közvetlenül a választása alatt megjelennek az ahhoz kapcsolódó új mezők. Ez lineárisan tartja a kognitív utat, és csökkenti a zavart.
Hogyan segít a WEMASY az űrlapmezők tervezésében
A WEMASY űrlapépítője testre szabható mezőopciókat, ellenőrzési szabályokat és valós idejű hibaüzeneteket tartalmaz. Beállíthatod a kötelező és opcionális mezőket, konkrét ellenőrzési szabályokat adhatsz a különböző mezőtípusokhoz, és pontosan szabályozhatod, milyen hibaüzenetek jelenjenek meg, és mikor. Ez azt jelenti, hogy a cikk minden bevált gyakorlatát követő űrlapokat építhetsz kódolás nélkül.
A mezők elrendezését, térközét és a címkék elhelyezését is szabályozhatod a WEMASY űrlaptervező eszközeivel. Építs olyan űrlapokat, amelyek egyértelműnek, professzionálisnak és könnyen kitölthetőnek érződnek.
Nézd meg, milyen funkciók tartoznak az egyes WEMASY csomagokhoz.