Formák és felhasználói elemek professzionális tervezése és kivitelezése

Űrlapok és elemek készítése online felületekhez

Az Űrlapok és elemek készítése akkor fontos, amikor egy weboldalon vagy webalkalmazásban a látogató adatot ad meg, választ küld, rendelést indít, időpontot foglal vagy visszajelzést ad. A jó megoldás nem csak szép mezőkből áll. Érthető, gyors, hibamentes és mobilon is kényelmes. Én azt látom, hogy sok magánügyfél először csak egy egyszerű kapcsolatfelvételi mezőt kér, de munka közben kiderül, hogy szükség van feltételes mezőkre, fájlfeltöltésre, automatikus visszajelzésre vagy átlátható admin oldali kezelésre is.

Egy magánszakember távolról is el tudja készíteni ezeket a részeket, ha a feladat pontosan le van írva. Nem kell személyes találkozó. Elég egy rövid leírás, néhány példa, a jelenlegi oldal címe, ha van ilyen, és a kívánt működés. A kommunikáció általában üzenetben, videóhívásban vagy megosztott dokumentumban történik. A lényeg az, hogy a megrendelő ne csak azt mondja meg, milyen mezők legyenek, hanem azt is, mire kell a bekért adat.

Űrlapok és elemek típusai

Az űrlap lehet nagyon egyszerű, például név, e-mail, üzenet mezővel. De lehet összetettebb is, ahol több lépésben halad a felhasználó. Ilyen lehet egy ajánlatkérő adatlap, egy jelentkezési felület, egy hibabejelentő oldal, egy kalkulátorhoz kapcsolt bekérő rész vagy egy ügyfélfiókban található beállítási panel. Szerintem az a jó irány, ha az űrlap nem kér felesleges adatot. Minél több a mező, annál nagyobb az esély arra, hogy a látogató félbehagyja.

A felhasználói elemek közé tartoznak a gombok, jelölőnégyzetek, rádiógombok, legördülő mezők, kapcsolók, keresők, dátumválasztók, szűrők, kártyák, figyelmeztetések és visszajelző üzenetek. Ezek apró részeknek tűnnek, de sokszor ezek döntik el, hogy egy felület használható-e. Ha egy gomb nem egyértelmű, vagy a hibaüzenet nem mondja meg, mi a baj, az ügyfél könnyen elakad.

Volt olyan eset, amikor egy ügyfél csak egy regisztrációs lapot szeretett volna javítani. A gond nem a mezők számával volt. A probléma az volt, hogy a hibák csak az oldal tetején jelentek meg, miközben a felhasználó lent töltötte ki az adatokat. Egy kisebb átalakítás után minden hiba közvetlenül az érintett mező alatt látszott. A kitöltési arány érezhetően jobb lett, pedig a háttérrendszer nem változott.

Online űrlapkészítés munkamenete

A távoli munka általában egy rövid egyeztetéssel indul. A megrendelő leírja, mire kell az adatlap, milyen adatokat szeretne bekérni, hova érkezzenek az adatok, kell-e e-mail értesítés, szükséges-e adatellenőrzés, és milyen rendszerhez kell kapcsolódni. Ezután a szakember javaslatot ad a mezők sorrendjére és a működésre. Tapasztalatom szerint itt derül ki a legtöbb félreértés.

A következő lépés a vázlat vagy a működési terv. Ez nem mindig látványterv. Néha elég egy egyszerű felsorolás, amely megmutatja a mezőket, a kötelező adatokat, a hibajelzéseket és a beküldés utáni folyamatot. Bonyolultabb feladatnál érdemes külön leírni, mi történjen sikeres küldésnél, hibánál, hiányzó adatnál és ismételt beküldésnél.

A fejlesztés után jön a tesztelés. Ezt nem szabad kihagyni. Meg kell nézni asztali gépen és telefonon is. Ki kell próbálni üres mezőkkel, hibás e-mail címmel, hosszú szöveggel, speciális karakterekkel és lassabb kapcsolattal. És igen, ez néha unalmas rész. De pont itt derül ki, hogy az űrlap a valós használatban mennyire stabil.

Űrlapok és elemek árak

Az ár főleg attól függ, hogy csak megjelenítésről van szó, vagy működő adatküldésről, ellenőrzésről, adatbázis kapcsolatról és egyedi logikáról is. A túl olcsó munka ezen a területen gyakran gyengébb minőséget jelent, mert kimarad a tesztelés, a mobilnézet vagy az érthető hibaüzenet. Nem mindig a legdrágább ajánlat a jó, de a nagyon alacsony ár mögött sokszor nincs elég idő a részletekre.

Az ár akkor becsülhető pontosabban, ha látszik a mezők száma, a beküldés utáni folyamat és a használt rendszer. Egy szabadúszó fejlesztő általában gyorsabban ad reális ajánlatot, ha kap egy képernyőképet vagy egy rövid mintát arról, milyen megoldást szeretne az ügyfél. A Qjob.hu felületén ilyen online feladatra is lehet magánszakembert keresni, de a pontos leírás itt is sokat számít.

Megfelelő szakember kiválasztása

Űrlapok és elemek fejlesztésénél nem elég azt nézni, hogy a szakember tud-e kódolni. Fontos, hogy értse a felhasználói viselkedést is. Egy jó online szakember rákérdez arra, ki fogja kitölteni az űrlapot, milyen eszközön használják majd, milyen hibák fordulhatnak elő, és hogyan kap visszajelzést a felhasználó. Ha valaki csak annyit kérdez, hány mező kell, az kevés.

Érdemes portfóliót kérni. Nem feltétlenül nagy projekteket kell keresni. Sokszor egy jól működő kis adatlap többet mond, mint egy látványos, de nehézkes felület. A válaszidő is fontos. Távoli munkánál a jó kommunikáció majdnem olyan lényeges, mint maga a kivitelezés. Ha a szakember nem ír vissza világosan, később a javításoknál is nehéz lehet haladni.

Szerintem az ideális kivitelező nem akar mindent azonnal megcsinálni. Előbb megérti a célt. Megmondja, ha egy mező felesleges, ha egy lépés túl bonyolult, vagy ha a kívánt működés később hibát okozhat. Ez nem akadékoskodás. Ez a munka része.

Minőség és gyakori hibák az űrlapoknál

Sokan ott hibáznak, hogy az űrlapot saját maguknak tervezik, nem a felhasználónak. A megrendelő pontosan tudja, mit jelent egy belső kifejezés, de a látogató nem. Ezért a mezőneveknek egyszerűnek kell lenniük. A hibaüzenetek legyenek konkrétak. Ne csak az jelenjen meg, hogy hibás adat. Jobb, ha a rendszer megmondja, melyik mezőben van gond, és mit kell javítani.

Gyakori probléma a túl sok kötelező mező. A másik gond a gyenge mobilnézet. Egy űrlap asztali gépen még rendben lehet, de telefonon már túl kicsi a mező, nehéz a választás, vagy rosszul működik a dátumválasztó. Az ilyen hibák nem mindig látszanak első ránézésre. Ezért kell valódi eszközön tesztelni.

Az adatvédelem sem mellékes. Ha a felület személyes adatokat kér, akkor a beküldésnek és a tárolásnak is rendezettnek kell lennie. Nem minden egyszerű űrlap igényel bonyolult rendszert, de a megrendelőnek tudnia kell, hova kerülnek az adatok, ki kap értesítést, és meddig maradnak meg.

Anyagok átadása és javítások

A munka akkor halad gyorsan, ha a megrendelő előre összegyűjti az anyagokat. Kellhet mezőlista, példa szöveg, meglévő oldal hozzáférése, arculati anyag, korábbi hibaleírás vagy egy egyszerű rajz. Nem baj, ha ez nem tökéletes. A szakember ebből már tud kérdezni, és össze tudja rakni a működési tervet.

A javításoknál érdemes különbséget tenni hiba és új igény között. Ha egy mező nem úgy működik, ahogy a leírásban szerepelt, az javítás. Ha később új lépés, új mező vagy új értesítési szabály kell, az már bővítés. Ez nem vita kérdése, hanem tiszta munkakeret. Így mindkét fél tudja, mire vállalt feladatot.

A kész eredményt általában tesztelt működéssel, rövid leírással és szükség esetén hozzáférési vagy beállítási információkkal adja át a kivitelező. Jó, ha a megrendelő kap egy rövid útmutatót is arról, mit tud később saját maga módosítani, és mihez kell újra fejlesztő. Ez különösen hasznos akkor, ha az űrlap később bővülni fog.

Távoli együttműködés űrlapfejlesztésnél

Az online együttműködés előnye, hogy gyorsan lehet egyeztetni, képernyőképet küldeni, próbaverziót ellenőrizni és javításokat kérni. De csak akkor működik jól, ha a feladat nincs szétszórva sok külön üzenetben. Jobb egy közös leírás, ahol látszanak a mezők, az állapotok, a határidők és a nyitott kérdések.

Rövidebb munkánál egy-két nap is elég lehet. Összetettebb adatlapnál vagy felhasználói panelnél több körös egyeztetés kell. Ilyenkor érdemes először egy alapverziót elkészíteni, majd használat közben pontosítani a részleteket. Nem minden döntést lehet jól meghozni az elején. De az alaplogikát akkor is tisztázni kell.

Az Űrlapok és elemek akkor működnek jól, ha a felhasználó szinte nem is gondol rájuk. Kitölti, elküldi, visszajelzést kap, és érti, mi történt. Ez egyszerűnek hangzik. A háttérben viszont sok apró döntés van, amelyet érdemes szakemberre bízni, ha a felület fontos szerepet kap az ügyfélszerzésben vagy az online ügyintézésben.