Milyen legyen egy hatékony űrlap? És hogyan optimalizáld mobilra? (Frissítve, 2023.02.08.)

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á. (Frissítés, 2023.02.08. – Egy új fejezettel bővítettünk: Mi az, amit ne ronts el a bejelentkezési űrlapodnál)

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ő.

Miből áll össze egy űrlap?

Természetesen egy űrlap formáját annak szándéka határozza meg, hogy milyen információkra van szükség az adott weboldalon. Ugyanakkor vannak olyan alapvető elemei, melyek általában közösek és ismerősek mindenki számára.

1. A kategória vagy szakasz jelzése, mely megmutatja a felhasználó számára az űrlap, vagy az űrlap adott részének célját. Utóbbit például akkor, ha csoportosítod az adatokat az űrlapodon a jobb érthetőség érdekében (személyes adatok, pénzügyi adatok, stb.)
2. A címke arra szolgál, hogy jelezze egy adott mezőbe milyen típusú információt kellene bevinnie.
3. Beviteli mező, ami lehet szövegmező, jelszómező, checkbox vagy rádiógomb, tehát bármi, amit azért terveznek, hogy a felhasználó a segítségével adatokat vigyen be.
4. A placeholder további információt nyújt a címke mellett az adott mezőről.
5. Az elsődleges CTA-gomb pedig az a gomb, mely a form végén található, és amelynek megnyomásával elküldi az űrlapot a felhasználó.
6. A visszajelzés vagy hibaüzenet jelzi a felhasználónak, hogy rendben történt-e minden a kitöltéssel és az elküldéssel, vagy gond van valamelyik mezőbe bevitt információval, és hogy mi is ez a probléma.

Milyen állapotai vannak egy űrlapnak?

Egy űrlap nagyon alapvető esetben 3 állapotot vehet fel a felhasználóval történő interakció során.

1. Alapállapot, amikor még semmilyen adat bevitele nem történt meg.
2. Fókusz-állapot: ebben az állapotban, a figyelmet ráirányítja egy adott mezőre, mellyel a felhasználó interakcióba lép. Ezáltal gyorsabban találja meg az adott mezőt, ha egy időre éppen másfelé tekint, majd visszatér.
3. Visszajelzés állapota: amikor a felhasználó visszajelzést kap (többnyire hibaüzentet jelent, de lehet egy megerősítő jelzés is a jó kitöltésről). Jó esetben akkor tűnik fel, amikor a felhasználó a következő mezőre lép, rosszabb esetben akkor kap a hibáról jelzést a felhasználó, amikor megpróbálja elküldeni a kitöltött űrlapot.

Hogyan alakíts ki hatékony űrlapot?

Ahhoz, hogy hatékony legyen az űrlapod, azaz kitöltsék a felhasználók, két dolgot szem előtt kell tartani:

• Mennyire néz ki összetettnek? Az első dolog, amit az emberek tesznek, amikor meglátnak egy űrlapot, az az, hogy megbecsülik a kitöltéséhez szükséges időt. Ez a gyakorlatban persze csak annyit jelent, hogy rápillantanak, átfutják. Minél hosszabb, összetettebb és kuszább formot látnak maguk előtt, annál nagyobb az esélye, hogy neki sem állnak a kitöltésének.
• Mekkora erőfeszítést igényel? Ez az erőfeszítés összessége, melyre szükség van a célok elérésére. Az interakciós költség közvetlen kapcsolatban áll az űrlap használhatóságával. Minél nagyobb erőfeszítést igényel a kitöltése, annál kevésbé használható a form. Ez lehet az eredménye annak, hogy nehéz bevinni bizonyos adatokat, esetleg problémák adódnak a beviteli mezők megértésével, vagy zavart okoznak a hibaüzenetek.

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.

A Baymard Institute elemzése szerint egy vásárlás meghiúsulásának általában a legfőbb okát a túl hosszú vagy túl összetett űrlapok jelentik. A vizsgálat szerint az átlagos webáruházban 15 mezőt kell kitölteniük az embereknek egy rendelés során. Pedig a mezők számát a legtöbb webáruház 20-60 százalékkal tudná csökkenteni.

A dolog persze ennél bonyolultabb, amiről hamarosan szó is lesz, azonban alapvetően úgy érdemes nekifutni egy űrlap megtervezésének, hogy a maximális egyszerűségre és rövidségre törekszünk. Ez azt jelenti, hogy csak azokat az adatokat kérjük el a felhasználóktól, melyek feltétlenül szükségesek, és kerüljük az ismétlődő mezőket.

Milyenek legyenek a beviteli mezők?

A beviteli mezők vagy szövegmezők teszik lehetővé a felhasználók számára azt, hogy szöveget írjanak egy webes felületre. Jelezned kell, hogy azok hogyan működnek, és hogyan léphetnek vele kapcsolatba az emberek. Egyértelmű vizuális jelzéseket kell alkalmazni ennek érdekében. Ezért egy szövegmezőnek lehetőleg üresnek kell látszódnia, és meg kell mutatnia, hogy kattintható. Ha gyenge vizuális jelekkel kommunikáljuk ezt, akkor rosszul használható lesz az űrlap.

A gyenge vizuális jelek alkalmazása persze nem azt jelenti, hogy egyetlen felhasználó sem fogja használni a szövegbeviteli mezőket. Inkább azt jelenti, hogy több időbe telik nekik míg rájönnek, hogy miként használható. Ez különösen igaz az idősebb korosztályra. Az erős vizuális jelzések tehát elsősorban a gyorsabb feladatmegoldást teszik lehetővé a felhasználók számára.

Nézzen ki kattinthatónak és írhatónak

Amennyiben egy beviteli mező csak kattinthatónak látszik, akkor az úgy néz ki, mint egy gomb. Ez általában akkor fordul elő, ha a beviteli mező színe a fehértől eltérő. Általában a fehér szín esetében asszociálnak az ürességre és az írhatóságra az emberek. Gondolj arra, hogy szinte valamennyi szövegszerkesztő, blogadmin felület fehér felületet használ a beviteli résznél.

A másik gond az, amikor a mező ugyan fehér színben jelenik meg, azonban nem igazán tűnik kattinthatónak. A mező körvonala fogja jelezni a felhasználónak, hogy kattintható elemről van szó. Ennek a körvonalnak azonban határozottan látszania kell, nem veszhet el az oldalon egy hajszálvékony, 1 pixeles vonal miatt a szövegbeviteli mező.

Ennél már csak az rosszabb megoldás, ha a szövegbeviteli mezőt egy egyszerű vonallal jelezzük. Ez sem az írhatóságot, sem a kattinthatóságot nem jelzi a felhasználónak. Egyszerűen elválasztónak nézik, és nem tudnak mit kezdeni vele.

Az optimális megjelenés tehát valahogy így néz ki:

Kerekítsd le a sarkokat!

Ha megvannak a megfelelő vizuális jelzések, melyekből arra következtethet a felhasználó, hogy szövegbeviteli mezővel van dolga, akkor jöhetnek az apró részletek. Például a sarkok lekerekítése, mely gombok esetében egyértelműen nyerő ötlet, de mi a helyzet szövegbeviteli mezőknél? Ezek nem vizuális jelzések, ugyanakkor befolyásolják a felhasználók hozzáállását az űrlaphoz.

Egy tanulmány ugyanis megállapította, hogy a túlságosan éles vonalak fenyegetően hatnak az emberekre és negatív gondolatokat váltanak ki bennük. Egy másik kutatás szerint pedig a lekerekített vonalakat jobban szeretik az emberek a szögleteseknél. Mindebből tehát az következik, hogy a lekerekített sarkú szövegmezők felhasználóbarátabbak. Ez azonban nem azt jelenti, hogy az űrlapod jól használható, csak annyit, hogy jobb az első felhasználói benyomás.

Jelezd az állapotot!

A felhasználók számára azt is vizuálisan jelezned kell, ha egy mező aktív. Ezáltal tudják, hogy hova írjanak, segíti felhívni a figyelmüket az aktív mezőre. Ehhez nem feltétlenül elegendő, ha csak megváltozik a mező keretének a színe. A színeket ugyanis nem mindenki tudja megkülönböztetni. Ezért a színen kívül a keret vastágságának is változnia kell.

Világosan különböztesd meg az opcionális mezőket!

Persze előtte azért tedd fel magadnak a kérdést: valóban szükség van erre a mezőre, még ha opcionális is a kitöltése? Gondold át, hogy milyen információkra van feltétlenül szükséged, és ne csak azt lásd, hogy mit akarsz! Ideális esetben az opcionális mezők száma nulla.

Ha mégis elhelyeznél egyet-kettőt az űrlapon, akkor világosan jelezd, hogy ezek opcionálisak.

• Az opcionális mezőket jelezd, de pedig a kötelezően kitöltendőeket! Ebben az esetben sokkal kevesebb jelzést kell elhelyezned az űrlapon, mint ha a kötelező mezőket jelölnéd.
• Ne csillaggal jelöld! Hiszen nem mindenki ismeri a jelentését, illetve összekeverhető, mivel sokszor a kötelezően kitöltendő mezőket jelzik ezzel.

Csoportosítsd a kapcsolódó mezőket!

A csoportosítás révén a felhasználók könnyebben megértik, hogy hol, milyen információt kell megadniuk. Ez különösen a hosszú űrlapoknál jól használható módszer.

Ha neked is hosszú űrlapod van – és nem is tudod lerövidíteni -, 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 rajta. Ez jelenthet akár több oldalra történő bontást is. Egy tanulmányból szerint megháromszorozódott a kitöltési arány, amikor egy hosszú formot több oldalra bontottak szét.

Igazodjon a mező mérete az információ típusához és méretéhez!

Ez a gyakorlatban azt jelenti, hogy egy irányítószám mező legyen rövidebb, mint a cím-mező, ahová az utca, házszám, emelet, ajtó fog kerülni. Ennek oka, hogy a mező mérete ilyenkor vizuális jelzés arra nézve, hogy milyen hosszúságú adatot kell bevinnie.

Mutasd meg a kezdőpontot a felhasználónak!

Ha megmutatod a felhasználónak, hogy hol kezdje az űrlap kitöltését – azaz fókuszálod a figyelmét -, akkor nagyobb eséllyel kezd neki. Ezzel a megoldással csökkented az interakciós költséget, hiszen nem kell belekattintania a mezőbe. Az aktív mező legyen megkülönböztethető, kiemelkedő a többi mező közül. Olyannyira, hogy a felhasználó azonnal kiszúrja, hol is kellene kezdenie.

Ne kérd, hogy kétszer adja meg az e-mail címét!

Sokan használják ezt a megoldást arra, hogy biztosra menjenek: a felhasználó nehogy rossz e-mail címet adjon meg. A valóság azonban az, hogy ez a megoldás nem igazán garantálja a hibátlan e-mail cím megadást, mivel az emberek gyakran másolás-beillesztéssel oldják meg a dolgot.

Tedd lehetővé, hogy megnézze a beírt jelszavát!

Ugyanígy nem jó megoldás, ha kétszer kell beírni a jelszót egy űrlapon. Ez azonban nem garantálja a hibamentességet, növeli viszont az interakciós költséget. A hibázás esélyét az is fokozza, ha a felhasználók nem látják, hogy mit írtak be jelszóként, csak pontokat. Vagyis ahelyett, hogy kétszer kellene beírni a jelszót, tedd inkább lehetővé, hogy lássák, amit beírnak! Ehhez alkalmazhatsz egy ikont vagy egy checboxot.

Kerüld el a lenyíló menüket!

Ahogy Luke Wroblewski mondta: a lenyíló menü a felhasználói felület utolsó menedéke. A lenyíló menük különösen rosszak mobilon, mivel nehezebbé válik az adatbevitel: egyrészt elrejti a lehetőségeket, másrészt két kattintást igényel a kiválasztásuk. Lenyílók helyett használj inkább rádió-gombot.

Használj placeholdert!

Az egyik legjelentősebb probléma az űrlapoknál, hogy a felhasználók bizonytalanok abban, pontosan milyen formában kellene beírni az adatokat a mezőkbe. Ennek kiküszöbölésére használhatók a placeholder szövegek, melyek megmutatják az embereknek, hogy pontosan mit várunk tőlük. Arra azonban figyelj, hogy a placeholder szöveg ne úgy nézzen ki, mint ha már kitöltötte volna a felhasználó a mezőt.

Placeholder helyett a maszkolt bevitel is járható út. Ez annyiban különbözik a placeholdertől, hogy nem egy statikus szöveg, hanem automatikusan formázza a felhasználó által bevitt adatokat. Ezáltal a felhasználók könnyebben ellenőrizhetik a bevitt információkat is, hiszen jobban átlátják őket.

Magyarázd el, hogy miért van szükség az adatokra!

Mivel az emberek aggódnak az adatbiztonság miatt, ezért az érzékenyebb adatoknál magyarázd el, hogy miért van szükség annak megadására. Ehhez egyszerűen annyit kell tenned, hogy a mező alatt egy apróbetűs szövegben leírod azt. A szöveg hossza azonban lehetőleg ne haladja meg a 100 karaktert.

Óvatosan az alapértelmezett értékekkel!

Miközben egy intelligens alapérték-beállításnál a rendszer a megadott adatok alapján számol alapértelmezett értéket, a statikus alapértelmezések minden felhasználó esetében azonosak. Érdemes ezeket elkerülni, hacsak a felhasználóid túlnyomó többsége nem azt választja. Ez azért fontos, mert a felhasználók átsiklanak rajta, hiszen úgy veszik, hogy ott már meg van adva egy érték.

Automatizáld a bevitelt!

Ha könnyebbé akarod tenni az adatbevitelt, akkor nem elég, ha csak mérsékled a mezők számát. Csökkentened kell a kitöltésre fordított erőfeszítést is. Mivel a gépelésnek jelentős az interakciós költsége – nagy az esély a hibázásra és időt rabló is, különösen mobilon -, ezért érdemes a kitöltést automatizálni, ahol lehet.

A dolog úgy működik, ahogy egy Google keresésnél: a Google javaslatokat ad a mező kitöltésére. Ugyanezt a megoldást lehet használni űrlapoknál, például e-mail címek beírásánál. Emellett használható a személyes adatok automatikus kitöltése. A Google vizsgálata szerint, amikor a böngésző automatikusan kitölti egy űrlapnál a személyes adatokat, az 30 százalékkal gyorsítja az űrlap kitöltését.

Használd ki a mobil-funkciókat az űrlapkitöltésre!

Az okostelefonok ma már nagyon sokat tudnak. A natív funkciók kihasználása – mint a fényképezőgép vagy a helymeghatározás – könnyebbé teheti egy űrlap kitöltését is. Ugyancsak kihasználható a biometrikus azonosítás lehetősége, hiszen így az embereknek nem kell jelszót kitalálniuk és megjegyezniük, egyszerűen az ujjlenyomatukat használják.

Milyen legyen a név beviteli mezője?

A név a legalapvetőbb információ minden űrlap esetében. Szinte nincs olyan űrlap, mely ne kérné el a felhasználó nevét. És, hogy mi a kérdés a névvel kapcsolatban? Az, hogy egyetlen mezőt kapjon a teljes név, vagy legyen külön vezetéknév és keresztnév mező. Melyik jobb UX szempontból?

Sokáig a dolog nem igazán volt kérdéses, szinte minden esetben külön mezőt kapott a vezetéknév és a keresztnév. Mára azonban egyre inkább terjednek azok a megoldások, ahol egyetlen név mező van:

Tehát, melyik a jobb megoldás? A válasz pedig az, hogy „attól függ”. Vannak ugyanis erős indokok az egyetlen név mező mellett, ilyen például az, hogy akadnak emberek, akiknek nem két szóból áll a nevük, hanem háromból. Persze ezt is meg lehet oldani két mező esetében, hiszen akárhány szóból is áll a név, besorolható vezetéknél vagy keresztnév kategóriába. Ugyanakkor nemzetközi megjelenésnél változik a sorrend, nem a családnév áll elől. Ami azért kicsit megkeveri a dolgokat, ahogy azt mi, magyarok is szoktuk tapasztalni külföldi űrlapok kitöltése esetén. A dolgot ennyire lehet bonyolítani:

Egyszerűbb tehát a felhasználónak, ha egyetlen mezőt használunk, mert ez okozza a legkisebb megtorpanást az űrlap kitöltésénél, hiszen kevesebbet kell gondolkodni.

Probléma abból származik, hogy a cégeknek viszont lehetnek bizonyos igényeik az ügyfelek neveivel kapcsolatban. Mert mondjuk ki akarnak küldeni számukra olyan e-maileket, melyekben név szerint szólítanák meg őket. Ilyenkor általában nem a teljes nevet szeretjük használni, hanem csak a keresztnevet, mert az sokkal barátságosabb és bizalmasabb. Egyetlen beviteli mezős megoldásnál viszont ez nem lehetséges.

Tehát, amikor a név beviteli mezőjét tervezed, akkor át kell gondolni, hogy miért is van szükség a névre, hogy akarják a későbbiekben használni az adatot, mert ez határozza meg a mezők számát.

Ami még megoldás lehet, hogy egyetlen név beviteli mező mellett egy olyan beviteli mező is szerepel, hogy „hogyan szólíthatunk?” Ez ugyan megint bonyolítja a név kérdését, tehát a felhasználók itt majd megállnak és elkezdik törni a fejüket – például azon, hogy akkor miért van szükség a teljes névre, vagy hogy mit akarnak a megszólítással -, viszont a cég számára optimális a megoldás.

Ezek tehát a lehetőségek, melyeknél mérlegre kell tenni, hogy az űrlap könnyű kitölthetősége vagy a céges marketingcél a fontosabb.

Milyen legyen a beviteli mező telefonszám esetében?

A beviteli mezők közül a telefonszámé a legtrükkösebb, ezért érdemes külön is foglalkozni vele. Problémát okoz, hogy egy telefonszámot többféle formában is meg lehet jeleníteni, ami nehezíti az adat feldolgozását. Három dologra kell odafigyelni a telefonszám beviteli mezőjének kialakításakor:

1. Ne bontsd szét több mezőre a telefonszám beviteli mezőjét!

Első pillantásra ugyan a többmezős megoldás megoldja a formázással kapcsolatos problémát, hiszen a felhasználó bele van kényszerítve a megadott mezők használatába, és nem szabadon határozza meg, hogy milyen formázással adja meg a telefonszámát. Ugyanakkor felmerülnek ilyenkor más problémák:

• Növekvő interakciós költség – hiszen a felhasználónak át kell kattintgatnia egyik mezőről a másikra, ha ki akarja tölteni mindegyiket, ami különösen mobil-használat esetében nem kellemes.
• Gondot okozhat, ha más formátumú telefonszámot akarnak beírni a felhasználók – mert lehet, hogy mondjuk három mező használata evidens egy bizonyos ország telefonszámai esetében, de ha külföldi számot akarnak beírni, akkor ott már lehetnek problémák, mert nem passzolnak a magyar rendszerhez.

2. Sok esetben hasznos lehet egy ország-választó

Nemzetközi közönséget elérő weboldalak esetében jó megoldás, ha van egy országválasztó a telefonszám beviteli mezőjének elején. Itt arra kell figyelni, hogy az ország-választó azt az országkódot mutassa, ahonnan a látogató érkezett, tehát lehetőleg ne neki kelljen beállítania. Ugyanakkor lehetővé kell tenni, hogy módosítsa, ha akarja. A megjelenésnek utalnia kell a változtathatóságra.

3. Használj automata formázást!

Nem könnyű egy telefonszámot értelmezni és feldolgozni, ha az nincs formázva. Jelezhetjük a felhasználónak, hogy milyen formában várjuk a számot, ugyanakkor kevesebb erőfeszítést igényel a felhasználó részéről, ha automatikusan formázásra kerülnek a bevitt számok. Itt tehát nem arról van szó, hogy a megfelelő placeholdert elhelyezzük a mezőben, hanem arról, hogy a számok beírása során azok automatikusan a megfelelő formába rendeződnek.

Milyen legyen a beviteli mező címkéje?

A beviteli mezők címkéinél általában két megoldással találkozhatunk. Az egyik, amikor a mező felett szerepel a címke, míg a másik az úgynevezett lebegő címke. A lebegő címke esetében a szöveg akkor változik át címkévé, amikor a felhasználó kapcsolatba lép vele:

Bármelyik megoldás használható, így bármelyiket választhatod, amelyik passzol a weboldaladhoz. De milyen legyen a címke szövege?

Világos és tömör

A címke azt mondja meg a felhasználónak, hogy milyen adatokat kell megadnia egy adott mező esetében. Minél világosabban sikerül megfogalmaznod a címkék szövegét, annál nagyobb az esély, hogy a felhasználók ki is töltik a mezőket. A címkék segítségével egy pillantással át kell látniuk, hogy milyen információkat kérsz tőlük. Kerüld az egész mondatokat, hiszen a címkék nem a hosszas magyarázatokat helyettesítik. Mindössze egy-két szónak elegendőnek kellene lennie, így az emberek képesek lesznek gyorsan befogadni az űrlapjaid lényegét.

Ne rövidíts!

Amennyiben egy címke rövidítésre kerül, akkor már nehezebben érti meg a felhasználó. Ezért kerüld ezt a megoldást:

Ugyanakkor azt is kerüld el, hogy az címke szövege több sort is elfoglaljon. Ha további információt akarsz közölni, akkor azt „segítő szövegként” érdemes megjeleníteni.

Felülre helyezd!

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. De a mező feletti sor bal szélére kerüljenek!

Egy ilyen elrendezés 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éssel kapcsolatos kutatásai és Luke Wroblewski megfigyelései is. A Google vizsgálatai szerint, amikor a címke a mező fölé kerül, az emberek könnyebben átfutják az űrlapot: kevesebbszer és rövidebb időre akarnak meg.

Ráadásul ilyenkor nagyobb tér áll rendelkezésedre a címke számára, azaz hosszabb címkéket is megadhatsz. Ez azért is fontos, mert nem szerencsés, ha egy kisméretű kijelzős mobilon a címke és a mező kilóg a kijelzőből.

Legyen közel a mezőhöz a címke!

Egyszerű: minden címkét helyezz közel a mezőhöz, mivel ezáltal a felhasználók tudják, hogy azok összetartoznak. A megfelelő távolság persze mindig attól függ, hogy egyébként mekkora whitespace-eket használsz. A lényeg, hogy ránézésre legyen összetartozó a mező és a hozzá kapcsolódó címke.

Ne helyettesítsd a címkét placeholderrel!

Soha ne próbáld a címkét placeholderrel helyettesíteni! Lehet, hogy jól néz ki és még helyet is spórolsz vele, de ezzel jelentősen megnehezíted a felhasználók dolgát. Hiszen amikor elkezdenek a mezőbe írni, már nem feltétlenül tudják, hogy milyen információt is kellene megadniuk, mivel a placeholder szöveg ilyenkor eltűnik. Ez lehet, hogy nem gond, amikor mindössze két mezőből áll az űrlapod, de hosszabb űrlapoknál komoly problémát jelenthet. Nem véletlen, hogy a vizsgálatok is ezt mutatják.

Ugyanakkor használhatsz úgynevezett lebegő címkéket, melyek a beírás előtt placeholderként jelennek meg, a bevitel során viszont felcsúsznak a mező fölé.

Ne használj csupa nagybetűs címkét!

A nagybetűs sorok a vizsgálatok szerint rosszul teljesítenek, amikor olvasásról vagy akár csak a szövegek átfutásáról van szó.

Milyen ikonokat használhatsz a beviteli mezők mellett?

Az ikonok ugyan nem kötelező elemek az űrlapoknál, azonban segítenek a megértésükben. Ha egy releváns ikont sikerül találni egy beviteli mező mellé, akkor a felhasználó könnyebben és gyorsabban dekódolja a mező jelentését, és lehet, hogy egyáltalán nincs szükség a címke elolvasására.

Ugyanakkor a beviteli mezőknél használhatunk úgynevezett követő ikonokat is, melyek szintén hatékonyan csökkentik a felhasználókra nehezedő terheket.

Törlés ikon

Az egyik ilyen ikon a törlés ikon, melynek segítségével kiüríthető a mező egyetlen kattintással. Ez az ikon a mezőn belül helyezkedik el, és annak bal oldalára kerül. Amikor a felhasználó rákattint, az addig beírt szöveg törlésre kerül a mezőből.

Ellenőrző ikonok

Amennyiben a beviteli mezők érvényességét egyből ellenőrzi a rendszer, akkor a visszajelzés ikonokkal is történhet. Amikor a felhasználó hibás adatot ír be, akkor a hibaüzenet mellett egy ikont is megjelenít az űrlap, mely felhívja a hibára a figyelmet. Ha viszont megfelelő a beírt adat, akkor azt is jelzi a rendszer egy ikonnal:

Szem ikon

Ez az ikon akkor jelenik meg egy beviteli mezőnél, ha az jelszó beírására szolgál. A szem ikon funkciója itt az, hogy a felhasználó megtekintheti a beírt – és kipontozott – jelszót az erre történő kattintással.

Mikrofon ikon

Végül pedig mikrofon ikon is megjelenhet a beviteli mezőben, ha hangbevitel is a felhasználó rendelkezésére áll a kitöltéshez.

Mi a gond a lenyíló mezőkkel?

A lenyíló mezők a designerek eszköztárába tartoznak, azonban gyakran megnehezítik a felhasználók dolgát. De miről is van szó? Erről:

Első pillantásra talán nagyszerű megoldásnak tűnik, hiszen egyetlen mezőbe besűríthető számtalan opció, nem rombolja szét az űrlap designját, ha sok kell, vagy épp bővíteni kell új opciókkal, a felhasználónak pedig nem kell billentyűznie. Utóbbi miatt nincs gond az elütésekkel, a hibás adatokkal, hiszen adott listából válogathatnak.

Ugyanakkor vannak hátrányai is, elsősorban az, hogy a felhasználóknak nem könnyű a használata. Vizsgálták ezt már a születési év bevitelénél, de más használhatósági tanulmányok is készültek, melyek azt állapították meg, hogy a lenyíló mezőkkel való interakció egy olyan többlépéses folyamat, mely gyakran nagyobb erőfeszítést igényel a felhasználó részéről, mint amire szükség lenne.

De pontosan mi a gond?

– A felhasználók nem találják – a vizsgálatok azt mutatják, hogy a lenyíló mező olyan elem, amivel vagy nem lépnek kapcsolatba az emberek, vagy pedig nagyon hosszú időnek kell eltelnie, mire megteszik. Ennek lehet oka a mérete, vagy talán inkább az, hogy már kitöltött mezőnek tűnik az üres űrlap-mezők között. Ennek megoldására hagyhatnánk üresen is a mezőt, de ebben az esetben viszont más ok miatt lesz nehezen használható, amire még visszatérünk.

– Elrejti az elérhető lehetőségeket – mivel a lenyíló mező elrejti az opciókat, ezért ahhoz, hogy a felhasználók ezeket megnézzék, plusz erőfeszítést kell tenniük, mint mondjuk rádiógombok esetében. Tovább probléma, ha túl hosszúak a sorok benne, mert így akár levágására is kerülhet a végük, ami tovább rontja az érhetőséget.

– Lelassítja a felhasználókat – egy vizsgálat a rádiógombokkal hasonlította össze, és azt találta, hogy a felhasználók lényeges gyorsabban tudták használni a rádiógombokat, mint a lenyíló mezőt. Márpedig, mint tudjuk, űrlapoknál kritikus tényező, hogy a felhasználók milyen gyorsan tudják kitölteni.

Mit használhatsz helyette?

– Ha két opció közül lehet választani, akkor egy egyszerű kapcsolót.

– Ha több lehetőség közül lehet választani, akkor a rádiógombok kínálnak jó alternatívát. Ennek előnye, hogy gyorsabban átlátható, nem kell a lista áttekintéséhez kattintania a felhasználónak.

– Egyszerű szövegmező is használható sok esetben, például ilyen a születési idő megadása.

Hogyan használj lenyíló mezőt?

Ha mégis úgy döntesz, hogy lenyíló mezőre van szükség az űrlapodon, akkor az alábbi tanácsokat érdemes figyelembe venned:

– Használj címkét a mezőn kívül és belül is! Utóbbira azért van szükség, mert enélkül csak a jobb oldalon lévő nyíl utal arra, hogy opciók közül lehet választani.

– Logikusan rendezd el az egyes opciókat a listában! A legtöbbször megfelelő lesz az ábécésorrend, illetve a dolgok természetes sorrendje (például a hét napjai vagy a hónapok esetében).

– Rövid legyen a szöveg! – Ne nagyon lépd túl a 35 karaktert egy-egy lehetőség soránál, különben a szöveg vége levágásra kerülhet.

Milyen legyen az űrlapod elrendezése?

Itt abból kell kiindulnod, hogy az emberek csak átfutják a weboldalakat, és nem olvassák őket. Ugyanez igaz az űrlapokra is. Ez az oka annak, hogy a designerek olyan űrlapokat kell tervezniük, melyek jól átláthatók. Amennyiben hatékonyan elősegíted az űrlap átfutását, azzal gyorsabbá válik és nagyobb arányban történik meg a kitöltés.

Használj egyhasábos elrendezést!

A CXL Institute vizsgálata szerint az egyhasábos űrlapokat gyorsabban töltik ki az emberek, mint a többhasábosokat. A tanulmány azt állapította meg, hogy a résztvevők az egyhasábos űrlapokat átlagosan 15,4 másodperccel gyorsabban töltötték ki.

Ennek oka talán az lehet, hogy a többhasábos elrendezés megtöri az emberek lendületét: a tekintetük elkezd cikázni a hasábok között. Ez viszont jelentős mértékben megnöveli a kitöltési időt. Ráadásul a többhasábos elrendezés szükségtelen kérdéseket is felvet a felhasználókban. Például azt, hogy „hol érdemes kezdenem a kitöltést?”, vagy „a jobb oldali hasábban lévő kérdések vajon ugyanolyan fontosak, mint a bal oldaliak?”.

Ezzel szemben egyhasábos elrendezésnél a szem teljesen természetes módon mozdul lefelé. Ezáltal tehát egy világos és érthető utat mutatunk a felhasználónak a kitöltésre. Emellett persze az egyhasábos elrendezés a mobilok számára is előnyösebb a kijelzők tájolása és a függőleges irányú görgetés miatt.

Természetesen néhány kivétel is akad a szabály alól. Lehetséges rövid és logikailag összetartozó mezőket egy sorba rendezni (ilyen lehet például a vezetéknél és a keresztnév, vagy a város és az irányítószám).

A kérdéseiddel is segítsd a kitöltést!

Az is számít, hogyan teszed fel a kérdéseidet. Felteheted őket a felhasználó perspektívájából logikusnak tűnő sorrendben, vagy az adatbázis logikáját követve. Előbbi megoldás segít abban, hogy a párbeszéd érzetét keltse az emberekben.

Tehát például, amikor olyan részleteket kérdezel egy vásárlásnál, mint a vevő neve, telefonszáma, címe, akkor az első kérdés mindig a nevére vonatkozzon. Az emberek számára ugyanis ez a természetes. Ha viszont megváltoztatod a sorrendet, akkor kényelmetlenül érzik magukat. Egy valós beszélgetésben szokatlan lenne, ha a név helyett a telefonszámmal kezdenénk egy beszélgetést.

A nehéz kérdéseket hagyd a végére!

Amikor a kérdések sorrendjét határozod meg, akkor mindig a könnyebbel kezdj! A nehéz és bonyolult kérdések pedig maradjanak az űrlap végére. Ez könnyebbé teszi a felhasználónak, hogy belekezdjen a kitöltésbe, és ha már túl van az űrlap nagyobb részén, akkor sokkal nagyobb a valószínűsége, hogy az összetettebb, tolakodóbb kérdésekre is válaszol. A dolog azon az elven alapul, hogy ha az emberek valamibe belekezdenek, akkor némi kényszert éreznek annak befejezésére.

Egy csoportba helyezd a kapcsolódó mezőket!

A Gestalt pszichológiában használt közelség elve szerint a kapcsolódó elemeknek egymáshoz közel kell elhelyezkezdniük, hogy az emberek kapcsolatot feltételezzenek közöttük. Ez érvényes a webdesignban a whitespace kialakítására, és ugyanígy a formok felépítésére. Tehát minél közelebb állnak egymáshoz bizonyos mezők a tartalmukat tekintve, annál közelebb kell elhelyezni őket fizikailag is egymáshoz.

A mezők tehát blokkokba rendezendők, amennyiben több mint hat mező szerepel az űrlapodban. Ne feledkezz meg a megfelelő mennyiségű whitespace-ről sem, hogy ezeket a részeket megfelelően elválaszd egymástól.

A hosszú űrlap nézzen ki egyszerűnek!

Mi van, ha mindenképpen hosszú űrlapra van szükséged? Hogyan tervezed azt meg? Ha a kérdéseket ilyenkor is egyetlen oldalon helyezheted el, akkor a hosszú űrlap látványa rontja a kitöltési arányt. Egy ijesztően összetett űrlap kitöltéséhez a legtöbb felhasználóban nincs elegendő motiváció. Az első benyomás az űrlapoknál is sokat számít.

A megoldás az, hogy az egy időben látható mezők számát csökkented! Ez olyan benyomást kelt, mintha rövidebb lenne az űrlap, mint valójában. A csökkentésre két megoldás létezik. Az egyik az, amikor a felhasználóknak csak azután mutatsz újabb kitöltendő mezőket, ha a legfontosabb mezők kitöltésével már elkészültek.

A másik megoldás, amikor a kitöltést lépésekre bontod. Ez az űrlap feldolgozásában, megértésében és az információk megjegyzésében is segít az embereknek. A lépésekre bontott űrlapoknál mindig jelezd a felhasználóknak, hogy épp hol tartanak! Ez lehet egy folyamatjelző, vagy szöveggel is kiírhatod, hogy x lépésből éppen hányadiknál tartanak. Utóbbi annyiból kedvezőbb, hogy mobilon kisebb helyet foglal.

Milyen legyen az űrlapod CTA-ja?

A CTA az a gomb és az a hozzá tartozó szöveg, mely cselekvésre készteti a felhasználót. A kérdés, hogy mikor teszi ezt a leghatékonyabban egy űrlap esetében?

LEGYEN A CTA JÓL ÉRTHETŐ

A gombhoz tartozó címkének érthetően el kell tudnia magyaráznia a felhasználónak, hogy mi történik a gombra történő kattintás után. Ennek érdekében célszerű kerülni az olyan semmitmondó szövegeket, mint a „Küldés” vagy „Feliratkozás”. Ehelyett arra érdemes törekedni, hogy minél pontosabban leírd a cselekvéssel elérhető eredményt. Tehát feliratkozás helyett álljon ott az, hogy „Kérem a hírlevelet”, vagy a küldés helyett az, hogy „létrehozom a fiókomat”.

NE HASZNÁLJ „TÖRLÉS” GOMBOT!

A „törlés” gomb arra szolgál, hogy a segítségével a felhasználó törölni tudja a bevitt adatait az űrlapról. Ez a gomb azonban nagyon ritkán hasznos az emberek számára, sokkal inkább csak gondokat okoz nekik. Fennáll ugyanis a kockázata annak, hogy véletlenül kitörlik az összes, már bevitt információt. Márpedig, ha egy felhasználó beírja az összes adatot, majd véletlenül kitörli ezeket egyetlen gombnyomással, akkor igen csekély a valószínűsége, hogy újra nekiállna a kitöltésnek.

LEGYENEK AZ ELSŐDLEGES ÉS MÁSODLAGOS CTA-ID ELTÉRŐ STÍLUSÚAK!

A másodlagos CTA-t ugyan jobban teszed, ha elkerülöd, de ha mégis szükséged lenne rá, akkor mindenképpen határozottan különítsd el őket egy eltérő vizuális megjelenéssel. Természetesen az elsődleges CTA-dnak adj nagyobb vizuális súlyt, így csökkentheted az esélyét, hogy a felhasználók rossz gombot nyomogassanak.

 

GONDOLJ A MOBILOS FELHASZNÁLÓKRA!

Ha nagyon kicsire tervezed a gombot, akkor igencsak megnehezíted a mobilos felhasználók dolgát, mivel az ujjukkal nehéz lesz eltalálni az apró célpontot. Ezért rendkívül fontos, hogy mobilbaráttá tedd ne csak a beviteli mezőket, hanem a gombokat is a megfelelő méretezéssel. A material design irányelvek szerint az érintési célpontok méretét legalább 48×48 DP-re kell venni. Ez a valóságban 9 mm-es lesz, függetlenül attól, hogy mekkora a kijelző. Ha nagyobb gombot tervezel, akkor valószínűleg több felhasználót érhetsz el.

Ugyanakkor nem csak a méret számít, hanem az egyes célpontok közötti távolság is. A megfelelő távolsággal megelőzhető, hogy a felhasználó véletlenül rossz gombot nyomjon le. Ez különösen fontos, amikor olyan gombokról van szó, mint az „egyetértek” vagy „nem értek egyet”. A material design elvek szerint a két célpont közötti távolság legyen legalább 8 DP.

ÉRINTÉS UTÁN INAKTIVÁLÓDJON A GOMB

A CTA-kkal elvégezhető cselekvések végrehajtásához néha kell egy kis idő. Tehát a gomb lenyomására nem történik meg azonnal a feladat végrehajtása. Itt fontos egyrészt visszajelzést adni a felhasználónak a sikeres aktiválásról, másrészt pedig lehetetlenné tenni, hogy ismét megnyomja a gombot. Ez különösen fontos a webáruházaknál, mert így előzhető meg, hogy ne kétszer küldje el a rendelést.

Hová helyezd a CTA-gombot és más gombokat az űrlapon?

Sokaknak eszébe sem jut, hogy fontos lehet az is, hogy hová kerül a gomb egy űrlapon. Talán fontosabbnak tűnik, hogyan néz ki, pedig a gomb elhelyezése akár tönkre is tehet egy űrlapot, és így a weboldal felhasználói élményét. Ráadásul az elhelyezés nem is olyan egyszerű, mint azt elsőre gondolnánk, mert függ az űrlap típusától és a gombtól is. Ugyanakkor van egy ökölszabály, mely a legtöbb űrlapnál használható.

Az elsődleges gomb a bal oldalra kerüljön!

Igen, az alcímben megfogalmazott ökölszabály lenne az, amit érdemes betartani, és ezt többek között Luke Wroblewski állítja szemkövetéses vizsgálatokra alapozva. De milyen lehetőségek közül is választhatnánk? Kerülhet a gomb a űrlap közepére vagy a jobb oldalra is. Utóbbi egyébként nem is ritka a weben található űrlapoknál. A jobb oldali megjelenésnek van is előnye, ami alapvetően a Gutenberg-diagrammal magyarázható. A Gutenberg-diagrammról itt írtunk bővebben, de mutatunk egy ábrát, ami gyorsan megmagyarázza a lényeget:

Ugyanakkor ezen a mintán kívül van egy olyan elképzelés is, miszerint egy jobbra rendezett gomb mintegy lezárja az űrlapot. Ez elsősorban a szofter-tervezésből származik, és emiatt gyakran használják különösebb megfontolás nélkül a webes űrlapoknál.

Jobb oldalra helyezett gombot elsősorban akkor lehet használni, ha egy elég összetett űrlapunk van, ahol az emberek tekintete balról jobbra halad, és csak utána lefelé, illetve abban az esetben, ha „Tovább” gombot kell elhelyeznünk az űrlapon.

Minden más esetben azonban a bal oldalra helyezett gomb a jobban használható. Például azért, mert ezáltal válik egyenessé az út a kitöltés során. Ha a beviteli mezők és a gomb egy tengelyre kerül, az egyértelműen megmutatja, hogyan kell kitölteni az űrlapot.

A felhasználók az egy hasábba rendezett űrlapoknál felülről lefelé haladnak, így a bal oldalra helyezett gomb zárja le számukra az űrlapot. Itt nem a Gutenberg-diagram, hanem az F-minta indokolja meg az elhelyezést. A gomb az F szárának aljára kerül, és ezáltal válik könnyebben befogadhatóvá. Fejlesztési szempontból is előnyös egyébként, mert könnyebb melléhelyezni bármilyen új elemet, például egy linket vagy egy betöltés-jelzőt.

A vissza gomb az űrlap tetejére kerüljön

Néhány űrlap több oldalból áll, és akadnak olyan felhasználók, akik vissza akarnak lépni egy előző oldalára az űrlapnak, mert mondjuk ellenőrizni szeretnének valamit. Ugyanakkor a böngésző vissza gombjára nem mernek kattintani, mert félnek, hogy így elvesznek a korábban beírt adatok. Ilyenkor van szükség egy vissza gombra az űrlaphoz kapcsolódóan.

Egy vizsgálat mutatott rá arra, hogy az elsődleges gomb mellé elhelyezett vissza gomb zavaró. Megoldás lehet az elsődleges gomb feletti vagy annak bal oldalán történő elhelyezés. De talán ennél is jobb megoldás az űrlap teteje.

Ez az elhelyezés azért előnyös, mert így hasonló helyre kerül a vissza gomb, mint a böngésző vissza gombja, csökkenti azt az időt, amíg a felhasználó feldolgozza a gomb jelentését, ráadásul az elsődleges gomb mellé más gombok is elférnek, melyre olykor szükség lehet.

Az érintőlegesen kapcsolódó gomb is az űrlap fölé kerüljön!

Néhány űrlapnál megjelenhetnek olyan lehetőségek, melyek nem kapcsolódnak szorosan magához az űrlaphoz. Ilyen lehet például egy „elfelejtett jelszó” lehetőség. Ennek a linknek a segítségével tudnak új jelszót szerezni a felhasználók, azonban nem része az űrlap kitöltésének. Sokszor kerül ez a link a jelszó mező mellé, de ez nem a legjobb megoldás, mert így a felhasználónak le kell görgetnie, ha kifejezetten ezt a linket keresi, illetve már lehet, hogy beírja az e-mail címét, amikor találkozik a linkkel. Ha viszont az űrlap felett szerepel, akkor mindez elkerülhető.

Ha több gombot kell használnod, akkor a funkció határozza meg az elhelyezést

Habár több gomb használata nem igazán szerencsés az űrlapoknál sem, de néha mégis szükség lehet rá. Ha egy „törlés” gombról van szó, akkor azt célszerű az elsődleges gomb alá helyezni. Luke Wroblewski szerint ugyan az elsődleges gomb mellé helyezés is jó megoldás, mégis jobb lehet az alulra történő elhelyezés. Egyrészt azért, mert mint Caroline Jarrets mondja: a destruktív gombokat minél jobban el kell rejteni. Másrészt azért, mert ez sem kapcsolódik közvetlenül az űrlap kitöltéséhez. Harmadrészt pedig azért, mert így megmarad a hely az elsődleges gomb jobb oldalán egy közvetlenül kapcsolódó gomb számára.

De ilyen másodlagos gomb lehet a „ment és kilép” is, melyet viszont a legjobb az elsődleges gomb mellé helyezni. Ha az elsődleges gomb fölé kerül, akkor fontosabbnak látszik, pedig nem az. Ha alá kerül, akkor a „törlés” gomb helyét foglalja el. Ha viszont mellett kap helyet, az logikus, hiszen közvetlenül kapcsolódik az űrlap kitöltéséhez.

Egymezős űrlapnál a gomb a beviteli mező mellé kerüljön!

Akad olyan eset, amikor a gombot érdemes a beviteli mező mellé tenni. Ilyen az egyetlen beviteli mezőből álló űrlap, például egy keresőmező. Habár azzal sincs különösebb gond, ha ilyenkor is az űrlap alá kerül a gomb, de egyrészt helyet spórolhatunk meg, ha mellé kerül, másrészt jobban is néz ki. Ez a megoldás azonban csak az egy beviteli mezős űrlapoknál használható.

Hogyan jelezd a hibákat az űrlapon?

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.

A felhasználók tehát mindig követnek el hibákat, ez elkerülhetetlen. Ezért alapvető, hogy olyan felületet tervezzünk, mely támogatja a felhasználókat ezekben a pillanatokban. A hibaüzenetek a rendszerállapot jelzései: megmutatják a felhasználónak a hibát ás annak kijavítási módját. Ahhoz azonban, hogy egy hibaüzenet hatékony legyen, a felhasználónak látnia kell, értenie kell, és ennek megfelelően cselekednie. Ideális esetben a rendszer folyamatosan informálja a felhasználót arról, hogy mi történik, vagyis visszajelzést küld megfelelő időn belül.

A 3 fő elv, melyet követni kell, amikor egy hibát akarsz korrigáltatni a felhasználóval:

1. A hibaüzenetnek könnyen észrevehetőnek és érthetőnek kell lennie. Amennyiben a felhasználók nem tudják, hogy hiba történik, akkor nem is fogják tudni azt javítani.
2. A hibás mezőknek könnyen azonosíthatónak kell lennie. Az embereknek nem kellene kutatniuk a hibák után.
3. A felhasználónak ne kelljen megjegyeznie a hiba javítására vonatkozó utasításokat.

Amit fontos elöljáróban megjegyezni, hogy a megelőzés mindig jobb, mint a baj orvoslása. Ha már van gyakorlatod a tervezésben, akkor nagyjából tudod, hogy melyek a leggyakrabban előforduló hibák. Állíts korlátokat az emberek elé, és tegyél számukra javaslatokat! Például, ha szoba-foglalást lehet intézni a weboldaladon, akkor ne engedd, hogy múltbeli időpontot jelöljenek be a felhasználók foglalásra.

• Tegyél javaslatokat!
• Csak a megfelelő értékek bevitelét engedélyezd!
• Legyél rugalmas az elírásoknál, rövidítéseknél és a beviteli formátumoknál!

Szintén fontos, hogy kommunikálj! 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.

A hibát azonnal jelezd!

A hibákra felhívhatod a felhasználók figyelmét az oldal tetején vagy végén, de sokkal jobb megoldás, ha a beírás helyén jelzed számukra. A kutatások azt mutatják, hogy túl nagy kognitív terhelést jelent, ha egyben, egy elkülönített részen jelzed az emberek számára felsorolva a hibákat. Így nehezebben kapcsolják össze a hibát és azt a pontot, ahol a hibát elkövették.

Ha a hibaüzenetet csak azután látja a felhasználó, miután elküldte a formot, az komoly frusztrációt okoz számára. Luke Wroblewski 2009-es tesztje szerint az egyből jelzett hiba

• 22 százalékkal javította a sikeres kitöltés arányát,
• 22 százalékkal csökkentette a hibák számát,
• 31 százalékkal javította az elégedettséget,
• 42 százalékkal csökkentette a kitöltési időt,
• 47 százalékkal csökkentette a megakadások számát.

Ha azonnal jelzed a felhasználók számára, hogy valahol hibáztak, akkor sokkal gyorsabban, lényegesen 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. Ideális esetében az ellenőrzésnek minden sor kitöltésénél meg kell történnie, abban a pillanatban, amikor befejezte azt. A hibaüzenetnek a sor mellett kell megjelennie. Ezáltal az üzenet könnyen észrevehető, ráadásul kisebb „interakciós költséggel” jár, mint ha utólag kellene megkeresniük a hibát.

A hibaüzenetet a mező mellett jelenítsd meg!

Az azonnali hibaüzenet természetes megjelenítési helye a mező mellett található. De még akkor is érdemes a mező mellé helyezni a hibaüzenetet, ha nem azonnal, a mező kitöltése után kerül sor az ellenőrzésre. A mező mellett elhelyezett hibaüzenet kevésbé terheli a munkamemóriát: a felhasználók a javítás során is folyamatosan látják azt, és nem kell megjegyezniük.

Világosan fogalmazd meg a hibaüzeneteket!

A hibaüzeneteddel próbáld meg csökkenteni a felhasználók csalódottságát. Ennek érdekében soha nem hibáztasd, mert megsértődik, és elhagyja a weboldalad. Olyan szöveget írj, ami semlegesnek vagy pozitívnak hat. Tehát ne azt írd, hogy „Ön rossz számot írt be”, hanem mondjuk azt, hogy a „Szám hibás”.

Kerüld el a bizonytalanul megfogalmazott vagy túl általános hibaüzeneteket, mert ezek nem jelentenek semmit a felhasználóknak. Ha annyit közölsz, hogy „hiba történt, próbálja meg újra”, akkor egyből arra fognak rákérdezni, hogy mégis milyen hiba történt. Mindig próbáld meg a lehető legpontosabban megfogalmazni a probléma okát, és arról is győződj meg, hogy az emberek tudják, miként javítsák.

A hibaüzenet megfogalmazására vonatkozó elvek:

• Legyen világos
• Könnyen olvasható
• Udvarias
• Pontos
• Konstruktív

Azt is jelezheted, ha jól töltött ki egy mezőt

Az azonnali ellenőrzés azt is lehetővé teszi, hogy jelezd a felhasználóknak egy-egy mező sikeres kitöltését. Ilyenkor például mutathatsz egy zöld pipát számukra, így látják, hogy nyugodtan továbbléphetnek a következő mezőre. Arra azonban érdemes figyelni, hogy ne térítsd el a felhasználót a visszajelzéssel. Ha csak annyi a követelmény egy mezővel szemben, hogy legyen kitöltve, akkor nem feltétlenül szükséges visszajelezni a kitöltés sikerességét.

Bizonyos esetekben javasolt, hogy már akkor visszajelezz, miközben a mező kitöltése zajlik. Ez hasznos lehet például egy új jelszó megadásánál, amikor annak erősségével kapcsolatban azonnali a visszajelzés, így nem kell többször is kitalálnia jelszavakat a felhasználónak, csak azért, hogy megfelelő erősségű-e.

Más esetekben azonban a beírás közbeni hibaüzenet nem előnyös:

Ne ellenőrizd a mezőt, amíg nincs befejezve a kitöltés!

Amíg a felhasználó nem írt be semmit, addig felesleges hibaüzenetekkel bombázni. Emellett nem kell mindig egyes karakter begépelését ellenőrizni, mert ez csak fokozza a felhasználó frusztrációját. A hibaüzenetnek 500-1000 ms-mal később kellene csak megjelennie, hogy a felhasználó befejezte a beírást, vagy csak akkor, ha már a következő mezőre mozdult.

Eltérő színnel jelezd a hibát!

A legtöbben a piros színnel azonosítják a hibát, sárgával vagy narancssárgával a figyelmeztetést, a zölddel és kékkel pedig a sikert. Győződj meg arról, hogy a hibajelzés eltérjen az űrlap színeitől, így a felhasználó gyorsan észreveszi. Tegyél mellé egy félig áttetsző hátteret, mely ugyanolyan színű, mint a hibaüzenet.

Használj ikonokat vagy animációt!

A színek mellett egy ikon lehet az, mely hatékonyan felhívja a figyelmet egy hibára. Amikor a felhasználó átfutja az űrlapot, akkor egy ikon könnyen észrevehető és vonzza a tekintetet.

Hasonlóan jó megoldás egy finom animációval megtámogatott ikon. Amire figyelni kell, hogy ne használd túl sokszor: ha több hiba is van az űrlapon, akkor a túl sok mozgó ikon zavaró. Semmiképpen se mozgasd viszont a szöveget, mert akkor nehéz olvasni.

Nem elég egy ikon

Gyakran találkozni azzal a megoldással a weben, hogy a hibás mezőt egy ikonnal jelzi az oldal. A részletes hibaüzenet pedig csak akkor jelenik meg, ha az ikon fölé viszi a felhasználó az egérmutatót. Ez azonban nem a legjobb megoldás:

• Az ikont nem feltétlenül veszi észre a felhasználó.
• Első pillantásra nem tudja, mi a probléma.
• Miért tegyen még egy lépést azért, hogy lásson egy hibaüzenetet?

Ritkán használj felugró ablakokat!

Amikor nagyon fel akarod hívni a felhasználó figyelmét egy lehetséges hibára, akkor felugrót vagy párbeszédablakot használhatsz, hogy elmagyarázd a részleteket és segítsd a felhasználót kijavítani a hibát. Az ilyen megoldást azonban ritkák szabad használni, mivel két nagy hátránya van:

• zavaró
• a dobozt le kell kattintani a hiba javításához.

Utóbbi azt jelenti, hogy a felhasználónak a munkamemóriáját kell használnia a javításnál, amit megnöveli a kognitív terhelést. Elsősorban tehát akkor használható, ha a hibaüzenet egyszerű.

Kínálj plusz segítséget ismétlődő hibánál!

Ha ugyanaz a hiba többször is előfordul (legalább 3-szor egy egyoldalas űrlapnál), akkor az jelzés lehet arra, hogy valami komoly hiba van a felhasználói felülettel. Soha nem felejtsd el, hogy ha a felhasználói hibázik, akkor az nem az ő hibája. Érdemes az analitikát böngészni az ismétlődő hibák felfedezése érdekében, hogy aztán ki tudd javítani őket. Az első lehetőség, amit érdemes ilyenkor megpróbálni, az egy javított hibaüzenet. Emellett azonban kínálhatsz egy linket is a felhasználónak, melyre kattintva részleteket is talál a hibával kapcsolatban.

Ne legyél túl szigorú!

Nyilván vannak olyan esetek, amikor fontos, hogy az adatok pontosak legyenek. Ugyanakkor a túlzott szigorúság nagyon gyakran csak a gyenge programozást jelzi. Előfordul, hogy többféle válasz is adható egy kérdésre, és mindegyik helyes és értelmezhető lenne. Tehát azért ne dobj fel hibaüzenetet, mert a felhasználó nem egy pontosan meghatározott formában adott meg egy adatot. Ez feleslegesen hátráltatja a felhasználót, aminek pedig rossz hatása lesz a konverziókra. Az űrlapodnak lehetőleg el kellene fogadnia a különböző formában megadott válaszokat úgy, hogy a fejlesztő megoldja ezeknek egyetlen formába való átkonvertálását.

Hogyan tervezz meg egy bejelentkezési és egy regisztrációs oldalt?

Egy bejelentkezési oldal olyan, mint egy ház bejárati ajtaja. Lehet hívogató vagy ijesztő is a látogatók számára. Ezért adunk néhány tippet, mire figyelj a bejelentkezési és regisztrációs űrlapok kialakításánál.

Közösségi médiás bejelentkezés

Akadnak olyan emberek, akiknek az a fontos, hogy egy weboldalra vagy alkalmazásba  a lehető leggyorsabban be tudjanak jelentkezni. Számukra jó megoldás, ha közösségi média fiókkal is beléphetnek. A bejelentkezési oldaladnak ezért legalább egy külső fiókkal történő bejelentkezési lehetőséget is fel kellene kínálnia. Ilyenkor a felhasználóknak nem kell keresztülvergődniük a hosszadalmas regisztrációs folyamaton ahhoz, hogy vásároljanak vagy kommenteljenek a weboldaladon.

Ugord át a felhasználónév mezőt!

Ma már egyre kevesebb oldalon lehet azzal találkozni, hogy regisztrációnál felhasználónevet kérjen. Itt is fontos, hogy minél rövidebb legyen az űrlap, a felhasználónév elhagyásával pedig egy mezőt meg lehet spórolni. Ráadásul a felhasználóknak sem jó, ha nem csak a jelszóra kell emlékezniük, hanem a felhasználónévre is. Mindenkinek egyszerűbb, ha csak e-mail címet és jelszót kér az űrlap a regisztrációnál és a bejelentkezésnél.

Emlékezz rám jelölés

Sok rendszerben lehet találkozni már az „Emlékezz rám” (remember me) funkcióval a belépési mezők alatt egy kipipálható checkbox révén. Ha a Te weboldalad is olyan típusú oldal, ahol gyakran lépnek be újra és újra a látogatók, viszont szeretnék megspórolni a további bejelentkezéseknél a belépési űrlap kitöltését, akkor érdemes egy ilyen lehetőséggel bővíteni.

Ne jelszómegerősítést kérj!

Amikor regisztrációról van szó, akkor jelszómegerősítés ugyan hasznos dolog, de lelassítja a felhasználót a belépésnél. Különösen akkor, ha elrontja a megismételt jelszót, és meg sem tudja nézni, hogy mit rontott el. A megerősítés helyett ezért praktikusabb megoldás, ha lehetővé teszed a felhasználóknak, hogy egy kis szem ikonra történő kattintással ellenőrizzék a beírt jelszavukat.

Csökkentsd a hibalehetőségek számát!

A jelszavak megadásánál a biztonság érdekében megkövetelhetsz olyan jelszót, mely nagybetűket, számokat, speciális karaktereket is tartalmaz, erre azonban hívd fel a felhasználók figyelmét. Miután beírtak egy jelszót, de nem felel meg a követelményeknek, pontosan jelezd egy hibaüzenetben, hogy milyen követelménynek nem felel meg az általuk meghatározott jelszó.

Frissítés, 2023.02.08.:

Mi az, amit ne ronts el a bejelentkezési űrlapodnál

A bejelentkezési oldal olyan, mint egy ház kapuja vagy ajtaja. Megjelenésével utal arra, hogy mire számíthatsz az ingatlanba belépve. Ha nagyon rosszul néz ki – leszakadt a kilincs, nem működik a csengő, koszos a lábtörlő -, akkor nem szívesen lépsz be rajta. Előfordulnak olyan idegesítő hibák egyes bejelentkező oldalakon is, melyek képesek elriasztani a felhasználókat.

Nem tudod megnézni, hogy milyen jelszót írtál be

Lehet, hogy biztonsági szempontból előnyös, ha senki, még a jelszót beíró személy sem látja, hogy milyen jelszót ír be egy belépési oldalon, ugyanakkor felhasználói élmény szempontjából nem szerencsés. A jelszó megjelenítése/elrejtése egy hasznos funkció, ugyanis még az elrontott bejelentkezés előtt ellenőrizhető, hogy milyen jelszót adunk meg.

Ezt egyébként tovább lehet fokozni azzal, ha a jelszómező jobb oldalára nem a megjelenítés/elrejtés funkció kerül, hanem helyette az elfelejtett jelszó funkció. Ilyenkor sokan, akik meg akarják nézni a beírt jelszót, erre kattintanak automatikusan, de nem a várt eredményt kapják. Úgyhogy ezt érdemes máshová helyezni, a helyére pedig a jelszó megjelenítését/elrejtését.

Marketing-tartalmak már a belépési oldalon

Egy weboldalra vagy alkalmazásba való belépés után a felhasználók számtalan dolgot csinálhatnak a weboldalon vagy alkalmazásban. Azt azonban a weboldaltulajdonos nem feltétlenül tudja már a belépéskor, hogy mit akar a felhasználó.

Ha még a belépés előtt megzavarjuk a felhasználót a szándékához nem kapcsolódó felugró ablakokkal, ajánlatokkal, az csak a vizuális zajt növeli, idegesíti, eltéríti őt a belépéstől. Ezekkel az ajánlatokkal egy későbbi szakaszban érdemes megtalálni a felhasználót, és lehetőleg olyan üzenetekkel, melyek relevánsak számára.

Túl keskeny beviteli mezők

Akadnak olyan emberek, akiknek hosszú a nevük vagy az e-mail címük, vagy mindkettő. Ráadásul a biztonságosnak tekintett jelszavak is néha elég hosszúra sikerülnek. Ha túl szűkre veszed a beviteli mezőt, akkor egy része nem lesz látható a beírás során és után. Ennek kiküszöbölésére minimum egy 35 karakteres beviteli mezőre szükség van a bejelentkezési oldalakon.

Ugyanakkor az is igaz, hogy a túl széles mezők is lehetnek zavaróak.

Túl kicsi jelszó-csillagok

Ezek azok a csillagok, melyek a beírt karaktereket helyettesítik a jelszó mezőben. Habár magukat a karaktereket kitakarják, de a számuk miatt hasznos lehet, ha jól láthatóak, azaz elég nagy méretűek. Néhány weboldalon előfordul, hogy egészen kis pontként jelennek meg, így nem lehet látni a számukat.

Az egyéb linkek a belépés gomb fölé kerülnek

Olykor az is előfordul, hogy valamiért felcserélődik egyes elemek sorrendje a belépési oldalon, így az e-mail és a jelszó mező után egyből a felhasználási feltételek és adatvédelemre mutató linkek és a hozzájuk kapcsolódó szöveg következik, majd a belépés gomb alájuk kerül. A sorrendnek itt pont fordítottnak kell lennie, már csak azért is, mert most belépési, bejelentkezési oldalról van szó és nem regisztrációs oldalról, ahol ezek az információk fontosak lehetnek.

Egy példa űrlapra

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:

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.

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.

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:

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:

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.

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:

 

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.

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.

Hogyan optimalizáld mobilra az űrlapod?

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. Ha rövidítjük az űrlapot mobilon, akkor nem csak annak esélyét csökkentjük, hogy menet közben otthagyja a felhasználó, hanem még a betöltés is gyorsabbá válik, amit szintén díjazni szoktak az emberek. Vagy legalábbis azt tartják normálisnak és elfogadhatónak.

A rövidítésbe 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. Így:

Egyhasábos design

Azt talán mondanunk sem kell, hogy mobilon egy űrlap legyen egyhasábos, de azért mondjuk, nehogy ilyen óriási hibát csak azért elkövess, mert pont erre nem figyelsz oda. Egy többhasábos elrendezés igencsak meglepheti és zavarba ejtheti a felhasználót mobilon, és kitöltésnél egész egyszerűen kitöltetlen mezők maradnának.

És amit lehet, oldjunk meg

legördülő listák és összecsukható menük

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. Ennek érdekében 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.

Azt viszont kerüld el, hogy a címke placeholderként jelenjen meg! Ez mobilon sem működik ugyanazon oknál fogva, amiért desktopon: a felhasználó elfelejti, hogy mit kell beírni az adott mezőbe, ha kattintásnál eltűnik a placeholder-szöveg a kitöltésre vonatkozó információval.

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.

Természetesen az is javasolt, hogy a szövegbeviteli mezőnek megfelelő billentyűzet jelenjen meg a felhasználók számára. Ezzel csökkenthető a hibák száma, és segíti az embereket a gyorsabb kitöltésben.

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 legalább 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.

Címkék: form, űrlap, UX