Rich Interface Design
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Rich Interface Design

on

  • 9,609 views

If technologies such as AJAX and Flash are powerful flames heating up the Web, then we designers are the glassblowers. It's up to us to create intuitive, engaging interfaces on top of the new ...

If technologies such as AJAX and Flash are powerful flames heating up the Web, then we designers are the glassblowers. It's up to us to create intuitive, engaging interfaces on top of the new possibilities that AJAX and Flash bring. But old skills aren't enough in this age of animated transitions, asynchronous interactivity, and application-like behavior.

What does every designer need to know in order to move from static HTML sites to dynamic rich interfaces? This presentation covers effective ways to incorporate user feedback into a dynamic interface, and how timing can be the difference between an interface that works and one that doesn't. We'll also discuss how traditional usability ideals such as discoverability and simplicity take on new meaning when we design rich interfaces. The session will include many examples of successful and failed rich interfaces. Presentation by Steve Mulder.

Statistics

Views

Total Views
9,609
Views on SlideShare
9,577
Embed Views
32

Actions

Likes
13
Downloads
241
Comments
0

2 Embeds 32

http://www.slideshare.net 31
http://localhost 1

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
  • http://flickr.com/photos/soulcheck/384769773/

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
  • 52.
    • Prune with ferocity
    • Overemphasize the core, underemphasize the cool stuff
    • Be obsessive about a consistent visual system for interactivity cues
  • 53. Discoverability
  • 54. Root causes of usability issues *
    • * Fake chart based on no data whatsoever
  • 55. 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
  • 56. The Components of Discoverability Position Context User expectations & conventions Design Text & labeling
  • 57.  
  • 58.  
  • 59.  
  • 60.  
  • 61.  
  • 62.
    • Intercept natural eye scanning behavior
    • Information design and hierarchy more important than ever
    • Motion – the weapon of power that can also backfire
  • 63. Affordance
  • 64.  
  • 65.  
  • 66.  
  • 67. Timing
  • 68. Slowing it down
  • 69.  
  • 70. Control
  • 71. Mouseover overload
  • 72. Override control
  • 73. adidas miCoach: desktop expectations
  • 74. Familiarity
  • 75. If it looks like a drop-down…
  • 76.  
  • 77. Back button expectations
    • People expect the Back button to work!
    • People expect Undo functionality
      • Most recent action, whatever that might be
  • 78. Design Process Warning: common sense ahead
  • 79. Every web site is becoming less like a site and more like an application
  • 80. The components of the experiences we create are getting smaller
  • 81. The nimble and iterative shall inherit the earth
  • 82. Engineered waterfalls do not inspire
  • 83. We need better visualization tools
  • 84. Adobe “Thermo”
  • 85. Users expect more power and complexity without sacrificing simplicity
  • 86. Steve Mulder [email_address] www.molecular.com/ webdesignworld-chicago