Vegyél bármilyen űrlapot, amely a látogatókat egy opciólistából való választásra kéri, és észreveszel valamit. Az űrlap nem azért bukik meg, mert túl sok kérdést tesz fel. Azért bukik meg, mert valaki rossz beviteli típust választott ahhoz a kérdéshez. Legördülő menü ott, ahol a rádiógombok gyorsabbak lennének. Jelölőnégyzetek ott, ahol csak egy válasz értelmes. Rádiógombok ott, ahol egy legördülő menü megspórolná a képernyőtér felét.
Ezek nem apróságok. A kutatások szerint a beviteli típus megválasztása az egyik fő oka annak, hogy a látogatók félbehagyják az űrlapokat. Egyetlen rossz döntés arról, hogy legördülő menüt, rádiógombot vagy jelölőnégyzetet használj, 15% vagy annál nagyobb mértékben megemelheti az űrlap-lemorzsolódási arányt. A látogató nem azért zavarodik meg, mert nem tud dönteni. Azért zavarodik meg, mert az általad választott beviteli típus rossz jelzést küld arról, mit vár az űrlap.
Ez a cikk a legördülő menük, rádiógombok és jelölőnégyzetek közötti választás gyakorlati szabályait mutatja be. Megtudod, melyik beviteli típus működik a legjobban a különböző helyzetekben, mit kommunikál mindegyik a látogatónak, és hogyan kerüld el azokat a hibákat, amelyek miatt a látogatók félbehagyják az űrlapokat. Ha elsajátítod ezeket a döntéseket, megérted, miért látnak egyes márkák látványosan magasabb kitöltési arányt ugyanazon az űrlapon, csupán egy beviteli típus cseréjével.
Miért befolyásolja a választott beviteli típus az űrlap kitöltését jobban, mint a legtöbben gondolják
A legördülő mező, a rádiógomb és a jelölőnégyzet mind egy listából gyűjt választást. Felületesen nézve felcserélhetőnek tűnnek. A különbségek finomak. A hatás nem az.
Amikor a látogató legördülő menüt lát, tudja, hogy kattintania kell az opciók megtekintéséhez. Az opciók rejtve vannak, amíg nem kattint. Ez egy extra lépés. Amikor rádiógombokat lát, az opciók azonnal láthatók. Egyszerre átnézheti mindet, és kattintás nélkül választhat. Amikor jelölőnégyzetet lát, megérti, hogy több elemet is kiválaszthat, nem csak egyet.
Ezek a különbségek megváltoztatják, hogyan lép kapcsolatba a látogató az űrlapoddal. Megváltoztatják a kognitív terhelést. Megváltoztatják, milyen gyorsan tud valaki dönteni. Megváltoztatják, hogy az űrlap egyszerűnek vagy lehengerlőnek tűnik. Ha ezt jól csinálod, kevesebben hagyják félbe az űrlapodat. Ha rosszul, a látogatók elkattintanak, mert az űrlap nem tűnik intuitívnak, még ha technikailag működik is.
A legrosszabb hiba, ha rossz beviteli típust használsz az adott helyzethez. Legördülő menü két választáshoz túlzásnak tűnik. 15 opcióhoz rádiógombok zsúfoltnak és lehengerlőnek tűnnek. Jelölőnégyzetek, amikor valakinek csak egy opciót kellene választania, zavart kelt abban, mit választhat. Minden rossz döntés konverzióba kerül.
A legördülő menük hosszú listáknál működnek a legjobban, ha az alapértelmezett érték nem számít
A legördülő menü olyan mező, amely elrejti az opciókat, amíg valaki rá nem kattint a kinyitáshoz. A választás egy kattintás mögött van elrejtve. Ezért a legördülő menü egy konkrét helyzetre tökéletes. Sok opciód van, és számít a minimális képernyőtér.
Akkor használj legördülő menüt, ha több mint hét opciód van. Ezen a ponton az összes opció rádiógombként vagy jelölőnégyzetként való megjelenítése zsúfolttá teszi az űrlapot. A legördülő menü az összes opciót egyetlen mezőbe sűríti, amely szinte semmi függőleges helyet nem foglal. Ezért a legördülő menük a szabványos megoldás a mobil űrlapokon. A telefon képernyője keskeny. A legördülő menük képernyőterületet spórolnak.
A legördülő menük akkor is jól működnek, ha a választás egyértelmű, és a látogatónak világos válasz jár a fejében. Gondolj egy ország vagy megye kiválasztására. A legtöbben azonnal tudják, melyiket szeretnék. Beírhatják az első betűt, hogy az opcióra ugorjanak, vagy rákattinthatnak és görgethetnek, hogy megtalálják. Az interakció gyors, mert a kérdés könnyű.
De itt buknak meg a legördülő menük. Akkor buknak meg, ha a látogatóknak a döntés előtt össze kell hasonlítaniuk az opciókat. Akkor buknak meg, ha a lista olyan sorrendben van rendezve, amire a látogatók nem számítanak. Akkor buknak meg, ha nincs alapértelmezett érték, és a látogatónak kattintania kell csak azért, hogy lássa, milyen opciók vannak.
Egy példa: egy űrlap legördülő menüvel kéri a látogatókat, hogy válasszák ki az étkezési preferenciájukat. Az opciók összekeverve vannak (tenger gyümölcsei, vegetáriánus, csirke, marha, vegán, gluténmentes). A látogató nem tudja, milyen opciók vannak, amíg nem kattint. Amikor rákattint, és meglátja a listát, mindet fel kell dolgoznia a döntéshez. Nem látja őket egyszerre az összehasonlításhoz. Ez tovább tart, mintha az opciók rádiógombként lennének láthatók. Egy felhasználói élménnyel foglalkozó kutatócég kutatása szerint a legördülő menük lassítják a döntéshozatalt, amikor a felhasználóknak több opciót kell értékelniük.
Használj legördülő menüt, amikor a látogatók tudják, mit keresnek, és sok az opció. Kerüld, amikor a látogatóknak össze kell hasonlítaniuk az opciókat, vagy amikor hétnél kevesebb a választási lehetőség.
A rádiógombok akkor értelmesek, ha két és öt közötti opciód van
A rádiógomb egy kör alakú jelölőt mutat minden opció mellett. Amikor valaki rákattint az egyikre, a többi automatikusan kijelölését veszti. Egyszerre csak egy opció választható. Ezért hívják "rádió" gomboknak, mint a régi autórádiókat, ahol egy új állomás gombjának megnyomása kioldotta az előzőt.
A rádiógombok csodásan működnek, amikor a látogatóknak világos, kis választékuk van. Ha az űrlapod előfizetési csomag kiválasztását kéri, és három szintet kínálsz, a rádiógombok a tökéletes választás. A látogató mind a hármat egyszerre látja. Fejben azonnal összehasonlíthatja az árakat, a funkciókat és az előnyöket. Kattint egyre. Kész. Nincsenek rejtett opciók. Nincs zavar.
A rádiógombok akkor is jól működnek, ha az egyik opció egyértelműen az alapértelmezett vagy a legnépszerűbb választás. Képzelj el egy űrlapot, amely azt kérdezi a látogatóktól, honnan hallottak a márkádról. Öt opciót kínálsz, és a legtöbben a "Google keresés" opciót választják. Ha a rádiógombok láthatók, a Google-on keresők azonnal látják a válaszukat, és rákattintanak. Nem kell kinyitniuk egy legördülő menüt azon tűnődve, hogy a válaszuk szerepel-e a listán.
A használhatósági kutatás egyértelmű. Ha az opciók láthatók, az emberek gyorsabban döntenek. Ha az emberek extra kattintás nélkül látják az összes választási lehetőséget, nő a kitöltési arány. Ezért teljesítenek jobban a rádiógombok a legördülő menüknél kisebb listáknál.
A rádiógombok öt-hat opciónál kezdenek zsúfoltnak tűnni. Ha hétnél többet adsz hozzá, az űrlap lehengerlőnek tűnik. Minden rádiógomb függőleges helyet foglal. Egy nyolc rádiógomb-opcióval rendelkező űrlap a "Mi az elsődleges érdeklődési köröd?" kérdéshez a szükségesnél jóval hosszabbnak tűnik. Ezen a ponton a legördülő menü értelmesebb.
Használj rádiógombokat, ha két-öt opciód van, és a látogatóknak előnyös az összehasonlításuk. Kerüld hétnél több opciónál.
A jelölőnégyzetek olyan választásokhoz valók, ahol több válasz is helyes
A jelölőnégyzet egy kis négyzetnek néz ki. Kattintásra pipát mutat. A rádiógombokkal ellentétben ugyanabban a csoportban több jelölőnégyzet is bejelölhető egyszerre. Ez a kulcsfontosságú különbség. A jelölőnégyzetek nem alternatívái egymásnak. Független választások.
A jelölőnégyzetek akkor működnek, ha a kérdés egynél több választ enged meg. Az az űrlap, amely azt kérdezi, "Ezek közül mely funkciók érdekelnek?", jelölőnégyzeteket használ, mert egy látogató egyszerre választhatja a termékanalitikát, az ügyfél-visszajelzést és az automatizálási integrációt. Minden jelölőnégyzet önálló, független választás, nem alternatívája a többinek.
A jelölőnégyzetek az egyetértési nyilatkozatoknál is működnek. Az "Elfogadom a felhasználási feltételeket" jelölőnégyzet, mert igen-nem állítás. A látogató vagy egyetért, vagy nem. Hasonlóképpen a "Küldjetek nekem e-mailes frissítéseket" egyetlen jelölőnégyzet, mert egyetlen döntést képvisel.
A zavar akkor jön létre, amikor az emberek jelölőnégyzetet használnak ott, ahol rádiógombot kellene, vagy fordítva. Az az űrlap, amely azt kérdezi, "Melyik csomagot szeretnéd?", nem használhat jelölőnégyzeteket. Senki nem akarhatja mind a három csomagot. A választások kölcsönösen kizárják egymást. Itt a rádiógombok a helyesek.
A jelölőnégyzetek ugyanattól a csoportosulási problémától szenvednek, mint a rádiógombok. Hétnél vagy nyolcnál több jelölőnégyzet egyetlen csoportban lehengerlővé teszi az űrlapot. Vizuálisan sok jelölőnégyzet sok munkának tűnik, még ha a látogatónak csak egy-két elemet kell is kiválasztania.
Jelölőnégyzeteket csak akkor használj, ha a látogatók jogosan választhatnak egyszerre több opciót. Kerüld az egyválasztós kérdéseknél, és a nagy számú jelölőnégyzetet csoportosítsd kisebb, összetartozó kategóriákba.
Hogyan döntsd el, ha bizonytalan vagy, melyik beviteli típust használd
A döntés gyakran egyértelmű. De néha egy kérdés szürke zónába esik. Öt opciód van, és nem vagy biztos benne, hogy a rádiógombok vagy a legördülő menü a jó. Íme a döntési fa, amely működik.
1. lépés. Választhat a látogató egynél több választ? Ha igen, használj jelölőnégyzeteket. Ha nem, lépj a második lépésre.
2. lépés. Hány opció van? Hatnál kevesebb opciónál lépj a harmadik lépésre. Hétnél több opciónál használj legördülő menüt.
3. lépés. A látogatóknak össze kell hasonlítaniuk az opciókat a döntéshez? Ha igen, használj rádiógombokat, hogy minden opció egyszerre látható legyen. Ha nem, és a válasz egyértelmű, a rádiógombok és a legördülő menü is működik, de a rádiógombok kicsit gyorsabbak lesznek.
Ez az egyszerű döntési fa megoldja az űrlaptervezés során felmerülő beviteli típus-kérdések 90%-át. Azokra az esetekre, ahol még mindig bizonytalan vagy, teszteld mindkét opciót valódi látogatókkal. Futtasd az űrlapodat egy hétig rádiógombokkal, mérd a kitöltési arányt. Válts legördülő menüre, futtasd még egy hétig, és hasonlítsd össze. A látogatóid valódi adatai többet érnek bármilyen tervezési szabálynál, mert a látogatóid töltik ki az űrlapjaidat.
Gyakori hibák, amelyek lerontják az űrlapkitöltést anélkül, hogy bárki tudná, miért
Az első hiba, ha legördülő menüt használsz két vagy három opcióhoz. Ez gyakrabban történik, mint gondolnád. Egy űrlap azt kérdezi: "Hogyan találtál ránk?", az opciók pedig "Keresőmotor", "Közösségi média" és "Ajánlás". Egy legördülő menü elrejti ezeket az opciókat. A látogatónak rá kell kattintania a legördülő menüre, hogy lássa az opciókat. Nem tudja, milyen opciók vannak, amíg nem kattint. Ez ok nélkül súrlódást ad hozzá. A rádiógombok itt gyorsabbak, és intuitívabbnak tűnnek.
A második hiba, ha nyolc vagy kilenc rádiógombot jelenítesz meg, amikor egy legördülő menü a képernyőtér egytizedét venné igénybe. Egy űrlap arra kéri a látogatókat, hogy válasszák ki az országukat 195 ország listájából. A rádiógombok a végtelenségig görgetnének. Egy automatikus kiegészítéses kereséssel ellátott legördülő menü ezt azonnal megoldja. Egyes tervezők ragaszkodnak a rádiógombokhoz, mert intuitívabbnak érzik, anélkül, hogy észrevennék, hogy az intuitivitás eltűnik, amikor 50 opción kell végiggörgetni.
A harmadik hiba, ha jelölőnégyzeteket használsz egyválasztós kérdéshez. Egy űrlap azt kérdezi: "Melyik az előfizetési szinted?", és három jelölőnégyzetet jelenít meg, egyet minden csomaghoz. A látogatók összezavarodnak. Kiválaszthatják mindhármat? A jelölőnégyzet rossz jelzést küld. A rádiógombok világosabbak, mert vizuálisan közlik, hogy csak egy választható ki.
A negyedik hiba, ha nem adsz világos utasítást arról, mit jelent egy mező. Egy jelölőnégyzet-csoport jelenik meg az "Érdeklődési körök" címkével és magyarázat nélkül. A látogató nem tudja, hogy csak egyet válasszon, vagy annyit, amennyi illik. Ha kétértelműség van, a kitöltési arány csökken. A világos címkék ezt megoldják. A "Jelölj ki mindent, ami illik" vagy a "Válassz egyet" pontosan megmondja a látogatónak, mit vár a mező.
Az ötödik hiba az alapértelmezett értékek helytelen használata. Egy legördülő menü, amely a "Válassz egy opciót" alapértelmezéssel indul, elromlottnak tűnik. Egy legördülő menü, amely az "Egyesült Államok" alapértelmezéssel indul, hasznosnak tűnik, ha a legtöbb látogató onnan jön. Azok a rádiógombok, amelyek kijelölés nélkül indulnak, arra kényszerítik a látogatót, hogy kattintson egyre. Azok a rádiógombok, amelyek a leggyakoribb válasz előre kijelölésével indulnak, megspórolnak egy kattintást a látogatónak. Ezek az apró alapértelmezések összeadódnak egy űrlapon.
Mobilos szempontok, amelyek megváltoztatják a beviteli típus kiválasztását
A mobiltelefonok kisebbek. Ez érdemben megváltoztatja a beviteli típus kiválasztását.
Asztali gépen három rádiógomb egy egyszerű választáshoz természetes és gyors. Mobilon ugyanez a három rádiógomb függőlegesen egymás alatt több képernyőhelyet foglal, mint egy legördülő menü. A döntés megfordulhat.
A mobilos látogatók másképp is használják az eszközt. Hüvelykujjal koppintanak, nem pontos egérkattintással. A 44 x 44 pixeles jelölőnégyzet a minimális kényelmes méret. Minden ennél kisebb nehezen koppintható pontosan. A rádiógomboknak és jelölőnégyzeteknek elég helyre van szükségük maguk körül, hogy az egyikre koppintás véletlenül ne érintse a szomszédos opciót.
A legördülő menüket mobilon általában az eszköz natív választómenüje kezeli. Amikor a látogató okostelefonon rákattint egy legördülő menüre, mobilra optimalizált választót lát. Ez gyakran gyorsabb és kényelmesebb, mint egy hosszú listán görgetni magán az oldalon.
Mobil űrlapoknál a legördülő menük vonzóbbá válnak, ahogy a képernyőtér értékessé válik. A rádiógombok két-négy választáshoz még mindig jók, mert gyorsan koppinthatók. De hat opció rádiógombként görgetésnek tűnik. Ugyanez a hat opció legördülő menüben tisztábbnak és gyorsabbnak érződik egy telefonon.
Teszteld az űrlapjaidat mobilon. A döntés, amely asztali gépen jónak tűnt, másképp érződhet, amikor valaki egy négyhüvelykes telefonképernyőn tölti ki az űrlapodat.
Akadálymentességi követelmények, amelyeknek minden beviteli típusnak meg kell felelnie
A legördülő menüknek, rádiógomboknak és jelölőnégyzeteknek mind meg kell felelniük az akadálymentességi szabványoknak, hogy a képernyőolvasót vagy billentyűzetes navigációt használók sikeresen ki tudják tölteni az űrlapodat.
A rádiógombok vagy jelölőnégyzetek minden csoportjának kell egy fieldset címke, amely elmagyarázza, mire való a csoport. Amikor egy képernyőolvasót használó felhasználó a csoportba lép a tabbal, hallja a címkét, és megérti, miből választ. Enélkül csak annyit hall: "Rádiógomb egy, Rádiógomb kettő", kontextus nélkül.
Minden egyes opciónak látható, kattintható címkére van szüksége, nem csak egy apró rádiógombra vagy jelölőnégyzetre. Ha a látogatónak csak a jelölőnégyzet pontos négyzetére kell kattintania a kiválasztáshoz, a kevésbé pontos motoros kontrollú emberek nehezen boldogulnak. Ha a jelölőnégyzet melletti címkére is kattinthatnak, a választás mindenkinek könnyebbé válik. Ez nem csak a fogyatékossággal élők számára készült akadálymentességi funkció. Mindenkinek könnyebbé teszi az űrlapokat.
A legördülő menüknek is világos címkézésre van szükségük. A címkének a legördülő mező fölött vagy attól balra kell lennie. A jelenleg kiválasztott opciónak mindig láthatónak kell lennie a bezárt legördülő menüben. Ha a legördülő menü a választás után bezárul, és a kiválasztott értéket mutatja, a látogató tudja, hogy a döntését rögzítették.
A billentyűzetet használóknak tab és nyílbillentyűk segítségével kell tudniuk navigálni az űrlapokban. A rádiógomboknak lehetővé kell tenniük a nyílbillentyűs navigációt az opciók között. A jelölőnégyzeteknek kiválaszthatóknak kell lenniük szóközzel. A legördülő menüknek billentyűparancsokkal nyílniuk és zárulniuk kell. Ha az űrlapod ezek bármelyikéhez egérkattintást igényel, a billentyűzetet használók elakadnak.
A kiválasztott állapotot nem jelezheti csak a szín. Egy legördülő menü kiemelt opcióval színnel mutatja, mi van kiválasztva. Ez hasznos. De a színeket nem látó felhasználóknak is meg kell tudniuk állapítani, mi van kiválasztva, pipával, ikonnal vagy olyan vizuális jelzéssel, amely nem csak a színre támaszkodik.
Hogyan befolyásolják az űrlapmezők beviteli típusai a márkaképedet
A választott beviteli típus közöl valamit a látogatóval arról, mennyire érted őt.
Egy legördülő menü két-három opcióhoz azt jelzi, hogy aki az űrlapot tervezte, nem sokat gondolkodott a felhasználói élményen. Felesleges kattintást ad hozzá. A látogató ezt észreveszi. Súrlódásnak érződik.
Egy rádiógomb ott, ahol egy legördülő menü megspórolná az űrlap hosszának felét, ugyanezt jelzi. Az űrlap rosszul megtervezettnek érződik.
De egy űrlap, amelynél láthatóan végiggondolták a felhasználói élményt, amelynél a gyors választások nyilvánvalónak, a többszörös kiválasztások pedig egyértelműnek tűnnek, mást jelez. Azt jelzi, hogy ez a márka törődik a látogató idejével. Azt jelzi, hogy valaki alaposan átgondolta az űrlapot. Ez nem csak jobb használhatóság. Ez jobb márkaészlelés.
Az ilyen apró döntések összeadódnak. A látogató kitölti az űrlapodat, és minden mező intuitívnak tűnik. A vártnál gyorsabban végez. Jó érzéssel zárja az interakciót. Ez az érzés átterjed arra, hogyan látja a márkádat.