4 Form UX-tips som du borde veta (med exempel)

Vi tenderar att tänka på formulär som bara ett sätt att samla användardata, men de är också ett sätt, ibland det enda sättet, för våra användare att anslut med oss. Det är förmodligen vilseledande att tro att vi kan göra användare kärlek fyller i formulär, men det är säkert möjligt att hitta lösningar som inte irriterar dem för mycket, och hjälpa dem med processen.

När vi surfar på nätet kan vi ibland hitta överraskande lösningar som är programmässigt korrekta, men är utformade på ett sätt som mest sannolikt gör att många användare lämnar webbplatsen på grund av den dåliga användarupplevelsen.

Om våra formulär är utformade bra kan vi inte bara behaga våra användare utan även backend-teamet som kan hantera mycket mindre användarinputfel. Således kommer vi i denna artikel att titta på hur vi kan minimera användarens inmatningsfel och fortfarande hålla våra användare nöjda.

Förutse användarbehov

Webbplatser och applikationer har olika användarbaser och mål, och till och med samma plats kan vara värd för många former som samlar olika typer av data, för att bara nämna de vanligaste:

• Inloggningsformulär
• Registreringsformulär
• Användarprofilformulär
• Nyhetsbrev registreringsformulär
• Checkout formulär
• Användarundersökningar
• Kontaktformulär
• Kommentarformulär
• Sök formulär

Alla dessa formtyper kräver olika saker. Vid utformning av checkout är det avgörande för att trovärdigt försäkra användarna om säkerhet, medan det i fråga om kommentarformulär är en bra idé att lägg till emojis eller andra metoder som gör att användarna kan uttrycka sin verkliga humör.

Men även liknande former kan behöva utformas annorlunda, som alla webbplatser har sina unik användarbas. Innan vi påbörjar designprocessen är det alltid en bra idé att Förutse vad våra användare behöver, och designa därefter.

Exempel: Sociala loggar som riktar användarbehov

Codepens inloggningsformulär innehåller tre sociala loggar med Github högst upp. Detta val skulle vara orimligt för de flesta webbplatser.

Men det är perfekt för Codepen, eftersom deras användargränssnitt består av utvecklare, varav många vill logga in med sina Github-konton, eller ansluta sina utvecklingskonton med varandra på en gång.

Tänk Mobile-First

Mobila och stationära användare har olika behov, men som Att fylla i formulär är en mycket större utmaning på en mobil skärm, Använda handbevakningar än på ett fysiskt tangentbord, a mobil-första tillvägagångssätt kan ta oss vidare när vi vill utforma användbara former.

Dessutom, många form UI-mönster som fungerar bra på mobilen fungerar också bra på skrivbordet också.

Exempel: Tappable Controls

Mobilformar av hög kvalitet kan inte föreställas utan synliga kontroller på vilken mobila användare kan enkelt knacka på med sina fingrar.

Nyhetsbrevet registreringsformuläret för webbdesignkonferensen An Event Apart anpassar sig till hur mobilanvändare får tillgång till skärmen - den innehåller två lättanvända inmatningsfält och a fingertoppstorlek.

Inmatningsfälten är högre som vanligt, så att mobila användare enkelt kan knacka på dem, och den stora orange knappen med en kryssningsikon uppmuntrar vidare användarna att skicka in formuläret.

Den stationära versionen av webbplatsen använder samma formulärdesign, eftersom det också ser bra ut och fungerar bra på större skärmar.

Exempel: Expendable Input

Vid utformning av formulär för mobil är det alltid viktigt att överväga hur vi kan minimera det utrymme vi använder. De expendable input UI-designmönster har blivit ganska populärt på senare tid, och det fungerar särskilt bra på mobilen.

Booking.com utnyttjar det här mönstret i sökformuläret på dess mobila webbplats. När användaren knackar in i sökfältet expanderar den för att lämna mer utrymme för gester, och en vald lista med rekommendationer visas också under den.

När användaren tappar ur fältet krymper den och den extra informationen försvinner.

Exempel: Morphing Button

Morphing-knappar Ta det utbytbara inmatningsmönstret ett steg ännu längre, eftersom användarna först ser en knapp, vilken då morphs i en form när de knackar på den.

Skärmbilden nedan är från The Startups briljanta artikel om innovativ formdesign, som också presenterar många andra kreativa lösningar.

Underlätta inmatning

Långa former tenderar att avskräcka användare. Det bästa vi kan göra är att bara fråga efter den inmatning vi verkligen behöver. Detta är inte bara viktigt ur ett användarupplevelseperspektiv, men användare kan också tveka att ge ut för mycket personlig information på grund av integritetsfrågor.

Ibland är vi dock fortfarande måste följa med längre former. I det här fallet är det en bra idé att skiv dem upp i mindre bitar, och tjäna bitarna som efterföljande skärmar.

Många e-handelswebbplatser (t.ex. Amazon) använder den här lösningen för att minska säljfrekvensen.

Om vi ​​vill underlätta kompletterande formulärfält är tumregeln att minska både distraktioner och användaråtgärder så mycket som möjligt.

Exempel: Personlig inmatningsväljare

Olika innehållsinställare, till exempel datumplockare eller färgplockare, gör det inte bara lättare att ta in rätt ingång, men de gör också formen mer attraktiv, och betydligt minska användarfel.

Applikationen Todoist List-taking ger personliga tips inuti sin datumväljare när användaren svävar över dagarna.

Till exempel på skärmdumpen nedan kan användaren se att den 31 augusti har hon redan 2 skyldiga uppgifter och kan ta hänsyn till denna information när man bestämmer rätt datum för uppgifter. Det är en utmärkt idé för en app där produktivitet är användarens huvudsakliga problem.

Exempel: Drag-och-släpp-ingång

Drag-och-släpp design brukar fungera bra med filuppladdningsfält, speciellt där användarna ska ladda upp bilder.

De sänker förmodligen inte användaråtgärder som mycket jämfört med den vanliga ladda upp en filknapp, men de gör det mycket lättare att välj vilken fil användaren vill ladda upp, Därför minskar chansen att skicka in en felaktig fil.

WordPress.com tillhandahåller ett elegant och intuitivt drag-och-släpp användargränssnitt i sin postredigeringsform. De små miniatyrbilder och den visuell representation av de redan uppladdade filerna Vidare hjälpa användarna att snabbt genomföra uppladdningen.

Exempel: Överlägg för att ta bort distraktioner

Om användarna distraheras när vi fyller i formuläret är de mer benägna att få fel, och blir också irriterade lättare

Innehållsöverlagringar är ett utmärkt alternativ till minimalistisk formdesign. De är använda av mer komplexa platser som vill visa olika typer av information på samma skärm.

På skärmdumpen nedan kan du se den stationära versionen av Booking.com. När användarna svävar på sökformuläret får resten av innehållet täckt av en gråaktig överläggning att hjälpa dem Behåll fokus på formulärpåfyllningsprocessen.

Ge feedback till användare

Ge den Rätt återkoppling vid rätt tidpunkt kan avsevärt förbättra användarupplevelsen.

I formdesign finns det två typer av användaråterkopplingar:

1. Feedback ges innan formulärinsändning - för att minska fel och form övergivande priser, till exempel framstegsspårare, omedelbar inmatningsvalidering som omedelbart belönar användarna för rätt inmatning eller hjälpverktygstips
2. Feedback ges efter formulärinsändning - för att låta användarna veta de begick ett fel, till exempel felmeddelanden

Den typ av användarreaktion som våra användare behöver mycket beror på egenskaperna hos vår målgrupp och målet för vår webbplats.

Exempel: Progress Tracker

Blanketter som är längre än en sida, till exempel enkäter och de flesta e-handelskassa, kan ta hävstångseffekten av framstegsspårare design mönster. Progress trackers ger en omedelbar visuell återkoppling till användarna om deras status och uppmuntra dem att fortsätta med processen.

SnapSurveys undersökningstillverkare webbenapp visar en liten framstegsspårare precis ovanför inmatningsknapparna så att användarna kan Naturligtvis fånga syn på det.

han fortskrider spåraren använder inga etiketter, men hur det är utformat gör sitt mål klart - Antalet cirklar anger antalet steg, de redan genomförda stegen blir blåa och användare kan enkelt se hur många steg som ligger framför dem.

Exempel: Validering i realtid

Body Shop kosmetik återförsäljare använder validering i realtid på användarprofilformuläret för att eliminera fel och förbättra UX i formulärets slutförandeprocess.

Inmatningar kontrolleras när användarna fyller i formuläret, och rätt och felaktiga svar indikeras omedelbart av lättskiljbara ikoner lite längre till höger men fortfarande i det synliga området.

Exempel: Expressive Tooltips

Förståelig mikroskopi är också en viktig del av framgångsrik användaråterkoppling i formdesign. Per definition består mikroskopi av en webbplats av små bitar av text används i olika delar - etiketter, knappar, felmeddelanden, verktygstips, etc..

I sin inloggningsformulär svarar Barclays bankkoncern på de frågor som användarna potentiellt kan fråga med hjälp av väl utformade verktygstips som inkluderar lättförståelig mikroskopi.

Verktygstipsen är dolda bakom lite? ikoner att inte distrahera användare vem vet hur man fyller i inloggningsformuläret, men att vara alltid närvarande för användare som är osäkra.

Några av verktygetips innehåller även lite visuellt med ett annoterat betalkort så att användarna enkelt kan hitta de uppgifter som de måste ange inloggningsformuläret.