Grundläggande: design av mobilformulär

Online-shoppare använder i allt högre grad sina mobila enheter för att upptäcka nya butiker, bläddra bland produkter och göra inköp. Bara i USA skedde mer än 35% av alla onlineköp via en mobil enhet, och denna siffra fortsätter att öka varje år. 

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

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

Ett formulär med flera steg gör att du kan samla in mer information utan att överväldiga potentiella prenumeranter. Att ha ett separat steg för sms är dessutom en Efterlevnad bästa praxis 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 in dig på dem igen senare under kundresan. Kanske frågar du om din nuvarande prenumerants födelsedag genom att visa dem ett nytt formulär efter 30 dagar, eller kanske frågar du 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 om födelsedag före namn. 

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

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

En enspaltig kolumn innebär att alla indatafält och knappar följer en enda rad i formuläret. Även om format med flera kolumner är bra att använda på datorer, kan de få mobila formulär att se röriga eller överfulla ut. Formulär med en kolumn är också lättare att skanna på mobilen.

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

CTA-knappen bör placeras i slutet av betraktarens skanningsresa, så att den är det sista de ser. Du vill inte att de ska behöva scrolla upp för att fylla i 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 finnas i det övre högra hörnet är helt enkelt att det är där användarna förväntar sig att se den. 

Om du placerar den någon annanstans, t.ex. längst upp till vänster eller längst ner, kan dina användare ägna tid åt att leta efter ett sätt att stänga formuläret och bli frustrerade medan de letar. Det kan leda till att de lämnar webbplatsen 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 som ska fyllas i. 

Placera också etiketter nära de fält som de beskriver, så att det är tydligt att de två hör ihop.

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

I varje fält där användarna måste mata in text eller siffror ska du inkludera platshållare för att visa dina användare hur deras inmatning ska se ut (t.ex. ett exempel på e-post, namn, datumformat etc.).

Detta bidrar till att minska antalet fel som någon kan göra. Genom att arbeta tillsammans med etiketter och platshållare blir det enkelt för användarna att navigera genom formuläret. 

Pro-tip: knappar bör också ha etiketter. Att vara mer beskrivande i knapptexten hjälper också användaren. 

Om du till exempel säger "Prenumerera på nyhetsbrev" eller "Registrera dig för sms" i stället för en enkel "Submit"-uppmaning får du en tydligare bild av vad knappen gör. Dessutom kan detta hjälpa dig att spara dyrbart utrymme i den mindre formen. 

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

Inkludera ett framgångsmeddelande efter att någon har skickat in formuläret så att användaren vet att det gick bra. 

Om du använder en teckenstorlek på 16 pixlar eller mer blir texten lättläst. 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 ditt formulär så att användarna inte kämpar för att klicka i det fält de vill ha. Annars kanske de bestämmer sig för att gå sin väg i stä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ändarna att göra ett misstag. Testa användarupplevelsen på olika typer av enheter. 

Alla "touch targets", till exempel indatafält eller knappar, ska vara stora och lätta att klicka på. 

Det genomsnittliga fingret hos en vuxen är 11 midmarket+, vilket motsvarar cirka 41,6 pixlar. För att Konto ska kunna hantera detta är en bästa praxis att göra touch targets minst 48 pixlar. 

Använd ett formulär teaser så att mobila besökare kan öppna och stänga formuläret som de vill medan de surfar, och så att formuläret inte täcker webbplatsens innehåll.
Observera att Google har en straffavgift på webbplatser med påträngande interstitialer. teaser hjälper till att undvika detta straff, men du bör också använda en lång tidsfördröjning med formulär. 

Färgkontrast är skillnaden i ljus mellan text eller föremål i förgrunden och bakgrunden. Bra färgkontrast förbättrar läsbarheten i formuläret och är en viktig del av tillgängligheten. 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, eller svart text på vit bakgrund. Med andra ord, ju större kvoten är, desto bättre blir kontrasten. 

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

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

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

Det är viktigt att alla kan uppskatta det innehåll som du arbetar så hårt med. Användning av vissa färgkombinationer kan göra formuläret svårt eller till och med omöjligt att läsa för vissa grupper. 

När det gäller vilka som inte ska användas bör man komma ihåg att det finns många typer av färgblindhet (det är inte bara rött och grönt).