Az űrlapbeküldések kétharmada ma telefonon történik. Ennek ellenére a legtöbb weboldal asztali gépen tervezi az űrlapjait, majd belezsúfolja őket a mobilképernyőbe. Az eredmény: olyan űrlapok, amelyeket frusztráló kitölteni, gyakrabban hagynak el, és kevesebb látogatót alakítanak vásárlóvá.
A mobilos űrlaptervezés nem az asztali űrlapok kicsinyítéséről szól. Hanem arról, hogy az egész élményt újragondold egy 6 hüvelykes képernyőt tartó, hüvelykujjat használó embernek, egy zötykölődő buszon vagy egy zsúfolt kávézóban. Minden megváltozik. A rendelkezésre álló hely összezsugorodik. Az érintési célpontok kövérebbek lesznek. A billentyűzet felugrik, és elrejti az űrlap felét. A látogatót megszakítják, és elmegy.
A mobil-első űrlaptervezés azt jelenti, hogy az űrlap minden részletét arra optimalizálod, ahogy az emberek valójában a telefonokat használják. Ez a fejezet azokat a konkrét változtatásokat mutatja be, amelyek csökkentik az elhagyást, felgyorsítják a kitöltést, és több mobilos látogatót alakítanak érdeklődővé vagy vásárlóvá.
Az asztalra tervezett mobilos űrlapok vásárlókat veszítenek
Nézd meg, mi történik, amikor valaki telefonon nyit meg egy űrlapot, szemben az asztali géppel. A telefonos felhasználónak kevesebb a képernyőhelye, kevesebb a türelme, és több a zavaró tényező. Több dolgot kezel egyszerre. A figyelme töredezett. Egyetlen kínos interakció, és elmegy.
Az adatok ezt alátámasztják. A rossz mobilos tervezésű űrlapoknál az elhagyási arány 20-40 százalékponttal ugrik az asztali értékhez képest. Egyetlen rosszul elhelyezett mező lemorzsolódási hullámot indíthat el. Egy kis gomb, amelyet nehéz megérinteni, súrlódást okoz, amely ezernyi beküldésen át sokszorozódik.
De itt van, amit a legtöbb márka kihagy: a mobilra optimalizálás nem lassítja az asztali felhasználókat. A mobil-elsőként tervezett, majd nagyobb képernyőkre bővített űrlap valójában mindenkinek jobban működik. Szorosabb elrendezés. Jobb térköz. Világosabb hierarchia. Ezek nem mobilos kompromisszumok, hanem tervezési javítások.
A mobilos űrlaptervezés kihívása: mi más valójában
A mobilos űrlapoknak olyan korlátokkal kell szembenézniük, amelyekkel az asztali űrlapoknak nem. Ha megérted, mi változik, okosabban tervezhetsz:
A képernyőhely korlátozott
A telefonképernyő az asztali monitor által egyszerre megjeleníthető tartalom körülbelül 30-40%-át mutatja. Minden elem fizikai helyet foglal. A felesleges címkék, utasítások, tippek és űrlapmezők mind ugyanazért a pici területért versengenek. A billentyűzet megjelenik, és még tovább csökkenti a rendelkezésre álló helyet. A hosszú tájékoztató szövegek kicsúsznak a képernyőről.
Az érintési célpontok nagyobbak és kevésbé pontosak
Egy ujj 40-50 pixel széles. Az egérkurzor 1 pixel. Ez azt jelenti, hogy a gomboknak, jelölőnégyzeteknek, választógomboknak és linkcélpontoknak jelentősen nagyobbnak kell lenniük mobilon, hogy könnyen megérinthetők legyenek. A nagy mobilplatformok által ajánlott szabványos méret legalább 44x44 pixel. Ha túl kicsi, a felhasználók mellényúlnak, frusztráció keletkezik, és elhagyják az űrlapot.
A billentyűzetek átveszik az irányítást
Mobilon, amikor a felhasználó megérint egy űrlapmezőt, a billentyűzet felcsúszik, és eltakarja a képernyő felét. Egyes mezők más billentyűzetet váltanak ki: az e-mail mezők az @ jelet mutatják, a szám mezők elrejtik a betűket, a dátum mezők naptárválasztót nyitnak. Minden billentyűzettípus megváltoztatja, mit lát a felhasználó, és hogyan lép interakcióba. Tervezz mindegyikre külön.
A környezet folyton változik
Az asztali felhasználók leülnek, és megszakítás nélkül töltik ki az űrlapot. A mobilos felhasználók vonaton, boltokban, más alkalmazások között töltik ki. Kapnak egy értesítést, váltanak alkalmazást, öt perc múlva visszajönnek. A görgetés végtelennek érződik. Az űrlapmezők összemosódnak. Bármely lépés, amely memóriát vagy környezetváltást igényel, arra készteti az embereket, hogy feladják.
Az eszközt egy kéz kezeli
A legtöbb telefonhasználó egy kézzel tartja az eszközt, és a hüvelykujjával navigál. A jobb alsó sarokban lévő gombok elérhetők. A magas űrlap tetején lévő gombokhoz második kéz vagy kényelmetlen nyújtózkodás kell. A mezőktől balra lévő címkéket nehezebb olvasni a hüvelykujj helyzetének megtartása közben. Tervezz egykezes használatra.
1. szabály: Csökkentsd a kért mezők számát
Minden mező, amelyet kérsz, újabb érintés, újabb döntés, újabb esély arra, hogy valaki elmenjen. Az űrlapnak nincs szüksége mindenre. Csak arra kell, amit valóban használsz a kapcsolatfelvételhez.
Nézd meg a tényleges felhasználási eseteidet. Egy kapcsolati űrlapnak ritkán kell a második keresztnév, a cég mérete vagy az iparági kategória az első beküldésnél. A foglalási űrlapnak nem kell az ügyfél anyjának leánykori neve. A hírlevél-feliratkozásnak nem kell az irányítószám az első napon. További információt később is kérhetsz, miután már bizalmat építettél.
Egy utazási oldal kipróbálta ezt az elvet, és évi 12 millió USD-t spórolt azzal, hogy eltávolította az opcionális mezőket a foglalási űrlapjáról. A felhasználók több űrlapot töltöttek ki. Több konverzió történt. Az egyszerűsítés megtérült.
Kezdd az abszolút minimummal. Mobilon a szabály szigorúbb: ha nincs rá szükséged a fő művelet befejezéséhez, vedd ki. Teszteld a mezők egyenkénti eltávolítását, és figyeld, ahogy a kitöltési arányod emelkedik.
2. szabály: Rendezd a mezőket egyetlen oszlopba
A kétoszlopos elrendezések mobilon hibák. Vízszintes görgetést igényelnek, zavaros vizuális hierarchiát hoznak létre, és pazarolják a vízszintes helyet. Egy oszlop, függőlegesen egymás alá rendezve, a leggyorsabban átfutható és kitölthető.
Minden mező a teljes szélességet foglalja. A címkék a beviteli mező fölött vannak, nem mellette. A felhasználó lefelé görget, elolvassa a címkét, megérinti a mezőt, gépel, és továbblép a következőre. A folyamat lineáris. A kognitív terhelés alacsony.
Állj ellen a kísértésnek, hogy a kereszt- és a vezetéknevet egymás mellé tedd, vagy a címet és az irányítószámot ugyanabba a sorba. A függőleges egymás alá rendezés asztalon lassabb, igen. De a mobil a forgalmad kétharmadát jelenti. Optimalizálj a többségi esetre.
3. szabály: Tedd az érintési célpontokat elég naggyá a megbízható találathoz
A gomboknak legalább 44x44 pixelesnek kell lenniük. A jelölőnégyzeteknek és a választógomboknak legalább 40x40 pixelesnek. A kis gombok arra kényszerítik a felhasználókat, hogy gondosan célozzanak, vagy többször érintsenek. Nő a frusztráció. Elmennek.
Figyeld meg a saját telefonhasználatodat egy napig. Vedd észre, hány érintés megy mellé. Még a gyakorlott felhasználók is mellényúlnak. Tervezz az emberi ujjakba épített mellényúlási arányra.
Az érintési célpontok közötti térköz is számít. Ha egy igen gomb közvetlenül egy nem gomb mellett van, a felhasználók a rosszat fogják megnyomni. Adj 10-15 pixel levegőt az interaktív elemek közé.
4. szabály: A címkéket a mezők fölé tedd, ne beléjük
A beviteli mezőkben lévő helyőrző szöveg eltűnik, amint a felhasználó gépelni kezd. Elfelejtik, mire való volt a mező. Aztán hibáznak, hibát látnak, és nem tudják, mit javítsanak.
A címkéknek a mezőn kívül és fölötte kell lenniük. Világosan, láthatóan, mindig jelen. Amikor a felhasználó megérinti a mezőt, és megjelenik a billentyűzet, a címke látható marad, és emlékezteti őket, mit gépelnek.
A mezőn belüli címke csak a tervezőnek kényelmes. Megspórol néhány pixelnyi helyet. Konverziókba kerül.
5. szabály: Válaszd ki a megfelelő beviteli típust a mobilbillentyűzethez
A különböző beviteli típusok különböző billentyűzeteket váltanak ki a mobil eszközökön. Használd őket, hogy az adatbevitel gyorsabb és pontosabb legyen:
E-mail-címek
Használd a `type="email"` értéket, hogy olyan billentyűzetet hívj elő, amelyen látható az @ jel és a .com/.org billentyű. A felhasználóknak nem kell speciális karaktereket keresgélniük. Az ellenőrzés is automatikusan megtörténik.
Telefonszámok
Használd a `type="tel"` értéket számbillentyűzet megjelenítéséhez. Hagyd ki a cifra formázást, amely a mezőt (körzet) kód-szám szegmensekre osztja. A felhasználók küzdenek a merev mezőfelosztásokkal, és rossz darabba törölnek vissza. Egy egyszerű telefonmező, amely számjegyeket és szóközöket fogad el, gyorsabb.
Számok és mennyiségek
Használd a `type="number"` értéket, hogy csak számokat mutasson a billentyűzet. Rejtsd el a betűket. Egyes szám mezőknek tizedesekre van szükségük; használd az `inputmode="decimal"` értéket ezek engedélyezéséhez.
Dátumok
Használd a `type="date"` értéket natív dátumválasztó előhívásához ahelyett, hogy azt kérnéd a felhasználóktól, hogy begépeljék: 2026.03.15. A naptárválasztó gyorsabb, kevesebb a hiba, és natívnak érződik a telefonon.
URL-ek
Használd a `type="url"` értéket olyan billentyűzet megjelenítéséhez, amelyen ott van a perjel és a .com billentyű. A felhasználók speciális karakterek keresgélése nélkül adhatnak meg webcímet.
Minden beviteli típus jelzi a mobilböngészőnek, milyen adatot vársz. A böngésző ezután ehhez igazítja a billentyűzetet. Nem kell elmagyaráznod a formátumot. A billentyűzet elvégzi a munkát.
6. szabály: Írj világos hibaüzeneteket, amelyek valós időben jelennek meg
Amikor valaki mobilon tölt ki egy űrlapot, és a küldésre kattintva csak azt látja: „Érvénytelen e-mail-cím”, már elfelejtette, mit gépelt. Nem tudja, melyik mező váltotta ki a hibát. Kis képernyőn a hibaüzenet a hajtás alatt lehet. Vissza kell görgetniük.
Ehelyett ellenőrizd a mezőket, ahogy a felhasználó kitölti őket. Amint a következő mezőre lép, ellenőrizd azt, amelyet éppen elhagyott. Ha hiba van, azonnal mutasd, közvetlenül az a mező alatt. A problémát akkor látják, amikor a környezet még a fejükben van.
A hibaüzeneteknek konkrétnak kell lenniük. ROSSZ: „Érvénytelen bevitel.” JÓ: „Az e-mail-címben kell lennie @ jelnek.” A felhasználó pontosan tudja, hogyan javítsa.
Kerüld, hogy csak a piros színnel jelezd a hibákat. A színtévesztők nem fogják észrevenni. Használj pirosat plusz ikont vagy szöveges címkét. „Hiba: Ez a mező kötelező.”
7. szabály: Optimalizáld a gombokat a mobilos interakcióra
A küldés gomboknak nagyoknak, nyilvánvalóan megérinthetőknek kell lenniük, és ott kell elhelyezkedniük, ahol a hüvelykujj természetesen megpihen. A 44 pixel magas gombon lévő 16 pixeles gombszöveg könnyen megérinthető. A 32 pixeles gombon lévő 14 pixeles szöveg kész mellényúlás.
A gomb szélessége feszítse ki a képernyő szélességének nagy részét, ne szoruljon be egy keskeny oszlopba. A teljes szélességű gombok mobilon csökkentik a „hová kattintsak legközelebb” kognitív terhelését.
Kerüld a másodlagos gombokat ugyanazon a képernyőn, hacsak nem feltétlenül szükséges. A túl sok gomb döntési bénulást okoz. Képernyőnként egy elsődleges művelet a mobil-első szabály.
8. szabály: Használj folyamatjelzőket a többlépéses űrlapokhoz
Ha az űrlapod több képernyőre terjed, mutass folyamatsávot felül. A „3 lépésből az 1.” megmondja a felhasználónak, mire számítson. Tudja, hogy nem egy végtelen űrlapot tölt ki. Látja a célvonalat.
Minden lépés egy logikai információcsomagot kezeljen. Ne zúdíts öt különböző témát az első lépésre. Bontsd szét őket. Hagyd, hogy a felhasználók haladást érezzenek, ahogy végigmennek.
Engedd meg a felhasználóknak, hogy visszalépjenek, és szerkesszék a korábbi lépéseket. Ne érezzék magukat bezárva. A mobilos felhasználók ijedősek. A menekülőút kínálása csökkenti a szorongást.
9. szabály: Győződj meg róla, hogy az űrlapod működik a mobilbillentyűzetekkel és a megszakításokkal
A billentyűzet felugrik, és elrejti az űrlapodat. A felhasználó görget, hogy lássa a következő mezőt. Jó. Most értesítés érkezik, és a billentyűzet eltűnik. Az űrlap látható, de a felhasználó elfelejtette, mit töltött ki. Rossz.
Teszteld az űrlapodat valódi telefonon és valódi billentyűzettel. Értsd meg, az űrlap mekkora része tűnik el, amikor megjelenik a billentyűzet. Ha egy mező teljesen el van rejtve, használhatatlan. Tervezd át az elrendezést úgy, hogy az aktív mező látható maradjon nyitott billentyűzettel.
Mentsd az űrlap előrehaladását, ahogy a felhasználó kitölti az egyes mezőket. Ha alkalmazást váltanak, vagy az űrlap véletlenül bezárul, az adataik megmaradnak. Amikor visszatérnek, az űrlap pontosan úgy van, ahogy hagyták. Ez az elhagyás egy hatalmas forrását szünteti meg.
10. szabály: Használd az automatikus és az előre kitöltést a kitöltés gyorsításához
A mobiltelefonok tárolják az elérhetőségeket, e-mail-címeket, neveket és fizetési adatokat. Ha az űrlapod szabványos mezőneveket és HTML-attribútumokat használ, a böngésző automatikusan kitöltheti ezeket. Egy `autocomplete="tel"` attribútumú telefonmező javaslatként mutatja a mentett telefonszámokat.
Az előre ismert adatokkal való előre kitöltés még erősebb. Ha valaki bejelentkezik, és elkezd egy űrlapot, az e-mail-címe már ki van töltve. A címe már ki van töltve. Csak azt gépelik be, ami új. A kitöltési arány ugrik, ha a felhasználóknak nem kell újra megadniuk a már meglévő információkat.
Az automatikus és az előre kitöltés nem csalás. A felhasználó idejét tiszteletben tartják. Csökkentik a gépelést. Csökkentik a hibákat. Növelik a kitöltést.
11. szabály: Tesztelj valódi telefonokon valódi felhasználókkal
Az asztali böngészőkben van eszközemuláció. Szimulál egy telefonképernyőt. Hasznos gyors ellenőrzésekhez. De nem szimulálja a tényleges mobilos élményt. A billentyűzet nem ugyanúgy működik. A görgetés nem ugyanúgy érződik. Az érintési célpontokhoz nem kell a tényleges hüvelykujjad.
Teszteld az űrlapodat valódi telefonokon. Kérj meg egy kollégát, hogy töltse ki. Nézd, hol habozik. Nézd, hol hibázik. Nézd, hol hagyja el. Ez a valódi adat többet mond, mint bármely ellenőrzőlista.
A gyakori mobilos űrlaphibákat tesztelés nélkül nehéz észrevenni. Egy gomb, amely asztali emulátoron nagynak tűnik, túl kicsi lehet egy valódi telefonon erős napfényben. A drótvázon világosnak tűnő címkék nehezen olvashatók lehetnek abban a szögben, ahogy a telefont tartják. Csak a valódi tesztelés fedi fel ezeket a problémákat.
Hogyan segít a WEMASY a mobilos űrlaptervezésben
A WEMASY űrlapépítője alapértelmezetten mobil-első tervezést tartalmaz. Az űrlapok mobilon automatikusan egyetlen oszlopba rendeződnek. Az érintési célpontok megfelelő méretűek. A címkék láthatók maradnak, miközben a felhasználók kitöltik a mezőket. A mobilbillentyűzet minden beviteli típushoz optimalizált.
A beépített űrlapellenőrzés valós időben történik, nem a beküldés után. A többlépéses űrlapokon megjelennek a folyamatjelzők. Az űrlapválaszok automatikusan mentődnek, így a felhasználók soha nem veszítik el az előrehaladásukat. Az analitika követi, mely mezők okozzák a legtöbb elhagyást, hogy a legnagyobb súrlódási pontokat optimalizálhasd.
Nézd meg, mit tartalmaz az egyes WEMASY csomagok, és hogyan illeszkedik az űrlapépítő a munkafolyamatodba.