4 Formulierontwerp UX-tips die u moet weten (met voorbeelden)

We denken vaak over formulieren als eenvoudig middel om gebruikersgegevens te verzamelen, maar ze zijn soms ook een manier de enige manier, voor onze gebruikers Verbind je met ons. Het is waarschijnlijk waanidee om te denken dat we gebruikers kunnen maken liefde formulieren invullen, maar het is zeker mogelijk om oplossingen te vinden die hen niet te erg irriteren, en help ze tijdens het proces.

Tijdens het surfen op het net kunnen we soms verrassende oplossingen vinden die programmatisch correct zijn, maar die op de meest waarschijnlijke manier zijn ontworpen zorgt ervoor dat veel gebruikers de site verlaten vanwege de slechte gebruikerservaring.

Als onze formulieren goed zijn ontworpen, zullen we niet alleen onze gebruikers tevreden kunnen stellen, maar ook het back-endteam dat kan omgaan veel minder gebruikersinvoerfouten. In dit artikel gaan we dus kijken hoe we kunnen minimaliseren gebruikersinvoerfouten en toch houd onze gebruikers tevreden.

Anticipeer op gebruikersbehoeften

Websites en applicaties hebben verschillende gebruikersbases en doelen, en zelfs op dezelfde locatie kunnen vele formulieren worden gehost die verschillende soorten gegevens verzamelen, om maar de meest voorkomende te noemen:

• Login formulieren
• Registratie formulieren
• Gebruikersprofiel formulieren
• Nieuwsbrief inschrijfformulieren
• Afrekenformulieren
• Gebruikersonderzoeken
• Contactformulieren
• Commentaarformulieren
• Zoekformulieren

Al deze formuliertypen verschillende dingen vereisen. Bij het ontwerpen van een afrekeningsformulier is het van cruciaal belang om gebruikers op een geloofwaardige manier te beveiligen over beveiliging, terwijl het in het geval van opmerkingenformulieren een goed idee is om emoji's of andere methoden toevoegen waarmee gebruikers hun eigenlijke stemming kunnen uiten.

Het is echter mogelijk dat zelfs soortgelijke formuliertypen anders moeten worden ontworpen, omdat alle sites hun unieke gebruikersbasis. Voordat u aan het ontwerpproces begint, is het altijd een goed idee om dit te doen anticiperen op wat onze gebruikers nodig hebben, en dienovereenkomstig ontwerpen.

Voorbeeld: Social Logins Targeting User Needs

Het aanmeldingsformulier van Codepen bevat drie sociale aanmeldingen waarbij Github bovenaan staat. Deze keuze zou voor de meeste sites onredelijk zijn.

Maar het is perfect voor Codepen, omdat hun gebruikersbestand bestaat uit ontwikkelaars, van wie velen willen inloggen met hun Github-accounts, of hun ontwikkelaccounts tegelijkertijd met elkaar willen verbinden.

Denk mobiel eerst

Mobiele en desktopgebruikers hebben verschillende behoeften, maar als het invullen van formulieren is een veel grotere uitdaging op een mobiel scherm, gebruikmakend van handgebaren dan op een fysiek toetsenbord, a mobiel-eerst benadering kan ons verder brengen wanneer we bruikbare vormen willen ontwerpen.

Bovendien zullen veel vormen van UI-patronen die goed werken op mobiele apparaten ook goed werken op desktops.

Voorbeeld: Tappable besturingselementen

Mobiele formulieren van hoge kwaliteit kunnen niet zonder worden gedacht zichtbare bedieningselementen waarop mobiele gebruikers kunnen eenvoudig tikken met hun vingers.

Het nieuwsbriefaanmeldingsformulier van de webontwerpconferentie An Event Apart past zich aan de manier aan waarop mobiele gebruikers toegang hebben tot het scherm - het bevat twee eenvoudig te gebruiken invoervelden en een knop op vingertopformaat.

De tekstinvoervelden zijn hoger zoals gebruikelijk, zodat mobiele gebruikers er eenvoudig op kunnen tikken, en de grote, oranje knop met een vinkje wijst gebruikers verder aan om het formulier in te dienen.

De desktopversie van de site gebruikt hetzelfde formulierontwerp, omdat het er ook goed uitziet en goed werkt op grotere schermen.

Voorbeeld: Verbruikte invoer

Bij het ontwerpen van formulieren voor mobiel is het altijd belangrijk om na te denken over hoe we kunnen minimaliseer de ruimte die we gebruiken. De vervangbare invoer Het UI-ontwerppatroon is de laatste tijd behoorlijk populair geworden en het werkt vooral goed op mobiele apparaten.

Booking.com maakt gebruik van dit patroon in het zoekformulier op zijn mobiele site. Wanneer de gebruiker op het zoekveld tikt, breidt het uit om laat meer ruimte over voor gebaren, en er verschijnt ook een keuzelijst met aanbevelingen onderaan.

Wanneer de gebruiker uit het veld tikt, krimpt het en verdwijnt de extra informatie.

Voorbeeld: Morphing-knop

Morphing-knoppen neem het verbruikbare invoerpatroon een stap verder, omdat gebruikers eerst een knop zien, die dan verandert in een vorm wanneer ze erop tikken.

De onderstaande schermafbeelding is afkomstig van The Startup's briljante artikel over innovatief formulierontwerp, dat ook veel andere creatieve oplossingen presenteert.

Faciliteer Input Take-In

Lange vormen hebben de neiging om gebruikers af te schrikken. Het beste wat we kunnen doen is vraag alleen om de input die we echt nodig hebben. Dit is niet alleen belangrijk vanuit gebruikersperspectief, maar gebruikers kunnen ook aarzelen om te veel persoonlijke informatie te geven vanwege privacybezorgdheden.

Soms echter, wij nog steeds moeten meegaan met langere vormen. In dit geval is het een goed idee om dit te doen snijd ze in kleinere stukken, en serveer de chunks als opeenvolgende schermen.

Veel e-commercesites (bijvoorbeeld Amazon) gebruiken deze oplossing om het aantal verlaten wagens te verminderen.

Als we het invullen van formuliervelden willen vereenvoudigen, is de vuistregel om verminder zowel afleidingen als gebruikersacties zo veel mogelijk.

Voorbeeld: persoonlijke invoerpicker

Verschillende contentpickers, zoals datumkiezers of kleurkiezers, maken het niet alleen gemakkelijker om de juiste invoer op te nemen, maar ze maken ook de vorm aan aantrekkelijker, en aanzienlijk gebruikersfouten verminderen.

De Todoist-lijst met apps geeft gepersonaliseerde hints in de datumkiezer wanneer de gebruiker over de dagen zweeft.

Op de onderstaande screenshot kan de gebruiker bijvoorbeeld zien dat ze op 31 augustus al 2 taken heeft en deze informatie kan meenemen bij het bepalen van de juiste datum voor taken. Het is een uitstekend idee voor een app waarbij productiviteit de grootste zorg van de gebruiker is.

Voorbeeld: invoer met slepen en neerzetten

Drag-and-drop ontwerpen werken meestal goed met bestanden voor het uploaden van bestanden, vooral wanneer gebruikers verondersteld worden afbeeldingen te uploaden.

Ze verminderen waarschijnlijk niet zoveel gebruikersacties als bij het gewone Upload een bestand, maar ze maken het veel eenvoudiger om dit te doen kies welk bestand de gebruiker wil uploaden, dus het verkleinen van de kans op het indienen van een verkeerd bestand.

WordPress.com biedt een elegante en intuïtieve gebruikersinterface voor slepen en neerzetten in de vorm van een post-editor. De kleine miniaturen en de visuele weergave van de reeds geüploade bestanden help gebruikers verder om de upload snel uit te voeren.

Voorbeeld: Overlay om afleiding te verwijderen

Als gebruikers afgeleid worden tijdens het invullen van ons formulier, zijn ze meer vatbaar voor fouten en worden ze ook gemakkelijker geïrriteerd

Content-overlays zijn een geweldig alternatief voor minimalistisch vormontwerp. Ze zijn gebruikt door meer complexe sites die verschillende soorten informatie op hetzelfde scherm willen weergeven.

Op de onderstaande schermafbeelding ziet u de desktopversie van Booking.com. Wanneer gebruikers zweven op het zoekformulier krijgt de rest van de inhoud bedekt door een grijsachtige overlay om ze te helpen blijf gefocust op het invullen van formulieren.

Feedback geven aan gebruikers

Het geven van de juiste feedback op het juiste moment kan de gebruikerservaring aanzienlijk verbeteren.

In vormontwerp zijn er twee soorten gebruikersfeedbacks:

1. Feedback gegeven voor formulier indienen - om te fouten verminderen en vorm verlatingspercentages, zoals voortgangstrackers, directe invoervalidatie die gebruikers direct beloont voor de juiste invoer of helperinfo
2. Feedback gegeven na formulier indienen - om gebruikers te laten weten ze hebben een fout begaan, zoals foutmeldingen

Het soort gebruikersfeedback dat onze gebruikers nodig hebben, is in hoge mate afhankelijk van de kenmerken van onze doelgroep en het doel van onze site.

Voorbeeld: voortgangstracker

Formulieren die langer zijn dan één pagina, zoals enquêtes en de meeste e-commercecontrolevormen, kunnen gebruikmaken van de voortgangsmeter ontwerp patroon. Vooruitgangs trackers geven een onmiddellijke visuele feedback aan gebruikers over hun status, en moedig hen aan om verder te gaan met het proces.

De web-app van SnapSurveys survey creator toont een klein voortgangsbalker direct boven de submit-knoppen, zodat gebruikers dit kunnen doen natuurlijk het zicht ervan.

De voortgangsmeter gebruikt geen labels, maar de manier waarop het is ontworpen maakt zijn doel duidelijk - het aantal cirkels geeft het aantal stappen aan, de reeds uitgevoerde stappen worden blauw en gebruikers kunnen gemakkelijk zien hoeveel stappen nog voor hen liggen.

Voorbeeld: Real-time validatie

De cosmeticawinkel van Body Shop gebruikt realtime validatie op het formulier Gebruikersprofiel om fouten te verwijderen en de UX van het invullen van formulieren te verbeteren.

Invoer wordt gecontroleerd terwijl gebruikers het formulier invullen en de juiste en foute antwoorden worden onmiddellijk aangegeven door gemakkelijk te onderscheiden pictogrammen een beetje verder aan de rechterkant maar nog steeds in het zichtbare gebied.

Voorbeeld: expressieve tooltips

Begrijpelijke microcopy is ook een essentieel onderdeel van succesvolle feedback van gebruikers in het ontwerpen van formulieren. Per definitie bestaat de microkopie van een website uit kleine brokken tekst gebruikt in verschillende elementen - labels, knoppen, foutmeldingen, tooltips, enz.

In zijn inlogformulier beantwoordt de bankgroep van Barclay de vragen die gebruikers mogelijk met behulp van vragen stellen goed ontworpen tooltips dat omvat eenvoudig te begrijpen microcopy.

De tooltips zijn verborgen achter weinig? pictogrammen niet om gebruikers af te leiden die weten hoe ze het inlogformulier moeten invullen, maar om altijd aanwezig te zijn voor gebruikers die twijfelen.

Sommige tooltips bevatten zelfs een klein beeld van een geannoteerde bankpas zodat gebruikers eenvoudig de gegevens kunnen vinden die ze moeten invoeren in het inlogformulier.