4 Form Design UX Tips du bør vide (med eksempler)

Vi har tendens til at tænke på formularer som blot et middel til at indsamle brugerdata, men de er også en måde, nogle gange den eneste måde, for vores brugere at forbinde med os. Det er nok vildfarende at tro, at vi kan gøre brugere kærlighed udfyldning af formularer, men det er helt sikkert muligt at finde løsninger, der ikke irriterer dem for meget, og hjælpe dem med processen.

Mens du surfer på nettet, finder vi nogle gange overraskende løsninger, der er programmatiske korrekte, men er designet på en måde, der mest sandsynligt får mange brugere til at forlade stedet på grund af den dårlige brugeroplevelse.

Hvis vores formularer er udformet godt, vil vi være i stand til ikke kun at glæde vores brugere, men også backend teamet, der kan håndtere meget mindre brugerfejlfejl. Således vil vi i denne artikel se på, hvordan vi kan minimere brugerens inputfejl og stadig holde vores brugere glade.

Forvente brugernes behov

Websites og applikationer har forskellige brugerbaser og mål, og selv på samme sted kan være vært for mange former, der indsamler forskellige slags data, bare for at nævne de hyppigste:

• Login-formularer
• Registreringsformularer
• Brugerprofilformularer
• Nyhedsbrev tilmeldingsformularer
• Checkout formularer
• Brugerundersøgelser
• Kontaktformularer
• Kommentar formularer
• Søg formularer

Alle disse formtyper kræver forskellige ting. Ved udformning af en betalingsformular er det afgørende at sikre brugerne sikkerhed på sikker vis, mens det i forbindelse med kommentarformularer er en god idé at Tilføj emojis eller andre metoder, der gør det muligt for brugerne at udtrykke deres faktiske humør.

Men selv ens formstyper må muligvis udformes forskelligt, som alle websteder har deres unik brugerbase. Inden man påbegynder designprocessen, er det altid en god ide at Forvent, hvad vores brugere har brug for, og design i overensstemmelse hermed.

Eksempel: Sociale logins, der målretter brugerbehov

Codepen's login formular indeholder tre sociale logins med Github øverst. Dette valg ville være urimeligt for de fleste steder.

Men det er perfekt til Codepen, da deres brugerbase består af udviklere, hvoraf mange vil logge ind med deres Github-konti, eller forbinde deres udviklingskonti med hinanden på én gang.

Tænk Mobile-Først

Mobil og stationære brugere har forskellige behov, men som Udfyldning af formularer er en meget større udfordring på en mobil skærm, ved hjælp af håndbevægelser end på et fysisk tastatur, a mobil-første tilgang kan tage os yderligere, når vi ønsker at designe brugbare former.

Desuden vil mange form UI-mønstre, der fungerer godt på mobilen, også fungere godt på skrivebordet.

Eksempel: Tappable Controls

Mobilformularer af høj kvalitet kan ikke forestilles uden synlige kontroller hvor mobile brugere kan nemt trykke med deres fingre.

Tilmeldingsformularen til webdesignkonference An Event Apart tilpasser sig den måde, hvorpå mobilbrugere får adgang til skærmen - den indeholder to let tilgængelige knapper og a fingerspidsstørrelse knap.

Tekstfelterne er højere som sædvanlige, så de mobile brugere nemt kan trykke på dem, og den store, orange knap med et kryds ikon opfordrer yderligere brugere til at indsende formularen.

Den stationære version af webstedet bruger samme form design, da det også ser godt ud og fungerer godt på større skærme.

Eksempel: Udgiftspligtig indgang

Ved design af formularer til mobil er det altid vigtigt at overveje, hvordan vi kan minimere det plads, vi bruger. Det forbrugsvarer UI design mønster er blevet ganske populært i det seneste, og det virker særligt godt på mobil.

Booking.com udnytter dette mønster i søgeformularen på dets mobilsite. Når brugeren tapper i søgefeltet udvides den for at lad mere plads til bevægelser, og en valgliste med anbefalinger vises også under den.

Når brugeren tipper ud af feltet, krymper den, og den ekstra information forsvinder.

Eksempel: Morphing Button

Morphing knapper tag det forbrugte indtastningsmønster et skridt endnu længere, da brugerne først ser en knap, som så morphs ind i en formular når de trykker på den.

Skærmbilledet nedenfor er fra The Startups geniale artikel om innovativt form design, der også indeholder mange andre kreative løsninger.

Tilrettelægge indlæsning

Langvarige former har tendens til at afskrække brugere. Det bedste vi kan gøre er at bede kun om det input, vi virkelig har brug for. Dette er ikke kun vigtigt ud fra et brugeroplevelsesperspektiv, men brugerne kan også tøve med at udlevere for mange personlige oplysninger på grund af privatliv bekymringer.

Nogle gange, dog vi stadig nødt til at gå sammen med længere formularer. I dette tilfælde er det en god idé at skære dem op i mindre stykker, og tjene klumperne som efterfølgende skærme.

Mange e-handelswebsites (f.eks. Amazon) bruger denne løsning for at reducere vognabonnementet.

Hvis vi vil lette udfyldning af formularfelter, er tommelfingerregelen til reducere både distraktioner og brugerhandlinger så meget som muligt.

Eksempel: Personlig indgangsvælger

Forskellige indholdsvælgere, som f.eks. Datoplukkere eller farvevælger, gør det ikke kun lettere at indtaste det rigtige input, men også formularen mere attraktivt, og betydeligt reducere brugerfejl.

Applikationen Todoist List-taking giver personlige tip inde i sin date picker, når brugeren svæver over dagene.

For eksempel på skærmbilledet nedenfor kan brugeren se, at den 31. august har hun allerede 2 pålidelige opgaver og kan tage hensyn til disse oplysninger, når man bestemmer den rigtige dato for opgaver. Det er en glimrende ide for en app, hvor produktivitet er brugerens største bekymring.

Eksempel: Træk-og-slip-indgang

Træk-og-slip-design fungerer normalt godt med filuploadfelter, især hvor brugerne skal uploade billeder.

De reducerer sandsynligvis ikke brugerhandlinger så meget i forhold til den almindelige Upload a file-knap, men de gør det meget nemmere at Vælg hvilken fil brugeren ønsker at uploade, hvilket reducerer chancen for at indsende en forkert fil.

WordPress.com giver en elegant og intuitiv træk-og-slip-brugerindgangsgrænseflade i dens postredaktørformular. Det små miniaturebilleder og visuel repræsentation af de allerede uploadede filer Yderligere hjælper brugerne hurtigt at gennemføre uploaden.

Eksempel: Overlay for at fjerne distraktioner

Hvis brugerne distraheres under udfyldelsen af ​​vores formular, er de mere tilbøjelige til at få fejl, og de bliver også lettere irriteret

Indhold overlejringer er et godt alternativ til minimalistisk form design. De bruges ved mere komplekse steder der ønsker at vise forskellige slags oplysninger på samme skærm.

På skærmbilledet nedenfor kan du se den desktop version af Booking.com. Når brugerne svæver på søgeformularen, får resten af ​​indholdet dækket af et gråagtigt overlæg at hjælpe dem Hold fokus på formfyldningsprocessen.

Giv feedback til brugere

Giver Ret feedback på det rigtige tidspunkt kan forbedre brugeroplevelsen væsentligt.

I form design er der to slags feedback fra brugerne:

1. Feedback givet Før form indsendelse - for at reducere fejl og form abandonment satser, som fremdriftssporere, øjeblikkelig indtastningsvalidering, der straks belønner brugere for den korrekte indgang eller hjælperedskaber
2. Feedback givet efter form indsendelse - for at lade brugerne vide det de begik en fejl, f.eks. fejlmeddelelser

Den slags feedback, brugerne har brug for, afhænger meget af vores målgruppes egenskaber og vores hjemmeside.

Eksempel: Progress Tracker

Skemaer, der er længere end en side, f.eks. Undersøgelser og de fleste e-handelskøbsformer, kan tage højde for fremskridt tracker design mønster. Progress trackers giver en øjeblikkelig visuel feedback til brugere om deres status og opfordre dem til at fortsætte med processen.

SnapSurveys undersøgelse skaber web app viser en lille fremskridt tracker lige over de indsende knapper, så brugerne kan naturligvis få øje på det.

han fremskridt tracker bruger ikke nogen etiketter, men den måde den er designet på gør sit mål klart - antallet af cirkler angiver antallet af trin, de allerede udførte trin bliver blå, og brugerne kan nemt se, hvor mange trin der stadig er foran dem.

Eksempel: Validering i realtid

Body Shop kosmetik forhandler bruger validering i realtid på sit brugerprofilformular for at fjerne fejl og forbedre UX i formularens færdiggørelsesproces.

Indgange kontrolleres, mens brugerne udfylder formularen, og de rigtige og forkerte svar indikeres straks af let skelne ikoner lidt længere til højre, men stadig i det synlige område.

Eksempel: Ekspressive værktøjstip

Forståelig mikroskopi er også en vigtig del af succesfuld brugerfeedback i formdesign. Per definition består mikroskopien af ​​et websted af små klumper af tekst bruges i forskellige elementer - etiketter, knapper, fejlmeddelelser, værktøjstip osv.

I sin login-form svarer Barclays bankkoncern til de spørgsmål, som brugerne potentielt måtte spørge ved hjælp af veldesignede værktøjstips som omfatter let at forstå mikroskopi.

Værktøjstipene er skjult bag lidt? ikoner ikke at distrahere brugere hvem ved hvordan man udfylder loginformularen, men at være altid til stede for brugere, der er usikre.

Nogle af værktøjstipsne indeholder endda lidt visuelt om et annoteret debetkort så brugerne nemt kan finde de data, de skal indtaste i login-formularen.