A látogatód két másodperc alatt átfutja az űrlapodat, mielőtt egyetlen karaktert beírna. Elolvassa a mezők méretét, a térközöket, az elrendezést. Egy irányítószám-mező, amely olyan széles, mint az egész űrlap, zavart sugall. Egy egysoros szövegterület a részletes visszajelzéshez azt üzeni, hogy nem sokat vársz.
A beviteli mező szélessége megmondja a felhasználónak, mennyi szöveget vársz tőle. Egy apró szövegdoboz azt jelzi: "add meg a neved". Egy magas szövegterület azt jelzi: "mesélj a történetedről". Ha ezt elrontod, zavart, gépelési erőfeszítést és az űrlap félbehagyását kéred magadra.
Az űrlapod kétféle szövegbeviteli mezőt tartalmaz: az egysoros beviteli mezőt és a többsoros szövegterületet. Másképp néznek ki, másképp viselkednek, és más problémákat oldanak meg. A megfelelő kiválasztása nem bonyolult, de számít abban, hogyan érzékelik a felhasználók az űrlapodat, és kitöltik-e.
Mi az a szövegbeviteli mező
A szövegbeviteli mező egysoros doboz, amelybe a felhasználók rövid szöveget gépelnek. Nem tör új sorba, amikor eléred a szélét. Nem támogat több bekezdést. Nyomj Entert, és az űrlap beküldődik (vagy a következő mezőre lép). Korlátozott, rövid adatokhoz tervezték.
A szövegbeviteli mező mentális szerződést kényszerít a felhasználóra. Valami gyorsat kérsz. Egy nevet. Egy e-mail-címet. Egy irányítószámot. Egy dátumot. Egyetlen információt.
Mi az a szövegterület
A szövegterület többsoros szövegdoboz, amely a gépelés közben bővül. Nyomj Entert, és új szövegsort kapsz. Függőlegesen görget, amikor a tartalom meghaladja a látható területet. Azt jelzi a felhasználónak, hogy néhány szónál többet vársz. A bekezdések szívesen látottak. Részletes gondolatok várhatók.
A szövegterület megszünteti a megkötést. A felhasználó tudja, hogy annyit írhat, amennyire szüksége van, anélkül, hogy a válaszát egyetlen sorba zsúfolná.
Mikor használj egysoros szövegbeviteli mezőt
Használj szövegbeviteli mezőt, ha a várt válasz elfér egy sorban, és a felhasználó néhány szóval vagy kevesebbel válaszolhat.
Elérhetőségi adatok
Név, e-mail-cím, telefonszám. Ezek a mezők mindig egysoros bevitelek. A felhasználó azt várja, hogy beír egy nevet, és megy tovább, nem pedig szövegszerkesztőt nyit a telefonszámához.
Rövid azonosítók
Felhasználónév, fiókszám, irányítószám, jelszó. Ezeknek meghatározott hosszuk van, vagy rövidnek kell lenniük. Az egysoros bevitelnek van értelme.
Hely- és logisztikai mezők
Város, állam, ország, utca (első sor). Ezek jellemzően egysoros bevitelek. A címet több egysoros mezőre bonthatod egyetlen nagy szövegterület helyett.
Keresés és szűrés
Keresőmezők. Termékszűrők. Dátumtartományok. Ezek gyors bevitelt várnak, nem bekezdést. Az egysoros bevitel jónak érződik.
Dátumok és számok
Bármely mező, ahová a felhasználó konkrét dátumot, időt, mennyiséget vagy árat ír be. Egysoros bevitel. Néha speciális beviteli típust szeretnél a dátumokhoz (például dátumválasztót), de az interakciós modell továbbra is egysoros.
Mikor használj szövegterületet
Használj szövegterületet, ha azt várod, hogy a felhasználó egynél több mondatot ír, vagy ha a válasz természetesen hosszabb egy sornál.
Megjegyzések és visszajelzés
Ha azt kérdezed: "Milyen visszajelzésed van?", a felhasználó bekezdésekben gondolkodik, nem egyetlen szavakban. A szövegterület azt jelzi, hogy van hely a teljes gondolatának. Nem fogja szűkösnek érezni.
Üzenet- és érdeklődési űrlapok
Amikor egy látogató kitölti a kapcsolatfelvételi űrlapot üzenetmezővel, helyre van szüksége, hogy elmagyarázza a helyzetét. A szöveg mennyisége nagyon változó. Egy szövegterület elbír egy kétmondatos gyors kérdést és egy kétbekezdéses részletes kérést is.
Leírás és részletek mezők
Termékleírások, projektleírások, szolgáltatási követelmények. Bármely mező, amely kontextust vagy részleteket kér a felhasználótól. A szövegterület meghívja ezeket a részleteket.
Jegyzetek és különleges utasítások
Egy olyan mező, amely azt mondja: "Add meg a különleges kéréseidet" vagy "Bármilyen megjegyzés a szállításhoz", gyakran szövegterületet igényel, mert nem tudod megjósolni, hogy a felhasználónak két szava vagy két bekezdése van-e hozzáadni.
A méretelv: a mező szélessége utal a várt hosszra
A mező mérete üzenetet küld, mielőtt a felhasználó egyetlen karaktert beírna. Egy irányítószám-mező, amely az egész űrlap szélességét átfogja, zavart kelt. A felhasználó látja azt a sok helyet, és azt gondolja: "félreértettem, mit kérsz?"
Használd ezt a szabályt: a mező vizuális méretének illeszkednie kell a válasz várt hosszához.
Rövid szövegbeviteli mezők
Irányítószámhoz tedd keskennyé a beviteli mezőt. Talán 80-120 pixel szélesre asztali gépen. Ez a vizuális jelzés azt mondja a felhasználónak: "négy számjegyet írj, ne bekezdést".
Név mezőhöz használj közepes szélességet. Talán 200-300 pixelt. Elég hosszú a "Alexander Thompson" névhez, de nem olyan széles, hogy életrajzot hívna.
Szövegterületek
A szövegterületek vízszintesen és függőlegesen is bővülnek. Egy négy sor magas szövegterület nagyobb választ jelez, mint egy két sor magas. Illeszd a szövegterületet a várt erőfeszítéshez.
Ha néhány mondatot vársz, kezdj három-öt látható sorral. Ha részletes visszajelzést kérsz, kezdj hat-nyolc sorral. A felhasználók átméretezhetik a mezőt, ha több helyre van szükségük, de a kezdeti méret állítja be az elvárásukat.
Tervezési szabályok a szövegbeviteli mezőkhöz
Mindig párosítsd címkével
Soha ne használj helyőrző szöveget látható címke helyett. A helyőrző szöveg eltűnik, amikor a felhasználó gépelni kezd, ami rontja az akadálymentességet, és találgatásra hagyja a felhasználót, mit kért a mező. Használj világos címkét a mező fölött vagy mellett, a helyőrző szöveget pedig csak gyengéd tippként.
Rossz példa: Egy mező címke nélkül, csak szürke helyőrző szöveggel: "Írd be a neved".
Jó példa: Egy "Név" címke a bevitel fölött, opcionális helyőrző szöveggel, például "Kovács János".
Jelezd világosan a kötelező mezőket
Jelöld a kötelező mezőket csillaggal (*) vagy a "(kötelező)" szóval zárójelben. Ne hagyd a felhasználókat találgatni, hogy egy mező nem kötelező-e.
Validálj korán, javíts kíméletesen
Ha a felhasználó érvénytelen e-mail-címet vagy rosszul formázott telefonszámot ír be, ne töröld a bevitelét. Mutass hibaüzenetet, amely konkrétan elmagyarázza a problémát, és tartsd meg a részleges bevitelt, hogy kijavíthassa, ne elölről kelljen újragépelnie.
Támogasd a várt beviteli típust
E-mailhez használd a type="email" értéket, hogy a mobilos felhasználók e-mailre optimalizált billentyűzetet kapjanak. Telefonhoz használd a type="tel" értéket. Számokhoz a type="number" értéket. Ezek a speciális beviteli típusok javítják a mobilos élményt, anélkül, hogy többletmunkát adnának neked.
Tervezési szabályok a szövegterületekhez
Hagyd, hogy a szövegterület növekedjen a tartalommal
Ha a felhasználó hosszú üzenetet ír, és a szövegterület rögzített méretű marad, gépelés közben a mezőn belül kell görgetnie. Ez megtöri az írási élményt. Használj CSS-t vagy JavaScriptet, hogy a szövegterület automatikusan bővüljön, ahogy a felhasználó több sort ad hozzá. Természetesen gépelnek, a mező nő, nincs görgetés magán a mezőn belül.
Mutasd világosan a kezdeti méretet
A szövegterületnek elég látható magassággal kell rendelkeznie ahhoz, hogy jelezze, egynél több sort vársz. Mutass legalább három-öt sornyi üres helyet, hogy a felhasználók megértsék, ez nem egysoros mező.
Állíts be ésszerű karakterkorlátot, ha szükséges
Egyes szövegterületeknek korlátjuk van. Egy ügyfélszolgálati űrlap korlátozhatja a visszajelzést 5000 karakterre. Ha van korlát, mutasd a hátralévő karakterszámot, ahogy a felhasználó gépel. Hagyd, hogy lássák, mennyi helyük maradt, ne akkor derüljön ki, amikor falba ütköznek.
Használj egyenközű betűtípust kódhoz vagy technikai bevitelhez
Ha a szövegterület kódrészletekhez vagy technikai adatokhoz való, használj egyenközű betűtípust, hogy a térközök és az igazítás vizuálisan számítsanak. Normál szöveghez, például üzenetekhez vagy visszajelzésekhez használd az alapértelmezett talpatlan betűtípust, amely illik a márkádhoz.
Gyakori hibák a szövegbeviteli mezőkkel
Minden szövegmező ugyanolyan széles
Ha az űrlapod minden beviteli mezője ugyanolyan széles, elveszíted a várt hosszra utaló vizuális jelzést. Egy irányítószám-mező ne legyen olyan széles, mint egy névmező. Hagyd, hogy a méret közölje az elvárást.
Helyőrző szöveg használata címkék helyett
Ezt fentebb már említettük, de kritikus. A helyőrző szöveg tippként hasznos, nem címkeként. A képernyőolvasót használó felhasználó nem látja a helyőrző szöveget. Az a felhasználó, aki kitöltött néhány mezőt, és visszatért, elfelejti, mit kért a mező.
A validálási hibák nem a kontextusban jelennek meg
Ha a felhasználó érvénytelen e-mailt ír be, és a hibaüzenet az űrlap tetején jelenik meg, miközben az e-mail mező alul van, görgetnie kell a probléma megtalálásához. Tartsd a hibaüzeneteket az őket kiváltó mező közelében, színnel (piros vagy narancs) és egy "valami nincs rendben" ikonnal.
Nincs visszavonás a törlésnél
Ha a felhasználó véletlenül kitöröl egy mezőt, vagy az űrlapon van egy "Törlés" gomb, amely mindent töröl, gondoskodj arról, hogy visszavonhassa ezt a műveletet. Egyetlen gombnyomás ne semmisítsen meg öt percnyi űrlapkitöltő munkát.
Gyakori hibák a szövegterületekkel
Rögzített méretű szövegterületek, amelyek nem bővülnek
Egy szövegterület, amely ugyanakkora marad, miközben a tartalom túlcsordul, és görgetést igényel, apró ablakba kényszeríti a felhasználót a gépeléshez. Az élménye elromlottnak érződik. Tedd bővülővé a szövegterületet a tartalommal.
Nincs egyértelmű jelzés a karakterkorlátról
Ha a szövegterületednek maximális hossza van, a felhasználónak tudnia kell róla, mielőtt eléri. Mutass karakterszámlálót, amely gépelés közben frissül. Az "500 karakter maradt" vagy az "5000 karakterből 2" azonnal megmondja, mennyi helye van.
Túl kicsi a kezdeti méret
Egy csak egy sor magas szövegterület nem azt közli, hogy "a részletes visszajelzésedet kérem". Úgy néz ki, mintha még mindig egysoros mező lenne. Kezdj legalább három-négy látható sorral, hogy a felhasználó megértse, többet írhat.
Példák: beviteli mező vagy szövegterület a gyakorlatban
Kapcsolatfelvételi űrlap
Név mező: egysoros beviteli mező. Elég széles egy hosszú névhez, de elég keskeny ahhoz, hogy azt jelezze: "csak a neved".
E-mail mező: egysoros beviteli mező type="email" értékkel.
Telefon mező: egysoros beviteli mező type="tel" értékkel.
Üzenet mező: szövegterület, elég magas néhány bekezdéshez.
Termékértékelő űrlap
A neved: egysoros bevitel.
Az e-mail-címed: egysoros bevitel type="email" értékkel.
Értékelés (1-5 csillag): speciális beviteli típus, de nem szövegterület.
Az értékelésed: szövegterület.
Másoknak is ajánlanád: jelölőnégyzet, nem szövegbevitel.
Fizetési űrlap
Keresztnév, vezetéknév, e-mail-cím, telefonszám: mind egysoros bevitel.
Szállítási cím (utca, város, állam, irányítószám): jellemzően több egysoros bevitel, nem egyetlen szövegterület a teljes címhez.
Különleges szállítási utasítások: szövegterület. A felhasználónak egy mondata vagy három mondata lehet az igényeitől függően.
WEMASY űrlapok: beviteli mezők és szövegterületek építése
A WEMASY űrlapépítője szövegbeviteli és szövegterület mezőket is tartalmaz. Amikor mezőt adsz az űrlapodhoz, a mezőtípust aszerint választod, mit kérsz.
Egy WEMASY kapcsolatfelvételi űrlaphoz szövegbevitelt adnál a látogató nevéhez és e-mail-címéhez, majd szövegterületet az üzenetéhez. A WEMASY automatikusan kezeli a stílust, így a beviteli mezőid és szövegterületeid illeszkednek a márkaszíneidhez és tipográfiádhoz. Te a megfelelő kérdések feltevésére összpontosítasz. Az űrlapépítő kezeli az elrendezést és a mezők viselkedését.
Ha speciális bevitelre van szükséged (például dátumválasztóra vagy e-mail validálásra), a WEMASY azt is támogatja. A mező mérete, viselkedése és validálása együtt irányítja a felhasználót a befejezés felé.