4 formanyomtatvány UX tipp, amit tudnia kell (példákkal)
A formákra gondolunk, mint egyszerűen a felhasználói adatok összegyűjtésének eszközévé, de néha egyféleképpen is az egyetlen módja, a felhasználók számára csatlakozzon hozzánk. Valószínűleg félrevezető, ha azt gondoljuk, hogy tudjuk a felhasználókat szeretet űrlapok kitöltése, de ez minden bizonnyal lehetséges olyan megoldásokat találni, amelyek nem bosszantják őket túlságosan, és segítsen nekik a folyamat során.
A net böngészése során néha meglepő megoldásokat találunk, amelyek programszerűen helyesek, de a legvalószínűbbek sok felhasználó elhagyja a webhelyet a rossz felhasználói élmény miatt.
Ha űrlapunkat jól tervezzük, nemcsak a felhasználókat, hanem a backend csapatot is megcsinálhatjuk sokkal kevesebb felhasználói beviteli hiba. Így ebben a cikkben megnézzük, hogyan tudunk minimalizálja a felhasználói beviteli hibákat és még mindig tartsuk boldog felhasználóinkat.
A felhasználói igények előrejelzése
Weboldalak és alkalmazások vannak különböző felhasználói bázisok és célok, és még ugyanaz a hely is számos olyan formát tartalmazhat, amely különböző adatokat gyűjt, csak a leggyakoribbak megnevezéséhez:
- Bejelentkezési űrlapok
- Regisztrációs űrlapok
- Felhasználói profilok
- Hírlevél regisztrációs űrlapok
- Checkout űrlapok
- Felhasználói felmérések
- Kapcsolattartó űrlapok
- Megjegyzési űrlapok
- Keresési űrlapok
Mindezek a típusok különböző dolgokat igényelnek. A fizetési űrlap tervezésekor elengedhetetlen, hogy hitelesen biztosítsuk a felhasználóknak a biztonságot, míg megjegyzések formájában jó ötlet, hogy emojisok hozzáadása vagy más módszerek, amelyek lehetővé teszik a felhasználók számára, hogy kifejezzék tényleges hangulatukat.
Azonban még a hasonló űrlaptípusokat is meg kell tervezni másképp, mivel az összes webhely rendelkezik egyedi felhasználói bázis. Mielőtt elkezdené a tervezési folyamatot, mindig jó ötlet előre jelezzük, amit a felhasználók igényelnek, és tervezzen.
Példa: Társadalmi bejelentkezések a felhasználói igényekre
A Codepen bejelentkezési űrlapja három társadalmi bejelentkezést tartalmaz a Github tetején. Ez a választás ésszerűtlen lenne a legtöbb webhely esetében.
De tökéletes a Codepen számára, mivel felhasználói bázisuk olyan fejlesztőkből áll, akik közül sokan be akarnak jelentkezni a Github-fiókjukkal, vagy egyszerre összekapcsolják egymással a fejlesztési fiókjukat.
Gondolkozz először Mobile-el
A mobil és asztali felhasználóknak eltérő igényeik vannak, de mint az űrlapok kitöltése sokkal nagyobb kihívást jelent egy mobil képernyőn, kézmozdulatok használata, mint egy fizikai billentyűzeten, a mobil első megközelítés tovább használhat, ha használható formákat kívánunk megtervezni.
Ezen túlmenően, sok olyan formátumú felhasználói felület mintázat, amelyek jól működnek a mobilon, jól működnek az asztalon is.
Példa: Tappable Controls
A kiváló minőségű mobil formákat nem lehet elképzelni látható kezelőszervek amelyen a mobil felhasználók könnyen érintsék meg az ujjaival.
A webes tervezési konferencia hírlevél-formanyomtatványa Az Event Apart alkalmazkodik ahhoz, ahogyan a mobil felhasználók hozzáférnek a képernyőhöz - benne van két könnyen érthető beviteli mező és a ujjhegyes méretű gomb.
A szövegbeviteli mezők magasabbak a szokásos módon, hogy a mobil felhasználók könnyen érintsék meg őket, és a nagy, narancssárga gomb a kullancs ikonnal tovább ösztönzi a felhasználókat az űrlap benyújtására..
A webhely asztali verziója ugyanazt a formát alkalmazza, mivel jól néz ki és jól működik a nagyobb képernyőkön.
Példa: Bővíthető bemenet
A mobil formanyomtatványok tervezésénél mindig fontos, hogy mérlegeljük, hogyan lehet minimalizálja az általunk használt helyet. A felhasználható bevitel Az UI tervezési mintázata mostanában igen népszerűvé vált, és különösen jól működik a mobilon.
A Booking.com ezt a mintát a mobil oldalon lévő keresési űrlapon használja. Amikor a felhasználó megérinti a keresési mezőt, akkor kibővül annak érdekében, hogy hagyjon több helyet a gesztusok számára, és egy kiválasztott lista ajánlásokkal is megjelenik.
Amikor a felhasználó megérinti a mezőt, csökken, és az extra információ eltűnik.
Példa: Morphing gomb
Morphing gombok egy lépéssel távolítsuk el az újrafelhasználható bemeneti mintát, mivel a felhasználók először egy gombot látnak, ami akkor következik be egy formába amikor megérinti.
Az alábbi kép a The Startup innovatív formanyomtatványról szóló ragyogó cikkéből származik, amely számos más kreatív megoldást is tartalmaz.
A bemeneti bevitel megkönnyítése
Hosszú formák hajlamosak megakadályozni a felhasználókat. A legjobb, amit tehetünk csak azt a bemenetet kérje, amire szükségünk van. Ez nemcsak a felhasználói élmény szempontjából fontos, de a felhasználók is habozás nélkül adhatnak túl sok személyes adatot adatvédelmi aggályok.
Néha azonban mi még mindig hosszabb formában kell mennie. Ebben az esetben jó ötlet szeleteljük őket kisebb darabokra, és szolgálja a darabokat egymást követő képernyőként.
Számos e-kereskedelmi webhely (például az Amazon) használja ezt a megoldást, hogy csökkentsék a kocsi elhagyási arányait.
Ha megkönnyítjük az űrlapmezők kitöltését, akkor a hüvelykujj szabálya csökkentse mind a zavaró tényezőket, mind a felhasználói műveleteket amennyire csak lehetséges.
Példa: Személyre szabott beviteli választó
A különböző tartalomkiválasztók, mint például a dátumkiválasztók vagy a színválasztók, nemcsak megkönnyítik a megfelelő bemenetet, hanem az űrlapot is vonzóbb, és jelentősen csökkenti a felhasználói hibákat.
A Todoista listázási alkalmazás személyre szabott tippeket ad a dátumválasztó belsejében, amikor a felhasználó áthalad a napokon.
Például az alábbi képernyőképen a felhasználó láthatja, hogy augusztus 31-én már 2 kellő feladata van, és ezt az információt figyelembe veheti a feladatok megfelelő időpontjának meghatározásakor. Ez egy kiváló ötlet egy alkalmazás számára, ahol a termelékenység a felhasználó fő problémája.
Példa: Drag-and-Drop bemenet
Drag-and-drop minták rendszerint jól működik a fájl feltöltési mezőkkel, különösen akkor, ha a felhasználóknak képeket kell feltölteniük.
Valószínűleg nem csökkentik a felhasználói akciókat, mint a szokásos Fájl feltöltése gomb, de sokkal könnyebbé teszik válassza ki, hogy melyik fájlt kívánja feltölteni a felhasználó, ezért csökkenti a rossz fájl benyújtásának esélyét.
A WordPress.com elegáns és intuitív felhasználói beviteli felületet biztosít a szerkesztő formában. A kis bélyegképek és a a már feltöltött fájlok vizuális megjelenítése további segítséget nyújt a felhasználóknak a feltöltés gyors végrehajtásához.
Példa: Átfedés a zavaró események eltávolítására
Ha a felhasználók a formanyomtatvány kitöltésekor elterelik a figyelmet, inkább hajlamosak a hibákra, és könnyebben bosszantanak
Tartalom átfedések nagyszerű alternatívája a minimalista forma kialakításának. Ezeket használják összetettebb helyszíneken amely különböző információkat jelenít meg ugyanazon a képernyőn.
Az alábbi képernyőn látható a Booking.com asztali verziója. Amikor a felhasználók a keresési űrlapon lebegnek, a többi tartalom megkapja szürkés borítással borított segíteni nekik folyamatosan összpontosítson az űrlap kitöltési folyamatára.
Adjon visszajelzést a felhasználóknak
A megfelelő visszajelzés a megfelelő időben jelentősen javíthatja a felhasználói élményt.
Az űrlaptervezésben vannak kétféle felhasználói visszajelzés:
- Visszajelzés előtt űrlap benyújtása - azért, hogy csökkenti a hibákat és az elhagyási arányokat, mint például a haladáskövetők, az azonnali bevitel ellenőrzése, amely azonnal jutalmazza a felhasználókat a helyes bevitelért vagy a segítő eszköztippekért
- Visszajelzés után űrlap benyújtása - annak érdekében, hogy a felhasználók tudják hiba történt, például hibaüzenetek
A felhasználók által igényelt visszajelzések nagymértékben függenek a célközönség jellemzőitől és webhelyünk céljától.
Példa: Progress Tracker
Az egy oldalnál hosszabb formanyomtatványok, mint például a felmérések és a legtöbb e-kereskedelmi fizetési űrlap, kihasználhatják a haladáskövető tervezési minta. A haladás követői egy azonnali vizuális visszajelzés a felhasználóknak az állapotukról, és ösztönözzék őket arra, hogy folytassák a folyamatot.
A SnapSurveys felmérés készítő webalkalmazása egy kis előrehaladási nyomkövetőt jelenít meg közvetlenül a küldési gombok felett, hogy a felhasználók meg tudjanak természetesen elkapni.
előrehaladása nyomkövető nem használ semmilyen címkét, hanem azt, ahogyan azt tervezte egyértelművé teszi a célját - a körök száma jelzi a lépések számát, a már végrehajtott lépések kékre válnak, és a felhasználók könnyen láthatják, hogy hány lépés van még előttük.
Példa: Valós idejű ellenőrzés
A Body Shop kozmetikai kiskereskedő használja valós idejű validálás a felhasználói profil formában a hibák kiküszöbölésére és az űrlap kitöltési folyamatának UX javítására.
A bevitelt ellenőrzik, miközben a felhasználók kitölti az űrlapot, és a helyes és rossz válaszokat azonnal jelzi könnyen megkülönböztethető ikonok egy kicsit jobbra, de még mindig látható helyen.
Példa: Kifejező eszköztippek
Megérthető mikroszkópia a formanyomtatványban a sikeres felhasználói visszajelzések fontos része is. Definíció szerint a weboldal mikropopiája áll kis darabok különböző elemek - címkék, gombok, hibaüzenetek, eszköztippek stb.
A bejelentkezési űrlapon a Barclay bankcsoportja válaszol a felhasználók által feltett kérdésekre jól megtervezett eszköztippek amely tartalmazza a következőket: könnyen érthető mikroszkópia.
Az eszköztippek elrejtve vannak? ikonok nem zavarja a felhasználókat aki tudja, hogyan kell kitölteni a bejelentkezési űrlapot, de hogy mindig jelen legyen a bizonytalan felhasználók számára.
Néhány eszköztipp is tartalmaz egy kicsit vizuálisan egy megjegyzett betéti kártya hogy a felhasználók könnyen megtalálhassák azokat az adatokat, amelyekre be kell jelentkezniük a bejelentkezési űrlapba.
