Interaction Design 3.2: Form Elements

Interaction Design 102 Vragen of feedback? @ferrydendopper

Form Elements

The Building Blocks of Digital Forms

http://www.designkindle.com/2011/01/19/simple-ui-elements/


Controls

Imperative Controls

Selection Controls

Entry Controls

Display Controls


Labels


Left-aligned: meest gebruikt


Right-aligned: minder afstand


Top-aligned: meest succesvol


Ook handig voor combinatie-velden


Labels within Inputs


Labels within Inputs

Zodra je begint met antwoorden, verdwijnt het label

Gebruik het alleen voor ‘obvious’ vragen Maak duidelijk onderscheid tussen label en

waarde.


Input Controls


Checkbox

Ja/Nee selectie Kies 1 of meer van deze Bekend in papieren

formulieren Neemt relatief veel ruimte

in beslag (alle opties)

Alternatief hiervoor is ‘latching butcon’: minder schermruimte


Radio button

‘Mutual exclusive’ selectie Kies 1 van deze

Alternatief: radio butcon


Flip-Flop Button

Slechte wijze van selectie Tweestanden schakelaar,

selecteren tussen 2 ‘mutualy exclusive’ opties met een knop

Wat is geselecteerd als er op de knop ‘OFF’ staat?

Veel gebruikt bij spelen/pauze selectie


Lijst

Kies 1 van deze Of kies meer van deze,

maar dat is niet intuïtief (met ctrl-toets)

Meerdere waarden in beeld

Neemt veel hoogte in


Dropdown lijst

Kies 1 van deze Eerst openklappen om

de lijst met waarden te zien

Neemt weinig hoogte in

Handig tot ong. 40 items


Vraag

• Welk control zou je gebruiken als je meer dan 200 mogelijke waarden hebt?

bv. de gemeenten in Nederland of collega’s in een redelijk groot bedrijf?


Welk control is het meest geschikt?


Affordance d.m.v. veldlengte


Verplichte velden

Wat betekent de *


Waar plaats je de indicator?


Is dit goed?


Verplicht of optioneel aangeven?


Input patterns


Inputs groeperen

Compound inputs Related inputs Parent / Child inputs


Inputs groeperen


Flexibele inputs


Lezen:

Web Form Design (boek)Hoofdstuk 2+3


Oefening

Welke controls zou je gebruiken voor vragen 1.1 en 2.1 van je module-opdracht?


Vragen? Feedback?

[email protected]

@ferrydendopper

Interaction Design 3.2: Form Elements

Design

Transcript of Interaction Design 3.2: Form Elements