Interaction Design 3.6: Form elements revisited

Interaction Design 103 Vragen of feedback? @ferrydendopper

Aanvullende velden / controls

Omgaan met extra en afhankelijke velden


Additional Inputs

Niet iedereen heeft altijd alle input-velden tegelijk nodig.In veel gevallen zijn slechts een paar simpele opties voldoende voor de meerderheid.Voor de uitzonderingen kun je aanvullende input-velden aanbieden.


Inline toevoegingen

Waarschijnlijk <10%


Niet nodig? Gewoon negeren


Voorkom hele grote blokken die gebruikers

kunnen desoriënteren


Overlays


Overlays

Pas op dat je geen belangrijke elementen bedekt met je overlay panel, vooral niet het veld dat je aan het invullen bent.


Automatisch of user-activated?

Alleen automatisch als de overlay ontegenzeglijk nuttig is voor (bijna) iedereen, zoals de kalender in reisboekingsformulieren.

In veel gevallen zorgt een automatische overlay voor verwarring of zelfs irritatie.


Geavanceerde opties

Het beste in een modal dialoog te presenteren.


Selectie-afhankelijke inputs

Page-Level Selection Horizontal Tabs Vertical Tabs Drop-down List Expose Below Radio

Buttons Expose Within Radio

Buttons Exposed Inactive Exposed Groups


Page-Level Selection

+ Duidelijk voor de meeste mensen

- Je kunt de vorige keuze-opties niet meer bereiken of zelfs zien.

Ook wat trager dan inline oplossingen


Horizontal Tabs

+ Toont alle opties

Toont duidelijk de selectie

- Mensen verwerken formulieren vaak verticaal; horizontale opties vallen misschien niet op.

Mogelijk verwarring over of de tabs onderling uitsluitend zijn of niet

Minder geschikt als veel opties


Vertical Tabs

+ Snelst visueel te verwerken (radio buttons + onderlinge afstand)

- Ook hier mogelijk verwarring over of de tabs onderling uitsluitend zijn of niet

Minder geschikt als veel opties


Drop-down List

+ Handig bij veel opties

Kost weinig ruimte

- Slechts 1 optie tegelijk zichtbaar na selectie


Expose Below Radio Buttons

+ Alle opties in beeld

- Risico: disconnectie tussen geselecteer-de optie en de afhankelijke velden.


Expose Within Radio Buttons

+ Heel goed scanbaar en heel snel

- Geen grote blokken met afhankelijke controls gebruiken

Het moet heel duidelijk zijn wat de top-level selectie-opties zijn.


Exposed Inactive

+ Alle opties en controls altijd in beeld

- Overweldigend, veel te lang

Gebruikers moeten aandacht geven aan secties die ze niet gebruiken.

NIET GEBRUIKEN!


Exposed Groups

+ Alle opties en controls altijd in beeld

- Overweldigend, veel te lang

Gebruikers moeten aandacht geven aan secties die ze niet gebruiken.

Meeste fouten, meeste energie, laagste succesratio en tevredenheid

NIET GEBRUIKEN!


Lezen:

Web Form Design (boek)Hoofdstuk 13+14


Vragen? Feedback?

[email protected]

@ferrydendopper