Rich Interface Design

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    6 Favorites

    Rich Interface Design - Presentation Transcript

    1. How AJAX Changes Everything Steve Mulder Rich Interface Design & Flash
    2. The spectrum of rich interfaces
      • Rich page components Rich Internet Applications
      Single-Screen Checkout Slider Drag-and-Drop Configurators In-Page Editing Auto-Suggest Microsite Interactive Charts/ Calculators
    3. To Richify or Not to Richify?
    4. Opportunities for richness
      • What are common activities that could be easier?
        • Searching (e.g., auto-suggest)
        • Avoiding errors (asynchronous validation)
        • Making long processes faster (e.g., registration)
        • Transactions
        • Video/audio
      • Where do users want more flexibility or power?
        • Selection tools
        • Configurators
        • Dashboards
      • Where are brand-immersive experiences valuable and effective?
    5. Single-screen checkout
    6. Opportunities for richness
      • What are common activities that could be easier?
        • Searching (e.g., auto-suggest)
        • Avoiding errors (asynchronous validation)
        • Making long processes faster (e.g., registration)
        • Transactions
        • Video/audio
      • Where do users want more flexibility or power?
        • Selection tools
        • Configurators
        • Dashboards
      • Where are brand-immersive experiences valuable and effective?
    7. Finding stuff: the early years
    8. AJAX to the rescue!
    9. Wine store proof of concept (wine.molecular.com)
    10. Opportunities for richness
      • What are common activities that could be easier?
        • Searching (e.g., auto-suggest)
        • Avoiding errors (asynchronous validation)
        • Making long processes faster (e.g., registration)
        • Transactions
        • Video/audio
      • Where do users want more flexibility or power?
        • Selection tools
        • Configurators
        • Dashboards
      • Where are brand-immersive experiences valuable and effective?
    11. adidas miCoach
    12. adidas miCoach.com
    13. Opportunities for richness
      • What are common activities that could be easier?
        • Searching (e.g., auto-suggest)
        • Avoiding errors (asynchronous validation)
        • Making long processes faster (e.g., registration)
        • Transactions
        • Video/audio
      • Where do users want more flexibility or power?
        • Selection tools
        • Configurators
        • Dashboards
      • Where are brand-immersive experiences valuable and effective?
    14. Nikon
    15. NikonUSA.com
    16. Reebok Run Easy
    17. Reebok GoRunEasy.com
    18. Elements of Richness
    19. User expectations of Web interactions are changing
      • “ I want it to work like…”
    20. Instant feedback
    21.  
    22.  
    23.  
    24. Faster processes
    25. Endless.com
    26. Backpack
    27. SSCO
    28. More ways to interact
    29. Marketwatch
    30. Wine demo
    31. Etsy
    32. Direct manipulation
    33. Drag and drop Netflix
    34. Google Finance
    35. Differentiating experiences
    36. Nike ID
    37.  
    38. http://www.backstageataccenture.com/
    39.  
    40. vs.
    41. User Experience Challenges
    42. There is more same than different Information design challenges are universal
    43. Parade of failures
    44. Complexity
    45. Wine store, version 1
    46. What we wanted users to feel
    47. What users actually felt
    48. First-time vs. regular use
    49. Run Easy: Before
    50. Run Easy: After
    51. adidas miCoach: display and buttons
      • Prune with ferocity
      • Overemphasize the core, underemphasize the cool stuff
      • Be obsessive about a consistent visual system for interactivity cues
    52. Discoverability
    53. Root causes of usability issues *
      • * Fake chart based on no data whatsoever
    54. Findability = the quality of a known item to be locatable on a web site Discoverability = the quality of a known or unknown item to be noticeable on a web page
    55. The Components of Discoverability Position Context User expectations & conventions Design Text & labeling
    56.  
    57.  
    58.  
    59.  
    60.  
      • Intercept natural eye scanning behavior
      • Information design and hierarchy more important than ever
      • Motion – the weapon of power that can also backfire
    61. Affordance
    62.  
    63.  
    64.  
    65. Timing
    66. Slowing it down
    67.  
    68. Control
    69. Mouseover overload
    70. Override control
    71. adidas miCoach: desktop expectations
    72. Familiarity
    73. If it looks like a drop-down…
    74.  
    75. Back button expectations
      • People expect the Back button to work!
      • People expect Undo functionality
        • Most recent action, whatever that might be
    76. Design Process Warning: common sense ahead
    77. Every web site is becoming less like a site and more like an application
    78. The components of the experiences we create are getting smaller
    79. The nimble and iterative shall inherit the earth
    80. Engineered waterfalls do not inspire
    81. We need better visualization tools
    82. Adobe “Thermo”
    83. Users expect more power and complexity without sacrificing simplicity
    84. Steve Mulder [email_address] www.molecular.com/ webdesignworld-chicago

    + Molecular IncMolecular Inc, 2 years ago

    custom

    2700 views, 6 favs, 1 embeds more stats

    If technologies such as AJAX and Flash are powerful more

    More Info

    © All Rights Reserved

    Go to text version
    • Total Views 2700
      • 2699 on SlideShare
      • 1 from embeds
    • Comments 0
    • Favorites 6
    • Downloads 126
    Most viewed embeds
    • 1 views on http://localhost

    more

    All embeds
    • 1 views on http://localhost

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as innappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel

    Categories