View
106
Download
1
Category
Preview:
DESCRIPTION
Citation preview
Interaction Design 103 Vragen of feedback? @ferrydendopper
Aanvullende velden / controls
Omgaan met extra en afhankelijke velden
Interaction Design 103 Vragen of feedback? @ferrydendopper
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.
Interaction Design 103 Vragen of feedback? @ferrydendopper
Inline toevoegingen
Waarschijnlijk <10%
Interaction Design 103 Vragen of feedback? @ferrydendopper
Niet nodig? Gewoon negeren
Interaction Design 103 Vragen of feedback? @ferrydendopper
Voorkom hele grote blokken die gebruikers
kunnen desoriënteren
Interaction Design 103 Vragen of feedback? @ferrydendopper
Overlays
Interaction Design 103 Vragen of feedback? @ferrydendopper
Overlays
Pas op dat je geen belangrijke elementen bedekt met je overlay panel, vooral niet het veld dat je aan het invullen bent.
Interaction Design 103 Vragen of feedback? @ferrydendopper
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.
Interaction Design 103 Vragen of feedback? @ferrydendopper
Geavanceerde opties
Het beste in een modal dialoog te presenteren.
Interaction Design 103 Vragen of feedback? @ferrydendopper
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
Interaction Design 103 Vragen of feedback? @ferrydendopper
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
Interaction Design 103 Vragen of feedback? @ferrydendopper
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
Interaction Design 103 Vragen of feedback? @ferrydendopper
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
Interaction Design 103 Vragen of feedback? @ferrydendopper
Drop-down List
+ Handig bij veel opties
Kost weinig ruimte
- Slechts 1 optie tegelijk zichtbaar na selectie
Interaction Design 103 Vragen of feedback? @ferrydendopper
Expose Below Radio Buttons
+ Alle opties in beeld
- Risico: disconnectie tussen geselecteer-de optie en de afhankelijke velden.
Interaction Design 103 Vragen of feedback? @ferrydendopper
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.
Interaction Design 103 Vragen of feedback? @ferrydendopper
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!
Interaction Design 103 Vragen of feedback? @ferrydendopper
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!
Interaction Design 103 Vragen of feedback? @ferrydendopper
Lezen:
Web Form Design (boek)Hoofdstuk 13+14
Interaction Design 103 Vragen of feedback? @ferrydendopper
Vragen? Feedback?
f.den.dopper@hr.nl
@ferrydendopper
Recommended