4 formos dizaino UX patarimai, kuriuos turėtumėte žinoti (su pavyzdžiais)

Mes linkę galvoti apie formas kaip paprasčiausias būdas rinkti naudotojo duomenis, tačiau jie taip pat yra vienas iš būdų, kartais vienintelis kelias, mūsų naudotojams susisiekite su mumis. Turbūt klaidinga manyti, kad galime padaryti naudotojus meilė užpildyti formas, tačiau tai tikrai įmanoma rasti sprendimus, kurie jų pernelyg nemalonina, ir padėti jiems vykstant procesui.

Naršydami internete galime rasti kartais netikėtus, programiškai teisingus sprendimus, tačiau jie yra suprojektuoti taip, kaip tikėtina daugelis vartotojų atsisako svetainės dėl prastos vartotojo patirties.

Jei mūsų formos yra sukurtos gerai, galėsime ne tik pasitarti su mūsų naudotojais, bet ir su „backend“ komanda, kuri gali dirbti daug mažiau vartotojo įvesties klaidų. Taigi šiame straipsnyje mes pamatysime, kaip galime sumažinti vartotojo įvesties klaidas ir vis dar išlaikyti mūsų naudotojus laimingus.

Numatykite naudotojų poreikius

Tinklalapiai ir programos yra skirtingų vartotojų bazių ir tikslų, ir net toje pačioje vietoje gali būti įvairių formų, kurios renka įvairių rūšių duomenis, kad būtų galima įvardyti dažniausius duomenis:

• Prisijungimo formos
• Registracijos formos
• Vartotojo profilio formos
• Naujienlaiškio registracijos formos
• Užsakymo formos
• Vartotojų apklausos
• Kontaktų formos
• Komentarų formos
• Paieškos formos

Visi šie formų tipai reikalauti skirtingų dalykų. Kuriant užsakymo formą labai svarbu patikimai patikinti vartotojus apie saugumą, o komentarų formų atveju tai yra gera idėja pridėti emocijų arba kitus metodus, kurie leidžia vartotojams išreikšti savo tikrąją nuotaiką.

Tačiau netgi panašių formų tipai gali būti suprojektuoti kitaip, nes visose svetainėse yra jų unikali vartotojo bazė. Prieš pradedant projektavimo procesą, visada gera idėja numatyti, ko mums reikia, ir dizainas.

Pavyzdys: socialiniai prisijungimai, skirti naudotojų poreikiams

„Codepen“ prisijungimo formoje yra trys socialiniai prisijungimai su „Github“ viršuje. Šis pasirinkimas daugumai svetainių būtų nepagrįstas.

Bet tai puikiai tinka „Codepen“, kadangi jų naudotojų bazę sudaro kūrėjai, kurių daugelis norės prisijungti prie savo „Github“ paskyrų, arba sujungti savo vystymosi sąskaitas vienu metu.

Pagalvokite apie „Mobile-First“

Mobilieji ir staliniai naudotojai turi skirtingus poreikius, bet kaip formų užpildymas yra daug didesnis iššūkis mobiliajame ekrane, naudojant rankinius gestus nei fizinei klaviatūrai, a pirmasis požiūris mes galime nuvesti mus toliau, kai norime sukurti tinkamas formas.

Be to, daugelis UI modelių, kurie gerai veikia mobiliajame telefone, taip pat veiks gerai darbalaukyje.

Pavyzdys: valdomi valdikliai

Aukštos kokybės mobilios formos neįmanoma įsivaizduoti be matomi valdikliai ant kurio mobilieji naudotojai gali lengvai paliesti su pirštais.

Žiniatinklio dizaino konferencijos „Event Event“ informacinio biuletenio forma prisitaiko prie mobiliojo ryšio naudotojų prieigos prie ekrano - jame yra du lengvai palieskite įvesties laukus ir a piršto dydžio mygtukas.

Teksto įvedimo laukai yra didesni, kaip įprasta, kad mobilieji naudotojai galėtų juos lengvai paliesti, o didelis, oranžinis mygtukas su pažymėta piktograma paskatina vartotojus pateikti formą.

Svetainės darbalaukio versija naudoja tą pačią formą, taip pat atrodo gerai ir gerai veikia didesniuose ekranuose.

Pavyzdys: Išlaidos įvestis

Kuriant mobiliojo ryšio formas, visada svarbu apsvarstyti, kaip mes galime sumažinti mūsų naudojamą erdvę. The išleidžiamas įėjimas Pastaruoju metu UI dizaino modelis tapo gana populiarus ir ypač gerai veikia mobiliajame telefone.

„Booking.com“ šį modelį naudoja mobiliajame tinklalapyje esančioje paieškos formoje. Kai vartotojas paliečia paieškos lauką, jis išsiplečia, kad palikite daugiau erdvės gestams, ir po juo rodomas sąrašas su rekomendacijomis.

Kai naudotojas palies lauką, jis susitraukia, o papildoma informacija išnyksta.

Pavyzdys: Morphing mygtukas

Morphing mygtukai dar vieną žingsnį dar kartą perkelkite įkraunamą įvestį, nes vartotojai pirmą kartą mato mygtuką, kuris tada morphs į formą kai jie paliečia jį.

Toliau pateikiamas ekranas yra iš „The Startup“ puikus straipsnis apie novatorišką formą, kuriame pateikiami ir daug kitų kūrybiškų sprendimų.

Palengvinti įvesties įvedimą

Ilgalaikės formos atgraso vartotojus. Geriausia, ką galime padaryti prašyti tik informacijos, kurios mums tikrai reikia. Tai svarbu ne tik iš naudotojų patirties perspektyvos, bet ir dėl to vartotojai gali nedvejodami pateikti per daug asmeninės informacijos privatumo problemos.

Tačiau kartais mes vis dar turi eiti kartu su ilgesnėmis formomis. Šiuo atveju tai gera idėja supjaustykite juos į mažesnius gabalus, ir tarnauti gabaliukus kaip eilinius ekranus.

Daugelis el. Prekybos svetainių (pvz., „Amazon“) naudoja šį sprendimą, kad sumažintų krepšelio atsisakymo tarifus.

Jei norime palengvinti formos laukų pildymą, nykščio taisyklė yra sumažinti tiek trukdžių, tiek vartotojų veiksmus Kiek įmanoma daugiau.

Pavyzdys: asmeninis įvesties parinkiklis

Įvairūs turinio rinkėjai, pvz., Datos rinkėjai ar spalvų rinkėjai, ne tik padeda lengviau priimti teisingą įvestį, bet ir formą patrauklesnis, ir žymiai sumažinti vartotojo klaidas.

„Todoist“ sąrašo sudarymo programa suteikia asmeninius patarimus jo datos rinkikliu, kai vartotojas persijungia per dienas.

Pavyzdžiui, žemiau esančioje ekrano nuotraukoje vartotojas gali matyti, kad iki rugpjūčio 31 d. Ji jau turi 2 tinkamas užduotis ir gali atsižvelgti į šią informaciją sprendžiant teisingą užduočių datą. Tai puiki idėja programai, kurios našumas yra pagrindinis vartotojo rūpestis.

Pavyzdys: įvedimas „Drag-and-Drop“

Drag-and-drop dizainas paprastai veikia gerai su failų įkėlimo laukais, ypač tais atvejais, kai vartotojai turi įkelti vaizdus.

Jie tikriausiai nesumažina naudotojo veiksmų, kurie yra daug palyginti su įprastu failo mygtuko įkėlimu, tačiau jie yra daug lengviau pasirinkti, kurį failą naudotojas nori įkelti, todėl sumažėja galimybė pateikti neteisingą failą.

„WordPress.com“ suteikia elegantišką ir intuityvų vartotojo įvesties sąsają savo redagavimo formoje. The mažai miniatiūrų ir vizualiai jau įkeltų failų vaizdavimas toliau padėti vartotojams greitai įvykdyti įkėlimą.

Pavyzdys: perdanga, skirta pašalinti trikdymus

Jei vartotojai užsiblokuoja, užpildydami formą, jie yra labiau linkę į klaidas, taip pat lengviau jaudina

Turinio perdangos yra puiki alternatyva minimalistinės formos dizainui. Jie naudojami sudėtingesnių svetainių kurie nori rodyti skirtingą informaciją tame pačiame ekrane.

Žemiau esančioje ekrano kopijoje galite pamatyti „Booking.com“ darbalaukio versiją. Kai naudotojai virsta paieškos forma, likęs turinys tampa padengtas pilkšnu sluoksniu padėti jiems nuolat sutelkti dėmesį į formų pildymo procesą.

Pateikite atsiliepimus vartotojams

Suteikti tinkamas atsiliepimas tinkamu laiku gali gerokai pagerinti vartotojo patirtį.

Formos dizainas yra dviejų tipų vartotojų atsiliepimai:

1. Pateikti atsiliepimai anksčiau formos pateikimas - siekiant sumažinti klaidas ir formos atsisakymas, pvz., pažangos stebėtojai, momentinis įvesties patvirtinimas, kuris iškart atlygina vartotojus už teisingą įvestį arba pagalbininko įrankių patarimus
2. Pateikti atsiliepimai po to formos pateikimas - kad naudotojai žinotų jie padarė klaidą, pvz., klaidų pranešimai

Naudotojų atsiliepimai apie mūsų naudotojus labai priklauso nuo mūsų tikslinės auditorijos savybių ir mūsų svetainės tikslo.

Pavyzdys: pažangos stebėtojas

Formos, ilgesnės nei vienas puslapis, pavyzdžiui, apklausos ir dauguma elektroninės komercijos kasos formų, gali turėti sverto pažangos stebėtojas dizaino modelis. Pažangos stebėtojai suteikia tiesioginis vizualinis atsiliepimas naudotojams apie jų statusą ir paskatinti juos pereiti prie proceso.

„SnapSurveys“ tyrimo kūrėjo žiniatinklio programa rodo šiek tiek pažangos stebėtojo tiesiai virš pateikimo mygtukų, kad vartotojai galėtų savaime suprantama.

jis pažangos stebėtojas nenaudoja jokių etikečių, bet taip, kaip jis sukurtas aišku - ratų skaičius nurodo veiksmų skaičių, jau atlikti veiksmai tampa mėlyni, o naudotojai gali lengvai matyti, kiek žingsnių vis dar yra prieš juos.

Pavyzdys: realaus laiko patvirtinimas

„Body Shop“ kosmetikos mažmenininkas naudojasi tikrinimas realiuoju laiku vartotojo profilio formoje, kad pašalintumėte klaidas ir pagerintumėte formos užbaigimo proceso UX.

Įėjimai tikrinami, kai vartotojai užpildo formą, o teisingi ir neteisingi atsakymai yra nedelsiant pažymėti lengvai atskiriamos piktogramos šiek tiek toliau dešinėje, bet vis dar matomoje vietoje.

Pavyzdys: ekspresyvūs įrankių tipai

Suprantama mikrokopija taip pat yra svarbi sėkmingo naudotojų grįžtamojo ryšio formoje forma. Pagal apibrėžimą svetainės mikrokopija susideda iš nedideli teksto gabaliukai naudojami skirtinguose elementuose - etiketėse, mygtukuose, klaidų pranešimuose, įrankių patarimuose ir kt.

Savo prisijungimo formoje „Barclay“ bankų grupė atsako į klausimus, kuriuos vartotojai gali paklausti gerai suplanuoti įrankių patarimai tai apima lengvai suprantama mikrokopija.

Įrankių patarimai yra paslėpti už mažai? piktogramas nenukreipti vartotojų kurie žino, kaip užpildyti prisijungimo formą, bet būti visada vartotojams, kurie nėra tikri.

Kai kurie įrankių patarimai netgi yra šiek tiek vizuali anotuota debeto kortelė kad vartotojai galėtų lengvai rasti duomenis, kuriuos jie turi įvesti prisijungimo formoje.