Iad2 0809 Q4 Hoorcollege 1

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/

Iad2 0809 Q4 Hoorcollege 1

by Hans Kemp

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 145

Statistics

Iad2 0809 Q4 Hoorcollege 1 Presentation Transcript

http://vakgroep.cmd.hro.nl	142
http://www.slideshare.net	3