0708 Iad2 Q3 Hoorcollege1

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

description

 

Transcript of 0708 Iad2 Q3 Hoorcollege1

Page 1: 0708 Iad2 Q3 Hoorcollege1

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

Page 2: 0708 Iad2 Q3 Hoorcollege1

Interaction designIAD2Q3 hoorcollege 1

Vandaag

• Enkele begrippen

• Direct manipulation

• Principes voor rijke interactie

• Voorbeelden

Page 3: 0708 Iad2 Q3 Hoorcollege1

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/

Page 4: 0708 Iad2 Q3 Hoorcollege1

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

Page 5: 0708 Iad2 Q3 Hoorcollege1

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

Page 6: 0708 Iad2 Q3 Hoorcollege1

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!

Page 7: 0708 Iad2 Q3 Hoorcollege1

Interaction designIAD2Q3 hoorcollege 1

Voorbeeld – AH.nl

Page 8: 0708 Iad2 Q3 Hoorcollege1

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

Page 9: 0708 Iad2 Q3 Hoorcollege1

Interaction designIAD2Q3 hoorcollege 1

Drie fases van het direct manipulation proces1. Free phase

Voordat de gebruiker tot handelen overgaat.

– Welke objecten zijn manipuleerbaar?

Page 10: 0708 Iad2 Q3 Hoorcollege1

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?

Page 11: 0708 Iad2 Q3 Hoorcollege1

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.

Page 12: 0708 Iad2 Q3 Hoorcollege1

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)

Page 13: 0708 Iad2 Q3 Hoorcollege1

Interaction designIAD2Q3 hoorcollege 1

Principes voor rijke interactie

Principes voor interactie

Principes voor feedback

Principes voor informatie

Page 14: 0708 Iad2 Q3 Hoorcollege1

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/

Page 15: 0708 Iad2 Q3 Hoorcollege1

Interaction designIAD2Q3 hoorcollege 1

Maak de interactie direct

‘in page action’

‘inline editing’

Page 16: 0708 Iad2 Q3 Hoorcollege1

Interaction designIAD2Q3 hoorcollege 1

Maak de interactie direct

‘in context tools’

Page 17: 0708 Iad2 Q3 Hoorcollege1

Interaction designIAD2Q3 hoorcollege 1

Voorkom grenzen in de interactie

‘inline assistant’

Every space jump is

a mental speed bump

Page 18: 0708 Iad2 Q3 Hoorcollege1

Interaction designIAD2Q3 hoorcollege 1

Voorkom grenzen in de interactie

Liever ‘scrolling’ dan ‘paging’

Page 19: 0708 Iad2 Q3 Hoorcollege1

Interaction designIAD2Q3 hoorcollege 1

Principes voor rijke interactie

Principes voor feedback

Page 20: 0708 Iad2 Q3 Hoorcollege1

Interaction designIAD2Q3 hoorcollege 1

Geef directe terugkoppeling

‘auto complete’

Page 21: 0708 Iad2 Q3 Hoorcollege1

Interaction designIAD2Q3 hoorcollege 1

Nodig uit, laat ondekken

‘tooltip’

‘hover invitation’

Page 22: 0708 Iad2 Q3 Hoorcollege1

Interaction designIAD2Q3 hoorcollege 1

Laat overgangen zien

Tijd lijkt sneller te gaan

Interactie vertraagt

Relatie tussen objecten

Aandacht krijgen

Page 23: 0708 Iad2 Q3 Hoorcollege1

Interaction designIAD2Q3 hoorcollege 1

Principes voor rijke interactie

Principes voor informatie

Page 24: 0708 Iad2 Q3 Hoorcollege1

Interaction designIAD2Q3 hoorcollege 1

Denk in objecten

Page 25: 0708 Iad2 Q3 Hoorcollege1

Interaction designIAD2Q3 hoorcollege 1

Verbind informatie met interactiviteit

‘multi-variate views’

Page 26: 0708 Iad2 Q3 Hoorcollege1

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

Page 27: 0708 Iad2 Q3 Hoorcollege1

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.

Page 28: 0708 Iad2 Q3 Hoorcollege1

Interaction designIAD2Q3 hoorcollege 1

Tenslotte, wat verder niets te maken heeft met interactie…

Page 29: 0708 Iad2 Q3 Hoorcollege1

Interaction designIAD2Q3 hoorcollege 1

Bedankt voor jullie aandacht