10 A felhasználóbarát webes formák előállítására vonatkozó szabályok

Sep 14, 2025

kézikönyv

Illustration of web forms on an iMac and tablet

Az emberi-számítógépes interakció kialakulása ellenére az űrlapok továbbra is az egyik legfontosabb kölcsönhatás a felhasználók számára. Azok az emberek, akik alkalmazást vagy webhelyet használnak, különös cél, és gyakran a felhasználó és a céljuk között álló dolog egy űrlap. Minden nap használjuk őket mi alapvető tevékenység - a teljes vásárlások, hogy iratkozzon fel a szociális hálózatok, hogy visszajelzést adjon a termék általunk vásárolt, és így tovább - ők egy hatalmas része felhasználói tapasztalat .

Ennek eredményeképpen nagyon fontos számunkra, hogy gyorsan és zavartalanul töltsék be az online űrlapokat. Minél kevesebb erőfeszítéssel kell töltenünk, a boldogabbak vagyunk. Tervezők és fejlesztőként törekednünk kell gyorsabban, könnyebb és produktívabb formában a felhasználók számára.

A második cikkemben a jobb formák megteremtése ( Keresse meg az elsőt itt ) Itt vannak 10 tipp a felhasználóbarát formák tervezéséhez. Nem elég, amit keres? Lehet, hogy szüksége van az útmutatókra a tetejére weboldal építője vagy felhő tároló szolgáltatás.

01. Csak kérdezze meg, mi szükséges

A szükséges információk mennyiségének csökkentése megkönnyíti az űrlapot. Mindig megkérdeznie kell, hogy miért és hogyan használják a kérésedet. Próbálja meg minimalizálni a mezők számát, amennyire csak lehetséges, mert minden egyes űrlaphoz hozzáadott mező befolyásolja a konverziós arányát. A kérdések és mezők számának korlátozása kevésbé betöltötte az űrlapot, különösen akkor, ha sok információt kér a felhasználóktól.

02. Rendelje meg a mezőket logikusan

Screenshot compares two forms - one with fields in an odd order, one with headings explaining field groupings, ordered logically — Gondolj az űrlapot, mint egy beszélgetés; szeretné csoportosítani és megrendelni a mezőket olyan sorrendben, amelynek értelme van a felhasználónak

Hasznos gondolkodni egy formában, mint a beszélgetéshez hasonlóan. Mint bármilyen normális beszélgetés, azt két fél közötti logikai kommunikációnak kell képviselnie: egy személy és az alkalmazás. A részleteket olyan sorrendben kell kérni, amely logikus a felhasználó perspektívájából, nem az alkalmazás vagy az adatbázis. Például szokatlan, hogy valaki címét kérje a nevük előtt.

Ez is nagyon fontos, hogy a csoportosított kérdéseket a blokkokban, így a következő kérdésekről a következőre jobban hasonlítanak a beszélgetéshez. A kapcsolódó mezők csoportosítása szintén segít a felhasználóknak az általuk meg kell tölteniük.

A fenti ábra két regisztrációs űrlap példái. A hosszú formák túlterheltek, ha nem csoportosítják a kapcsolódó mezőket - hasonlítsa össze a bal oldali űrlapot a jobb oldali jobb verzióhoz.

A csoportosítást vizuálisan és a kódexben kell elvégezni. Például használhatod a & lt; fieldset & gt; és & lt; Legend & Gt; Elemek kapcsolódó formanyomtatványok ellenőrzéséhez:

 & lt; fieldset & gt;
  & lt; Legend & Gt; Személyes adatok: & LT; / Legend & Gt;
  & lt; div & gt;
    & lt; címke = "first_name" & gt; keresztnév & lt; / Label & gt;
    & lt; input type = "szöveg" név = "First_name" id = "first_name" & gt;
  & lt; / div & gt;
  & lt; div & gt;
    & lt; címke = "last_name" & gt; vezetéknév & lt; / Label & gt;
    & lt; input type = "szöveg" név = "last_name" id = "last_name" & gt;
  & lt; / div & gt;
    & lt; címke = "nemi" & gt; szakma & lt; / Label & gt;
    & lt; input type = "szöveg" név = "szakma" id = "szakma" & gt;
  & lt; / div & gt;
& lt; / fieldset & gt;

03. A címkék rövidítése

A Field Címkék megmondják a felhasználóknak, hogy milyenek a megfelelő bemeneti mezők. A Clear címke szövege az egyik elsődleges módja annak, hogy az UIS hozzáférhetőbbé váljon. A címkék elmondják a felhasználónak a mező célját, de nem segítenek a szövegeket. Ezért, biztosítva, hogy átvizsgálja könnyen prioritás - meg kell tervezni tömör, rövid és leíró címkék (tartani őket, hogy egy-két szót).

04. Ne másolja a mezőket

Screenshot compares bad and good forms - the bad asks users to retype their email and retype their password — Ne tegye meg a felhasználók írásban kétszer - csak az idejük pazarlásával megrontja őket

Ez a probléma különösen gyakori a regisztrációs formák: szinte mindenki találkoznak olyan formában, amely előírja, hogy írja be az e-mail cím vagy jelszó kétszer. Történelmileg ezt tervezték, hogy megakadályozzák a hibás hibákat. Azonban a legtöbb felhasználó egyszerűen másolja be a szükséges mezőt, amikor az alkalmazás megengedte. És ha az eredeti mező adatai hibát tartalmaztak, akkor duplikálták.

05. Jelölje ki az opcionális mezőket

Ideális esetben a legjobb, ha nincs opcionális mezők. Az 1. szabály számával összhangban, ha egy információ nem szükséges, nincs értelme a felhasználó idejének pazarlásában. De ha használod őket, akkor egyértelműen meg kell különböztetni, hogy melyik bemeneti mezők nem hagyhatók üresen. Általában egy kis jel, mint egy csillag (*) vagy "opcionális" címke.

06. Legyen óvatos az alapértelmezett értékekkel

Kerülje el a statikus alapértelmezettet, hacsak úgy véli, hogy a felhasználók nagy része (pl. 90 százalék) kiválasztja ezt az értéket - különösen, ha ez egy kötelező mező. Miért? Ezzel a megközelítéssel valószínűleg hibákat vezet be, mert az emberek gyorsan beolvasják az űrlapokat online. Ne feltételezzük, hogy időt vesz igénybe az összes választáson keresztül. Lehet, hogy kiugrottak valami, ami már rendelkezik értékkel.

Az egyetlen kivétel ez a pont az intelligens alapértelmezett értékek - mint azok, amelyek elősegítik a felhasználó országát a geolocation adataik alapján - ami gyorsabban és pontosabban befejezheti az űrlapot. De tovább kell használnia ezeket óvatosan, mert a felhasználók hajlamosak elhagyni az előre beállított mezőket, ahogy vannak.

07. Minimalizálja a gépelés szükségességét

A gépelés lassú és hibamellenes folyamat, és különösen fájdalmas egy mobilon, ahol a felhasználók szembesülnek a korlátozott képernyős birtokok korlátaival. És egyre több embert használ a kis képernyők, bármi, ami megtehető, hogy megakadályozza a felesleges gépelés javítja a felhasználói élményt. Adott esetben olyan funkciókat használhat, mint az Automatikus kiegészítés és az adatfelvétel az adatokhoz, így a felhasználóknak csak a csupasz minimális információig kell beírniuk.

A címadatok kitöltése gyakran az online regisztrációs űrlap leginkább nehézkes része, több mezőnek, hosszú neveknek és így tovább. Mentse a felhasználókat abban, hogy be kell írniuk a teljes címükbe, az előtépések végrehajtásával ezeknek a mezőknek. Könyvtárak, mint a Google Térkép egyszerű JavaScript API-t kínál elérni ezt. tudsz Itt talál egy munkadarabot .

08. Használjon valós idejű érvényesítést

Illustration shows two fields filled with green ticks beside them, one field filled but with a red x beside it — Figyelmeztesse a felhasználókat, ha hibát követnek el - ne várjanak, amíg elvégezték az egész formát

Egy ideális világban a felhasználók a szükséges információkat kitöltenek, és sikeresen befejezik munkájukat, de a valós világban az emberek gyakran hibákat okoznak. Ez frusztráló, hogy átmenjen a teljes formanyomtatvány kitöltésének folyamatánál, hogy megtudja a hibát követően.

A megfelelő idő, hogy tájékoztassa valakit a megadott adatok sikeréről vagy meghibásodásáról, az adatok benyújtása után. Ez az, ahol a valós idejű érvényesítés jön létre. Figyelmezteti a felhasználókat, hogy azonnal hibázzanak, és lehetővé teszik számukra, hogy gyorsabban kijavíthassák őket, anélkül, hogy meg kell várnunk, amíg meg kell várnunk a "Küldés" gombot.

És ne feledje, az érvényesítésnek nem csak a felhasználóknak kell elmondania, hogy mit tettek rosszul; Azt is meg kell mondania nekik, hogy mit csinálnak. Ez nagyobb bizalmat biztosít a felhasználóknak az űrlapon való áttéréshez.

Petrezselyem Kiváló JavaScript formalizációs könyvtár. Nyílt forráskódú és UX-koncentrált, így szinte minden alapértelmezett viselkedést felülbírálhatja, hogy megfeleljen a pontos igényeknek. A következő kódban egy egyszerű petrezselyem érvényesítési példa egy "üzenet" mezőre. A mezőnek legalább 20 karakternek kell lennie, de legfeljebb 100.

 & lt; címke = "üzenet" & gt; üzenet (20 karakter, 100 max): & lt; / Label & gt;
& lt; textarea id = "üzenet" osztály = "űrlapvezérlés" név = "üzenet" adat-petrezsy-trigger = "Keyup" data-petrezsy-minlength = "20" data-petrezsy-max -MinLength-Message = "Gyerünk! Meg kell adnia legalább 20 karakteres megjegyzést." Data-petrezsy-validációs-küszöbérték = "10" & gt; & lt; / textarea & gt;

tudsz Keresse meg a teljes kódmintát itt .

09. Kerülje a rögzített bemeneti formátumokat

A rögzített formátum kényszerítésének leggyakoribb oka az érvényesítési forgatókönyv korlátozása (a hátsó vég nem tudja meghatározni a szükséges formátumot), amely a legtöbb esetben végrehajtási probléma. Ahelyett, arra kényszerítve a formátum olyasmi, mint egy telefonszámot a felhasználói bemenet, akkor lehetővé kell tennie, hogy átalakítsa, amit a felhasználó belép a kívánt formátumot kijelző vagy tárolni.

10. Ne használjon reset gombokat

Illustration shows Reset button next to a Save button below a form, with a red cross through it — A kis jó valaha is jött, hogy a Submit opció melletti reset gombot is tartalmazza

A reset gomb szinte soha nem segít a felhasználók számára. Nehéz elképzelni, hogy valaki azt akarja, hogy egy gomb, amely visszavonja a munkáját, nem beszélve arra, hogy azt szeretném, hogy azt szeretném, hogy a gomb a gomb mellett üljenek, ami megmenti. A web lesz boldogabb hely, ha gyakorlatilag minden reset gomb eltávolításra került.

Szeretné tudni, hogy a felhasználók válaszolnak a webhelyére? Tisztességes web hosting A szolgáltatás megadja a szükséges elemzést.

Ez a cikk eredetileg megjelent háló , a szakmai webes tervezők és fejlesztők magazinja. Iratkozzon fel itt Netre .

Kapcsolódó cikkek:

29 Webes tervezési eszközök a munkafolyamat felgyorsításához
A 41 legjobb ingyenes web betűtípus
13 legjobb felhasználói tesztelési szoftver

10 A felhasználóbarát webes formák előállítására vonatkozó szabályok

01. Csak kérdezze meg, mi szükséges

02. Rendelje meg a mezőket logikusan

03. A címkék rövidítése

04. Ne másolja a mezőket

05. Jelölje ki az opcionális mezőket

06. Legyen óvatos az alapértelmezett értékekkel

07. Minimalizálja a gépelés szükségességét

08. Használjon valós idejű érvényesítést

09. Kerülje a rögzített bemeneti formátumokat

10. Ne használjon reset gombokat

kézikönyv - Most Popular Articles

6 Gyors tippek az ecset toll rajzának javítása érdekében

Hogyan rajzoljunk egy lovat

Hogyan oldja meg a trükkös tervezési rövid

Hozzon létre saját kalligrafikus kefét az Illustrator-ban

Hogyan festeni egy Elven Maiden

Hogyan készítsünk izzó színeket olajfestékkel

Textúra egy hitelesen viselt K-2SO Droid

Élesítse a csendélet festési képességeit

Kategóriák