7 geheimen voor het ontwerpen van goede vormen
Bijna elk website-ontwerp bevat een vorm van het formulier. Van het eenvoudig verzamelen van e-mailadressen om u aan te melden voor een nieuwsbrief of een kennisgeving voor de formulieren voor het verzamelen van volledige betalingen, het is absoluut noodzakelijk dat u een formulier ontwerpt dat gemakkelijk te gebruiken en te begrijpen is.
De normen voor het ontwerpen van formulieren evolueren ook. Hoewel veel formulieren meerdere kolommen bevatten en om veel informatie vroegen, suggereren de meeste praktische tips nu dat formulieren zo eenvoudig mogelijk moeten worden gehouden. En er is ook veel aan het ontwerp. Een goed formulier is scanbaar, vereist niet veel typen en bevat slimme labels en opmaak zodat gebruikers de eerste keer de juiste formulieren kunnen invullen.
Hier zijn een paar geheimen om ervoor te zorgen dat u een formulier ontwerpt dat gebruikers daadwerkelijk invullen.
1. Maak het gemakkelijk om te scannen en te lezen
U weet dat gebruikers websites scannen om informatie te verzamelen en te bepalen welke acties zij zullen ondernemen of dat de inhoud en het ontwerp deze interesseren of niet. Hetzelfde geldt voor vormen. Gebruikers moeten in een oogopslag kunnen zien welke informatie nodig is en een duidelijke uitleg moeten geven over waar het formulier voor is en hoe het in te dienen.
Een zeer scanbare vorm omvat het volgende:
- Contrast: tekst moet kort en gemakkelijk te lezen zijn. Vermijd veel kleur en blijf bij traditionele kleuren op lichte tekst-achtergrondcombinaties.
- Groeperen en ruimte: groepsinformatie die vergelijkbaar is op langere formulieren. Bij het verzamelen van betalingsinformatie, bijvoorbeeld klantinformatie van de groep, betalingsinformatie en verzendinformatie. Drie kortere blokken zijn gemakkelijker te verteren dan een lange. De slimme spatiëring van die labels is verbonden met het veld dat ze uitleggen, in plaats van een uniforme spatiëring tussen tekst- en veldelementen.
- Duidelijke afwerking / oproep tot actie : maak de knop groot en gemakkelijk te zien. De microcopy in de knop moet gebruikers vertellen wat er zal gebeuren, zoals "verzenden", "nu betalen" of "doorgaan naar de volgende stap." Vergeet niet om de feedbacklus te sluiten en gebruikers te laten weten wanneer een formulier correct is ingediend.
2. Overweeg zwevende labels
Er is veel discussie geweest over het al dan niet gebruiken van hinttekst in formuliervelden. Het grootste probleem is dat deze tekst te vaak met een klik wegvalt en gebruikers moeten deze actief verwijderen om te beginnen met typen. Dat is ongemakkelijk.
Verder, de Nielsen Norman Group gevonden die lege velden kunnen de aandacht trekken en helpen gebruikers om informatie duidelijker in te voeren.
Als u de behoefte voelt om hints te gebruiken, overweeg dan een interactieve oplossing-zwevende labels. Neem uw labelinformatie op in formuliervelden, zodat deze eruit ziet als tijdelijke tekst, maar laat de tekst animeren en naar de positie linksboven verplaatsen zodra een gebruiker de muisaanwijzer over het veld beweegt of erop klikt. Het label of de hint verdwijnt nooit en het staat niet in de weg van de gebruiker die probeert het formulier in te vullen. (Plus de kleine animatie is een leuke verrassing voor gebruikers.)
3. Gebruik veldmaskers
Veldmaskers kunnen enkele van dezelfde aanwijzingen en formulierhints geven, maar zonder de bruikbaarheid in de weg te staan. Een veldmasker wordt alleen weergegeven als een gebruiker een veld activeert en biedt een extra scankwentie met betrekking tot welke informatie nodig is. Het masker kan de gebruiker verder helpen door informatie automatisch te formatteren in een poging om fouten te voorkomen die het formulier bij inzending schoppen.
Een goed voorbeeld van een veldmasker in actie is met telefoonnummers. Overweeg de opties voor meerdere indelingen:
- (000) 000-0000
- 000-000-0000
- 0000000000
Hoe weet een gebruiker welke persoon zal werken? Het formulierveld zal het formaat specificeren en aanpassen zoals een gebruikerstype, zodat hij of zij er niet over hoeft na te denken en alleen cijfers hoeft in te toetsen. (Dit bespaart ook het gedoe om heen en weer te schakelen tussen toetsenborden op een mobiel apparaat.)
4. Maak Formulieren toetsenbordvriendelijk
U kunt niet weten op welk type apparaat uw gebruiker uw formulier zal vinden, maar het moet even gemakkelijk zijn om in te vullen. Overweeg alle verschillende soorten toetsenborden die informatie naar het formulier kunnen sturen en velden aanpassen om de juiste optie te detecteren en te gebruiken.
Op desktops moeten gebruikers een formulier kunnen invoeren en elk veld kunnen invullen zonder met een muis te hoeven klikken. Ga bij voltooiing automatisch van het ene veld naar het volgende of gebruik tabbladen of voer in om te verplaatsen. W3.org heeft een solide set van toetsenbord aanbevelingen voor jou om te volgen.
Op mobiele apparaten moet het toetsenbordtype overeenkomen met de vereiste gegevens. Als de invoer voor letters is, brengt u het alfatoetsenbord omhoog; voor cijfers, breng de numerieke optie naar voren. Van Google: "App-gebruikers waarderen apps die een geschikt toetsenbord bieden voor tekstinvoer. Zorg ervoor dat dit consequent in de hele app wordt geïmplementeerd in plaats van alleen voor bepaalde taken, maar niet voor andere. "
5. Kies voor verticaal formaat
Verticale formulieren zijn gemakkelijker voor gebruikers dan meerdere kolomformaten. De best practice-regel is ervoor te zorgen dat alle velden op het scherm passen zonder in een boven- tot onderformaat te scrollen.
De enige uitzondering is voor superkorte formulieren waarbij een gebruiker alleen een e-mailadres of naam en e-mailadres hoeft in te voeren. Twee zij-aan-zij-kolommen gevolgd door een call-to-action-knop kunnen in deze situatie goed werken zolang de e-mailbox lang genoeg is voor gebruikers om alle letters van hun adres te zien.
Vergeet niet om elementen ook logisch in een verticale vorm te bestellen. Als u de voornaam, achternaam, het e-mailadres en de haarkleur verzamelt, volg deze dan op.
6. Limiet typen
Gebruik zoveel mogelijk pre-fill oplossingen als mogelijk met formulieren. Niets is leuker dan een adres toe te voegen en na de eerste paar tikken begint de Google API en stelt hij adresopties voor.
Dit doet drie dingen:
- Het maakt het eenvoudiger voor gebruikers, met name op mobiel.
- Het helpt het aantal benodigde velden te beperken.
- Het kan een aantal gebruikersfouten helpen voorkomen, zoals verkeerd typen.
Overweeg hetzelfde met e-mailadressen, zodat gebruikers populaire e-maildomeinen krijgen na het @ -symbool. Wanneer een gebruiker [beveiligd met e-mail] invoert .... het veld suggereert automatisch [e-mail beveiligd] .
7. Houd het kort en zoet
Je zult in de verleiding komen om gebruikers te vragen om veel informatie in formulieren. Weersta de verleiding!
Vraag alleen om essentiële informatie in formulieren. Er is een grotere kans dat gebruikers formulieren invullen die minder verplichtingen vereisen. Als u later meer informatie nodig heeft, kunt u deze vanuit uw lijst e-mailen voor meer informatie. (Als iemand die zich al heeft aangemeld, zal de gebruiker op dit moment waarschijnlijk meer contact met u opnemen.)
Vermijd optionele velden. Vraag niet om overbodige informatie. Gebruik niet meerdere velden waar u er een zou kunnen gebruiken (bijvoorbeeld telefoonnummers).
Conclusie
Geef gebruikers iets terug voor het invullen van een formulier. Maak het leuk of interessant. Bedank de gebruiker.
Door een formulier te maken dat gemakkelijk te lezen en gebruiksvriendelijk is, vergroot u uw kansen om gegevens te verzamelen en verandert uw websitebezoeker in een herhaalde gebruiker.