• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
CMD Interaction Design - Y2 Q1 les 2 - Rich Interaction
 

CMD Interaction Design - Y2 Q1 les 2 - Rich Interaction

on

  • 906 views

 

Statistics

Views

Total Views
906
Views on SlideShare
906
Embed Views
0

Actions

Likes
0
Downloads
19
Comments
0

0 Embeds 0

No embeds

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

    CMD Interaction Design - Y2 Q1 les 2 - Rich Interaction CMD Interaction Design - Y2 Q1 les 2 - Rich Interaction Presentation Transcript

    • Rich Interaction
      There is no page
    • 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
    • Voorbeeld
    • Voorbeeld
    • 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
    • Desktop-gedrag
      Drag & drop
      Resizing
      Menu’s & toolbars (ookcontextmenu’s)
      Panels (tabs)
      enz.
      THERE IS A WORLD TO EXPLORE
      6
    • 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
    • Directemanipulatie
      Affordance: Eigenschappenvan een object die duidelijkmaken hoe het moetwordengebruikt
      Hinting:Aanwijzinggeven
    • 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?
    • 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.
    • Principe 1: maak het direct
      Design pattern: ‘In-Page Editing’
    • Principe 1: maak het direct
      Invitationtoconfigure
      Configuration
      Completion
      Design pattern: ‘Module Configuration’
    • Principe 1: maak het direct
      Default state
      Invitationtodrag
      Dragging
      Dropped
      Design pattern: ‘Dragand Drop List’
    • Principe 1: maak het direct
      Default state
      Dropped
      Completed
      Design pattern: ‘Dragand Drop Action’
    • Wat gaat hier mis?
    • Principe 2: hou het licht
      Visible tool
      Invitation
      Completed
      Design pattern: ‘Always-Visible Tools’
    • Principe 2: hou het licht
      Let op de ‘discoverability’
      Default state
      Invitation
      Design pattern: ‘Hover-Reveal Tools’
    • Wat gaat hier mis?
      Anti-pattern: ‘Hover and Cover’
      Anti-pattern: ‘MysteryMeat’
    • Principe 2: hou het licht
      Pattern: ‘Secondary Menu’
      Default state
      Invitation
      Menu
      Design pattern: ‘Secondary Menu’
      ‘Menu’
    • Principe 3: blijf op de pagina
      Date Picker Control
      Lightbox Effect (NetFlix)
      Design pattern: ‘DialogOverlay’
    • Design pattern: ‘DialogInlay’
      1. ‘Activation’
      3. ‘Customization inlay’
      2. ‘Customization inlay (slide)’
      Principe 3: blijf op de pagina
    • Design pattern: ‘List Inlay’
      ‘Google Reader list view’
      ‘List inlay’
      Principe 3: blijf op de pagina
    • 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
    • Principe 3: blijf op de pagina
      Pattern: ‘Inline Paging’ Pattern: ‘Virtual Panning’
      Pattern: ‘Scrolled Paging: Carousel’
    • Principe 3: blijf op de pagina
      Online collectie Hard Rock Café
      Design pattern: ‘Zoomable User Interface’
    • Principe 4: geefeenuitnodiging
      Design pattern: ‘Call to Action Invitation’
    • Principe 4: geefeenuitnodiging
      Design pattern: ‘Hover Invitation’
    • Principe 5: gebruikovergangen
      Design pattern: ‘Brightenand Dim’
    • Principe 5: gebruikovergangen
      Dragging module
      Zoom-back animation
      Design pattern: ‘Animation’
    • Principe 5: gebruikovergangen
      Bijvoorbeeld voor het benadrukken van veranderingen op het scherm
      Design pattern: ‘Spotlight’
    • 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’
    • Principe 6: reageeronmiddelijk
      Met verschillendesoorten controls worden de zoekresultaten ‘real-time’ bijgewerkt.
      Design pattern: ‘Refining Search’
    • 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.
    • 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)
    • Even oefenen: Maakhiereen RIA van
      http://www.kpn.com/mobiel/alle-telefoons.cat
    • Verder met de module-opdracht
      Pas ook rich interaction patterns toe!
    • Vragen? Feedback?
      f.den.dopper@hr.nl
      @ferrydendopper