1. Rich Interaction There is no page

2. Ajax (AsynchronousJavaScriptAnd 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

3. Voorbeeld

4. Voorbeeld

5. Impact Volledigherladen van pagina’swordtvervangen door kleine content updates. Hyperlink en Submit wordenvervangen door eenscalaaaninteractieveelementen. Micro-interactie en micro-updates leiden tot micro-’states’. Impact voormanier van ontwerpen, bouwen en gebruiken

6. Desktop-gedrag Drag & drop Resizing Menu’s & toolbars (ookcontextmenu’s) Panels (tabs) enz. THERE IS A WORLD TO EXPLORE 6

7. Vloeiende effecten Geveninformatie over de UI, zodat we: Begrijpendat de computer bezig is Begrijpenwaarobjectennaartoegaan of waarzevandaankomen Zienwat de toestand is van een object THERE IS A WORLD TO EXPLORE 7

8. Directemanipulatie Affordance: Eigenschappenvan een object die duidelijkmaken hoe het moetwordengebruikt Hinting:Aanwijzinggeven

9. Visuele feedback bij drag & drop Voor gebruiker overgaat tot handelenWelke objecten zijn manipuleerbaar? Gebruiker is begonnen te slepenWat ben je aan het doen? Waar kan het heen? Gebruiker heeft muisknop losgelatenWat is er veranderd? Is het gelukt?

10. Principesvoorrijkeinteractie Maak het direct Hou het licht Blijf op de pagina Geef een uitnodiging Gebruik overgangen Reageer onmiddellijk Uit: Bill Scott and Theresa Neil (2009). Designing Web Interfaces.

11. Principe 1: maak het direct Design pattern: ‘In-Page Editing’

12. Principe 1: maak het direct Invitationtoconfigure Configuration Completion Design pattern: ‘Module Configuration’

13. Principe 1: maak het direct Default state Invitationtodrag Dragging Dropped Design pattern: ‘Dragand Drop List’

14. Principe 1: maak het direct Default state Dropped Completed Design pattern: ‘Dragand Drop Action’

15. Wat gaat hier mis?

16. Principe 2: hou het licht Visible tool Invitation Completed Design pattern: ‘Always-Visible Tools’

17. Principe 2: hou het licht Let op de ‘discoverability’ Default state Invitation Design pattern: ‘Hover-Reveal Tools’

18. Wat gaat hier mis? Anti-pattern: ‘Hover and Cover’ Anti-pattern: ‘MysteryMeat’

19. Principe 2: hou het licht Pattern: ‘Secondary Menu’ Default state Invitation Menu Design pattern: ‘Secondary Menu’ ‘Menu’

20. Principe 3: blijf op de pagina Date Picker Control Lightbox Effect (NetFlix) Design pattern: ‘DialogOverlay’

21. Design pattern: ‘DialogInlay’ 1. ‘Activation’ 3. ‘Customization inlay’ 2. ‘Customization inlay (slide)’ Principe 3: blijf op de pagina

22. Design pattern: ‘List Inlay’ ‘Google Reader list view’ ‘List inlay’ Principe 3: blijf op de pagina

23. Principe 3: blijf op de pagina 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

24. Principe 3: blijf op de pagina Pattern: ‘Inline Paging’ Pattern: ‘Virtual Panning’ Pattern: ‘Scrolled Paging: Carousel’

25. Principe 3: blijf op de pagina Online collectie Hard Rock Café Design pattern: ‘Zoomable User Interface’

26. Principe 4: geefeenuitnodiging Design pattern: ‘Call to Action Invitation’

27. Principe 4: geefeenuitnodiging Design pattern: ‘Hover Invitation’

28. Principe 5: gebruikovergangen Design pattern: ‘Brightenand Dim’

29. Principe 5: gebruikovergangen Dragging module Zoom-back animation Design pattern: ‘Animation’

30. Principe 5: gebruikovergangen Bijvoorbeeld voor het benadrukken van veranderingen op het scherm Design pattern: ‘Spotlight’

31. Principe 6: reageeronmiddelijk Invoeren van ‘z’ doetallenamen die beginnen met een ‘z’ verschijnen. De mogelijkeoptiesverschijnentijdens het typen. ‘Tab’ selecteertonmiddelijk de geselecteerdeoptie. ‘Tab’ geeft NIET de eerstemogelijkeoptie. Design pattern: ‘Auto Complete’

32. Principe 6: reageeronmiddelijk Met verschillendesoorten controls worden de zoekresultaten ‘real-time’ bijgewerkt. Design pattern: ‘Refining Search’

33. 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 6 ontwerpprincipes voor rijke interactie die zorgen voor een betere gebruiksbeleving. De succesvolle interactie ontwerppatronen volgen één of meer van deze ontwerpprincipes.

34. Designing Web Interfaces Bill Scott Tentamenstof Patterns: In-Page Editing: Single Field Inline Edit Multi-Field Inline Edit Overlay Edit Module Configuration Drag and Drop: Alles Direct Manipulation: Toggle Selection Collected Selection Contextual Tools Always Visible Tools Hover-Reveal Tools Toggle-Reveal Tools Overlays Dialog Overlay Inlays Dialog Inlay List Inlay (accordion) Virtual Pages Inline Paging Scrolled Paging (carousel)

35. Even oefenen: Maakhiereen RIA van http://www.kpn.com/mobiel/alle-telefoons.cat

36. Verder met de module-opdracht Pas ook rich interaction patterns toe!

37. Vragen? Feedback? f.den.dopper@hr.nl @ferrydendopper