4 nasveti za oblikovanje obrazcev, ki jih morate poznati (s primeri)

Običajno razmišljamo o oblikah kot o sredstvih za zbiranje uporabniških podatkov, vendar so včasih tudi ena od možnosti edina pot, za naše uporabnike povežite se z nami. Verjetno je privlačno, če pomislimo, da lahko naredimo uporabnike ljubezen izpolnjevanje obrazcev, vendar je vsekakor mogoče najti rešitve, ki jih ne motijo ​​preveč, in jim pomagajte pri procesu.

Med brskanjem po internetu lahko najdemo včasih presenetljive rešitve, ki so programsko pravilne, vendar so oblikovane tako, da so najverjetneje veliko uporabnikov opusti spletno mesto zaradi slabe uporabniške izkušnje.

Če so naši obrazci dobro oblikovani, bomo lahko ne le zadovoljili naše uporabnike, temveč tudi ekipo, ki se lahko ukvarja veliko manj napak pri vnosu uporabnikov. Tako bomo v tem članku pogledali, kako lahko zmanjšanje napak pri vnosu uporabnika in še vedno zadovoljni.

Predvidite potrebe uporabnikov

Spletne strani in aplikacije imajo različne uporabniške osnove in cilje, in celo na isti lokaciji lahko gostijo številne obrazce, ki zbirajo različne vrste podatkov, samo da bi poimenovali najpogostejše:

• Prijavni obrazci
• Prijavnice
• Obrazci uporabniškega profila
• Obrazci za prijavo na novice
• Obrazci za preverjanje
• Ankete uporabnikov
• Kontaktni obrazci
• Obrazec za komentarje
• Iskalni obrazci

Vse te vrste obrazcev zahtevajo različne stvari. Pri oblikovanju obrazca za prevzem je ključnega pomena, da verodostojno zagotovite uporabnikom varnost, v primeru obrazcev za komentarje pa je dobra ideja dodajte emojis ali druge metode, ki uporabnikom omogočajo, da izrazijo svoje dejansko razpoloženje.

Vendar je treba celo podobne vrste obrazcev oblikovati drugače, saj imajo vsa mesta svoje edinstvena uporabniška baza. Preden se lotite procesa oblikovanja, je vedno dobro, da predvideti, kaj naši uporabniki potrebujejo, in oblikovati ustrezno.

Primer: Socialni prijavi Ciljanje uporabnikovih potreb

Obrazec za prijavo v Codepen vsebuje tri socialne prijave z Githubom na vrhu. Ta izbira bi bila za večino spletnih mest nerazumna.

Toda popoln je za Codepen, njihova uporabniška baza je sestavljena iz razvijalcev, od katerih se bodo mnogi želeli prijaviti s svojimi računi Github, ali pa povezati svoje razvojne račune med seboj hkrati..

Najprej pomisli na mobilni telefon

Uporabniki mobilnih in namiznih računalnikov imajo različne potrebe, vendar imajo dokončanje obrazcev je veliko večji izziv na mobilnem zaslonu, z uporabo gibov z roko kot na fizični tipkovnici, a pristop za mobilne telefone lahko nas popelje še naprej, ko želimo oblikovati uporabne oblike.

Še več, številni obrazci uporabniškega vmesnika, ki delujejo dobro na mobilnih napravah, bodo dobro delovali tudi na namizju.

Primer: Kontrolne tipke

Brez kakovostnih mobilnih oblik si ni mogoče predstavljati vidne kontrole na katerem mobilne uporabnike lahko preprosto dotaknete s prsti.

Obrazec za prijavo na novice na konferenci o spletnem oblikovanju Event Apart se prilagaja načinu dostopa mobilnih uporabnikov do zaslona - vsebuje dve polji za vnos, ki sta preprosta za dotik in a gumb velikosti prsta.

Polja za vnos besedila so običajno višja, tako da jih lahko mobilni uporabniki preprosto dotaknejo, velik oranžni gumb s ikono za kljukice pa uporabnike še naprej spodbuja k predložitvi obrazca..

Namizna različica spletnega mesta uporablja enako obliko obrazca, tudi dobro izgleda in deluje dobro na večjih zaslonih.

Primer: porabljen vhod

Pri oblikovanju obrazcev za mobilne naprave je vedno pomembno razmisliti, kako lahko zmanjšali prostor, ki ga uporabljamo. The vložek UI design vzorec je postal zelo priljubljen v zadnjem času, in deluje še posebej dobro na mobilnih.

Booking.com izkorišča ta vzorec v iskalnem obrazcu na svoji mobilni strani. Ko se uporabnik dotakne iskalnega polja, se razširi, da bi pustite več prostora za kretnje, in spodaj je prikazan seznam za izbiro s priporočili.

Ko se uporabnik izloči iz polja, se skrči in dodatne informacije izginejo.

Primer: Gumb za morfing

Gumbi za preoblikovanje vzemite potrošni vhodni korak še korak dlje, ko uporabniki najprej vidijo gumb, ki ga nato preoblikuje v obliko ko se dotaknejo.

Posnetek spodaj je iz briljantnega članka o inovativnem oblikovanju oblikovanja, ki predstavlja tudi številne druge ustvarjalne rešitve.

Olajšajte vnos prevzema

Dolgotrajne oblike odvrnejo uporabnike. Najboljše kar lahko storimo je vprašajte samo za vnos, ki ga resnično potrebujemo. To ni pomembno le z vidika uporabniške izkušnje, ampak lahko uporabniki prav tako oklevajo, da bi podali preveč osebnih podatkov zasebnosti.

Včasih pa smo še vedno morajo iti skupaj z daljšimi oblikami. V tem primeru je dobra ideja narežite jih na manjše kose, in služi kose kot zaporedne zaslone.

Veliko spletnih mest e-trgovine (npr. Amazon) uporablja to rešitev, da bi zmanjšalo stopnjo opuščanja vozička.

Če želimo olajšati izpolnjevanje polj obrazca, je pravilo palca zmanjšanje motenj in dejanj uporabnikov kolikor je mogoce.

Primer: Personalized Input Picker

Različni izbiralci vsebin, kot so zbiralci datumov ali pobiralci barv, ne omogočajo le lažjega vnosa pravilnega vnosa, ampak tudi obliko obrazca privlačnejši, in bistveno zmanjša napake uporabnikov.

Aplikacija Todoist list-taking daje osebne nasvete v izbirniku datuma, ko se uporabnik dviguje čez dneve.

Na primer, na spodnjem posnetku zaslona lahko uporabnik vidi, da za 31. avgust že ima dve opravilni nalogi in lahko te informacije upošteva pri odločanju o pravilnem datumu za opravila. To je odlična ideja za aplikacijo, kjer je produktivnost glavna skrb uporabnika.

Primer: vnos »povleci in spusti«

Povleci in spusti ponavadi dobro delujejo s polji za nalaganje datotek, zlasti kadar naj bi uporabniki nalagali slike.

Verjetno ne zmanjšajo uporabniških dejanj v primerjavi z običajnim gumbom za nalaganje datotek, vendar je veliko lažje izberite, katero datoteko želi uporabnik prenesti, zato zmanjša možnost predložitve napačne datoteke.

WordPress.com ponuja eleganten in intuitiven vmesnik za vnos uporabniškega vnosa, ki ga lahko povlečete in spustite v obrazcu za urejanje objav. The majhne sličice in vizualno predstavitev že naloženih datotek dodatno pomagajo uporabnikom, da hitro izvedejo nalaganje.

Primer: prekrivanje za odstranjevanje motenj

Če so uporabniki pri izpolnjevanju obrazca zmedeni, so bolj nagnjeni k napakam in se tudi lažje razburjujejo

Prosojnice vsebine so odlična alternativa minimalističnemu oblikovanju obrazcev. Uporabljajo se bolj kompleksnih območij ki želijo prikazati različne vrste informacij na istem zaslonu.

Na spodnjem posnetku zaslona si lahko ogledate namizno različico Booking.com-a. Ko uporabniki preidejo na iskalni obrazec, postane preostala vsebina prekrita s sivim prekritjem jim pomagati osredotočite se na postopek zapolnjevanja obrazcev.

Podajte povratne informacije uporabnikom

Dajanje pravih povratnih informacij ob pravem času lahko znatno izboljša uporabniško izkušnjo.

V obliki obrazca obstajajo dve vrsti uporabniških povratnih informacij:

1. Podane povratne informacije prej oddajo obrazca - Da bi zmanjšanje napak in stopnje opuščanja, kot so sledilci napredka, potrditev takojšnjega vnosa, ki uporabnike takoj nagrajuje za pravilen vnos, ali pripomočke za pomoč
2. Podane povratne informacije po oddajo obrazca - da bi uporabniki vedeli storili so napako, kot so sporočila o napakah

Vrsto povratnih informacij uporabnikov, ki jih naši uporabniki potrebujejo, je zelo odvisno od značilnosti naše ciljne skupine in cilja naše spletne strani.

Primer: sledilnik napredka

Obrazci, ki so daljši od ene strani, kot so ankete in večina obrazcev za preverjanje e-trgovine, so lahko vzvod napredek oblikovalski vzorec. Sledilniki napredka dajejo takojšnja vizualna povratna informacija uporabnike o njihovem statusu in jih spodbuja, da nadaljujejo s procesom.

Spletna aplikacija SnapSurveys anketa ustvarjalca prikazuje malo sledilca napredka tik nad gumbi za pošiljanje, tako da lahko uporabniki seveda ga opazimo.

sledilec napredka ne uporablja nobenih oznak, ampak način, kako je zasnovan jasen - število krogov označuje število korakov, že izvedeni koraki postanejo modri, uporabniki pa lahko enostavno vidijo, koliko korakov je še pred njimi.

Primer: Validacija v realnem času

Body Shop prodajalec kozmetike uporablja potrditev v realnem času v obrazcu Profil uporabnika, da odpravite napake in izboljšate UX postopka dokončanja obrazca.

Vnosi se preverijo, medtem ko uporabniki izpolnijo obrazec, pravi in ​​napačni odgovori pa so takoj označeni z lahko prepoznavne ikone malo naprej na desni, vendar še vedno na vidnem mestu.

Primer: izrazne opisi orodij

Razumljiva mikrokopija je tudi pomemben del uspešnih povratnih informacij uporabnikov pri oblikovanju obrazcev. Po definiciji je mikrokopija spletne strani sestavljena iz majhni deli besedila uporabljajo se v različnih elementih - nalepke, gumbe, sporočila o napakah, opisi orodij itd.

V svojem obrazcu za prijavo skupina Barclay odgovarja na vprašanja, ki jih lahko uporabnik vpraša s pomočjo dobro zasnovani namigi ki vključujejo enostavno razumljiva mikrokopija.

Opisi orodij so skriti za malo? ikone ne odvrnejo uporabnikov ki vedo, kako izpolniti prijavni obrazec, vendar biti vedno prisoten za uporabnike, ki niso prepričani.

Nekateri opisi orodij vsebujejo celo malo vizualno označene debetne kartice tako da lahko uporabniki zlahka najdejo podatke, ki jih morajo vnesti v prijavni obrazec.