CMD Interaction Design - Y2 Q1 les 2 - Rich Interaction
•Download as PPTX, PDF•
0 likes•317 views
CMD Interaction Design - Y2 Q1 les 2 - Rich Interaction
- 1. Rich InteractionThere 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. ImpactVolledigherladen 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-gedragDrag & dropResizingMenu’s & toolbars (ookcontextmenu’s)Panels (tabs)enz.THERE IS A WORLD TO EXPLORE6
- 7. Vloeiende effectenGeveninformatie over de UI, zodat we:Begrijpendat de computer bezig isBegrijpenwaarobjectennaartoegaan of waarzevandaankomenZienwat de toestand is van een objectTHERE IS A WORLD TO EXPLORE7
- 8. DirectemanipulatieAffordance: Eigenschappenvan een object die duidelijkmaken hoe het moetwordengebruiktHinting:Aanwijzinggeven
- 9. Visuele feedback bij drag & dropVoor 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. PrincipesvoorrijkeinteractieMaak het directHou het lichtBlijf op de paginaGeef een uitnodigingGebruik overgangenReageer onmiddellijkUit: Bill Scott and Theresa Neil (2009). Designing Web Interfaces.
- 11. Principe 1: maak het directDesign pattern: ‘In-Page Editing’
- 12. Principe 1: maak het directInvitationtoconfigureConfigurationCompletionDesign pattern: ‘Module Configuration’
- 13. Principe 1: maak het directDefault stateInvitationtodragDraggingDroppedDesign pattern: ‘Dragand Drop List’
- 14. Principe 1: maak het directDefault stateDroppedCompletedDesign pattern: ‘Dragand Drop Action’
- 15. Wat gaat hier mis?
- 16. Principe 2: hou het lichtVisible toolInvitationCompletedDesign pattern: ‘Always-Visible Tools’
- 17. Principe 2: hou het lichtLet op de ‘discoverability’Default stateInvitationDesign pattern: ‘Hover-Reveal Tools’
- 18. Wat gaat hier mis?Anti-pattern: ‘Hover and Cover’Anti-pattern: ‘MysteryMeat’
- 19. Principe 2: hou het lichtPattern: ‘Secondary Menu’Default stateInvitationMenuDesign pattern: ‘Secondary Menu’‘Menu’
- 20. Principe 3: blijf op de paginaDate Picker ControlLightbox 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 paginaTwee 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 veranderd2. Bevestigingsdialoog1. ‘drag and drop’ van 3 foto’s in album
- 24. Principe 3: blijf op de paginaPattern: ‘Inline Paging’ Pattern: ‘Virtual Panning’Pattern: ‘Scrolled Paging: Carousel’
- 25. Principe 3: blijf op de paginaOnline collectie Hard Rock CaféDesign pattern: ‘Zoomable User Interface’
- 26. Principe 4: geefeenuitnodigingDesign pattern: ‘Call to Action Invitation’
- 27. Principe 4: geefeenuitnodigingDesign pattern: ‘Hover Invitation’
- 28. Principe 5: gebruikovergangenDesign pattern: ‘Brightenand Dim’
- 29. Principe 5: gebruikovergangenDragging moduleZoom-back animationDesign pattern: ‘Animation’
- 30. Principe 5: gebruikovergangenBijvoorbeeld voor het benadrukken van veranderingen op het schermDesign pattern: ‘Spotlight’
- 31. Principe 6: reageeronmiddelijkInvoeren 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: reageeronmiddelijkMet verschillendesoorten controls worden de zoekresultaten ‘real-time’ bijgewerkt. Design pattern: ‘Refining Search’
- 33. 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 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 InterfacesBill ScottTentamenstofPatterns:In-Page Editing: Single Field Inline Edit Multi-Field Inline Edit Overlay Edit Module ConfigurationDrag and Drop:AllesDirect Manipulation:Toggle SelectionCollected SelectionContextual ToolsAlways Visible ToolsHover-Reveal ToolsToggle-Reveal ToolsOverlaysDialog OverlayInlaysDialog InlayList Inlay (accordion)Virtual PagesInline PagingScrolled Paging (carousel)
- 35. Even oefenen: Maakhiereen RIA vanhttp://www.kpn.com/mobiel/alle-telefoons.cat
- 36. Verder met de module-opdrachtPas ook rich interaction patterns toe!