Iad2 0809 Q4 Hoorcollege 1

Interaction design patterns na Tidwell

Het einde van de paginametafoor

Bronnen

Cooper, About Face 3, hoofdstuk 19Scott & Neil, Designing Web Interfaces, complete boekTim 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://looksgoodworkswell.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/archives/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 keyboardLeft mouse buttonRight mouse buttonMiddle mouse buttonScroll wheelMeta-keys

Muisacties

PointClickRight-clickClick and dragDouble-clickChord-clickDouble-drag

‘Pliancy’ en ‘hinting’

‘Pliancy’: manipuleerbaarheid

‘Hinting’: het geven van een aanwijzing

‘Affordance’: de eigenschappen van een object die duidelijk maken hoe het moet worden gebruikt

Cursor hinting

Static object hinting

Selecteren

Discrete selectieDiscrete selection

Aaneengesloten selectieContiguous 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 slepenWat ben je aan het doen?

Waar kan het heen?

3. Gebruiker heeft muisknop losgelatenWat is er veranderd? Is het

gelukt?

Principes voor rijke interactie

Maak het directMake It Direct

Hou het lichtKeep It Lightweight

Blijf op de paginaStay on the Page

Geef een uitnodigingProvide an Invitation

Gebruik overgangenUse Transitions

Reageer onmiddelijkReact Immediately

Uit: Bill Scott and Theresa Neil (2009). Designing Web Interfaces.

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’

2. ‘Invitation to drag’

3. ‘Dropped’

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’

Pattern: ‘Secondary Menu’

Principe: hou het licht

‘Normal view of route’‘Invitation’

‘Menu’

Pattern: ‘Dialog Overlay’

Principe: blijf op de pagina

Orbitz: date picker control

Netflix: Lightbox Effect

Principe: blijf op de pagina

Anti-pattern: ‘Idiot Boxes’

1. ‘drag and drop’ van 3 foto’s in album

… maar geen feedback over ‘drop

candidacy’2. Bevestigingsdialoog

3. Ja, ja, de foto’s zijn toegevoegd

… terwijl de status van het album

ogenschijnlijk niet is veranderd

Twee pop-ups die voorkomen hadden kunnen worden door een goed ontwerp van de ‘drag and drop’.

Conclusie: onnodige onderbreking van de flow van gebruikers voor het doen van onzinnige mededelingen.

1. ‘Activation’2. ‘Customization inlay (slide)’

3. ‘Customization inlay’

Principe: blijf op de pagina

Pattern: ‘Dialog Inlay’

‘Google Reader list view’

‘List inlay’

Principe: blijf op de pagina

Pattern: ‘List Inlay’

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’

Invoeren van ‘z’ doet alle namen die beginnen met een ‘z’ verschijnen.

‘Tab’ selecteert onmiddelijk de geselecteerde optie.

De mogelijke opties verschijnen tijdens het typen.

‘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

[email protected]://vakgroep.cmd.hro.nl/iadhttp://project.cmi.hro.nl/2008_2009/rewind/platform/