Grundläggande: design av mobilformulär
Du kommer att lära dig
Lär dig de 6 grundläggande principerna för att utforma registreringsformulär för mobila enheter.
Varför är det viktigt med mobil formulärdesign?
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.
De 6 grunderna i mobil formulärdesign
- Håll formuläret kort och koncist
- Strukturera formuläret så att det motsvarar användarnas förväntningar
- Hjälp användarna att navigera i formuläret
- Välj innehållsblock som fungerar bra på mobilen
- Gör formuläret enkelt att öppna, läsa och fylla i på mobila enheter
- Tänk på dina färger och deras kontrast
Håll formuläret kort och koncist
Med mobila formulär är mindre alltid mer. Även om det kan vara frestande att lära sig allt om en prenumerant på en gång (namn, e-post, födelsedag etc.) kan långa mobilformulär leda till en lägre ifyllnadsgrad.
Begränsa antalet formulärelement eller fält som någon behöver fylla i så mycket som möjligt.
- Rekommenderat antal indatafält: 1-3 per sida
- Rekommenderat antal knappar för uppmaning till handling: 1-2 per sida
Vad gör jag om jag behöver mer än 3 fält?
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.
Strukturera formuläret så att det motsvarar användarnas förväntningar
Människor förväntar sig att formulär ska följa en viss logik, och det kan vara frustrerande (eller helt enkelt konstigt) om ett formulär inte gör det.
Nedan följer tips för att strukturera ett formulär för mobilen.
Be om den mindre personliga informationen först
Ä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:
- Namn
- e-post eller telefonnummer
- Födelsedag
Använd en enkolumnstruktur på mobilen
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 |
 |  |
Placera uppmaningsknappar (CTA) längst ner i ett formulär
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.
Lägg till stängningsknappen i det övre högra hörnet
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.
Hjälp användarna att navigera i formuläret
När det gäller mobila enheter vill du vara så tydlig som möjligt med vad någon behöver göra, hur det ska göras och vad de redan har gjort.
Placera kortfattade etiketter ovanför (och nära) varje fält
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.
Använd platshållare inom varje text indatafält
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.
Använd en beskrivande uppmaning till handling för knappar
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.
Ange vilka fält som är obligatoriska och vilka som är valfria
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
Inkludera ett framgångsmeddelande efter att någon har skickat in formuläret så att användaren vet att det gick bra.
Välj innehållsblock som fungerar bra på mobilen
Vissa typer av formulärblock är mer mobilvänliga än andra. Nedan listar vi vad du ska använda i mobilen och vad du inte ska göra.
Bra att använda på mobilen | Dålig att använda på mobilen |
Inmatning av text eller nummer (e-post, telefon, datum) | Flera kryssrutor |
Radioknappar | Rullgardinsmenyer |
Tryck-till-text-knappar (för sms-samtycke) |
Gör formuläret enkelt att öppna, läsa och fylla i på mobila enheter
Generellt sett bör ditt formulär vara lätt att använda på mobila enheter. Människor ska inte behöva kämpa för att läsa texten eller klicka på en viss knapp. Om detta händer kan de bli frustrerade och kanske överge formuläret eller din webbplats helt och hållet.
Det finns flera bästa metoder för att designa för mobila enheter.
Typsnittsstorleken ska vara minst 16 pixlar
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ägg till minst 8 pixlar utrymme mellan fält, knappar etc.
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.
Gör touch-mål på minst 48 pixlar
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 en teaser för formuläret
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.
Tänk på dina färger och deras kontrast
Du vill alltid att dina formulärfärger ska matcha ditt varumärke, så att det återspeglar ditt varumärke.
Det är dock lika viktigt att göra färgkombinationerna tillgängliga för alla användare. Annars riskerar du att stöta bort potentiella prenumeranter eller kund.
När du väljer färger finns det två viktiga faktorer att ta hänsyn till.
Välj färger med hög kontrast
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.
Välj färgblindvänliga färger
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.
Färgblindvänliga kombinationer | |||
Blå och orange |   | Blå och gul |  |
Blå och röd |  | Orange och gul | |
Blå och brun |  | | |
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).
Färgkombinationer att undvika | | ||
Grön och röd |  | Blå och lila |  |
Röd och orange | | Blått och grått |  |
Grönt och orange | | Lila och rött | |
Röd och brun | | Blågrön och rosa |   |
Grönt och brunt | | Blågrönt och grått | |
Grönt och blått | | Gul och rosa | |
Ljusgrön och gul |  | Rosa och grått | |
Grönt och grått | | Grått och brunt | |
Grönt och svart |  | Orange och brun | |
Röd och svart | | | |
Ytterligare resurser
- Komma igång med registreringsformulär
Lär dig hur du skapar och anpassar registreringsformulär i Klaviyo för att publicera på din webbplats så att du kan engagera kunder, samla in e-post och telefonnummer och bygga långvariga kundrelationer.
- Hur man samlar in sms-samtycke med ett tap-to-text-formulär
Lär dig hur du skapar ett registreringsformulär för tap-to-text för att samla in telefonnummer från nya prospekt. Med tap-to-text kan webbplatsbesökare klicka på en knapp i ditt registreringsformulär för att automatiskt öppna sin textmeddelanden-app där Klaviyo har lagt till ett meddelande. De behöver bara skicka meddelandet för att prenumerera.
- Så här skapar du ADA-vänliga registreringsformulär
Lär dig hur du använder tillgänglighetsassistentfunktionerna på fliken Formulärvarningar i redigeraren för registreringsformulär för att undvika några av de vanligaste problemen med WCAG Efterlevnad (Web Content Accessibility Guidelines). företag som strävar efter att göra sina webbplatser ADA-vänliga bör hänvisa till och följa WCAG-standarder. Tillgänglighetsassistenten hjälper dig att skapa registreringsformulär som är tillgängliga för alla besökare på din webbplats.