Contactformulieren zijn een belangrijk onderdeel van veel websites. Hoewel ze over het algemeen eenvoudig zijn, moet u ervoor zorgen dat ze gemakkelijk te gebruiken zijn als u leads wilt verzamelen en in contact wilt blijven met uw gebruikers. Dit is meestal geen probleem met kantoorverkeer, maar het gebruik van formulieren kan moeilijk zijn als u een mobiel apparaat gebruikt.
In deze tutorial gaan we het hebben over het belang van het ontwerpen van mobielvriendelijke formulieren. Vervolgens bespreken we vijf tips om ervoor te zorgen dat uw formulieren probleemloos werken op mobiele apparaten.
Laten we aan het werk gaan!
Waarom het belangrijk is dat uw formulieren mobielvriendelijk zijn
Formulieren zijn er in alle soorten en maten. Meestal hebt u te maken met contactformulieren:
Aanmeldings- (abonnements) formulieren zijn ook erg populair omdat je hiermee e-mails kunt verzamelen en deze kunt targeten tijdens campagnes:
Formulieren kunnen echter voor allerlei andere doeleinden worden gebruikt. U kunt bijvoorbeeld informatie verzamelen met een online enquête of vragenlijst , in dat geval heeft u formulieren nodig waarmee gebruikers reacties kunnen invoeren.
Met andere woorden, formulieren zijn zeer veelzijdig en bijna alle sites gebruiken formulieren op de een of andere manier. Daarom is het essentieel dat uw formulieren gemakkelijk te gebruiken zijn (tenzij u uw bezoekers een frustrerende ervaring wilt bieden).
Het gebruik van formulieren vanaf een desktop- of laptopcomputer is meestal heel eenvoudig. Je hebt een volledige muis en toetsenbord, dus het selecteren van het veld dat je wilt gebruiken en het invoeren van gegevens zou geen probleem moeten zijn. Het surfen op internet vanaf uw smartphone of ander compact apparaat heeft echter complicaties.
Wanneer u met uw vingers op een klein scherm werkt, kan de interactie met formulieren soms overweldigend zijn vanwege slechte ontwerpbeslissingen. Dit is iets dat u in uw eigen ontwerpen moet vermijden. Als mobiele gebruikers niet kunnen communiceren met uw formulieren, kunt u immers conversies of leads verliezen of gewoon bezoekers irriteren.
Het is ook van cruciaal belang om te begrijpen dat mobiel verkeer nu, zo niet meer, belangrijk is dan desktopbronnen. Sterker nog, mobiel verkeer heeft de laatste jaren het laatste al ingehaald. Dit betekent dat het ontwerpen van een mobielvriendelijke website uw belangrijkste doel moet zijn bij het starten van een nieuw project.
5-tips voor het ontwerpen van gebruiksvriendelijke mobiele formulieren
Gelukkig is het ontwerpen van mobielvriendelijke formulieren niet zo moeilijk als u zich wellicht kunt voorstellen. In de meeste gevallen hoeft u slechts enkele basisprincipes in gedachten te houden en uw formulieren grondig te testen voordat u ze in gebruik neemt. Laten we praten over hoe je het moet doen!
1. Verwijder alle onnodige secties
Hoe meer velden uw formulier bevat, hoe moeilijker het zal zijn om het op mobiel te gebruiken. Het gebruik van formulieren op mobiele apparaten is inderdaad gewoon ingewikkelder. Door het aantal velden of secties in uw formulieren te verminderen, kunt u uw kansen maximaliseren dat bezoekers ze invullen.
Hier is een snel voorbeeld van een Contact formulier met enkele extra velden die niet nodig zijn op mobiel:
In de meeste gevallen alles wat je nodig hebt voor een geweldige Contact formulier is een naam, e-mailadres en de hoofdtekst van het bericht dat u wilt ontvangen. Al het andere hangt af van het type website dat u gebruikt en of u leads probeert te verzamelen.
Uiteindelijk geldt dat hoe minder velden het formulier heeft, hoe gemakkelijker het is voor mobiele bezoekers om ze te gebruiken. Het selecteren van een veld met behulp van een touchscreen kan immers lastig zijn, hoe goed het ook is ontworpen, om het aantal hops dat gebruikers moeten maken te minimaliseren.
Uw doel is nu om bestaande formulieren op uw site te beoordelen. Doorloop elk van hun secties en bepaal of u echt andere velden nodig heeft dan de eerder genoemde. Als er een onnodig veld is, verwijder het dan gewoon.
2. Gebruik vervolgkeuzelijsten indien mogelijk
De meesten van ons typen graag op mobiele apparaten en gebruiken touchscreens. Echter, een vriend sms'en en een Contact formulier zijn twee heel verschillende ervaringen. Hiermee is de kans groot dat u gefrustreerd raakt als u veel informatie moet invoeren.
Een manier om het leven van uw mobiele bezoeker gemakkelijker te maken, is door de keuzes die ze moeten maken over de elementen van uw site te vereenvoudigen. Om u een idee te geven van waar we het over hebben, laten we profiteren van ons vorige voorbeeld van reservering restaurant:
Om een reservering, moet u waarschijnlijk een naam, e-mail, telefoon achterlaten et geef een tijdstip aan, evenals het aantal aanwezigen. Er zijn twee manieren waarop u een formulierveld kunt maken om een ​​tijdstip op de dag te valideren. reservering:
- Configureer een veld dat alleen numerieke invoer accepteert.
- Ontwerp een vervolgkeuzelijst met alle beschikbare tijden voor een reservering.
Zoals u zich kunt voorstellen, is dit laatste gebruiksvriendelijker voor mobiele gebruikers. Met deze aanpak hoeven ze geen cijfers in te voeren en kunnen ze gewoon kiezen wat voor hen het beste werkt uit de opties die u opneemt.
Het idee voor u om naar uw formulieren te kijken en te zien of ze velden bevatten die u zou kunnen vervangen door vervolgkeuzemenu's. Dit zal niet altijd het geval zijn, aangezien u geen vervolgkeuzemenu's kunt gebruiken om namen of e-mails te verzamelen, maar er kunnen andere opties worden gebruikt.
Wat hun toepassing ook is, u wilt ervoor zorgen dat uw vervolgkeuzemenu's opties bevatten die gemakkelijk te selecteren zijn vanaf mobiele apparaten. Met andere woorden, maak het menu zo groot dat iemand niet hoeft te pikken om de juiste optie te kiezen.
3. Zorg ervoor dat uw verzendknoppen gemakkelijk aan te raken zijn
Deze tip is vrij eenvoudig, maar moet nog worden genoemd. Elk formulier dat u ontwerpt, moet een manier bevatten waarop gebruikers kunnen bevestigen dat ze de ingevoerde gegevens willen indienen. In de meeste gevallen betekent dit dat u een verzendknop moet maken:
Als u een gewone computer gebruikt, is het klikken op een verzendknop de normaalste zaak van de wereld. We zijn echter een paar formulieren tegengekomen op mobiel waarbij het veel moeilijker is om op een knop te drukken.
Als uw bezoekers de informatie die ze in uw formulieren hebben ingevoerd, niet kunnen indienen, zullen al uw inspanningen verloren gaan. Bovendien ziet niets er zo onprofessioneel uit als een knop sturen dat werkt niet zoals verwacht.
Om betere uploadknoppen te ontwerpen voor mobiel, volgen hier drie tips om te overwegen:
- Zorg ervoor dat ze groot genoeg zijn om gemakkelijk op een mobiel apparaat te kunnen tikken.
- Plaats uw knoppen niet te dicht bij andere items, zodat gebruikers ze niet goed aanraken.
- Accentueer je knoppen, bijvoorbeeld met contrasterende kleuren of creatieve typografie.
Bovendien wilt u uw knoppen testen voordat uw site live gaat. We zullen in een minuut dieper ingaan op hoe u dit kunt doen. Laten we het nu over prestaties hebben.
4. Zorg ervoor dat uw formulieren snel worden geladen
In veel van onze artikelen praten we veel over websiteprestaties en dat is niet omdat we snelheid nodig hebben. Het punt is dat de meeste mensen niet van trage websites houden, wat volkomen logisch is.
Met de hogere snelheid van internet kan het moeilijk zijn om te lang te wachten tot een website te lang laadt. Bovendien variëren mobiele internetsnelheden veel meer dan gewone thuisverbindingen. Dit betekent dat uw website sterk geoptimaliseerd moet zijn voor mobiele apparaten als u deze gebruikers tevreden wilt houden, aangezien ze niet allemaal internettoegang hebben (d.w.z. snel).
Deze specifieke tip kan van toepassing zijn op uw hele website, maar is ook belangrijk voor mobiele pagina's waarop uw formulieren worden weergegeven. Als het laden van deze delen van uw site te lang duurt, je verlies van converties en mogelijkheden om contact te maken met uw bezoekers.
Over het algemeen duurt het niet langer dan twee seconden om een ​​website te laden. Zodra u deze limiet overschrijdt, nemen de bouncepercentages dramatisch toe, wat vreselijk nieuws voor u is, en gezien de aard van mobiel browsen, is het het beste om deze tijd zo laag mogelijk te houden. .
Met dit in gedachten zijn er veel manieren om de algehele prestaties van uw site te verbeteren. U kunt bijvoorbeeld upgraden naar een beter abonnementaccommodatie, gebruik een responsief thema dat is geoptimaliseerd voor snelheid en comprimeer uw afbeeldingen. Deze zullen natuurlijk alle gebruikers helpen, maar zullen vooral handig zijn voor degenen die kleinere apparaten gebruiken.
5. Test uw formulieren voordat u publiceert
Aangezien formulieren een belangrijk onderdeel zijn van de meeste websites, is het logisch dat u ze grondig test voordat u ze publiceert. Met WordPress is dit proces vrij eenvoudig. U kunt doorgaan en specifieke pagina's ontwerpen om uw formulieren weer te geven, en deze pas publiceren als u ze volledig heeft getest.
De plug-in of het thema dat u wilt gebruiken, is natuurlijk aan u (zolang het kan helpen bij het ontwikkelen van mobiele sites). Als het echter om de testfase gaat, raden we je aan om het simpel te houden en tools te gebruiken zoals outils van ontwikkeling Chrome om het werk te doen.
Laten we een snel voorbeeld bekijken. Als u Chrome gebruikt, kunt u een voorbeeld van de pagina bekijken met het formulier dat u wilt testen. Klik vervolgens met de rechtermuisknop ergens op deze pagina en kies de optie inspecteren . Chrome geeft een reeks hulpprogramma's weer die u kunt gebruiken om de broncode van de pagina te bekijken en te bewerken aan de rechterkant en aan de linkerkant. U kunt een voorbeeld van het uiterlijk op een mobiel apparaat bekijken:
Bovenaan het scherm kun je via een menu schakelen tussen verschillende resoluties. Chrome bevat instellingen voor verschillende populaire mobiele apparaten, maar u kunt ook een aangepaste resolutie invoeren.
Op dit punt moet u het uiterlijk en het gedrag van uw contactformulier op meerdere apparaten controleren. Neem het onderstaande voorbeeld - het formulier werkt prima, maar u kunt zien dat het niet zo goed past als zou moeten. Let vooral op tekst en pictogrammen, die te dicht bij de rand van het scherm staan:
Een manier om dit probleem te voorkomen, is door uw formulieren eenvoudig te houden, zoals we in de eerste tip vermeldden. In het onderstaande voorbeeld gebruikt het formulier meerdere vervolgkeuzelijsten en vereist het slechts drie velden. Dit maakt het gebruiksvriendelijk en, nog belangrijker, het formulier is zo eenvoudig dat het perfect moet passen op alle apparaten:
Als u problemen heeft met een van uw formulieren, moet u deze uiteraard onmiddellijk oplossen. Anders loop je het risico je mobiele publiek te vervreemden, wat we eerst proberen te vermijden!
Conclusie
Ervoor zorgen dat uw website compatibel is met mobiele apparaten, is de sleutel om bezoekers vast te houden en uw bezoekers niet te frustreren. In het bijzonder moeten uw formulieren gemakkelijk te gebruiken zijn op mobiele apparaten als u geen berichten wilt missen of waardevolle leads wilt verzamelen.
Als het gaat om het ontwerpen van mobielvriendelijke formulieren, volgen hier vijf tips om uw leven eenvoudiger te maken:
- Verwijder alle onnodige secties.
- Gebruik vervolgkeuzelijsten indien mogelijk.
- Zorg ervoor dat u gemakkelijk op uw verzendknoppen kunt drukken.
- Zorg ervoor dat uw formulieren snel worden geladen.
- Test uw formulieren voordat u ze publiceert.
