How AJAX Changes Everything Steve Mulder Rich Interface Design & Flash
The spectrum of rich interfaces <ul><li>Rich page components  Rich Internet Applications </li></ul>Single-Screen Checkout ...
To Richify or  Not to Richify?
Opportunities for richness <ul><li>What are common activities that could be easier? </li></ul><ul><ul><li>Searching (e.g.,...
Single-screen checkout
Opportunities for richness <ul><li>What are common activities that could be easier? </li></ul><ul><ul><li>Searching (e.g.,...
Finding stuff: the early years
AJAX to the rescue!
Wine store proof of concept  (wine.molecular.com)
Opportunities for richness <ul><li>What are common activities that could be easier? </li></ul><ul><ul><li>Searching (e.g.,...
adidas miCoach
adidas miCoach.com
Opportunities for richness <ul><li>What are common activities that could be easier? </li></ul><ul><ul><li>Searching (e.g.,...
Nikon
NikonUSA.com
Reebok Run Easy
Reebok GoRunEasy.com
Elements of Richness
User expectations of  Web interactions are changing <ul><li>“ I want it to work like…” </li></ul>
Instant feedback
 
 
 
Faster processes
Endless.com
Backpack
SSCO
More ways to interact
Marketwatch
Wine demo
Etsy
Direct manipulation
Drag and drop Netflix
Google Finance
Differentiating experiences
Nike ID
 
http://www.backstageataccenture.com/
 
vs.
User Experience Challenges
There is more same  than different Information design  challenges are universal
Parade of failures
Complexity
Wine store, version 1
What we wanted users to feel
What users actually felt
First-time vs. regular use
Run Easy: Before
Run Easy: After
adidas miCoach: display and buttons
<ul><li>Prune with ferocity </li></ul><ul><li>Overemphasize the core,  underemphasize the cool stuff </li></ul><ul><li>Be ...
Discoverability
Root causes of usability issues * <ul><li>*   Fake chart based on no data whatsoever </li></ul>
Findability =  the quality of a  known item to  be  locatable  on a web site Discoverability = the quality of  a known  or...
The Components of Discoverability Position Context User expectations  & conventions Design Text & labeling
 
 
 
 
 
<ul><li>Intercept natural eye scanning behavior </li></ul><ul><li>Information design and hierarchy more important than eve...
Affordance
 
 
 
Timing
Slowing it down
 
Control
Mouseover overload
Override control
adidas miCoach: desktop expectations
Familiarity
If it looks like a drop-down…
 
Back button expectations <ul><li>People expect the Back button to work! </li></ul><ul><li>People expect Undo functionality...
Design Process Warning: common sense ahead
Every web site is becoming  less like a site and  more like an application
The components of the experiences    we create are getting smaller
The nimble and iterative shall inherit the earth
Engineered    waterfalls    do not    inspire
We need better  visualization tools
Adobe “Thermo”
Users expect more power and complexity  without sacrificing  simplicity
Steve Mulder [email_address] www.molecular.com/ webdesignworld-chicago
Upcoming SlideShare
Loading in...5
×

Rich Interface Design

6,423

Published on

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.

Published in: Business, Technology
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,423
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
243
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide
  • http://flickr.com/photos/soulcheck/384769773/
  • Transcript of "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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×