7 hemligheter för att designa stora former
Nästan varje webbdesign innehåller någon form av form. Från en enkel e-postadresssamling för att anmäla dig till ett nyhetsbrev eller anmälan till fullständiga betalningsinsamlingsformulär är det absolut nödvändigt att du utformar ett formulär som är lätt att använda och förstår.
Normerna för formdesign utvecklas också. Medan många former brukade inkludera flera kolumner och begära massor av information, föreslår de flesta bästa metoderna att man håller formulär så enkelt som möjligt. Och det finns också mycket på designen. En bra form är skannbar, kräver inte mycket skrivning och innehåller smart märkning och formatering för att hjälpa användare att fylla i formulär korrekt första gången.
Här är några hemligheter för att du ska utforma en blankett som användarna faktiskt fyller i.
1. Gör det enkelt att skanna och läsa
Du vet att användare skannar webbplatser för att få information och bestämma vilka åtgärder de ska ta eller om innehållet och designen intresserar dem eller inte. Detsamma gäller för former. Användaren ska kunna berätta vilken information som behövs en överblick och ge en tydlig förklaring av vad formuläret är och hur man skickar in det.
En mycket skannbar form innehåller följande:
- Kontrast: Texten måste vara kort och lätt att läsa. Undvik mycket färg och håll dig till traditionell mörk på ljusa text-bakgrundskombinationer.
- Gruppering och utrymme: Gruppinformation som liknar längre formulär. När du samlar in betalningsinformation till exempel, gruppkundsinformation, betalningsinformation och leveransinformation. Tre kortare block är lättare att smälta än en lång en. Använd smart avstånd till att etiketterna är anslutna till fältet de förklarar, snarare än enhetligt avstånd mellan text och fältelement.
- Klar finish / kall till handling : Gör knappen stor och lätt att se. Mikrokopi inuti knappen ska berätta för användarna vad som kommer att hända, till exempel "Skicka", "betala nu" eller "Fortsätt till nästa steg." Kom ihåg att stänga återkopplingsslingan och låta användarna veta när en blankett skickas in korrekt.
2. Tänk på flytande etiketter
Det har skett mycket debatt om huruvida du ska använda ledtråd i formulärfälten eller ej. Huvudproblemet är att alltför ofta går texten inte bort med ett klick och användarna måste aktivt ta bort den för att börja skriva. Det är obekvämt.
Vidare Nielsen Norman Group hittades att tomma fält kan rita ögat och hjälpa användarna att införa information tydligare.
Om du känner behovet av att använda tips, överväga en interaktiv lösning-flytande etiketter. Ta med din etikettinformation inuti formulärfält så att den ser ut som platshållare, men låt texten animera och flytta till vänster till vänster när en användare har höjt sig över eller klickar in i fältet. Etiketten eller antydan går aldrig bort och det går inte i vägen för användaren att försöka fylla i formuläret. (Plus den lilla animationen är en rolig överraskning för användare.)
3. Använd fältmasker
Fält masker kan ge några av samma ledtrådar och formulera tips men utan att komma i vägen för användbarheten. En fältmask visas bara när en användare aktiverar ett fält och ger en ytterligare skanningsledning om vilken information som behövs. Maskan kan hjälpa användaren ytterligare genom att automatiskt formatera information i ett försök att undvika fel som kommer att sparka ut formuläret vid inlämning.
Ett bra exempel på en fältmask i åtgärd är med telefonnummer. Tänk på flera formatalternativ:
- (000) 000-0000
- 000-000-0000
- 0000000000
Hur vet en användare vilken kommer att fungera? Formfältet anger och anpassar formatet som användartyper, så han eller hon behöver inte tänka på det och behöver bara skriva in siffror. (Detta sparar också besväret med att behöva växla mellan tangentbord på en mobil enhet.)
4. Gör formulär Keyboard-Friendly
Du har ingen möjlighet att veta vilken typ av enhet en användare kommer att stöta på din blankett på, men det borde vara lika enkelt att fylla i i alla fall. Tänk på alla olika typer av tangentbord som kan skicka information till formuläret och justera fält för att upptäcka och använda lämpligt alternativ.
På skrivbord ska användarna kunna skriva in en blankett och fylla i varje fält utan att behöva klicka på en mus. Förflytta automatiskt från ett fält till nästa när du är klar eller använd flikar eller skriv in för att flytta runt. W3.org har en solid uppsättning av tangentbord rekommendationer för att du ska följa.
På mobila enheter matchar tangentbordstypen till de data som krävs. Om ingången är för bokstäver, ta upp alfatangentbordet; för siffror, ta upp det numeriska alternativet. Från Google: "Appanvändare uppskattar appar som ger ett lämpligt tangentbord för textinmatning. Se till att detta implementeras konsekvent i hela appen istället för endast för vissa uppgifter men inte andra. "
5. Välj för vertikalformat
Vertikala former är enklare för användare än flera kolumnformat. Till bästa praxisregeln är att se till att alla fält kan passa på skärmen utan att rulla i ett övre och nedre format.
Det enda undantaget är för superkorta former där en användare bara behöver ange en e-postadress eller namn och e-postadress. Två kolumner vid sidan av sida följt av en anropsknapp kan fungera bra i den här situationen så länge som e-postrutan är tillräckligt lång så att användarna kan se alla bokstäver i deras adress.
Kom ihåg att beställa element logiskt i vertikal form. Om du samlar förnamn, efternamn, e-postadress och hårfärg sekvenser dem på det sättet.
6. Limtypning
Använd så många förfyllningslösningar som möjligt med blanketter. Ingenting är mer förtjusande, då kommer du att lägga till en adress och efter de första kranarna slår Google API in och föreslår adressalternativ.
Det här gör tre saker:
- Det gör det lättare för användare, särskilt på mobilen.
- Det bidrar till att begränsa antalet fält som behövs.
- Det kan hjälpa till med att eliminera vissa användarfel, t.ex. mistypning.
Tänk samma sak med e-postadresser, så att användare får populära e-postdomäner efter @ -symbolen. När en användare skriver in [email protected] .... Fältet föreslår automatiskt [email protected] .
7. Håll det kort och sött
Du kommer att bli frestad att fråga användarna för mycket information i blanketter. Motstå frestelsen!
Be bara om väsentlig information i blanketter. Det finns en större sannolikhet att användarna kommer att fylla i formulär som kräver mindre engagemang. Om du behöver mer information senare kan du sedan maila dem från din lista och be om ytterligare information. (Som en person som redan har valt, är användaren mer benägna att engagera dig för mer just nu.)
Undvik frivilliga fält. Fråga inte om överflödig information. Använd inte flera fält där du kan använda en (t.ex. telefonnummer).
Slutsats
Ge användarna något till skillnad från att fylla i ett formulär. Gör det kul eller intressant. Tack användaren.
Att skapa en blankett som är lätt att läsa och lätt att använda kommer att öka dina chanser att samla in data och göra en webbplatsbesökare till en återkommande användare.