Kontaktformulär är en nyckelkomponent på många webbplatser. Medan de i allmänhet är enkla måste du se till att de är lätta att använda om du vill samla in leads och hålla kontakten med dina användare. Detta är vanligtvis inte ett problem med kontortrafik, men det kan vara svårt att använda formulär om du använder en mobil enhet.
I den här handledningen ska vi prata lite om vikten av att utforma mobilvänliga formulär. Därefter går vi igenom fem tips för att se till att dina formulär fungerar smidigt på mobila enheter.
Låt oss komma till jobbet!
Varför det är viktigt att dina blanketter är mobilvänliga
Former finns i alla former och storlekar. Oftast kommer du att hantera kontaktformulär:
Registreringsformulär (prenumerationsformulär) är också mycket populära eftersom de låter dig samla in e-postmeddelanden och rikta in dem under kampanjer:
Formulär kan dock användas för alla typer av andra ändamål. Du kan till exempel samla in information med en online-enkät eller frågeformulär , i vilket fall du behöver formulär som tillåter användare att ange svar.
Med andra ord är formulär mycket mångsidiga och nästan alla webbplatser använder formulär på ett eller annat sätt. Därför är det viktigt att dina formulär är enkla att använda (om du inte vill ge dina besökare en frustrerande upplevelse).
Att använda formulär från en stationär eller bärbar dator är vanligtvis väldigt enkelt. Du har en komplett mus och ett tangentbord, så det bör inte vara ett problem att välja det fält du vill använda och mata in data. Att surfa på webben från din smartphone eller annan kompakt enhet har dock komplikationer.
När du arbetar med fingrarna på en liten skärm kan interaktion med formulär ibland vara överväldigande på grund av dåliga designbeslut. Detta är något du bör undvika i dina egna mönster. När allt kommer omkring, om mobilanvändare inte kan interagera med dina formulär, kan du förlora konverteringar, leads eller bara irritera besökare.
Det är också viktigt att förstå att mobiltrafik nu, om inte mer, är viktigt än stationära källor. Faktum är att mobiltrafiken redan har passerat den senare de senaste åren. Det innebär att utforma en mobilvänlig webbplats bör vara ditt huvudmål när du startar ett nytt projekt.
5-tips för att utforma användarvänliga mobilformulär
Lyckligtvis är det inte så svårt att utforma mobilvänliga formulär som du kan tänka dig. I de flesta fall behöver du bara ha några grundläggande i åtanke och testa dina formulär noggrant innan du tar dem i bruk. Låt oss prata om hur man gör det!
1. Ta bort alla onödiga avsnitt
Ju fler fält ditt formulär innehåller, desto svårare blir det att använda på mobilen. Faktum är att användningen av formulär på mobilen är helt enkelt mer komplicerad. Genom att minska antalet fält eller avsnitt som ingår i dina formulär kan du maximera dina chanser att besökare fyller i dem.
Här är ett snabbt exempel på en kontakt~~POS=TRUNC formulär~~POS=HEADCOMP med några ytterligare fält som inte är nödvändiga på mobilen:
I de flesta fall, allt du behöver för en fantastisk kontakt~~POS=TRUNC formulär~~POS=HEADCOMP är ett namn, e-postadress och brödtexten i meddelandet du vill ta emot. Allt annat beror på vilken typ av webbplats du använder och om du försöker samla in leads.
I slutändan, ju färre fält formuläret har, desto lättare blir det för mobilbesökare att använda dem. När allt kommer omkring kan det vara svårt att välja ett fält med en pekskärm, oavsett hur väl utformat, för att minimera antalet humle som användarna måste göra.
Ditt mål vid denna tidpunkt är att granska befintliga formulär på din webbplats. Gå igenom vart och ett av deras avsnitt och avgöra om du verkligen behöver några andra fält än de som nämnts tidigare. Om det finns ett överflödigt fält, raderar du det bara.
2. Använd rullgardiner om möjligt
De flesta av oss är bekväma med att skriva på mobila enheter och använda pekskärmar. Men sms:a en vän och fylla i ett kontakt~~POS=TRUNC formulär~~POS=HEADCOMP är två väldigt olika upplevelser. Med dessa finns det en god chans att du kommer att bli frustrerad om du måste skriva in mycket information.
Ett sätt att göra livet enklare för din mobilbesökare är att förenkla de val de måste göra om elementen på din webbplats. För att ge dig en uppfattning om vad vi pratar om, låt oss dra nytta av vårt tidigare exempel på bokning restaurang:
Att göra en bokning, måste du antagligen lämna ett namn, e-post, telefon et ange en tid, samt antalet närvarande personer. Det finns två sätt du kan skapa ett formulärfält för att validera en tid på dagen. bokning:
- Konfigurera ett fält som endast accepterar numeriska poster.
- Utforma en rullgardinslista inklusive alla tillgängliga tider för en bokning.
Som ni kan föreställa er det senare mer användarvänligt för mobilanvändare. Med detta tillvägagångssätt behöver de inte ange siffror och de kan bara välja vad som fungerar bäst för dem bland alternativen du inkluderar.
Idén för dig att titta på dina formulär och se om de innehåller fält som du kan ersätta med rullgardinsmenyer. Detta kommer inte alltid att vara fallet eftersom du inte kan använda rullgardinsmenyer för att samla namn eller e-post, men andra alternativ kan användas.
Oavsett deras användningsfall vill du se till att dina rullgardinsmenyer innehåller alternativ som är lätta att välja bland mobila enheter. Med andra ord, gör menyn tillräckligt stor för att någon inte behöver markera för att välja rätt alternativ.
3. Se till att dina knappar är enkla att beröra
Detta tips är ganska enkelt, men fortfarande att nämna. Varje formulär du utformar bör innehålla ett sätt för användare att bekräfta att de vill skicka in de angivna uppgifterna. I de flesta fall innebär det att skapa en skicka-knapp:
När du använder en vanlig dator är det mest naturliga i världen att klicka på en skicka-knapp. Vi har dock stött på några formulär på mobilen där det är mycket svårare att trycka på en knapp.
Om dina besökare inte kan skicka informationen som de skrev in i dina formulär kommer alla dina ansträngningar att gå till spillo. Dessutom ser ingenting så oprofessionellt ut som en knapp skicka det fungerar inte som förväntat.
Att utforma bättre inmatningsknappar för mobilen är här tre tips att tänka på:
- Se till att de är tillräckligt stora för att du enkelt kan trycka på en mobil enhet.
- Placera inte dina knappar för nära andra objekt så att användare inte rör dem ordentligt.
- Markera dina knappar, till exempel med kontrasterande färger eller kreativ typografi.
Utöver allt detta vill du också testa dina knappar innan din webbplats går live. Vi kommer att gå mer ingående på hur man gör det på en minut. För nu, låt oss prata om prestanda.
4. Se till att dina formulär laddas snabbt
Vi pratar mycket om webbplatsens prestanda i många av våra artiklar och det är inte för att vi behöver hastighet. Poängen är att de flesta inte gillar långsamma webbplatser, vilket är helt meningsfullt.
Med snabbare internet kan det vara svårt att vänta på att en webbplats laddas för länge. Dessutom tenderar mobila internethastigheter att variera mycket mer än vanliga hemanslutningar. Detta innebär att din webbplats måste vara mycket optimerad för mobila enheter om du vill hålla dessa användare nöjda, eftersom inte alla kommer att ha internetåtkomst (dvs. snabbt).
Detta specifika tips kan gälla för hela din webbplats, men det är också viktigt för mobilsidor som visar dina formulär. Om det tar för lång tid att ladda dessa delar av din webbplats, ni förlora konvertering och möjligheter att få kontakt med dina besökare.
I allmänhet bör det ta mer än två sekunder att ladda en webbplats. När du väl har passerat denna gräns tenderar avvisningsfrekvensen att öka dramatiskt, vilket är fruktansvärda nyheter för dig, och med tanke på mobilsurningens natur är det bäst att hålla den här tiden så låg som möjligt. .
Med detta i åtanke finns det många sätt att förbättra det övergripande resultatet för din webbplats. Du kan till exempel uppgradera till en bättre planlogi, använd ett responsivt tema optimerat för hastighet och komprimera dina bilder. Naturligtvis kommer dessa att hjälpa alla användare, men kommer att vara särskilt användbara för dem som använder mindre enheter.
5. Testa dina formulär innan du publicerar
Med tanke på att formulär är en viktig del av de flesta webbplatser är det vettigt att du testar dem noggrant innan du publicerar dem. Med WordPress är den här processen ganska enkel. Du kan fortsätta och designa specifika sidor för att visa dina formulär och inte publicera dem förrän du har testat dem helt.
Naturligtvis är det du som använder plugin eller tema du vill använda (så länge det kan hjälpa till att utveckla mobila webbplatser). Men när det gäller testfasen rekommenderar vi att du håller det enkelt och använder verktyg som outils av utveckling krom att göra jobbet.
Låt oss gå igenom ett snabbt exempel. Om du använder Chrome, fortsätt och förhandsgranska sidan med det formulär du vill testa. Högerklicka sedan var som helst på den här sidan och välj alternativet inspektera . Chrome visar en uppsättning verktyg som du kan använda för att granska och redigera sidans källkod till höger och vänster, du kan se en förhandsgranskning av dess utseende från en mobil enhet:
Överst på skärmen kan du använda en meny för att växla mellan olika upplösningar. Chrome innehåller inställningar för flera populära mobila enheter, men du kan också ange en anpassad upplösning.
Vid denna tidpunkt bör du kontrollera ditt kontaktformulärs utseende och beteende på flera enheter. Ta exemplet nedan - formuläret fungerar bra, men du kan se att det inte passar så bra som det borde. Var särskilt uppmärksam på text och ikoner, som ligger för nära skärmkanten:
Ett sätt att förhindra detta problem är att hålla dina formulär enkla, som vi nämnde i det första tipset. I exemplet nedan använder formuläret flera rullgardinslistor och kräver endast tre fält. Detta gör det enkelt att använda och, ännu viktigare, formuläret är så enkelt att det måste passa perfekt för alla enheter:
Om du har några problem med någon av dina formulär måste du självklart lösa dem omedelbart. Annars riskerar du att främja din mobila publik, vilket vi försöker undvika först!
Slutsats
Att se till att din webbplats är kompatibel med mobila enheter är nyckeln till att hålla trafik och inte frustrera dina besökare. Specifikt bör dina formulär vara enkla att använda på mobila enheter om du inte vill missa att ta emot meddelanden eller samla in värdefulla leads.
När det gäller att utforma mobilvänliga formulär, är det fem tips för att förenkla ditt liv:
- Ta bort alla onödiga avsnitt.
- Använd rullgardiner om möjligt.
- Se till att dina knappar är lätta att trycka på.
- Se till att dina formulär laddas snabbt.
- Testa dina formulär innan du publicerar dem.
