Iad2 0910 q4 les 2   dynamische interactie
Upcoming SlideShare
Loading in...5
×
 

Iad2 0910 q4 les 2 dynamische interactie

on

  • 963 views

 

Statistics

Views

Total Views
963
Views on SlideShare
799
Embed Views
164

Actions

Likes
0
Downloads
18
Comments
0

2 Embeds 164

http://vakgroep.cmd.hro.nl 156
http://www.slideshare.net 8

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Iad2 0910 q4 les 2   dynamische interactie Iad2 0910 q4 les 2 dynamische interactie Presentation Transcript

    • 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://looksgoodworkswell.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’
      ‘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
    • 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
    • Voorbeeld – bbc.co.uk
    • 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
    • Knoppen
      Muis en keyboard
      Leftmouse button
      Right mouse button
      Middlemouse 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 eenaanwijzing
      ‘Affordance’: de eigenschappen van een object die duidelijkmaken hoe het moetwordengebruikt
      Static object hinting
      Cursor hinting
    • Selecteren
      Discrete selectie
      Discrete selection
      Aaneengeslotenselectie
      Contiguous selection
    • Voorbeeld: ‘drag and drop’
      Het ‘drag and drop’ idioom is een al heel langtoegepast pattern datgoed het ‘direct manipulation’ principeillustreert.
    • 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?
    • 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.
    • Principe: maak het direct
      Pattern: ‘In-PageEditing’
    • 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: ‘MysteryMeat’
    • Principe: hou het licht
      Pattern: ‘Secondary Menu’
      ‘Normal view of route’
      ‘Invitation’
      ‘Menu’
    • Principe: blijf op de pagina
      Pattern: ‘DialogOverlay’
      Orbitz: date picker control
      Netflix: Lightbox Effect
    • 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
    • 1. ‘Activation’
      3. ‘Customization inlay’
      2. ‘Customization inlay (slide)’
      Principe: blijf op de pagina
      Pattern: ‘Dialog Inlay’
    • ‘Google Reader list view’
      ‘List inlay’
      Principe: blijf op de pagina
      Pattern: ‘List Inlay’
    • 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: geefeenuitnodiging
      Pattern: ‘Call to Action Invitation’
    • Principe: geefeenuitnodiging
      Pattern: ‘Hover Invitation’
    • Principe: gebruikovergangen
      Pattern: ‘Brighten and Dim’
    • Principe: gebruikovergangen
      Pattern: ‘Animation’
      ‘Dragging module’
      ‘Zoom-back animation’
    • Principe: gebruikovergangen
      Pattern: ‘Spotlight’
      Bijvoorbeeldvoor het benadrukken van veranderingen
      (Backpackit)
    • 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.
    • Principe: reageeronmiddelijk
      Pattern: ‘Refining Search’
      Met verschillendesoorten 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/iad2q4/
      http://project.cmi.hro.nl/2008_2009/rewind/platform/