iadd1 0809q3 hoorcollege2 deeltijd
TRANSCRIPT
![Page 1: IADD1 0809Q3 Hoorcollege2 Deeltijd](https://reader034.vdocument.in/reader034/viewer/2022042816/559b1e721a28abce638b45e5/html5/thumbnails/1.jpg)
Basiselementen voor interactie
Deel 2: Controls
![Page 2: IADD1 0809Q3 Hoorcollege2 Deeltijd](https://reader034.vdocument.in/reader034/viewer/2022042816/559b1e721a28abce638b45e5/html5/thumbnails/2.jpg)
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
![Page 3: IADD1 0809Q3 Hoorcollege2 Deeltijd](https://reader034.vdocument.in/reader034/viewer/2022042816/559b1e721a28abce638b45e5/html5/thumbnails/3.jpg)
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)
![Page 4: IADD1 0809Q3 Hoorcollege2 Deeltijd](https://reader034.vdocument.in/reader034/viewer/2022042816/559b1e721a28abce638b45e5/html5/thumbnails/4.jpg)
Grafische user interface (GUI)
Met de komst van de GUI (ontwikkeld door Xerox) werd
de computer toegankelijk voor velen.
Xerox Star (1981)
![Page 5: IADD1 0809Q3 Hoorcollege2 Deeltijd](https://reader034.vdocument.in/reader034/viewer/2022042816/559b1e721a28abce638b45e5/html5/thumbnails/5.jpg)
http://www.youtube.com/v/XQ6ng1_TM
N4
![Page 6: IADD1 0809Q3 Hoorcollege2 Deeltijd](https://reader034.vdocument.in/reader034/viewer/2022042816/559b1e721a28abce638b45e5/html5/thumbnails/6.jpg)
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
![Page 7: IADD1 0809Q3 Hoorcollege2 Deeltijd](https://reader034.vdocument.in/reader034/viewer/2022042816/559b1e721a28abce638b45e5/html5/thumbnails/7.jpg)
Imperative Controls• Push-buttons
Rechthoekige knoppen met tekstlabels, vooral toegepast in dialogen, maar ook steeds meerin Web applicaties
Belangrijk zijn details: 3D vorm en het dynamische gedrag (naarachteren gaan)
• Butcons
Iconen inplaats van tekst, vierkant en veelal toegepast in toolbar of -pallette
Neemt weinig ruimte in, maarlangere leercurve
Windows 95
Windows 2000
Windows XP
![Page 8: IADD1 0809Q3 Hoorcollege2 Deeltijd](https://reader034.vdocument.in/reader034/viewer/2022042816/559b1e721a28abce638b45e5/html5/thumbnails/8.jpg)
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
![Page 9: IADD1 0809Q3 Hoorcollege2 Deeltijd](https://reader034.vdocument.in/reader034/viewer/2022042816/559b1e721a28abce638b45e5/html5/thumbnails/9.jpg)
Selection Controls
• Radio buttons
‘Mutual exclusive’ selection
Alternatief: radio butcon
![Page 10: IADD1 0809Q3 Hoorcollege2 Deeltijd](https://reader034.vdocument.in/reader034/viewer/2022042816/559b1e721a28abce638b45e5/html5/thumbnails/10.jpg)
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
![Page 11: IADD1 0809Q3 Hoorcollege2 Deeltijd](https://reader034.vdocument.in/reader034/viewer/2022042816/559b1e721a28abce638b45e5/html5/thumbnails/11.jpg)
Overige soorten controls
![Page 12: IADD1 0809Q3 Hoorcollege2 Deeltijd](https://reader034.vdocument.in/reader034/viewer/2022042816/559b1e721a28abce638b45e5/html5/thumbnails/12.jpg)
Overige soorten
controls
![Page 13: IADD1 0809Q3 Hoorcollege2 Deeltijd](https://reader034.vdocument.in/reader034/viewer/2022042816/559b1e721a28abce638b45e5/html5/thumbnails/13.jpg)
De grafische user interface (GUI)
Apple Lisa (1983)
http://www.youtube.com/watch/v/st169iawowM
![Page 14: IADD1 0809Q3 Hoorcollege2 Deeltijd](https://reader034.vdocument.in/reader034/viewer/2022042816/559b1e721a28abce638b45e5/html5/thumbnails/14.jpg)
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
![Page 15: IADD1 0809Q3 Hoorcollege2 Deeltijd](https://reader034.vdocument.in/reader034/viewer/2022042816/559b1e721a28abce638b45e5/html5/thumbnails/15.jpg)
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
![Page 16: IADD1 0809Q3 Hoorcollege2 Deeltijd](https://reader034.vdocument.in/reader034/viewer/2022042816/559b1e721a28abce638b45e5/html5/thumbnails/16.jpg)
Soorten menu’s
‘Drop-down’ of ‘pull-down’ menu’s
Lijst van opties in hierarchischestructuur on een menu titel in de menubalk
‘Pop-up’ menu’s
Verschijnt na een rechtermuisklikop een object
‘Cascading’ menu’s
Hierarchische ‘pull-down’ of ‘pop-up’ menu’s
Vaak moeilijk voor gebruikers: beter te vermijden
![Page 17: IADD1 0809Q3 Hoorcollege2 Deeltijd](https://reader034.vdocument.in/reader034/viewer/2022042816/559b1e721a28abce638b45e5/html5/thumbnails/17.jpg)
‘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
![Page 18: IADD1 0809Q3 Hoorcollege2 Deeltijd](https://reader034.vdocument.in/reader034/viewer/2022042816/559b1e721a28abce638b45e5/html5/thumbnails/18.jpg)
‘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’
![Page 19: IADD1 0809Q3 Hoorcollege2 Deeltijd](https://reader034.vdocument.in/reader034/viewer/2022042816/559b1e721a28abce638b45e5/html5/thumbnails/19.jpg)
‘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?
![Page 20: IADD1 0809Q3 Hoorcollege2 Deeltijd](https://reader034.vdocument.in/reader034/viewer/2022042816/559b1e721a28abce638b45e5/html5/thumbnails/20.jpg)
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)