Visually group related labels and fields. Labels should be close to the fields they describe (immediately above the field for mobile and shorter desktop forms, or next to the field for extremely long desktop forms). Avoid ambiguous spacing, where labels are equidistant from multiple fields, and make sure to include the label attribute for screen readers. If your form asks about two different topics, section it into two separate groups of fields (and tag the groups for screen readers).
—Kathryn Whitenton

Formulieren

Het form element

Kyle van ‘Web Dev Simplified’ geeft een mooi overzicht van de mogelijkheden van forms. Je zal waarschijnlijk niet elk type input dat hij demonstreert nodig hebben, maar het is wel goed om te weten dat die dingen bestaan.

Wat ik zo goed als nooit zou doen is een reset knop voorzien onder een formulier. Dat is zelden of nooit nuttig en is bijzonder frustrerend voor een gebruiker die deze knop per ongeluk indrukt en dan vaststelt dat alles wat ingevuld was, verdwenen is.

Form usability

Usability of bruikbaarheid onderzoekt hoe mensen technologie gebruiken, welke hinderpalen ze daarbij ontmoeten en wat jij als developer / designer daar kan doen. Ik vat even het artikel ‘Website Forms Usability: Top 10 Recommendations’ van Kathryne Whitenton samen.

  1. Hou het kort. Niemand vult graag een formulier in. Een formulier met 3 velden is beter dan één met 10.
  2. Groepeer bij elkaar horende labels en inputvelden.
  3. Zet je velden liefst in één kolom. Formulieren verspreid over meerdere kolommen zijn moeilijker om in te vullen.
  4. Zorg voor een logische volgorde.
  5. Gebruik geen placeholder tekst, tenzij waar dat echt nuttig is (zelden!).
  6. Probeer via de lengte van een inputveld weer te geven hoeveel input je verwacht. Een Belgische postcode bevat 4 karakters. Waarom zou je dan een inputveld voorzien dat 30 karakters kan bevatten?
  7. Maak het onderscheid tussen optionele en verplichte velden duidelijk.
  8. Als er voorwaarden zijn voor een veld (bvb. wachtwoord moet minstens voldoen aan …), maak die dan op voorhand duidelijk.
  9. Vermijd een ‘reset’ knop.
  10. En als het dan toch fout loopt: zorg voor duidelijke foutmeldingen.