Bättre kontaktformsdesign börjar med användbarhet. Målet med en blankett är uppenbart: du behöver information från användaren. Formuläret måste vara intuitivt nog så att användarna vet exakt vad man ska göra och inte får sidospår i färd med att slutföra den åtgärden.
De bästa kontaktformulären är lätta att titta på och innehåller mycket användbara element som användare kan engagera sig utan att tänka på dem. (Det låter lite lättare än det är ibland.) Men tack och lov har vi ett urval tips som hjälper dig att designa bättre kontaktformulär.
1. Gör det en kolumn
Vertikala former fungerar bra eftersom användarna är vana vid att rulla. Det gör det lätt att se början och slutet på formuläret. Vad är lättare? Tabbing genom en form vertikalt eller fyller in objekt över och sedan ner på skärmen? Att skapa en form med en enda vertikal kolumn är den enklaste lösningen för många användare eftersom de bara måste tänka på en åtgärd - flytta ner skärmen genom formuläret.
Den kan fungera för fält som är likartade, till exempel kort svar för namn, e-postadress och telefonnummer. Det kan också fungera bra för element som en kassaskärm.
Denna form fungerar också bättre med lyhörda format så att formuläret har samma form på olika enheter, vilket ger en mer konsekvent användarupplevelse. Detta kan vara särskilt viktigt med e-handel eller checkout formulär eftersom du inte vill att erfarenheten varierar, skapa frågor om giltighet och trovärdighet i formuläret.
2. Grupp innehåll logiskt
Små visuellt grupperade block av frågor eller formulärfält kan göra en form lättare att förstå. Håll liknande saker tillsammans (t.ex. adressuppgifter eller betalningsfält) och gruppelement med deras etiketter och annan instruktionstekst. Användare bör aldrig ifrågasätta vilket fält en etikett eller instruktion avser.
Logiska grupperingar av innehåll skapar ett flöde för formuläret, där användarna kan förutse vilken information som kommer nästa. Detta gör upplevelsen lätt och roligt.
3. Placera etiketter ovanför innehållet
De flesta formverktyg ger dig många alternativ för var du ska placera etiketter eller verktygstips. Motstå frestelsen att bli alltför kreativ och placera etiketter ovanför fältet där information går. Detta är den vanligaste och användbar-placeringen för etiketter.
Dessutom konverterar denna placering enkelt till andra enheter. Tänk på formuläret på en telefon i stället för ett skrivbord, till exempel. Om formuläret kommer framför etiketten kan du planera vilken information som ska läggas i fältet, även innan du bläddrar till det, och det kommer att hålla sig kvar tills formulärfältet är klart. Men om etiketten ligger under fältet kan du fastna i ett mönster för att rulla ner och sedan upp igen för att se instruktioner och fylla i formuläret.
Medan det här nu kan verka som en stor sak kan det vara frustrerande för användarna. Och med längre former kan det leda till fel i hela formuläret. Detta är ett stort användbarhetsproblem i din kontaktformsdesign.
4. Fråga inte för mycket information
De mindre engagerade och lojala användarna är, ju färre fält de kommer att acceptera för att slutföra en åtgärd. Kortare blanketter är mer benägna att fyllas ut än långa former som kräver onödig information. (Måste du verkligen skriva in vilken typ av kreditkort du har på en betalningssida? Svaret är nej, siffran anger typen av kort, så gör inte användarna att ange denna onödiga information.)
De mindre engagerade och lojala användarna är, ju färre fält de kommer att acceptera för att slutföra en åtgärd. För nya användare är det OK att fråga om en e-postadress. Vänta på ett bekräftelsemail (när de är lite mer investerade) eller följa upp för att utöka den information som samlats in för att inkludera ett namn, postnummer eller födelsedag.
Korta enkla former har högre engagemang som långa, uttömmande kontaktformer. Design på lämpligt sätt.
5. Gör knappen tydlig
Se till att mikrokopian i knappen talar om vad som händer När användaren fyller ut varje fält i formuläret är den slutgiltiga åtgärden uppenbar? För ofta skapar du en lätt att se-knapp är det bortglömda steget i formulärdesign. Knappen ska vara tydlig synlig. Använd en färg som är specifik för den slutliga knappen och se till att mikrokopian i knappen berättar exakt vad som händer (skicka in, slutföra betalning etc.).
Bonus Tips: Om du använder en captcha eller en annan typ av mänsklig utmaning, sätt det mellan sista fältet i formuläret och skicka in knappen. (Det finns inget mer irriterande än att klicka på Skicka bara för att få captchaen att du ska upprepa åtgärden? Eller värre, få dig att börja om.)
Åh, och ett enda tips som säger sig själv? Låt användarna veta när en blankett är klar! En enkel? Tack? dialog är ofta tillräckligt.
6. Använd lämpliga fälttyper
En bra formgivare vet att en fälttyp inte passar all information. Matcha fälttypen till de data som samlas in för att underlätta för användarna att fylla formulären korrekt. Du skulle inte använda en rullgardinsmeny för ett telefonnummer, skulle du?
Även om detta är en av de tips som verkar helt uppenbart, händer det fel för mycket av tiden.
Tänk på det här fältet på en kontaktformulär: Det bästa sättet att kontakta mig är via e-post eller telefon. Med ett knappval gör det klart att användaren ska välja en. Att använda en rullgardinsmeny är för komplex av en åtgärd för ett eller annat val. Och du behöver absolut inte detta som ett kort svarfält.
Inte bara kommer användningen av rätt typ av fält att göra formulär lättare för användarna, det kommer också att effektivisera din datainsamling och analys.
7. Validera uppgifter om möjligt
Älskar du inte bara när en blankett berättar om fel när du går hellre än i slutet? Älskar du inte bara när en blankett berättar om fel allt efter som snarare än i slutet? Inte bara kan du se och korrigera felet, men det sparar tid och huvudvärk i processen.
Att använda validering på kontaktformulär är ett måste. Från att bekräfta att en e-postadress följer rätt format, för att validera antalet siffror för en postnummer eller telefonnummer, kan dessa små saker göra stor skillnad.
Och om du inte gör det, är du i minoriteten. En studie från Baymard Institute visar att 60 procent av formulären använder inline validering. Så det är inte bara ett användbarhetsverktyg, det blir snabbt ett vanligt användarmönster (och förväntan).
Slutsats
De två mest populära typerna av formulär i webbdesignprojekt är antagligen email-registreringar och kontaktformulär. Börja med att se till att dessa formulär är ordentligt anpassade och tweak designen för att göra dem mer användbara. (Om du märker betydligt mer engagemang, fungerar det förmodligen.)
Samma begrepp kan appliceras på formulär genom hela designen samt undersökningar, checkoutsider och annan datainsamling. Dessa begrepp skala upp för att möta någon form av webbplatselement där användaren behöver ange information för att slutföra en process.