CMD Interaction Design - Y1 Q3 les 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?
f.den.dopper@hr.nl
@ferrydendopper

CMD Interaction Design - Y1 Q3 les 2 - Form Elements

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (17)

Plus de Ferry den Dopper

Plus de Ferry den Dopper (20)

CMD Interaction Design - Y1 Q3 les 2 - Form Elements