Basiselementen voor interactie

Deel 2: Controls

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

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)

Grafische user interface (GUI)

Met de komst van de GUI (ontwikkeld door Xerox) werd

de computer toegankelijk voor velen.

Xerox Star (1981)

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

N4

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

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

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

Selection Controls

• Radio buttons

‘Mutual exclusive’ selection

Alternatief: radio butcon

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

Overige soorten controls

Overige soorten

controls

De grafische user interface (GUI)

Apple Lisa (1983)

http://www.youtube.com/watch/v/st169iawowM

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

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

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

‘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

‘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’

‘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?

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)