Interactie ontwerpen voor Web 2.0Het einde van de pagina-metafoor

Interaction designIAD2Q3 hoorcollege 1

Vandaag

• Enkele begrippen

• Direct manipulation

• Principes voor rijke interactie

• Voorbeelden

Interaction designIAD2Q3 hoorcollege 1

Bronnen

• Cooper, About Face 2.0, hoofdstuk 21

• Tim O’Reilly, http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html

• Jesse James Garrett, http://www.adaptivepath.com/publications/essays/archives/000385.php

• Bill Scott, http://sessions.visitmix.com/, MIX07>Breakout>Designer

Kijk ook eens op: http://www.looksgoodworkswell.com/

Interaction designIAD2Q3 hoorcollege 1

Web 2.0 – AJAX en andere buzzwords

• Web 2.0Noemer waaronder vele begrippen samenkomenhttp://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-

20.html

• RIAType webapplicatie waarbij interactie geen

gebruik maakt van pagina-metafoor

• AJAXVerzamelnaam van technologieën waarmee RIA’s

kunnen worden gerealiseerd, zonder plug-inhttp://www.adaptivepath.com/publications/essays/archives/000385.php

Interaction designIAD2Q3 hoorcollege 1

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: http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html

Interaction designIAD2Q3 hoorcollege 1

Ajax - Asynchronous JavaScript And XML

Het introduceren van een ‘Ajax engine’ laag tussen gebruiker en server maakt dat de respons naar gebruikers en de respons van het systeem onafhankelijk worden.

In de beleving van gebruikers hoeft er dus niet meer op een systeemrespons te worden gewacht.

Niet langer wachten op die pagina!

Interaction designIAD2Q3 hoorcollege 1

Voorbeeld – AH.nl

Interaction designIAD2Q3 hoorcollege 1

Direct Manipulation

Direct manipulation leunt op drie aspecten:

1. Visuele representatie van het gemanipuleerde object

2. Fysieke acties in plaats van tekst intypen

3. Directe visuele terugkoppeling van de actie

Interaction designIAD2Q3 hoorcollege 1

Drie fases van het direct manipulation proces1. Free phase

Voordat de gebruiker tot handelen overgaat.

– Welke objecten zijn manipuleerbaar?

Interaction designIAD2Q3 hoorcollege 1

Drie fases van het direct manipulation proces2. Captive phase

Nadat de gebruiker is begonnen met slepen.

– Hoe communiceert de interface wat je aan het doen bent, en waar dat eventueel heen kan?

Interaction designIAD2Q3 hoorcollege 1

Drie fases van het direct manipulation proces3. Termination phase

Nadat de gebruiker de muisknop losgelaten heeft.

– Duidelijk aangeven dat de handeling beëindigd is en wat het resultaat is.

Interaction designIAD2Q3 hoorcollege 1

Hinting, affordances

Voor de gebruiker dient duidelijk te zijn wat manipuleerbaar is en welke acties er uitgevoerd kunnen worden

Cursor hinting (cursor verandert als er bijvoorbeeld iets versleept kan worden.)

Textual hinting (tool tips)Visual hinting (3D buttons)

Interaction designIAD2Q3 hoorcollege 1

Principes voor rijke interactie

Principes voor interactie

Principes voor feedback

Principes voor informatie

Interaction designIAD2Q3 hoorcollege 1

Principes voor rijke interactie

Principes voor interactie

Naar: Bill Scott, Yahoo! Pattern Library (tegenwoordig bij Netflix)

Blog: http://looksgoodworkswell.blogspot.com/

Interaction designIAD2Q3 hoorcollege 1

Maak de interactie direct

‘in page action’

‘inline editing’

Interaction designIAD2Q3 hoorcollege 1

Maak de interactie direct

‘in context tools’

Interaction designIAD2Q3 hoorcollege 1

Voorkom grenzen in de interactie

‘inline assistant’

Every space jump is

a mental speed bump

Interaction designIAD2Q3 hoorcollege 1

Voorkom grenzen in de interactie

Liever ‘scrolling’ dan ‘paging’

Interaction designIAD2Q3 hoorcollege 1

Principes voor rijke interactie

Principes voor feedback

Interaction designIAD2Q3 hoorcollege 1

Geef directe terugkoppeling

‘auto complete’

Interaction designIAD2Q3 hoorcollege 1

Nodig uit, laat ondekken

‘tooltip’

‘hover invitation’

Interaction designIAD2Q3 hoorcollege 1

Laat overgangen zien

Tijd lijkt sneller te gaan

Interactie vertraagt

Relatie tussen objecten

Aandacht krijgen

Interaction designIAD2Q3 hoorcollege 1

Principes voor rijke interactie

Principes voor informatie

Interaction designIAD2Q3 hoorcollege 1

Denk in objecten

Interaction designIAD2Q3 hoorcollege 1

Verbind informatie met interactiviteit

‘multi-variate views’

Interaction designIAD2Q3 hoorcollege 1

Sleutelprincipes voor rijke interactie

• Prefer direct, lightweight, in-page interaction

• Provide invitations beforehand, transitions during, and feedback after interaction

• Think in objects and tie information to interactivity

Interaction designIAD2Q3 hoorcollege 1

SamenvattendWebapplicaties 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 nog beter worden afgestemd op het mentale model van gebruikers: weg met de browser en de pagina-metafoor, lang leve het principe van direct manipulation!

De kwaliteit van een dergelijke rijke interactie is in hoge mate afhankelijk van de visuele detaillering, in alle drie de fasen van directe manipulatie.

Interaction designIAD2Q3 hoorcollege 1

Tenslotte, wat verder niets te maken heeft met interactie…

Interaction designIAD2Q3 hoorcollege 1

Bedankt voor jullie aandacht