1. Basiselementen voor interactie
Deel 2: Controls

2. Bronnen
Alan Cooper, Robert Reimann & David Cronin (2007),
About Face 3, Wiley Publishing, Inc., hoofdstuk 21 t/m
23
Moggridge, B. (2007). Designing Interactions.
Cambridge, MA: The MIT Press. ISBN: 0262134748
YouTube

3. Overzicht
De twee basis elementen
voor interactie, het
raakvlak tussen de
gebruiker en het
systeem:
De (fysieke) technologie
waarmee gebruikers het
systeem kunnen manipuleren
(input devices)
De objecten op het scherm die
gemanipuleerd kunnen
worden (controls)

4. Grafische user interface (GUI)
Met de komst van de GUI (ontwikkeld door Xerox) werd
de computer toegankelijk voor velen.
Xerox Star (1981)

5. http://www.youtube.com/v/XQ6ng1_TM
N4

6. Soorten controls
Er zijn een paar verschillende
soorten controls, die in velerlei
gedaanten kunnen voorkomen.
De belangrijkste:
Imperative controls
Hiermee selecteer je een actie die
onmiddelijk wordt uitgevoerd
Selection controls
Hiermee selecteer je een of
meerdere objecten uit een
groep

7. Imperative Controls
• Push-buttons
Rechthoekige knoppen met
tekstlabels, vooral toegepast in
dialogen, maar ook steeds meer
in Web applicaties
Belangrijk zijn details: 3D vorm en
het dynamische gedrag (naar
achteren gaan)
• Butcons
Iconen inplaats van tekst, vierkant en
veelal toegepast in toolbar of -
Windows 95
pallette
Neemt weinig ruimte in, maar Windows 2000
langere leercurve
Windows XP

8. Selection Controls
• Check boxes
Vierkante, (tekst gebaseerde)
control
Teksten lezen kost tijd
Neemt relatief veel ruimte in
beslag (alle opties)
Alternatief hiervoor is ‘latching
butcon’: minder
schermruimte

9. Selection Controls
• Radio buttons
‘Mutual exclusive’ selection
Alternatief: radio butcon

10. Selection Controls
Flip-flop buttons: een
slechte wijze van
selectie
Tweestanden schakelaar,
selecteren tussen twee
‘mutually exclusive’ opties
met een knop
Wat is geselecteerd als er
op de knop ‘OFF’ staat?
Veel gebruikt bij
spelen/pauze selectie

11. Overige soorten controls

12. Overige soorten
controls

13. De grafische user interface (GUI)
Apple Lisa (1983)
http://www.youtube.com/watch/v/st169ia
wowM

14. 1983: de Apple Lisa
Op basis van de principes van
Xerox Alto en Xerox Star
De eerste pull-down menu’s
Commercieel niet erg succesvol
Larry Tesler over het
ontwikkelen van de Lisa
GUI samen met Bill
Atkinson
Uit: Bill Moggridge (2007), Designing Interactions

15. Menu’s
Laten zien welke
keuzemogelijkheden er
zijn
Geven inzicht in functies
en concepten van het
product
Menu’s zijn dus vooral
voor beginnende
gebruikers of minder
vaak gebruikte functies

16. Soorten menu’s
‘Drop-down’ of ‘pull-down’ menu’s
Lijst van opties in hierarchische
structuur on een menu titel in
de menubalk
‘Pop-up’ menu’s
Verschijnt na een rechtermuisklik
op een object
‘Cascading’ menu’s
Hierarchische ‘pull-down’ of ‘pop-
up’ menu’s
Vaak moeilijk voor gebruikers:
beter te vermijden

17. ‘Toolbars’ zijn geen menu’s
Knoppenbalken of ‘toolbars’
geven ervaren/intermediate
gebruikers direct toegang tot
veelgebruikte functies
‘Toolbars’ moeten de
veelgebruikte functies
bevatten
‘Toolbars’ zijn minder geschikt
voor beginnende gebruikers

18. ‘Tooltips’
‘Balloon’ help
Ontwikkeld door Apple maar
bleek nauwelijks gebruikt te
worden: zat vooral in de weg
Zijn verdwenen
‘Tooltips’
Ontwikkeld door Microsoft, legt
met slechts enkele woorden
de functie van de control uit
Zeer effectief in combinatie met
‘toolbars’

19. ‘The ribbon’ oftewel het lint in Office
2007
Nieuw interface idioom, combinatie van menu en toolbar
eigenschappen
Taakgedreven, doelgerichte structuur
De nieuwe pull-down menu’s?

20. Samenvattend
• Een goede samenhang tussen controls en input devices is een
voorwaarde voor een goed interface ontwerp
• Controls zijn er in verschillende soorten en maten, maar
herkenbaarheid is essentieel
• Menu’s zijn voor beginners en exotische
functies, toolbars/butcons voor frequent gebruik
(intermediates/experts)