Egy weblap megtervezésénél nagyon fontos szempont, hogy felhasználóbarát legyen. A lényeg, hogy a felhasználó könnyen megtaláljon mindent, amit keres. Nem elég a szép külső és megfelelő színek kiválasztása. Ez különösen igaz az online űrlapokra. A tervezőknek meg úgy kell kialakítani az űrlapokat, hogy a felhasználó a leghamarabb átlássa és ne bonyolódjon bele.

A cél az, hogy a felhasználó a legkönnyebben eligazodjon az űrlapon és minél hamarabb ki tudja tölteni és a jóváhagyó gomb lenyomásával tovább léphessen. Az űrlapok esetében nincs szükség sok speciális effektre. Ebben a cikkben szeretnék összpontosítani a felhasználói beavatkozásra és arra, hogy a látogatók, hogyan élik meg az egyes űrlapokat. Vannak különböző technikák, amelyek segítségével lehet racionalizálni a kitöltendő mezőket. Segít kiválasztani, hogy melyek azok, amelyek fontosak és kevésbé fontosak vagy esetleg feleslegesek és elhagyhatók.

Koncentrálj a legapróbb részletekre:

Tucatnyi felhasználótól hallottam, hogy például a regisztrációs űrlapok egyes helyeken túl sok információt kérnek. Ahhoz, hogy növelni tudd a regisztrált usereid számát, egyszerűsítsd le a regisztrációhoz bekért adatok számát. Ugyan ez vonatkozhat egy hírlevélre való feliratkozásnál is, csak a leglényegesebb infókat kérd el az emberektől. Ez által sokkal többen fogják kitölteni.

A minimálisan kitöltendő mezők száma függ a céljaidtól. A regisztrációhoz az egyik legegyszerűbb űrlap csak egy felhasználónevet, e-mail címet és két darab jelszó beviteli mezőt tartalmaz. Létezik még ettől is egyszerűbb regisztrációs lap. Itt csak egy felhasználó nevet és az e-mail címet kell megadni, majd egy gomb megnyomásával jóváhagyni. Ekkor e-mail-ban kapjuk meg a jelszót, amit a rendszer automatikusan generált és ezzel tudunk belépni.

Ilyen űrlap esetében nincs szükség a szokásos regisztráció megerősítő e-mail-re. Hiszen a postaládánkhoz csak nekünk van hozzáférésünk és csak akkor tudunk belépni az oldalra, ha az e-mail fiókunkból elolvassuk a jelszót.

Automatikus műveletek:

A legtöbb felhasználót az őrületbe lehet kergetni az úgynevezett váratlan tevékenységekkel. Ilyen például a felugró ablakok. Az űrlapokon csökkenteni kell a JAVA script extrákat, felugró útmutatókat. Ahhoz, hogy használható legyen egy űrlap, nem kell feltétlenül felosztani oszlopokra a beviteli mezőket.

Egy másik hiba, ami gyakran előfordul, a HTML TabIndex beállítása. Ez olyan szempontból hasznos, hogy a felhasználó még egér nélkül is ki tudja tölteni az űrlapot, de ez csak akkor működő képes, ha az összes beviteli mező indexe a helyén van. Addig jól működhet, ha a felhasználó minden mezőt kitölt, mint egy regisztráció során, de ha üresen hagy mezőket, akkor elcsúszhatnak az indexek. Ezzel egy fölösleges hibaforrást generál a programozó.

Első a biztonság:

Legyen szó bankkártya számról vagy csak e-mail címről, nagyon fontos, hogy az adatok biztonságos adatbázisokban legyenek tárolva. A felhasználók megbíznak a honlapodban, amikor kitöltenek egy űrlapot, így nagyon fontos, hogy ne veszítsd el a bizalmukat.

Amennyiben lehetséges használj SSL tanúsítványt a teljes tartományban. Így a felhasználók védve lesznek a teljes munkamenet során. Ez némi plusz munkával jár, viszont a biztonság érdekében megéri. Természetesen nem kötelező ellátni minden egyes lapot SSL tanúsítvánnyal, viszont ajánlott a bizalom fenntartása érdekében.

Nagyméretű input mezők:

Sok tanácsot, érvet hallottam már afelől, hogy mekkora betűméretű beviteli mezőket célszerű alkalmazni az űrlapokon. A szabványos CMS (vBullettn, Joomla!, Drupal) beviteli mezők viszonylag kisméretű betűket használnak. Ezek az alapértelmezett 10-es 12-es méretet alkalmazzák.

Például a fenti képen látható a Diigo regisztrációs lapja. Nagyon tágas elrendezést alkalmaz, valamint külön színnel jelöli, hogy éppen melyik mezőben áll a kurzorunk. Az érintetlen mezőknek van egy enyhe rózsaszín árnyalata, az éppen aktív mező pedig halványkék.

Sok más weblaphoz hasonlóan a Twitter is túlméretezett űrlapot használ, ennek előnye, hogy így nehéz eltéveszteni, hogy hova is szeretnénk írni. Jól elkülöníthetők a mezők és jól látszanak a bevitt adatok. A mezők elnevezésére is egy egyedi rendszert alkalmaznak, beleírják a még kitöltetlen beviteli mezőbe, hogy milyen adatot várnak oda. Továbbá ők is alkalmazzák a színezést, hiszen a felhasználó által kitöltött mezők színe szürke lesz, a még kitöltetlenek pedig maradnak fehérek és bennük szerepelnek az úgy nevezett „helyőrző szövegek”.

Összegezve:

Egy könyvtárnyi könyv létezik, amelyek mind a web design-okkal foglalkozik. A web designer-ek körében egyre nagyobb népszerűségnek örvendenek a legújabb CSS3 specifikációk. A design-en túl viszont az egyes űrlapok is nagy figyelmet igényelnek.

Bízom benne, hogy a fentebb leírt tanácsokat megfogadva egyre jobb, felhasználóbarátabb űrlapok fognak születni.