Iad2 0910 q4 les 2 dynamische interactie

  • 622 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
622
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
19
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Interaction design patterns na Tidwell
    Het einde van de paginametafoor
  • 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
  • 5. Voorbeeld – bbc.co.uk
  • 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
  • 8. Muisacties
    Point
    Click
    Right-click
    Click and drag
    Double-click
    Chord-click
    Double-drag
  • 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
  • 10. Selecteren
    Discrete selectie
    Discrete selection
    Aaneengeslotenselectie
    Contiguous selection
  • 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.
  • 14. Principe: maak het direct
    Pattern: ‘In-PageEditing’
  • 15. Principe: maak het direct
    Pattern: ‘Module Configuration’
    ‘Non-configuration state’
    ‘Invitation to configure’
    ‘Configuration’
    ‘Completion’
  • 16. Principe: maak het direct
    Pattern: ‘Drag and Drop List’
    ‘Normal display state’
    ‘Invitation to drag’
    ‘Dragging’
    ‘Dropped’
  • 17. Principe: maak het direct
    Pattern: ‘Drag and Drop Action’
    1. ‘Normal display state’
    3. ‘Dropped’
    2. ‘Invitation to drag’
    4. ‘Completed’
  • 18. Principe: maak het direct
    Antipattern: ‘Drag and Drop Action’
  • 19. Principe: hou het licht
    Pattern: ‘Always-Visible Tools’
    ‘Visible tool’
    ‘Invitation’
    ‘Completion’
  • 20. Principe: hou het licht
    Pattern: ‘Hover-Reveal Tools’
    ‘Normal state’
    ‘Invitation’
  • 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é
  • 29. Principe: geefeenuitnodiging
    Pattern: ‘Call to Action Invitation’
  • 30. Principe: geefeenuitnodiging
    Pattern: ‘Hover Invitation’
  • 31. Principe: gebruikovergangen
    Pattern: ‘Brighten and Dim’
  • 32. Principe: gebruikovergangen
    Pattern: ‘Animation’
    ‘Dragging module’
    ‘Zoom-back animation’
  • 33. Principe: gebruikovergangen
    Pattern: ‘Spotlight’
    Bijvoorbeeldvoor het benadrukken van veranderingen
    (Backpackit)
  • 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.
  • 35. Principe: reageeronmiddelijk
    Pattern: ‘Refining Search’
    Met verschillendesoorten controls worden de zoekresultaten ‘real-time’ bijgewerkt.
  • 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/