4 UX savjeta za dizajn obrazaca koje trebate znati (s primjerima)

Skloni smo razmišljati o oblicima kao o jednostavnom načinu prikupljanja korisničkih podataka, ali oni su također jedan od načina, ponekad jedini način, za naše korisnike Poveži se s nama. Vjerojatno je sumanuto misliti da možemo stvoriti korisnike ljubav popunjavanje obrazaca, ali je svakako moguće pronaći rješenja koja ih ne ometaju previše, i pomoći im u procesu.

Tijekom pregledavanja mreže možemo naći ponekad iznenađujuća rješenja koja su programski ispravna, ali su dizajnirana na način koji je najvjerojatnije zbog čega mnogi korisnici napuštaju web-lokaciju zbog lošeg korisničkog iskustva.

Ako su naši obrasci dobro osmišljeni, moći ćemo ne samo zadovoljiti naše korisnike, već i pozadinski tim s kojim se možemo nositi mnogo manje pogrešaka pri unosu korisnika. Stoga ćemo u ovom članku pogledati kako možemo minimiziranje pogrešaka unosa korisnika i još uvijek zadržati naše korisnike sretnima.

Predvidite potrebe korisnika

Web-lokacije i aplikacije imaju različite korisničke baze i ciljeve, čak i na istoj lokaciji mogu se nalaziti mnogi oblici koji prikupljaju različite vrste podataka, samo da bi naveli one najčešće:

• Prijavni obrasci
• Prijavni obrasci
• Obrasci korisničkog profila
• Obrasci za prijavu na newsletter
• Obrasci za naplatu
• Ankete korisnika
• Obrasci za kontakt
• Oblici komentara
• Obrasci za pretraživanje

Sve ove vrste oblika zahtijevaju različite stvari. Prilikom izrade obrasca za naplatu ključno je uvjerljivo uvjeriti korisnike u sigurnost, dok je u slučaju obrazaca za komentare dobra ideja dodajte emojise ili druge metode koje korisnicima omogućuju da izraze svoje stvarno raspoloženje.

Međutim, čak i slični tipovi oblika mogu biti različito dizajnirani, jer sve stranice imaju svoje jedinstvena korisnička baza. Prije nego što krenete u proces dizajniranja, uvijek je dobra ideja predvidjeti što naši korisnici trebaju, i dizajn u skladu s tim.

Primjer: Društveni prijavi Ciljanje korisničkih potreba

Codepenov obrazac za prijavu sadrži tri socijalna prijava s Githubom na vrhu. Taj bi izbor bio nerazuman za većinu web-lokacija.

Ali savršen je za Codepen, jer se njihova korisnička baza sastoji od programera, od kojih će se mnogi htjeti prijaviti sa svojim Github računima, ili povezati svoje razvojne račune jedni s drugima odjednom.

Razmislite prvo o mobitelu

Korisnici mobilnih i stolnih računala imaju različite potrebe, ali kao popunjavanje obrazaca mnogo je veći izazov na mobilnom zaslonu, koristeći gestama ruku na fizičkoj tipkovnici, a pristup koji se temelji na mobilnosti može nas odvesti dalje kada želimo dizajnirati korisne oblike.

Štoviše, mnogi obrasci UI obrasca koji dobro rade na mobitelu dobro će funkcionirati i na desktopu.

Primjer: Kontrole s dodirom

Bez kvalitetnih mobilnih formi ne može se zamisliti vidljive kontrole na kojoj mobilni korisnici mogu jednostavno dodirnuti prstima.

Oblik prijave na newsletter konferencije web dizajna Event Apart prilagođava se načinu na koji korisnici mobilnih uređaja pristupaju zaslonu - on sadrži dva polja za unos koja se lako dodiruju i a tipka veličine prsta.

Polja za unos teksta veća su kao i obično kako bi ih korisnici mobilnih uređaja lako mogli dodirnuti, a veliko, narančasto gumb s ikonom označavanja dodatno potiče korisnike da pošalju obrazac.

Desktop verzija web-lokacije koristi isti oblik obrasca, jer dobro izgleda i dobro radi na većim zaslonima.

Primjer: potrošni ulaz

Prilikom dizajniranja obrazaca za mobitele, uvijek je važno razmotriti kako možemo smanjite prostor koji koristimo. potrošni ulaz UI dizajn uzorak je postao vrlo popularan u posljednje vrijeme, a to posebno dobro radi na mobitelu.

Booking.com koristi ovaj obrazac u obrascu za pretraživanje na svojoj mobilnoj web-lokaciji. Kada korisnik dodirne polje za pretraživanje, proširuje se kako bi ostavite više prostora za geste, i popis odabira s preporukama također se pojavljuje ispod njega.

Kada korisnik lupne izvan polja, on se skuplja, a dodatne informacije nestaju.

Primjer: Morphing gumb

Morphing gumbi uzmite potrošni ulazni korak još korak dalje, budući da korisnici prvi put vide gumb, koji tada pretvara se u oblik kad ga dodirnu.

Snimak ispod je iz briljantnog članka Startupa o inovativnom dizajnu oblika, koji također predstavlja mnoga druga kreativna rješenja.

Olakšajte unos preuzimanja

Duge forme odvraćaju korisnike. Najbolje što možemo je samo tražite ulaz koji nam je stvarno potreban. To nije važno samo iz perspektive korisničkog iskustva, nego i korisnici mogu oklijevati da daju previše osobnih podataka zbog privatnosti.

Ponekad, međutim, mi još moraju ići zajedno s dužim oblicima. U ovom slučaju to je dobra ideja odrežite ih na manje komade, i poslužite komade kao uzastopne zaslone.

Mnoge web-lokacije e-trgovine (npr. Amazon) koriste ovo rješenje kako bi smanjile stope napuštanja košarice.

Ako želimo ublažiti popunjavanje polja obrasca, pravilo je da smanjiti ometanja i akcije korisnika koliko je god moguće.

Primjer: Personalizirani alat za odabir unosa

Različiti sakupljači sadržaja, kao što su berači datuma ili sakupljači boja, ne samo da olakšavaju unos pravog unosa, već i čine obrazac atraktivnije, i značajno smanjiti korisničke pogreške.

Aplikacija za uzimanje popisa Todoista daje personalizirane savjete unutar odabira datuma kada korisnik lebdi tijekom dana.

Na primjer, na slici ispod, korisnik može vidjeti da za 31. kolovoz ona već ima 2 dužna zadatka i može uzeti u obzir te informacije prilikom odlučivanja o točnom datumu za zadatke. To je izvrsna ideja za aplikaciju u kojoj je produktivnost glavna briga korisnika.

Primjer: povlačenje i ispuštanje

Povuci-i-ispusti dizajna obično dobro rade s poljima za prijenos datoteka, osobito tamo gdje korisnici trebaju učitati slike.

Vjerojatno ne smanjuju korisničke postupke u usporedbi s običnim gumbom Upload a datoteka, ali čine ga mnogo lakšim odaberite koju datoteku korisnik želi prenijeti, stoga smanjuje mogućnost slanja pogrešne datoteke.

WordPress.com nudi elegantno i intuitivno korisničko sučelje za povlačenje i ispuštanje u obliku za uređivanje postova. male sličice i vizualni prikaz već prenesenih datoteka dodatno pomažu korisnicima u brzom izvršavanju prijenosa.

Primjer: Prekrivanje za uklanjanje smetnji

Ako su korisnici ometeni dok popunjavaju naš obrazac, oni su skloniji pogreškama i lakše se uznemiruju

Slojevi sadržaja su izvrsna alternativa minimalističkom dizajnu oblika. Koriste se složenijim mjestima koji žele prikazati različite vrste informacija na istom zaslonu.

Na slici ispod možete vidjeti desktop verziju Booking.com-a. Kada korisnici prelaze na oblik pretraživanja, ostatak sadržaja dobiva prekriven sivkastim slojem da im pomogne usredotočite se na proces popunjavanja obrazaca.

Pošaljite povratne informacije korisnicima

Davanje prave povratne informacije u pravo vrijeme može značajno poboljšati korisničko iskustvo.

U obliku obrasca postoje dvije vrste povratnih informacija korisnika:

1. Dane su povratne informacije prije podnošenje obrasca - da bi smanjiti pogreške i stope napuštanja oblika, kao što su tragači za napredak, trenutna validacija ulaza koja odmah nagrađuje korisnike za ispravan unos, ili pomoćne opise alata
2. Dane su povratne informacije nakon podnošenje obrasca - kako bi korisnici mogli znati počinili su pogrešku, kao što su poruke o pogreškama

Vrste povratnih informacija koje naši korisnici zahtijevaju u velikoj mjeri ovise o karakteristikama naše ciljane publike i cilju naše web-lokacije.

Primjer: Praćenje napretka

Obrasci dulji od jedne stranice, kao što su ankete i većina obrazaca za naplatu e-trgovine, mogu utjecati na napredni tragač uzorak dizajna. Tragači napretka daju trenutne vizualne povratne informacije korisnika o njihovom statusu i potaknuti ih da nastave s procesom.

Web-aplikacija SnapSurveys survey creator web aplikacija pokazuje mali napredak praćenja iznad gumba za slanje kako bi korisnici mogli prirodno je uočiti.

on ne koristi oznake, već način na koji je dizajniran čini svoj cilj jasnim - broj krugova označava broj koraka, već izvršeni koraci postaju plavi, a korisnici mogu lako vidjeti koliko je koraka još ispred njih.

Primjer: Provjera valjanosti u stvarnom vremenu

Body Shop prodavač kozmetike koristi provjera valjanosti u stvarnom vremenu na obrascu korisničkog profila kako bi se uklonile pogreške i poboljšao UX postupka dovršavanja obrasca.

Ulazi se provjeravaju dok korisnici popunjavaju obrazac, a pravi i pogrešni odgovori se odmah označavaju lako prepoznatljive ikone malo dalje na desnoj strani, ali još uvijek u vidljivom području.

Primjer: Izražajni opisi alata

Razumljiva mikrokopija je također bitan dio uspješnih povratnih informacija korisnika u oblikovanju obrazaca. Po definiciji, mikrokopija web-mjesta sastoji se od mali komadići teksta koristi se u različitim elementima - oznake, gumbi, poruke o pogreškama, opisi alata itd.

U svom obrascu za prijavu, Barclayova bankarska grupa odgovara na pitanja koja potencijalno mogu postaviti korisnici uz pomoć dobro osmišljene opise alata koje uključuju lako razumljiva mikroskopija.

Opisi su skriveni iza malo? ikone ne ometati korisnike koji znaju ispuniti obrazac za prijavu, ali biti uvijek prisutan za korisnike koji nisu sigurni.

Neki od opisa alata sadrže čak i malo vizualno označene debitne kartice tako da korisnici mogu lako pronaći podatke koje moraju unijeti u obrazac za prijavu.