Grundläggande: design av mobilformulär

Onlinekunder använder i allt större utsträckning sina mobila enheter för att upptäcka nya butiker, bläddra bland produkter och göra köp. Bara i USA gjordes mer än 35 % av onlineköpen via en mobil enhet, och den siffran fortsätter att öka varje år.

För att se till att du konverterar dessa kunder till prenumeranter är det viktigt att dina registreringsformulär ser lika bra ut på mobilen som på datorn.

Om du behöver fler än 3 fält, till exempel om du vill samla in samtycke till e-post och sms samtidigt, kan du överväga ett flerstegsformulär.

Med ett flerstegsformulär kan du samla in mer information utan att överväldiga potentiella prenumeranter. Dessutom är det en Efterlevnad-best practice att ha ett separat steg för sms när du samlar in flera typer av samtycke i ett formulär.

Alternativt kan du lära dig mer om dina prenumeranter genom att rikta om dem senare i kundresan. Du kanske frågar om dina nuvarande prenumeranters födelsedag genom att visa dem ett annat formulär efter 30 dagar, eller så kanske du frågar som en del av din välkomstserie.

Även om alla fält i ett formulär är obligatoriska är det ändå konstigt att fråga efter någons födelsedag innan deras namn.

Be i allmänhet om information från minst till mest personlig. Till exempel:

1. Namn
2. E-post eller telefonnummer
3. Födelsedag

Ett enkolumnsformat innebär att alla indatafält och knappar följer en enda linje i formuläret. Även om flerkolumnsformat fungerar bra på datorn kan de göra att mobilformulär ser röriga eller överfulla ut. Enkolumnsformulär är också lättare att överblicka på mobilen.

Formulär med en kolumn	Formulär med flera kolumner

CTA-knappen bör vara i slutet av besökarens skanningsresa så att det är det sista de ser. Du vill inte att de ska behöva skrolla upp för att slutföra formuläret eller behöva leta efter knappen.

Vanligtvis placeras CTA-knappen i mitten eller på vänster sida.

Anledningen till att stängningsknappen måste vara i det övre högra hörnet är helt enkelt att det är där användare förväntar sig att den ska vara.

Om du placerar den någon annanstans, till exempel längst upp till vänster eller nära botten, kan dina användare lägga tid på att leta efter ett sätt att stänga formuläret och bli frustrerade medan de letar. Detta kan göra att de lämnar med ett negativt intryck av ditt varumärke, vilket innebär att de är mindre benägna att besöka din webbplats i framtiden eller bli kunder.

Placera en etikett direkt ovanför varje fält i formuläret som tydligt beskriver vilken information de ska ange.

Placera även etiketter nära fälten de beskriver, så att det är tydligt att de hör ihop.

Varje etikett bör ta upp mindre än en enda rad när den visas på en mobil enhet, så det är viktigt att vara kortfattad.

I varje fält där användare behöver ange text eller siffror ska du lägga till platshållare som visar din målgrupp hur deras inmatning ska se ut (t.ex. ett exempel på e-postadress, namn, datumformat osv.).

Det hjälper till att minska antalet fel som någon kan göra. Att arbeta tillsammans med etiketter och platshållare gör det enkelt för användare att navigera genom formuläret.

Proffstips: knappar ska också ha etiketter. Att vara mer beskrivande i knapptexten hjälper också användaren.

Till exempel kan du, i stället för en enkel uppmaning som ”Skicka”, skriva ”Prenumerera på nyhetsbrev” eller ”Registrera dig för sms” för att ge en tydligare bild av vad knappen gör. Dessutom kan detta hjälpa dig att spara värdefullt utrymme i det mindre formuläret.

Att berätta för dina kunder vilka fält de måste fylla i och vilka de inte behöver fylla i effektiviserar användarupplevelsen. Du kan göra vissa formulärelement obligatoriska och andra valfria,

Inkludera ett bekräftelsemeddelande efter att någon skickat in formuläret så att användaren vet att det lyckades.

Om du använder en teckenstorlek på 16 pixlar eller mer blir texten lättare att läsa. På så sätt behöver användarna inte zooma in för att läsa.

16 pixlar är den minsta teckenstorlek som rekommenderas för all text i ditt mobilformulär, inklusive etiketter, platshållare och knapptext.

Lämna tillräckligt med utrymme mellan enskilda åtgärder i formuläret så att användare inte har svårt att klicka i det fält de vill ha. Annars kan de välja att lämna istället för att fortsätta försöka.

När du bygger ditt formulär ska du försöka göra det så svårt som möjligt för användare att göra ett misstag. Testa användarupplevelsen på olika typer av enheter.

Alla ”touch targets”, som indatafält eller knappar, bör vara stora och lätta att klicka på.

Den genomsnittliga vuxna fingret är 11 midmarket+, vilket är cirka 41,6 pixlar. För att ta hänsyn till detta är en bästa praxis att göra tryckmål minst 48 pixlar.

Använd en teaser så att mobilbesökare kan öppna och stänga formuläret när de vill medan de surfar, och så att formuläret inte täcker över webbplatsens innehåll.
Observera att Google har en bestraffning för webbplatser med påträngande interstitials. Teaser hjälper dig att undvika den här bestraffningen, men du bör också använda en lång tidsfördröjning för formulär.

Färgkontrast är skillnaden i ljus mellan text eller objekt i förgrunden och bakgrunden. Bra färgkontrast förbättrar formulärets läsbarhet och är en viktig del av tillgänglighet. Använd en färgkontrastkontroll för att kontrollera din färgkontrast.

Den minsta kontrasten är 1:1 och är omöjlig att läsa (tänk vit text på vit bakgrund). Den högsta tillgängliga kontrasten är 21:1, alltså svart text på vit bakgrund. Med andra ord: ju högre förhållande, desto bättre är kontrasten.

Enligt Web Content Accessibility Guidelines (WCAG) är den minsta färgkontrasten 4,5:1 för liten text, bilder och text i bilder samt 3:1 för stor text eller viktiga element.

Helst ska kontrasten vara ännu större. Enligt WCAG är ett bättre minimikrav:

• 7:1 för mindre text, bilder eller bilder med text
• 4,5:1 för större text, viktiga visuella element osv.

Det är viktigt att alla kan ta till sig innehållet som du jobbar så hårt med. Att använda vissa färgkombinationer kan göra formuläret svårt eller till och med omöjligt för vissa grupper att läsa.

Kombinationer som är anpassade för färgblinda
Blått och orange		Blå och gul
Blå och röd		Orange och gul
Blå och brun

När det gäller vilka du inte ska använda ska du tänka på att det finns många typer av färgblindhet (det är inte bara rött och grönt).

Färgkombinationer att undvika
Grönt och rött		Blå och lila
Rött och orange		Blå och grå
Grön och orange		Lila och röd
Rött och brunt		Blågrön och rosa
Grönt och brunt		Blågrönt och grått
Grönt och blått		Gul och rosa
Ljusgrönt och gult		Rosa och grått
Grönt och grått		Grå och brun
Grön och svart		Orange och brun
Röd och svart