2. 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://looksgoodworkswell.blogspot.com/&feature=player_embedded Kijk ook eens op: http://www.looksgoodworkswell.com/
3. De zeven principes van Web 2.0 ‘The web as a platform’ ‘Harnessingcollectiveintelligence’ ‘Data is the next Intel inside’ ‘End of the software release cycle’ ‘Lightweightprogramming 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
4. Ajax - AsynchronousJavaScript 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
6. Direct Manipulation Direct manipulation(Ben Shneiderman, 1974) Visuele representatie van de te manipuleren data of objecten Fysieke acties in plaats van tekst intypen om objecten te manipuleren Directe visuele terugkoppeling van de actie
7. Knoppen Muis en keyboard Leftmouse button Right mouse button Middlemouse button Scroll wheel Meta-keys
9. ‘Pliancy’ en ‘hinting’ ‘Pliancy’: manipuleerbaarheid ‘Hinting’: het geven van eenaanwijzing ‘Affordance’: de eigenschappen van een object die duidelijkmaken hoe het moetwordengebruikt Static object hinting Cursor hinting
11. Voorbeeld: ‘drag and drop’ Het ‘drag and drop’ idioom is een al heel langtoegepast pattern datgoed het ‘direct manipulation’ principeillustreert.
12. Visuele feedback bij ‘drag and drop’ Voor gebruiker overgaat tot handelen. Welke objecten zijn manipuleerbaar? Gebruiker is begonnen te slepen Wat ben je aan het doen? Waar kan het heen? Gebruiker heeft muisknop losgelaten Wat is er veranderd? Is het gelukt?
13. Principes voor rijke interactie Maak het direct Make It Direct Hou het licht Keep It Lightweight Blijf op de pagina Stay on the Page Geefeenuitnodiging Provide an Invitation Gebruikovergangen Use Transitions Reageeronmiddelijk React Immediately Uit: Bill Scott and Theresa Neil (2009). Designing Web Interfaces.
21. Principe: hou het licht Anti-pattern: ‘Hover and Cover’ Anti-pattern: ‘MysteryMeat’
22. Principe: hou het licht Pattern: ‘Secondary Menu’ ‘Normal view of route’ ‘Invitation’ ‘Menu’
23. Principe: blijf op de pagina Pattern: ‘DialogOverlay’ Orbitz: date picker control Netflix: Lightbox Effect
24. Principe: blijf op de pagina Anti-pattern: ‘Idiot Boxes’ Twee pop-ups die voorkomenhaddenkunnenworden door eengoedontwerp van de ‘drag and drop’. Conclusie: onnodigeonderbreking van de flow van gebruikersvoor het doen van onzinnigemededelingen. 3. Ja, ja, de foto’szijntoegevoegd … maargeen feedback over ‘drop candidacy’ … terwijl de status van het album ogenschijnlijkniet is veranderd 2. Bevestigingsdialoog 1. ‘drag and drop’ van 3 foto’s in album
25. 1. ‘Activation’ 3. ‘Customization inlay’ 2. ‘Customization inlay (slide)’ Principe: blijf op de pagina Pattern: ‘Dialog Inlay’
26. ‘Google Reader list view’ ‘List inlay’ Principe: blijf op de pagina Pattern: ‘List Inlay’
27. Principe: blijf op de pagina Pattern: ‘Inline Paging’ Pattern: ‘Scrolled Paging: Carousel’ Pattern: ‘Virtual Panning’
28. Principe: blijf op de pagina Pattern: ‘Zoomable User Interface’ Online collectie Hard Rock Café
34. Principe: reageeronmiddelijk Pattern: ‘Auto Complete’ De mogelijkeoptiesverschijnentijdens het typen. Invoeren van ‘z’ doetallenamen die beginnen met een ‘z’ verschijnen. ‘Tab’ selecteertonmiddelijk de geselecteerdeoptie. ‘Tab’ geeft NIET de eerstemogelijkeoptie.
36. 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.
37. Bedankt voor jullie aandacht j.a.m.kemp@hro.nl http://vakgroep.cmd.hro.nl/iad/iad2q4/ http://project.cmi.hro.nl/2008_2009/rewind/platform/
