Milyen legyen egy hatékony űrlap? És hogyan optimalizáld mobilra?

Webdesign a Websharknál
Tartalomjegyzék
Bővített tartalomjegyzék

Egy űrlap kitöltése sokszor riasztó az emberek számára: fárasztó a sok gépelés, és nem akarunk személyes információkat sem kiadni magunkról. Viszont egy űrlapnak nem muszáj ijesztőnek lenni. Adunk néhány tanácsot arra vonatkozóan, hogy miként tehetjük őket barátságosabbá. De azt is eláruljuk, hogy ez nem csak a hosszúságukon múlik, és egyéb trükköket is bevethetünk.

Minden kitöltetlen űrlap egy elveszett vevő, ami kevesebb bevételt jelent számodra. Egy kutatás szerint egy weboldal látogatóinak kevesebb, mint 50 százaléka áll csak neki kitölteni a weboldalon található űrlapokat. Ennél jóval kevesebben vannak azok, akik végül be is fejezik a kitöltését. Miközben az űrlapok kitöltési aránya a 15 százalékot sem éri el, akad olyan webes megoldás is, ahol az arány jellemzően 75 százalék felett jár. Ennek oka a designban keresendő.

Hogyan alakíts ki hatékony űrlapot?

Fogadd meg ezeket a tanácsokat!

Felülre helyezett címkék

A weboldalak tervezői tudják, hogy az emberek kicsit másként olvasnak online, mint offline. Ennek ellenére a balról jobbra olvasás annyira rögzült az emberekben, hogy a webdesignt is meghatározza. Amikor viszont űrlapokról van szó, célszerű a címkéket a kitöltendő mezők fölé helyezni, nem pedig azok bal oldalára.

Egy ilyen elrendezés sokkal jobb felhasználói élményt eredményez, aminek az az oka, hogy így egyszerre, egyetlen információs egységként tudják az emberek feldolgozni a mezőt és annak címkéjét. Ennek a megoldásnak a helyességét megerősítik Matteo Penzo címke-elhelyezésel kapcsolatos kutatásai és Luke Wroblewski megfigyelései is.

A lényeg pedig az, hogy minél gyorsabban végez a felhasználó egy feladattal, annál nagyobb az esélye, hogy ki is tölti az űrlapot.

Keveset kérdezz egyszerre!

Az emberek azért használják a webet, mert az kényelmes és gyors, nekik pedig kevés az idejük. Gyorsan akarnak végezni a feladatokkal, ezért a látogatók fele még egy alap-űrlapot sem hajlandó kitölteni, a hosszú formok pedig egyenesen megrémisztik őket.

Ha neked is hosszú űrlapod van, akkor azt célszerű szakaszokra bontani. Ezzel segítheted a felhasználókat abban, hogy lépésről lépésre végig tudjanak haladni az űrapodon. Egy múlt évben elvégzett tanulmányból kiderült, hogy megháromszorozódott a kitöltési arány, amikor egy hosszú formot több oldalra bontottak szét.

kommunikálj!

Az nem megfelelő kommunikáció, ha egészen addig vársz a felhasználókkal történő interakcióval, amíg azok teljesen ki nem töltik az űrlapodat. Ne felejtsd el azt, hogy az űrlapod az első lépés a kapcsolat kialakításához az emberekkel. Ha végigkíséri a kommunikáció, az javítja az élményt és a felhasználó elköteleződést.

A rendszeres időközönként felbukkanó állapotjelzések megnyugtatják a felhasználót, türelmesebbé teszik, különösen, ha többlépcsős folyamatról van szó. Ez az oka annak, hogy homokórák és progress barok láthatók mindenhol a neten. Egy állapotjelzéssel és egy egyszerű üzenettel rábírhatod a felhasználót arra, hogy befejezze az űrlapod kitöltését.

nem könnyű megszerezni a bizalmat

A marketingesek azért szeretik az adatokat, mert ezek révén jobban be tudják célozni az ügyfeleket. Ugyanakkor a szükségtelen információk kierőszakolása az emberekből nem hoz jó eredményt.

Ha a felhasználók úgy érzik, hogy teljesen feleslegesen kérdezősködsz, akkor egyszerűen otthagyják az űrlapodat. Ezért csak olyan információt kérj tőlük, ami feltétlenül szükséges. Később aztán még kérdezhetsz tőlük további dolgokat is.

A cél azonban jelen esetben az, hogy az emberekből vásárló legyen, ezért nem szabad elijeszteni őket egy rossz felhasználói élménnyel. Az emberek bizalma a kezdeti szakaszban még nem elég erős, így könnyű elveszíteni.

Ne ringasd magad abba a tévhitbe, hogy könnyen megszerezheted a bizalmukat!

A hibát azonnal jelezd!

Teljesen mindegy, hogy milyen tökéletesen tervezel meg egy űrlapot, az emberek hibázni fognak a kitöltése során. Ezeknek a hibáknak sok oka lehet, a nem tisztázott elvárásoktól az elgépelésekig, azonban nem a hibák azok, melyek miatt otthagyják a felhasználók az űrlapodat. Az ok az, ahogy kezeled ezeket a hibákat.

Ha azonnal jelzed számukra, hogy valahol hibáztak, akkor sokkal sokkal gyorsabban, sokkal kisebb erőfeszítéssel végeznek a kitöltéssel, ráadásul elégedettebbek is lesznek a végén az eredménnyel.

Vagyis egyetlen egy design-megoldással érheted el csak a hibamentességet az űrlapodnál: ha a hibákra még azelőtt rámutatsz, hogy a felhasználók rákattintanának az elküldöm gombra.

Ne adj lehetőséget arra, hogy otthagyják az űrlapod!

Ha bármikor is azt mondod a felhasználóknak, hogy nézzenek utána valamely információnak egy másik weboldalon, vagy akár csak egy másik aloldaladon, azzal azt kockáztatod, hogy soha többé nem térnek vissza az űrlapodhoz.

Néha persze szükséges lehet további információkat adni az embereknek, amit úgy oldhatsz meg, ha egyből a beviteli mező jobb oldalára helyezed el a tájékoztatást valamilyen formában. Bármilyen megoldást is választasz azonban, soha ne küldd el az embereket az űrlapodról!

És most lássuk azt a gyakori esetet, amikor e-mail feliratkozó űrlapot akarsz készíteni a weboldaladra. Milyen szabályok vonatkoznak erre a speciális esetre?

Milyen legyen egy e-mail feliratkozó űrlap?

Azaz milyennek is kellene lennie egy trendi és hatékony feliratkozó űrlapnak?

Legyen rövid

Ugye, ezt már mondani sem kell? A feliratkozó formnak semmi más feladata nincs, minthogy kicsikarjon egy nevet és egy létező e-mail címet a felhasználótól. Egyszerű a dolog, mégis valahogy bátorítani kell arra, hogy ezt a lépést megtegye. Egyrészt azzal, hogy bár több információra is szükségünk lehet tőle, mégse kérjünk többet egy e-mail címnél és egy névnél (a hazai jogszabályok miatt a nevet is kötelező elkérni, Amerikában elég az e-mail cím).

Ha további információra is kíváncsi vagy, akkor egy második lépésben érdemes azokat megszerezni. Ez a második lépés pár nappal későbbre is tervezhető, remek alkalmat nyújtva arra, hogy ismét felvedd a felhasználóval a kapcsolatot.

Adj valamit az embereknek!

Mivel lehet a legkönnyebben rávenni valakit arra, hogy megadja az e-mail címét? Természetesen ajándékkal. Ez szinte mindig beválik, és ebben az esetben is működni fog. Ez az ajándék lehet egy fizikailag létező, nem túl értékes tárgy, de lehet egy annál értékesebb tartalom, melyhez szívesen hozzáférne ingyen a felhasználó.

Persze azt is világossá kell tenni számára, hogy nem fogod eladni vagy spamekkel megtömni a postafiókját (a hazai jogszabályok szerint az adatkezelési tájékoztatót is linkelni kell a feliratkozó űrlapon, hogy a felhasználó megismerhesse mielőtt megadná az adatait).

Mutasd meg a feliratkozók számát! De óvatosan

Ez azt jelenti, hogy a feliratkozási lehetőség mellett az is legyen látható, hogy eddig hányan iratkoztak fel. Ezzel a lehetőséggel egyre több weboldal él, mert arra ösztönözheti a látogatót, hogy ő maga is feliratkozzon.

Ez a megoldás azonban egyes vélemények szerint kétélű fegyver, mert ha nincs elég feliratkozónk, akkor a szám nem biztos, hogy pozitívan hat arra, aki még csak fontolgatja a feliratkozást.

Lehet viszont a szavakkal játszani, így ha kevés a feliratkozónk, akkor érezze azt a látogató, hogy egy szűk körű, de exkluzív klub tagja lehet a feliratkozással, míg ha már kellően nagy ez a szám, akkor pedig azt, hogy valami olyasmiről maradna le, amiben már mindenki részt vesz. Persze kérdés itt is az, hogy kinek, mi a sok és a kevés.

Tervezd meg!

Egy rosszul kinéző űrlap, ahol furcsák a színek, helyesírási gondok vannak, igénytelenek a képek, csak elriasztják a felhasználókat. Mert igazából senki sem szeretne egy olyan cégtől információkat, mely csak ilyen minőségben tud kommunikálni. Ezért ugyanolyan gondosan ki kell dolgoznod egy feliratkozó űrlap terveit, mint a weboldal bármely más részét. Figyelni kell a tipográfiára, a színekre, a közvetlen üzenetre. Emellett könnyen áttekinthetőnek kell lennie, hogy azonnal megértse a felhasználó, miről van szó.

Egyhasábos kialakítás

Az űrlapnak egyszerűnek kell lennie, és ebbe beletartozik az is, hogy olyan egyszerű legyen, ami egyhasábos megoldásban is elfér. Ez akkor is jól működik, amikor reszponzív designban gondolkodunk. További előnye a könnyű használat. Ha több mezőt több hasábban helyeznénk el, akkor a felhasználók egy része szinte biztos, hogy elfelejtene kitölteni néhány mezőt.

Használj CTA-gombot!

A gombok színesek és akcióra sarkallnak, úgyhogy a felhasználók alig várják, hogy kitöltsék a mezőket és kattintsanak a gombra. Az nem gond, ha a gomb mérete nagy, hiszen ezzel hívjuk fel az emberek figyelmét arra, hogy a feliratkozás az e-mail cím elküldésével válik teljessé. De még vonzóbbá lehet tenni a gombot animációval, mely tovább javítja a felhasználói élményt és a hatékonyságot.

Tedd mobilbaráttá!

Ezt a későbbiekben még bővebben is kifejtjük, de előljáróban annyit el kell mondanunk, hogy egy feliratkozó form optimális mérete egy akkora doboz, ami valamivel kisebb, mint egy mobil kijelzője. Célszerű, hogy valamennyi mező és információ anélkül elférjen az űrlapon, hogy görgetni kellene lefelé vagy akár oldalra. Ugyanakkor minden mezőnek akkorának kellene lennie, hogy a felhasználók könnyen tudjanak kattintani rá, majd gépelni. A felhasználók ott fogják hagyni az űrlapodat, ha azt nehézkes használni. Ez pedig különösen igaz mobilra, ahol az embereknek még kevesebb idejét kapjuk csak meg.

Ugorjon az az ablak!

Egyre népszerűbbé válnak ismét a felugró ablakok. Kétféle megoldás létezik: az egyiknél a weboldal közepén jelenik meg az ablak, miközben nem takarja ki teljesen a mögötte lévő weboldalt. A másik megoldásnál az alsó sarokból kúszik elő a feliratkozó form. Arra kell csak figyelni, hogy könnyen bezárható legyen, azaz megtalálja a felhasználó az X-et, különben ideges lesz. Azt is be lehet állítani, hogy egy kis idő elteltével automatikusan eltűnjön az űrlap, így az nem zavarja sokáig a felhasználót.

Mutasd meg a személyiséged!

Miközben a formoknál általában azt javasoljuk, hogy legyenek minél egyszerűbbek, ez a most teret nyerő minimalizmusnak köszönhető. Érdemes azért ebbe a nagy egyszerűségbe valamennyit belecsempészni a cég személyiségéből is. Egy színes vagy nagyméretű képpel megtámogatott űrlap jól tud működni. A rajta szereplő rövid call to actionben is visszaköszönhet a cég stílusa. Lehet például könnyed vagy humoros, ha egyébként is erre számítanak a látogatóid tőled.

Irányítsd vissza a felhasználókat a weboldaladra!

A design ott nem ér véget, hogy a felhasználók kitöltik az űrlapot. Fontos része az is, hogy mi történik a Feliratkozom gomb lenyomása után. Érdemes az embereket a weboldaladra visszairányítani, hogy ott folytassák, ahol abbahagyták a tevékenységüket.

Ennyi tehát. A lényeg az űrlapoknál is az egyszerűség, mert ez működik a leghatékonyabban. Kevés adatot kérni a felhasználótól, kevés információt zsúfolni az űrlapra, hogy könnyen áttekinthető legyen, és nem túl nagy méretűre tervezni. Mindezt meghálálják majd a látogatók egy feliratkozással. Ez nem csak az e-mail feliratkozásokra, hanem minden űrlapra igaz. Ezek után nézzük, hogy mit vegyünk figyelembe, amikor mobilon is használhatóvá akarjuk tenni az űrlapunkat!

Hogyan tervezz jó bejelentkezési formot? Egy példa

Amikor egy bejelentkezési oldalt kell megtervezni, akkor két ellentétes igényt kell érvényesíteni. A felhasználók számára egy jól kezelhető, szép és gyors megoldásra van szükség, ugyanakkor a nem kívánatos személyeket, mint a hackereket, tolvajokat távol kell tartani. A GoSquared a bejelentkezést a saját weboldalán így oldotta meg, érdemes elemezni és tanulni belőle.

ERŐFESZÍTÉS NÉLKÜLI BELÉPÉS

Egy belépési oldal olyan, amit a felhasználók minél előbb maguk mögött akarnak hagyni. Ezért minél egyszerűbbre, intuitívabbra és könnyebben kezelhetőre kell tervezni. Ezt a feladatot egyetlen oldalon, animációkkal így oldották meg. Gyorsnak és zökkenőmentesnek tűnik, a kitöltött mezőket oldalra elhúzzák (a második gif), amikor a belépés megtörténik, így téve nyilvánvalóvá, hogy előrébb lép a felhasználó a folyamatban. Ebben az esetben ráadásul kétlépcsős hitelesítés működik már az oldalon:

Animált belépési mezők

Animált belépési mezők

KELL EGY “BEJELENTKEZÉS” GOMB

A GoSquared a tesztek során úgy találta, hogy mindenképpen szükség van egy “bejelentkezés” gombra, nem elég ha egy entert üt a felhasználó. Ugyanakkor mindkettő működik, hiszen az emberek egy része a billentyűt üti le, másik része pedig a kijelzőn látható gombot.

Bejelentkezés után oldalra csúszó mezők

Bejelentkezés után oldalra csúszó mezők

A HIBÁRA MÁR A BEÍRÁSKOR FIGYELMEZTET

Frusztráló tud lenni, amikor csak akkor derül fény arra, hogy elgépeltük az e-mail címünket, amikor már a jelszót is beírtuk és leütöttük a belépés gombot. Ezért már akkor figyelmeztet a rendszer a hibára, amikor gépeljük az e-mail címet. Nyilván ez csak az ismert e-mail szolgáltatók elgépelését tudja korrigálni. Ehhez egyébként a Mailcheck megoldását használják, mely a helyes szolgáltatóra is ad javaslatot egy automatikus javítással.

Egyből jelzi a hibát

Egyből jelzi a hibát

MINDIG LÁTHATÓ A MEZŐ CÍME

Általában, amikor egy belépési mezőnél az e-mail címet és a jelszót kell beírni, akkor a mezőn belül szürke betűkkel ki van írva, hogy hova pötyögjük ezeket. Viszont amikor a felhasználó az adott mezőre kattint, akkor az e-mail cím felirat már eltűnik, hogy helyet adjon a felhasználó által begépelni kívánt címnek. A cég azonban úgy találta a tesztek során, hogy az emberek szeretik látni, hogy mit, hova írnak, akkor is, ha már írják. Erre születetett ez a lenyűgöző megoldás:

Végig látható a mező elnevezése

Végig látható a mező elnevezése

Mobilon felfelé mozdul a cím, mert oldalt nincs hely

Mobilon felfelé mozdul a cím, mert oldalt nincs hely

JELEZD A FELHASZNÁLÓNAK, HA MÁR ZAJLIK A FOLYAMAT

sokszor tanácstalanul állnak a felhasználók egy-egy bejelentkezési form előtt, amikor leütötték a bejelentkezés gombot, a rendszer mégsem csinál semmit. Felmerül a kérdés, hogy most akkor lassú a folyamat, de azért történik valami a háttérben, vagy hibás a belépés form, esetleg nem klikkeltünk jól? Ilyenkor jön a kattintgatás az egérrel, vagy a nyomogatás a mobilon, sokszor feleslegesen. Egy bejelentkezés ugyanis nem feltétlenül egyszerű, gyakran némi időbe telik, miközben a felhasználók türelmetlenek, különösen, ha nem kapnak egyértelmű visszajelzést. Ezért a cégnél ezen megoldás mellett döntöttek:

Zajlik a folyamat

Zajlik a folyamat

Ezek a megoldások egyedinek tűnnek, azonban egyáltalán nem lehetetlen őket bárkinek kivitelezni, vagy akár lemásolni, hiszen nincsenek levédve. Úgyhogy ha webáruházad van login formmal, vagy bármely más okból bejelentkezési oldalt, formot használsz, máris lehet rajta javítani a bemutatott technikák felhasználásával.

Egy űrlap hatékonysága nem csak a hosszúságán múlik!

Gyakori és általános tanács amikor űrlapokról van szó, hogy azok hosszát a lehető legrövidebbre kell szabni, ha azt szeretnénk, hogy minél több ember töltse ki őket. Úgy tűnik azonban, hogy ez nem minden esetben igaz, és mással kell próbálkozni, hogy rávegyük az embereket egy űrlap kitöltésére. A UX Boothon nemrég megjelent egy érdekes írás Mike Madaio tollából, aki elsősorban arra hívta fel a figyelmet, hogy hiba csak az űrlapok hosszában, illetve rövidségében keresni a megoldást, amikor hatékonyságot szeretnénk.

Ennek oka, hogy az űrlapok esetében felmerülnek olyan egyéb tényezők, melyek jelentős mértékben befolyásolják a kitöltési arányt. Ilyen a megtervezésük, a felhasználói élmény, és hogy milyen mezőket használunk. Akadnak olyan vizsgálatok, melyek valóban azt mutatják, hogy ha lecsökkentjük 11 mezőről 4 mezőre az űrlapunk hosszát, akkor a konverziók száma 160 százalékkal nő. A tanulmányban azonban azt nem vizsgálták, hogy mi van, ha különböző négymezős űrlapkialakításokat hasonlítunk össze, vagy hogy ha 5 mezőt használunk, az milyen eredményt ér el.

Ugyanakkor van egy olyan tanulmány, melynél a 9-ről 6 mezőre való csökkentés révén 14 százalékkal esett a konverziós arány. Habár nem egy nagy különbség, az ok az volt, hogy a leginkább elköteleződést váltó mezők kerültek ki a rövidebb űrlapból, és így kevésbé volt jó a felhasználói élmény. Amikor a 9 mezős űrlapot tovább csiszolták, akkor 19 százalékos konverziónövekedést tudtak vele elérni. A lényeg tehát az, hogy a rövidebb nem feltétlenül jobb, és nem mindig az a megoldás, hogy a lehető legrövidebb az űrlap.

Vannak viszont olyan megoldások az űrlapok hatékonyságának javítására, melyek a technológia fejlődése révén merülhettek fel. Lássuk őket!

Priorizált átfuthatóság

Még Jakob Nielsen mondta azt korábban, hogy a felhasználók nem elolvassák a weboldalakat, hanem átfutják azokat. Ez a helyzet az űrlapok esetében is. Ezért biztosítani kell az emberek számára a lehetőséget, hogy átfussák az űrlapot, mert ezzel csökkenthető a hibák és a kitöltetlen mezők száma.

Itt számít a címkék elhelyezése, mellyel sok kutatás foglalkozott. Luke Wroblewski egy tanulmánya szerint például a mezők felett elhelyezett címkék csökkentik a mezők kitöltési idejét. Ennek oka az, hogy kisebb utat kell bejárnia a szemnek. Könnyen érthető címkék esetén a következő leggyorsabb megoldás a jobb oldalra helyezett címke, mely akkor is ajánlott, ha az oldal vertikális kiterjedése korlátozott. A balra elrendezett címkék ugyanakkor a nehezen érthető címkék jobb megértését segítik elő.

A placeholder szövegeknél (tehát, amikor a mezőbe kerül a szöveg) a gondot az jelentheti, hogy az eltűnik, amikor a felhasználó elkezdi beírni a szöveget, így nem látja. Ez növeli a hibázás lehetőségét. Az NN Group egyébként egy tanulmányában megállapította, hogy az üres mezőkre nagyobb figyelem irányul, mint ha szöveg lenne bennük, és az emberek nagyobb eséllyel ugorják át azokat a mezőket, melyekben placeholder van. Ez azt jelenti, hogy a segítségnek szánt placeholder szövegek több kárt okoznak, mint hasznot, és különösen nagy gondot jelentenek az űrlap átfutása esetén.

Ezt persze enyhítheti, ha a placeholder szöveg halványabb színű mint egyébként a weboldal szövege. Ez a megoldás azonban egy kontraszt-problémát okoz, azaz a világosszürke szín a fehér alapon nem a legjobb használhatóság szempontjából.

Végül itt vannak a lebegő címkék, melyek az újabb interakciós designmegoldások közé tartoznak, és egyre növekszik a népszerűségük. Ennél a címke először placeholder szövegként jelentik meg, majd a mezőre kattintásnál a mező fölé kerül. Ezzel elkerülhető az a probléma, hogy gépelésnél eltűnik a címke, valamint csökkenthető a weboldal hossza is, ami különösen mobilon hasznos.

lebego-cimkek

Ugyanakkor még mindig úgy néz ki a mező, mintha ki lenne töltve. Az NN Group ezért azt javasolja, hogy kerüljük ezt a megoldást, és a címke legyen a mező felett, ha csak nem fontosabb az űrlap hosszúsága.

Erőfeszítés-mentes formázás

Régen még sok gondjuk adódott abból a felhasználóknak, hogy milyen formában kell megadni például a telefonszámot, ha véletlenül kihagytak egy számot a bankkártyaszámukból, vagy nem találták a @ szimbólumot a billentyűzeten. Az új technikákkal azonban ezek a problémák áthidalhatók, mert kivehető a felhasználók kezéből a döntés nehézsége, és így az élmény is jobb lesz.

Használhatók ilyenkor az úgynevezett input maszkok, melyek hasonlóak ugyan a placeholder szövegekhez, mégis másról van szó. Egyrészt ezek a maszkok csak akkor jelennek meg, amikor a felhasználó rákattint a mezőre, így nincs probléma az átfuthatósággal. Másrészt automatikus formázzák a bevitt szöveget, így az embereknek csak az adat helyességére kell figyelniük, és könnyebben észreveszik a hibákat. Itt látható, hogyan is néz ez ki:

mask

 

Ez az egyszerű technika sok időt takarít meg például telefonszámok, bankkártyaszámok és más adatok megadásánál.

Kevesebb gépelés

Mivel egyre több ember használ mobiltelefont, melyeken viszonylag körülményes a gépelés, ezért minél inkább sikerül a gépelés mennyiségét lecsökkenteni, annál jobb lesz a felhasználói elégedettség, és persze annál kevesebb a hiba.

Ehhez érdemes használni az előre kitöltött címmezőket, hiszen ez az egyik legnehézkesebb része minden online űrlapnak. A folyamat azonban leegyszerűsíthető egyetlen mezővé. Erre itt látható a remek példa, ahol 10 karakter használatával megírható egy több mint 50 karakteres szöveg:

A Google API megoldása a legtöbb esetben jól működik, de épületek vagy lakások számával már meggyűlik a baja, mivel ezek az adatok nincsenek benne a rendszerben.

A cím előre kitöltése

A cím előre kitöltése

Egy másik lehetőség a gépelés mennyiségének csökkentésére, ha az e-mail mezőben a gyakran előforduló domainneveket felajánlja a rendszer. Ugyanígy az is sok időt és erőfeszítést megtakaríthat az emberek számára mobilon vagy tableten, ha a helyadatok felhasználásával előre kitöltődnek bizonyos mezők.

A Nordstrom oldalán például a részletes termékadatlap már figyelembe veszi a felhasználó tartózkodási helyét, és automatikusan a legközelebbi üzlet raktárkészletét mutatja neki. A Google Place API mind a földrajzi elhelyezkedést, mind a cím előre kitöltését használja ahhoz, hogy a legjobb javaslatokat adja a felhasználóknak. Ugyanakkor mivel a megoldás nem tökéletes, így mindig lehetőséget kell biztosítani a felhasználóknak a manuális korrekciókra.

Összességében tehát elmondható, hogy ha ezt a három dolgot figyelembe vesszük az űrlapunk kialakításánál, akkor az segíti és elégedettebbé teszi a felhasználókat.

Az űrlap optimalizálása mobilra

Tudjuk, hogy egy desktop megjelenésnél milyen fontos, hogy a lehető legrövidebb legyen egy űrlap, mert minden egyes kitöltendő mezővel nő az esélye annak, hogy idő előtt távozik a felhasználó. Pedig ott több az idejük, széles sávon jön a net, szemük előtt egy nagy kijelző terpeszkedik, kezük ügyében a billentyűzet, meg az egér. Mobilon viszont minden nehezebb. Tehát mire figyeljünk, hogy egy mobilos látogató is hajlandó legyen kitölteni űrlapot a weboldalunkon? Ha PC-n fontos volt az, hogy

minél kevesebb kitöltendő mezővel zavarjuk a felhasználókat,

akkor mobilon ez élet-halál kérdése. Csak a legszükségesebb mezőket hagyjuk meg, mert rendkívül nagy az esélye, hogy az embereknek nem lesz kedvük kitölteni egy hosszú formot, vagy kitöltés közben inkább otthagyják.

Ebbe beletartozik az is, hogy ha PC-n megjelenő formnál például egy név minden egyes eleméhez külön mezőt használtunk (keresztnév, vezetéknév) – és ugyanígy a többi információ esetében is bontottuk -, akkor mobilon az összevonható mezőket össze kell vonni, tehát a név megadásához összesen egy mezőt kelljen kitölteni, ahogy a dátumoknál is. És amit lehet, oldjunk meg

legördülő listákból és összecsukható menükből történő kiválasztás

segítségével, illetve érdemes felhasználni az emberek helyadatait is, ahol lehet. Emellett figyeljünk arra, hogy az űrlap vertikális nézetben is teljes egészében elférjen a kijelzőn, ne lógjon ki, tehát a mezők és azok címei is állandóan láthatóak legyenek az oldalon.

Ilyenkor kerülhet sor arra, hogy például desktop nézetben a kitöltendő mező mellett található címke mobilos nézetben a mező fölé kerül. Ahol nem tudunk legördülő listákat használni, ott alkalmazhatunk ún. prediktív mezőket, vagyis, amikor a beírt szó első betűi után a kereső felsorolja a javaslatokat, és nekünk csak ki kell választanunk a megfelelőt.

A desktop oldalaknál is hangsúlyos call to action gombot egyébként célszerű arányaiban nagyobbra venni mobilon. A

CTA-gomb mérete

a teljes form szélességének mintegy harmadát tegye ki, és persze itt is érvényesek lesznek azok az általános megállapítások, hogy

  • a szín kellően kontrasztos legyen,
  • a szöveg pedig rövid, egyszerű, érthető,
  • és egyértelmű utasítást adjon a felhasználónak.

Érdemes egyébként visszajelezést is adni a felhasználónak, mondjuk azzal, hogy lenyomásra változik a gomb színe, vagy bármilyen effekt jelzi azt.

Annak is érdemes némi figyelmet szentelni, hogy a felhasználók sokszor belenagyítanak egy oldalba, így akár az űrlapba is. Ez a zoomolás azonban nem feltétlenül hasznos egy form esetében, mert az emberek teljesen elveszíthetik a fókuszt. Ezért javasolt a

viewport meta tag használata

mellyel meghatározhatjuk, hogy mekkora lehet a maximális nagyítás, és akár azt is megadhatjuk, hogy egyáltalán ne lehessen belezoomolni az űrlapba.

Ahogy a PC-s űrlapkitöltésnél segíti a felhasználókat, ha mindig világosan látják, hogy hol járnak a folyamatban, úgy mobil formoknál is ajánlott ezt a megoldást használni. Ez egészen pontosan azt jelenti, hogy egy űrlapkitöltési, megrendelési folyamat során folyamatosan meg kell mutatni számukra az

oldal tetején elhelyezett folyamatjelző sáv

segítségével, hogy hányadik lépésnél, vagy hány százaléknál járnak. Azt is meg kell jegyezni persze, hogy egyáltalán nem jó, ha sok-sok oldalba elnyújtjuk a folyamatot, ha lehetséges, akkor egyetlen oldallal, de lehetőleg minél kevesebbel kell megoldani dolgot.

És ahogy minden minden weboldalnál, különösképpen mobilos oldalaknál javasolni szoktuk:

legyen minél gyorsabb

Hiszen rendkívül fontos a betöltési sebesség az űrlapoknál is, ahol nagyon fájó, ha a lassúság miatt veszítjük el a látogatót. Az ugyanis, hogy eljutott egy felhasználó a formig, azt jelzi, hogy határozott a szándéka a konverzióra. Vagyis ennél a pontnál már nem szerencsés elveszíteni őt egy akadozó oldallal.

Optimalizáljuk tehát az oldalunk sebességét mobilra is, ahol lehet! De mivel a weboldalakat a Google megfigyelései szerint a legnagyobb mértékben a rosszul méretezett képek lassítják, így az űrlapoknál mindenképp kerüljük őket. Annál is inkább, mert formoknál nem is igazán indokolt képek használata.

Végül pedig azt mondhatjuk, hogy mivel a mobilos vásárlás napjainkban még elég ijesztő, és sokak számára elképzelhetetlen lehetőség – és ez többek között az űrlapok kitöltéséből is adódik, melyre egyelőre sokkal kényelmesebb lehetőséget nyújt egy PC -, ezért igyekezni kellene minden weboldaltulajdonosnak, hogy minél gördülékenyebbé varázsolja az űrlapjait. Mert ha már az emberek egyre többet használják a mobiljukat, akkor használják azt magabiztosan vásárlásra, megrendelésre, feliratkozásra is.

Címkék: , ,

A Webshark.hu a hozzászólásoknál előzetes moderálást alkalmaz. Moderálási szabályaink itt olvashatók.