Inhoud
- 1. Markeer geen verplichte velden
- 2. Gebruik geen spinners
- 3. Heb slechts één type knop of nog beter slechts één knop per formulier
- 4. Blokvelden
- 5. Bedenk waarom je iets vraagt en hoe het voelt voor de gebruiker
- 6. Datums zijn kronkelige kleine jongens
- 7. Formulieren als ontwikkelaarsambacht
- 8. Gebruik geen kolommen in formulieren
- 9. Gebruik geen twee velden als er één voldoende is
- 10. Wees aardig
Formulieren, er is niets dat veel ontwerpers meer haten dan formulieren. Ze brengen niet per se de creativiteit naar boven, of toch? Misschien wordt het tijd dat we opnieuw naar formulieren kijken en begrijpen dat een formulier in zijn meest elementaire vorm een gesprek is tussen de gebruiker en de software.
Vergeet aanwijzen en klikken, formulieren vertegenwoordigen de rijkste interactie waarmee wij als digitale ontwerpers te maken zullen krijgen. De volgende keer dat er een formulier op je pad komt, denk dan niet dat het gewoon een kwestie is van het toepassen van een paar leuke CSS-effecten of het toevoegen van een mooie jQuery-bloei. Er zit veel meer diepgang in het ontwerpen van formulieren.
Ik heb honderden formulieren getest en een aantal complexe formulieren ontworpen voor verzekeringsmaatschappijen, interacties met het boeken van vakanties en nog veel meer. De kans is groot dat u de afgelopen maanden een van mijn formulieren heeft gebruikt.
Dit zijn de lessen die ik graag had geleerd voordat ik begon met het ontwerpen van formulieren.
1. Markeer geen verplichte velden
Kent u het kleine sterretje dat een verplicht veld aangeeft? Ik heb dat vaak gezien bij het testen van gebruikers. Als concept hebben verplichte velden weinig zin, ze hebben geen offline equivalent. Ze zijn geweldig voor ontwikkelaars omdat ze een mooie zwart-wit benadering van voltooiing bieden. Het sterretje en het verplichte veld mislukken omdat het een aangeleerd gedrag is. Typisch gedrag dat ik bij gebruikerstests heb gezien, is dat de gebruiker het formulier bovenaan invult en afmaakt wanneer er iets is om hem te stoppen of wanneer hij op een knop drukt.
De oplossing is simpel, markeer optionele velden, markeer de plaats waar onze aardige gebruiker moet stoppen en bedenk of ze dat veld moeten invullen.
2. Gebruik geen spinners
HTML5 is briljant, nietwaar? Het biedt tal van opwindende nieuwe glanzende tools om mee te spelen. We moeten nadenken over de geschiktheid van ons nieuwe speelgoed. Het nummerveld bevat nu kleine pijltjes omhoog en omlaag zodat de gebruiker door cijfers kan bladeren.
Er zijn hier twee problemen. Ten eerste maakt de standaard browserweergave van de pijlen ze erg klein. Erg onhandig om te klikken en de dikke vingers onder ons zullen het moeilijk krijgen op een iPhone. Het heet Fitt's Law, hoe kleiner iets is, hoe moeilijker het is om erop te klikken.
Maar ik hoor je schreeuwen, je kunt het nummer gewoon rechtstreeks in het nummerveld typen. Ja, dat kan, maar laten we eens kijken naar het browserscherm: de pijlen omhoog / omlaag lijken op onze trouwe vriend het selectievakje. Een gebruiker die voor het eerst een spinner krijgt aangeboden, gaat ervan uit dat hij er niet in kan typen, aangezien het lijkt op een selectievakje.
Mijn advies is om duidelijk te blijven totdat ze meer gemeengoed worden of de browserontwikkelaars het standaardontwerp uitzoeken.
3. Heb slechts één type knop of nog beter slechts één knop per formulier
Er is een weinig bekend psychologieprincipe dat de wet van Hick heet. De wet van Hick stelt dat hoe meer opties we krijgen, hoe moeilijker het is om een keuze te maken. Geen rocket science die ik ken, maar een regel die het waard is om in gedachten te houden.
U kunt uw aardige gebruiker helpen door hem te helpen bij het maken van een keuze. Door alle primaire knoppen één kleur te maken en er slechts één per pagina te hebben, wordt de keuze eenvoudiger. Op welke knop moet ik drukken? Oh, het is gemakkelijk, het is de grote gekleurde.
4. Blokvelden
Ik heb in een vorig leven neurowetenschappen gestudeerd en zo de psychologie van het geheugen bestudeerd - met name het korte-termijn- of werkgeheugen. Nu voordat je het zegt; nee, de geheugencapaciteit op korte termijn is niet 7 +/- 2, 4 +/- 1 of in menselijke spraak drie tot vijf brokken. Wij mensen zijn goed in het evalueren van visuele stimuli, de beperking is dat we beter zijn als het aantal kleiner is. Door een formulier in kleinere groepen te verdelen, wordt de evaluatie gemakkelijker, aangezien wat de gebruiker in het formulier moet invoeren vaak uit zijn geheugen komt.
Zorg ervoor dat uw groepen velden ongeveer vier velden lang zijn.
5. Bedenk waarom je iets vraagt en hoe het voelt voor de gebruiker
Dit is waarschijnlijk het meest ongecompliceerde advies dat ik geef, maar wordt vaak het minst gebruikt.
Laten we het volgende nemen:
Stel elke vraag die u stelt in vraag. Is het noodzakelijk? Hoe voelt het om dit gevraagd te worden?
Vaker wel dan niet is er een zakelijke behoefte om een vraag te stellen en kunnen wij als ontwerpers discussiëren over de noodzaak totdat we blauw in het gezicht zijn. De vraag moet gesteld worden. Bij het begrijpen van de zakelijke behoefte aan deze gegevens kunnen we vaak een compromis sluiten.
We kunnen helpen door onze aardige gebruiker te vertellen waarom we die vraag moeten stellen. Stel je gerust over het gebruik en delen van die gegevens en wees over het algemeen aardig.
Nogmaals ons voorbeeld nemen:
Het is nog steeds een moeilijke vraag, maar hopelijk hebben we de pil zoeter gemaakt.
6. Datums zijn kronkelige kleine jongens
Het invoeren van datums kan een hele uitdaging zijn en er zijn een paar valkuilen die u kunt vermijden. Het grootste probleem is het omgaan met fouten.
De eenvoudigste manier is om een kalender te lanceren. Het is vermeldenswaard dat weken beginnen op een maandag in het VK en een zondag in de VS. Als uw gebruiker zich niet concentreert, kiest hij misschien wel een zondag als hij een maandag bedoelt.
Het is ook de moeite waard om internationale datumnotaties te noemen. De VS plaatsen de maand op de eerste plaats, in Japan het eerste jaar. Dus een datum als 4/5/12 kan op drie manieren worden geïnterpreteerd.
Daarom is het het beste om selectievakjes te gebruiken.
7. Formulieren als ontwikkelaarsambacht
Formulieren zijn handwerk voor zowel ontwikkelaars als ontwerpers. Begrijpen welke mogelijke fouten kunnen worden gemaakt bij het invoeren van gegevens en het ontwerpen van uw back-endcode om hiermee om te gaan, is een uitdaging.
Hier is een simpele. Een valutawaarde invoeren. De mogelijke fouten die de gebruiker kan maken, zijn enorm. Het afdwingen van gegevensindelingen waaraan gebruikers moeten voldoen, is frustrerend voor uw gebruiker en, laten we eerlijk zijn, een beetje lui van de ontwikkelaars.
Wat is een betere uitdaging voor een ontwikkelaar dan het bouwen van een kogelvrij formulier.
8. Gebruik geen kolommen in formulieren
Het grote probleem bij het gebruik van kolommen in formulieren is stroom. We beginnen een formulier bovenaan en eindigen onderaan. Bij het introduceren van kolommen kan de stroom van het formulier worden doorbroken.
Ga er niet vanuit dat gebruikers formulieren doorbladeren en daarom is focus een manier om door formulieren in kolommen te navigeren. Het komt zelden voor dat ik dat bij gebruikerstests heb gezien. Meestal zien we details invoeren, klikt u met de muis / trackpad / vinger naar het volgende veld en voert u vervolgens details in, enzovoort.
9. Gebruik geen twee velden als er één voldoende is
De meeste mensen zijn geen aanraaktypisten. Bij gebruikerstests zien we mensen naar het toetsenbord kijken terwijl ze typen.
Wanneer u een telefoonnummer invoert door het formulierveld op te splitsen, bijvoorbeeld door het netnummer en nummer toe te voegen, veroorzaakt dit echte problemen. Gebruikers zien of herinneren zich niet dat er twee velden zijn, dus voer het volledige nummer in het eerste veld in, erger nog als het veld beperkt is tot een bepaald aantal tekens.
Gebruik slechts één veld voor telefoonnummer, hetzelfde geldt voor huisnummer / straat - gebruik slechts één tekstinvoervak.
10. Wees aardig
Het zal je verbazen hoeveel nogal onbeschofte foutmeldingen er zijn.
Hier is een voorbeeld van een die ik onlangs tegenkwam.
Alleen al het feit dat ze suggereren dat je graag een datum in de toekomst zou invoeren en dan een nogal grappige reactie, nou, het is niet erg aardig.
Verplaats jezelf opnieuw in de plaats van de gebruiker, hoe zou je het vinden om deze fout te zien? Geërgerd? Misschien nog erger. Aardig zijn is gemakkelijk.
Ik heb een downloadbare wieg / spiekbriefje gemaakt om u te helpen betere formulieren te ontwerpen. Het bevat veel meer best practices om betere formulieren te ontwerpen.
