4 veidlapas dizaina UX padomi, kas jums jāzina (ar piemēriem)

Mums ir tendence domāt par veidlapām, kā vienkārši līdzeklis, lai savāktu lietotāja datus, bet dažreiz tie ir arī viens no veidiem vienīgais ceļš, mūsu lietotājiem sazināties ar mums. Iespējams, ir maldīgi domāt, ka mēs varam padarīt lietotājus mīlestība veidlapu aizpildīšana, taču tas noteikti ir iespējams lai atrastu risinājumus, kas tos neuztraucina pārāk daudz, un palīdzēt viņiem visā procesā.

Pārlūkojot tīklu, mēs dažkārt varam atrast pārsteidzošus risinājumus, kas ir programmiski pareizi, bet ir veidoti tā, lai tie būtu visticamāk Daudzi lietotāji pamet vietni sliktas lietotāju pieredzes dēļ.

Ja mūsu veidlapas ir izstrādātas labi, mēs varēsim ne tikai iepriecināt mūsu lietotājus, bet arī backend komandu, kas var tikt galā daudz mazāk lietotāju ievades kļūdas. Tādējādi šajā rakstā mēs apskatīsim, kā mēs varam samazināt lietotāja ievadīšanas kļūdas un joprojām saglabāt mūsu lietotāju apmierinātību.

Paredzēt lietotāju vajadzības

Tīmekļa vietnēm un lietojumprogrammām ir dažādas lietotāju bāzes un mērķi, un pat tajā pašā atrašanās vietā var izvietot daudzas formas, kas vāc dažāda veida datus, lai nosauktu visbiežāk minētos datus:

• Pieteikšanās veidlapas
• Reģistrācijas veidlapas
• Lietotāja profila veidlapas
• Biļetenu reģistrācijas veidlapas
• Checkout veidlapas
• Lietotāju aptaujas
• Kontaktformas
• Komentāru veidlapas
• Meklēšanas formas

Visi šie veidlapu veidi prasa dažādas lietas. Izstrādājot izrakstīšanās veidlapu, ir būtiski pārliecināt lietotājus par drošību, bet komentāru veidlapu gadījumā tā ir laba ideja. pievienojiet emoļus vai citas metodes, kas ļauj lietotājiem izteikt savu patieso noskaņojumu.

Tomēr pat līdzīgi veidlapu veidi var būt jāveido atšķirīgi, jo visām vietnēm ir savs unikāla lietotāja bāze. Pirms uzsākat projektēšanas procesu, vienmēr ir laba ideja paredzēt to, kas nepieciešams mūsu lietotājiem, un dizains.

Piemērs: sociālie pieteikumi lietotāju vajadzībām

Codepen pieteikšanās veidlapā ir trīs sociālās pieteikšanās ar Github augšpusē. Šī izvēle vairumam vietņu būtu nepamatota.

Bet tas ir ideāls Codepen, jo to lietotāju bāze sastāv no izstrādātājiem, no kuriem daudzi vēlēsies pieteikties ar saviem Github kontiem, vai savienot to attīstības kontus vienlaicīgi.

Domājiet par Mobile-First

Mobilajiem un darbvirsmas lietotājiem ir dažādas vajadzības, bet kā veidlapu aizpildīšana ir daudz lielāks izaicinājums mobilajā ekrānā, izmantojot roku žestus nekā fiziskajā tastatūrā, a pirmā pieeja mobilajām ierīcēm var mūs turpināt, ja mēs vēlamies izstrādāt izmantojamās formas.

Turklāt daudzi UI modeļi, kas labi darbojas mobilajā ierīcē, darbosies arī darbvirsmā.

Piemērs: pieskaramās vadīklas

Augstas kvalitātes mobilās formas nevar iedomāties bez redzamās vadības ierīces uz kuriem mobilie lietotāji var viegli pieskarties ar pirkstiem.

Tīmekļa vietnes dizaina konferenču biļetenu reģistrācijas forma “Event Apart” pielāgojas tam, kā mobilie lietotāji piekļūst ekrānam - tas satur divi viegli pieskarami ievades lauki un a ar pirkstu galiem.

Teksta ievades lauki ir lielāki, kā parasti, lai mobilo sakaru lietotāji tos varētu viegli pieskarties, un lielā, oranžā poga ar ērču ikonu mudina lietotājus iesniegt veidlapu.

Vietnes darbvirsmas versija izmanto tādu pašu formu, tā arī izskatās labi un labi darbojas lielākos ekrānos.

Piemērs: Izdevīgs ieeja

Veidojot veidlapas mobilajām ierīcēm, vienmēr ir svarīgi apsvērt, kā mēs varam samazināt mūsu izmantoto telpu. The tērējams ieguldījums Pēdējā laikā UI dizaina modelis ir kļuvis ļoti populārs, un tas īpaši labi darbojas mobilajā ierīcē.

Booking.com šo modeli izmanto mobilajā vietnē meklēšanas formā. Kad lietotājs pieskaras meklēšanas laukam, tas paplašinās, lai atstāt vairāk vietas žestiem, zem tā redzams arī saraksts ar ieteikumiem.

Kad lietotājs pieskaras no lauka, tas samazinās, un papildu informācija pazūd.

Piemērs: Morphing poga

Morphing pogas ņemiet izlietojamo ieejas modeli vēl vienu soli tālāk, jo lietotāji vispirms redz pogu, kas tad morphs formā kad tie pieskaras tai.

Zemāk redzamais ekrānuzņēmums ir no The Startup izcilā raksta par novatorisku formu dizainu, kas piedāvā arī daudzus citus radošus risinājumus.

Veicināt ievades uzņemšanu

Ilgstošas ​​formas mēdz atturēt lietotājus. Labākais, ko mēs varam darīt, ir lūdziet tikai ievadi, kas mums patiešām ir vajadzīga. Tas ir svarīgi ne tikai no lietotāja pieredzes viedokļa, bet arī lietotāji var nevilcināties sniegt pārāk daudz personiskās informācijas privātuma problēmas.

Dažreiz mēs tomēr joprojām jāiet kopā ar garākām formām. Šajā gadījumā tā ir laba ideja sagrieziet tos mazākos gabalos, un kalpot gabalos kā secīgiem ekrāniem.

Daudzi e-komercijas vietnes (piemēram, Amazon) izmanto šo risinājumu, lai samazinātu grozu atcelšanas likmes.

Ja mēs vēlamies atvieglot veidlapu lauku aizpildīšanu, īkšķis ir paredzēts samazināt traucējošos un lietotāja darbības cik vien ir iespējams.

Piemērs: personalizēts ievades atlasītājs

Dažādi satura atlasītāji, piemēram, datumu atlasītāji vai krāsu atlasītāji, ne tikai atvieglo pareizā ievades uzņemšanu, bet arī veido veidlapu pievilcīgāka, un ievērojami samazināt lietotāju kļūdas.

Todoistu saraksta lietojumprogramma sniedz personalizētus padomus laikā, kad lietotājs pārceļas pa dienām.

Piemēram, zemāk redzamajā ekrānuzņēmumā lietotājs var redzēt, ka 31. augustā viņam jau ir 2 pienācīgi uzdevumi, un tā var ņemt vērā šo informāciju, lemjot par pareizu uzdevumu datumu. Tā ir lieliska ideja lietotnei, kurā produktivitāte ir lietotāja galvenā problēma.

Piemērs: ievilkšana un nomešana

Velciet un nometiet parasti darbojas labi ar failu augšupielādes laukiem, jo ​​īpaši, ja lietotājiem ir nepieciešams augšupielādēt attēlus.

Tie, iespējams, nesamazina lietotāju darbības, kas ir daudz lielākas nekā parastās augšupielādes faila pogas, bet tās ir daudz vieglāk izvēlēties, kuru failu lietotājs vēlas augšupielādēt, tādējādi samazinot iespēju iesniegt nepareizu failu.

WordPress.com nodrošina elegantu un intuitīvu lietotāja ievades interfeisu tās redaktora formā. The maz sīktēlu un jau augšupielādēto failu vizuālais attēlojums turpmāk palīdzēt lietotājiem ātri izpildīt augšupielādi.

Piemērs: pārklājums, lai noņemtu traucējumus

Ja lietotāji aizpilda mūsu veidlapu, tie ir vairāk pakļauti kļūdām un arī vieglāk apbēdināti

Satura pārklājumi ir lieliska alternatīva minimālisma formai. Tos izmanto sarežģītākas vietas kas tajā pašā ekrānā vēlas parādīt dažāda veida informāciju.

Tālāk redzamajā ekrānuzņēmumā var redzēt Booking.com darbvirsmas versiju. Kad lietotāji pārvietojas uz meklēšanas veidlapu, pārējais saturs tiek saņemts pārklāts ar pelēcīgu pārklājumu palīdzēt viņiem turpiniet koncentrēties uz veidlapu aizpildīšanas procesu.

Sniegt atsauksmes lietotājiem

Piešķirt pareizā atgriezeniskā saite pareizajā laikā var ievērojami uzlabot lietotāju pieredzi.

Veidlapas dizainā ir divu veidu lietotāju atsauksmes:

1. Atgriezeniskā saite iepriekš veidlapas iesniegšana - lai samazināt kļūdas un veidot atteikšanās likmes, piemēram, progresa izsekotāji, tūlītēja ievades validācija, kas tūlīt atlīdzina lietotājus par pareizu ievadi vai palīgrīku padomiem
2. Atgriezeniskā saite pēc tam veidlapas iesniegšana - lai ļautu lietotājiem zināt viņi izdarīja kļūdu, piemēram, kļūdu ziņojumi

Lietotāju atsauksmes mūsu lietotājiem ir ļoti atkarīgas no mūsu mērķauditorijas īpašībām un mūsu vietnes mērķa.

Piemērs: Progress Tracker

Veidlapas, kas ir garākas par vienu lapu, piemēram, aptaujas un lielākā daļa e-komercijas izrakstīšanās veidlapu, var izmantot progress tracker dizaina modelis. Progresa izsekotāji dod tūlītēja vizuālā atgriezeniskā saite lietotājiem par viņu statusu, un mudināt viņus turpināt šo procesu.

SnapSurveys aptaujas veidotāja tīmekļa lietojumprogramma parāda nelielu progresa izsekotāju tieši virs iesniegšanas pogām, lai lietotāji varētu tas, protams, to pamanīs.

viņš progress tracker neizmanto nekādas etiķetes, bet to, kā tas ir izstrādāts padara tās mērķi skaidru - apļu skaits norāda soļu skaitu, jau izpildītie soļi kļūst zilā krāsā, un lietotāji var viegli redzēt, cik soļi joprojām ir priekšā.

Piemērs: reāllaika apstiprināšana

Lieto Body Shop kosmētikas mazumtirgotāju reālā laika apstiprināšana lietotāja profilā, lai novērstu kļūdas un uzlabotu UX veidlapas pabeigšanas procesu.

Ievades tiek pārbaudītas, kamēr lietotāji aizpilda veidlapu, un pareizās un nepareizās atbildes uzreiz norāda viegli atšķirtas ikonas nedaudz tālāk pa labi, bet joprojām redzamā vietā.

Piemērs: Ekspresīvie rīki

Saprotams mikroskopija ir arī būtiska veiksmīgas lietotāju atsauksmes formu dizainā. Pēc definīcijas tīmekļa vietnes mikroskopija sastāv no nelieli teksta gabali izmanto dažādos elementos - uzlīmes, pogas, kļūdu ziņojumi, rīku padomi utt.

Savā pieteikšanās formā Barclay bankas grupa atbild uz jautājumiem, ko lietotāji, iespējams, var lūgt, izmantojot labi izstrādāti rīku padomi kas ietver viegli saprotama mikroskopija.

Rīki ir paslēpti aiz maz? ikonas neuzmanīt lietotājus kuri zina, kā aizpildīt pieteikšanās veidlapu, bet vienmēr ir klāt lietotājiem, kas nav pārliecināti.

Daži rīku padomi pat satur nedaudz vizuāli par anotētu debetkarti lai lietotāji varētu viegli atrast datus, kas tiem jāievada pieteikšanās formā.