Successfully reported this slideshow.

Rich Interface Design

13

Share

Upcoming SlideShare
Real rich dad poor dad
Real rich dad poor dad
Loading in …3
×
1 of 86
1 of 86

Rich Interface Design

13

Share

Download to read offline

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.

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.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Rich Interface Design

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

Editor's Notes

  • http://flickr.com/photos/soulcheck/384769773/
  • ×