Hét boek over online formulieren blijft Defensive Design for the Web (2004) van 37signals, vind ik. Maar ook het nieuwe Forms that Work – Designing Web Forms for Usability (2009) van Jarrett en Gaffney zit barstensvol goodies. Ik geef je mijn favoriete tips en learnings. Er blijkt bijvoorbeeld geheugen in je vingers te zitten.
Iedereen die het zag, griste dit boek direct weg van mijn bureau. Boeken over usability van formulieren zijn zeldzaam!
Tips voor een nette bedankpagina
Een formulier is een gesprek. Een gesprek sluit je netjes af om de goede relatie te consolideren.
Dus op de bedankpagina:
- Bedank je de invuller (joh
. Waarom? Om zijn moeite te erkennen dat hij het formulier tot een goed einde heeft gebracht. - Zorg je voor goed leesbare tekst en een strakke consistente layout.
- Vertel je wat er nu gaat gebeuren. Wees realistisch in de doorlooptijden die je noemt voor de afhandeling.
- Zorg je voor een goed printbare pagina, of een linkje naar een printvriendelijke versie.
- Bied je een passende link aan als volgende stap aan binnen je website. Zoals terugkeren naar de homepage.
Tip voor instructies die de invuller niet in de war brengen
Instructies bevatten soms een keuze en een actie. Bijvoorbeeld:
Kies ‘Overige vakantiewoningen’ (actie) als u een vakantiewoning zoekt waar uw huisdier welkom is (keuze).
Je voorkomt fouten als je in een instructie eerst de keuze noemt, en daarna de actie:
Zoekt u een vakantiewoning waar uw huisdier welkom is ? Kies dan ‘Overige vakantiewoningen’.
Dat komt doordat mensen vaak direct de actie uitvoeren, zonder eerst de keuze te maken.
Tip over het vermelden van de invultijd: niet doen
Aangekomen in je formulier wil de invuller zo weinig mogelijk tekst.
Vertel bijvoorbeeld niet hoe lang het invullen duurt. Dat boeit niet voor wie toch al besloten heeft om het formulier in te vullen.
Het enige geval waarin je de invultijd wel moet vermelden: als het extreem veel tijd kost, bijvoorbeeld een paar uur.
Tip voor een titel die niet afschrikt: noem het geen formulier
Het formulier invullen is een hobbel die de invuller moet nemen. Niemand geniet ervan!
Wrijf het er dus niet in: vermijd het woord ‘formulier’ in de titel.
Niet: Aanvraagformulier voor een betaalrekening
Wel: Betaalrekening aanvragen
Tip voor drop down box: een standaardkeuze voorselecteren
Door het invullen van vele webformulieren heeft de gebruiker een verwachtingspatroon.
Bij een drop down box verwacht hij: de eerste keuze is voorgeselecteerd. Begin de drop down dus niet met: ‘Selecteer…’
Moet de invuller bijvoorbeeld een type hotelkamer selecteren, zet dan default in de drop down: ‘Eenpersoons kamer’.
Tip voor minder fouten: trigger het vingergeheugen
Standaard antwoorden kunnen mensen op de automatische piloot intypen. Ze zitten in de ‘muscle memory’ of het vingergeheugen. Voordeel: dat gaat haast altijd goed.
Je achternaam bijvoorbeeld: die moet je in elk formulier invullen. Appeltje eitje.
Voorbeeld: trigger met de veldnaam ‘Achternaam’ het vingergeheugen voor de achternaam. Bied dus een veld aan waarin de volledige achternaam mag worden getypt. Inclusief tussenvoegsels!
Als je Marco van Basten vraagt om zijn achternaam, dan typen zijn vingers echt niet automatisch ‘Basten’. Ik kan erover meepraten 
Meer boekbesprekingen
- Verbeter je foutmeldingen, online help, formulieren en anderen kritieke punten – Defensive Design for the Web
- Welke foto’s werken op websites? - Eyetracking Web Usability
- Mensen onthouden maar één ding – Neuro Web Design
- 6 schrijftips voor een onweerstaanbare website – Made to Stick
- Internet sales p0rno – Finest 50 ecommerce 2009
Ontvang gratis de artikelen van Schrijven voor internet per e-mail
13 reacties ↓
Mooi! Heb Forms that work direct bij mijn boekenlijst bijgeschreven.
Maar hoe zit het met Web Form Design van Luke Wroblewski (http://bit.ly/ZJNBS)? Die hoort toch zeker ook in de top 3
btw: Formulieren waarin je je tussenvoegsel gescheiden moet invullen van je achternaam zijn inderdaad zéér vervelend
Erg interessant. Is er iets bekend over regionale verschillen qua usability best practices? Bijvoorbeeld voor het invullen van adressen/huisnummers, namen, taal, enzovoort.
Misschien nog een tip die ik uit persoonlijke ervaring heb opgedaan: als je een beperkt aantal keuzes hebt, gebruik dan radiobuttons in plaats van een dropdown. Je vermijdt er ook het ‘Selecteer…’ probleem mee als je wil dat gebruikers expliciet een keuze maken.
@Frank
Goede tip! Het boek van Luke wil ik inderdaad nog steeds lezen. Bedankt voor de link.
@Toon
Boeken over webformulieren zijn er helaas nog alleen in het Engels en dus voor het Engelse taalgebied. Hoewel Jarrett (ze is Britse) ook wel over de grens kijkt, door een paar Duitse en Japanse formulieren te bespreken.
Tip: volg mijn zojuist gestarte serie artikelen met conversietips voor webformulieren.
Ik hebt hem vast op mijn lijstje voor Sinterklaas gezet
.
Ben het met Frank eens, Web Form Design van Luke Wroblewski moet er zeker bij, veel van geleerd.
Ben het trouwens niet helemaal eens met de defaults bij drop down. Klopt niet voor alle velden.
Tijdens verschillende usability tests gemerkt dat het gebruik van een default bij “aanhef” vaak tot irritatie kan leiden.
Standaard staat deze namelijk vaak op dhr/man. Onze vrouwelijk testpersonen vielen hier bijna elke keer over.
@Toon, bijkomend voordeel is dat de bezoeker alle mogelijkheden in één oogopslag kan zien zonder hiervoor een actie te hoeven doen.
Formulier optimalisatie is niet alleen heel erg leuk maar draagt ook significant bij aan conversieverhoging.
Misschien interessant om hier een workshop / seminar over te houden?
Goed artikel Arjan! Boek staat op de wishlist
Wat betreft de tip over dropdowns, ik heb daar afgelopen week nog een artikel met 5 tips aan gewijd: http://vincent.vanscherpenseel.nl/usability/vijf-tips-voor-succesvolle-dropdown-menus/
Interessant artikel. De tips over keuze voor actie, het geen formulier noemen en het vingergeheugen had ik niet eerder gehoord.
Heb het boek op mijn wishlist gezet. Ook ik ben overigens fan van Wroblewski’s boek. (interessant luistervoer: interview van Jared Spool met Luke Wroblewski http://www.uie.com/brainsparks/2010/02/11/spoolcast-moving-beyond-static-forms-with-luke-wroblewski/)
@jorden: geslachtskeuze is inderdaad een van de weinige opties waarbij ik vind dat je geen default moet geven (en geslacht hoort met radiobuttons, niet in een dropdown).
Wat ik hier wel nog mis, is het rekening houden met wanneer het fout gaat. (Voor inlog- en registratieformulieren heb ik daar zelf laatst een blogpost over geschreven: http://jaron.nl/blog/2010/how-to-create-a-bulletproof-registration-and-sign-in-flow/)
@Jorden @Jarón
Goede aanscherping over geslacht: dat moeten we dus nooit default op man of vrouw zetten.
En voor Geslacht dus geen drop down, maar radio buttons. Waarbij ook geen van de radio buttons voorgeselecteerd mag zijn.
Lijkt me een uitstekende conventie!
Het woord Geslacht gebruik ik trouwens nooit, vind ik zo plastisch
Liever gebruik ik Aanhef of helemaal geen veldnaam, en dan radio buttons:
De heer
Mevrouw
@Jarón
Zeer goed artikel over bulletproof registration and sign in, wat goed dat je er zelfs pdf flowcharts bij aanbiedt! http://jaron.nl/blog/2010/how-to-create-a-bulletproof-registration-and-sign-in-flow/)
Met zoveel experts die het boek van Wroblewski aanbevelen ben ik wel ontzettend benieuwd inmiddels
@Vincent
Bedankt!
Je hebt trouwens een leuk onderwerp voor je blog. Veel succes en we spreken elkaar!
@ Arjan Wat is je mening over adres zoeken nadat je postcode , huisnummer en eventuele toevoeging hebt ingevuld ?
@Aartjan: keuze voor radiobuttons ipv dropdown bij geslacht is simpelweg gebaseerd op het aantal opties. Als er maar weinig opties zijn, werken radiobuttons beter omdat je dan in direct alle keuzes kunt overzien, zonder eerst het dropdownmenu te moeten uitklappen. Volgens mij is er geen vuistregel voor, maar ligt de grens bij een optie of 4 à 5.
En iets wat ik tijdens dit typen bedenk: Uitzondering is wellicht wel een dropdownbox die bij het wijzigen een actie inzet (zoals refreshen, of naar nieuwe pagina gaan). Dat verwacht ik wel bij een dropdown, maar niet bij radiobuttons…
@ Jaron
Erg interessant je uiteenzetting over dropdown and radiobuttbuttons
We hebben net onze kassa vernieuwd van multi page checkout naar single page checkout
Nu heeft de webdesigner per ongeluk alle betaal mogelijkhden met radio buttons weer gegeven (weliswaar geproepeerd) en ik wilde hoofd betaalgroep (bv ideal ) en dan drop down met alle banken enz
De eerste optie is in eerste instantie overzichtelijker en er zijn minder clicks nodig de tweede optie geeft en rustiger beeld in de kassa maar er zijn meer clicks nodig
binnenkort gaan we testen welke van de twee als beste uit de bus komt
Zodra ik het weet zal ik hier een reactie achterlaten.
Voor diegenen die de kassa willen zien http://loopfietsfabriek.codeandmore.net
@Jan
Adres zoeken na invullen postcode + huisnummer: liefst automatisch zodra je de cursor elders in het formulier zet.
Dus liever geen aparte button ‘Adres ophalen’ waar de invuller op moet klikken, zoals nu in de formulieren zit van een opdrachtgever van me.
@ Jaron
Eens met je aanvullingen, tnx.
@Jan
Ben benieuwd wat er uit jullie test van de kassa komt, leuk als je het hier weer zou willen delen!
Hoi Aartjan,
Leuke serie over webformulieren. Ga je je ook buigen over het verhalende formulier, zoals bijv. beschreven op http://www.lukew.com/ff/entry.asp?1007 ?
@Marcel
Erg leuke link, bedankt voor de tip.
Christ Coolen heeft op Webanalisten ook al eens over het verhalende formulier gesproken en daarbij oa het voorbeeld van Luke Wroblewski gebruikt http://bit.ly/avdx5L
Zodra ik dit in een praktijkcase heb uitgeprobeerd zal ik erover publiceren.
Reageer