Interaction design patterns na Tidwell
Het einde van de paginametafoor

Bronnen
Cooper, About Face 3, hoofdstuk 19
Scott & Neil, Designing Web Interfaces, complete boek
Tim O’Reilly, What Is Web 2.0
http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-
web-20.html
Jesse James Garrett, Ajax: A New Approach to Web Applications
http://www.adaptivepath.com/publications/essays/archives/000385.php
Bill Scott, O’Reilly Webcast: Designing Web Interfaces
http://www.youtube.com/watch?v=LW4MwvgW_ww&eurl=http://look
sgoodworkswell.blogspot.com/&feature=player_embedded
Kijk ook eens op: http://www.looksgoodworkswell.com/

De zeven principes van Web 2.0
‘The web as a platform’
‘Harnessing collective intelligence’
‘Data is the next Intel inside’
‘End of the software release cycle’
‘Lightweight programming models’
‘Software above the level of a single
device’
‘A rich user experience’
Uit: Tim O’Reilly,
http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/
what-is-web-20.html

Ajax - Asynchronous JavaScript And XML
‘Ajax engine’ laag tussen
gebruiker en server;
activiteiten van gebruikers en
respons van het systeem
worden onafhankelijk.
In de beleving van gebruikers
hoeft er dus niet meer op een
systeemrespons te worden
gewacht.
Niet langer wachten op die
pagina!
Uit: Jesse James Garrett,
http://www.adaptivepath.com/publications/essays/archive
s/000385.php

Voorbeeld –
bbc.co.uk

Direct Manipulation
Direct manipulation (Ben
Shneiderman, 1974)
1. Visuele representatie van de te
manipuleren data of objecten
2. Fysieke acties in plaats van
tekst intypen om objecten te
manipuleren
3. Directe visuele terugkoppeling
van de actie

Knoppen
Muis en keyboard
Left mouse button
Right mouse button
Middle mouse button
Scroll wheel
Meta-keys

Muisacties
Point
Click
Right-click
Click and drag
Double-click
Chord-click
Double-drag

‘Pliancy’ en ‘hinting’
‘Pliancy’:
manipuleerbaarheid
‘Hinting’: het geven van Static object hinting
een aanwijzing
Cursor hinting
‘Affordance’: de
eigenschappen van een
object die duidelijk
maken hoe het moet
worden gebruikt

Selecteren
Discrete selectie
Discrete selection
Aaneengesloten selectie
Contiguous selection

Voorbeeld: ‘drag and drop’
Het ‘drag and drop’ idioom is een al heel lang toegepast
pattern dat goed het ‘direct manipulation’ principe
illustreert.

Visuele feedback bij ‘drag and drop’
1. Voor gebruiker overgaat
tot handelen.
Welke objecten zijn
manipuleerbaar?
2. Gebruiker is begonnen te
slepen
Wat ben je aan het doen? Waar
kan het heen?
3. Gebruiker heeft muisknop
losgelaten
Wat is er veranderd? Is het
gelukt?

Principes voor rijke interactie
Maak het direct
Make It Direct
Hou het licht
Keep It Lightweight
Blijf op de pagina
Stay on the Page
Geef een uitnodiging
Provide an Invitation
Gebruik overgangen
Use Transitions
Reageer onmiddelijk Uit: Bill Scott and Theresa Neil (2009).
Designing Web Interfaces.
React Immediately

Principe: maak het direct
Pattern: ‘In-Page Editing’

Principe: maak het direct
Pattern: ‘Module Configuration’
‘Non-configuration state’
‘Invitation to configure’
‘Configuration’
‘Completion’

Principe: maak het direct
Pattern: ‘Drag and Drop List’
‘Normal display state’
‘Invitation to drag’
‘Dragging’
‘Dropped’

Principe: maak het direct
Pattern: ‘Drag and Drop Action’
1. ‘Normal display state’
3. ‘Dropped’
2. ‘Invitation to drag’
4. ‘Completed’

Principe: maak het direct
Antipattern: ‘Drag and Drop Action’

Principe: hou het licht
Pattern: ‘Always-Visible Tools’
‘Visible tool’
‘Invitation’
‘Completion’

Principe: hou het licht
Pattern: ‘Hover-Reveal Tools’
‘Normal state’
‘Invitation’

Principe: hou het licht
Anti-pattern: ‘Hover and Cover’
Anti-pattern: ‘Mystery Meat’

Principe: hou het licht
Pattern: ‘Secondary Menu’
‘Normal view of route’
‘Invitation’
‘Menu’

Principe: blijf op de pagina
Pattern: ‘Dialog Overlay’
Orbitz: date picker control
Netflix: Lightbox Effect

Principe: blijf op de pagina
Anti-pattern: ‘Idiot Boxes’
Twee pop-ups die voorkomen
hadden kunnen worden door
een goed ontwerp van de ‘drag
and drop’.
3. Ja, ja, de foto’s zijn
Conclusie: onnodige
toegevoegd
… terwijl de status van
onderbreking van de flow van
het … maarogenschijnlijk
album geen feedback
over ‘drop 2. Bevestigingsdialoog
candidacy’
gebruikers voor het doen van
niet is veranderd
onzinnige mededelingen.
1. ‘drag and drop’ van 3
foto’s in album

Principe: blijf op de pagina
Pattern: ‘Dialog Inlay’
3. ‘Customization inlay’
1. ‘Activation’
2. ‘Customization inlay
(slide)’

Principe: blijf op de pagina
Pattern: ‘List Inlay’
‘Google Reader
‘List inlay’
list view’

Principe: blijf op de pagina
Pattern: ‘Inline Paging’
Pattern: ‘Scrolled Paging: Carousel’
Pattern: ‘Virtual Panning’

Principe: blijf op de pagina
Pattern: ‘Zoomable User Interface’
Online collectie
Hard Rock Café

Principe: geef een uitnodiging
Pattern: ‘Call to Action Invitation’

Principe: geef een uitnodiging
Pattern: ‘Hover Invitation’

Principe: gebruik overgangen
Pattern: ‘Brighten and Dim’

Principe: gebruik overgangen
Pattern: ‘Animation’
‘Dragging
module’
‘Zoom-back animation’

Principe: gebruik overgangen
Pattern: ‘Spotlight’
Bijvoorbeeld voor het
benadrukken van
veranderingen
(Backpackit)

Principe: reageer onmiddelijk
Pattern: ‘Auto Complete’
De mogelijke opties verschijnen
Invoeren van ‘z’ doet alle namen die tijdens het typen.
beginnen met een ‘z’ verschijnen.
‘Tab’ selecteert onmiddelijk de
geselecteerde optie.
‘Tab’ geeft NIET de eerste mogelijke optie.

Principe: reageer onmiddelijk
Pattern: ‘Refining Search’
Met verschillende soorten controls worden
de zoekresultaten ‘real-time’ bijgewerkt.

Samenvattend
Webapplicaties kunnen tegenwoordig, dankzij technologieën als
Ajax, worden ontworpen met een rijke gebruiksbeleving die niet
meer onder doet voor de gebruiksbeleving van een (desktop)
software programma.
Hierdoor kan het interactie ontwerp van web interfaces beter
worden afgestemd op het mentale model en flow van gebruikers:
weg met de browser en de pagina-metafoor, lang leve het
principe van direct manipulation!
Er zijn zes ontwerpprincipes voor rijke interactie die zorgen voor
een betere gebruiksbeleving. De succesvolle interactie
ontwerppatronen volgen één of meer van deze ontwerpprincipes.

Bedankt voor jullie aandacht
j.a.m.kemp@hro.nl
http://vakgroep.cmd.hro.nl/iad
http://project.cmi.hro.nl/2008_2009/rewind/platform/