Your SlideShare is downloading. ×
0
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Rich Interface Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Rich Interface Design

6,369

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 …

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,369
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
243
Comments
0
Likes
13
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • http://flickr.com/photos/soulcheck/384769773/
  • Transcript

    • 1. How AJAX Changes Everything Steve Mulder Rich Interface Design & Flash
    • 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. To Richify or Not to Richify?
    • 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. Single-screen checkout
    • 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. Finding stuff: the early years
    • 8. AJAX to the rescue!
    • 9. Wine store proof of concept (wine.molecular.com)
    • 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. adidas miCoach
    • 12. adidas miCoach.com
    • 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. Nikon
    • 15. NikonUSA.com
    • 16. Reebok Run Easy
    • 17. Reebok GoRunEasy.com
    • 18. Elements of Richness
    • 19. User expectations of Web interactions are changing <ul><li>“ I want it to work like…” </li></ul>
    • 20. Instant feedback
    • 21. &nbsp;
    • 22. &nbsp;
    • 23. &nbsp;
    • 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. &nbsp;
    • 38. http://www.backstageataccenture.com/
    • 39. &nbsp;
    • 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. <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>
    • 53. Discoverability
    • 54. Root causes of usability issues * <ul><li>* Fake chart based on no data whatsoever </li></ul>
    • 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 &amp; conventions Design Text &amp; labeling
    • 57. &nbsp;
    • 58. &nbsp;
    • 59. &nbsp;
    • 60. &nbsp;
    • 61. &nbsp;
    • 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>
    • 63. Affordance
    • 64. &nbsp;
    • 65. &nbsp;
    • 66. &nbsp;
    • 67. Timing
    • 68. Slowing it down
    • 69. &nbsp;
    • 70. Control
    • 71. Mouseover overload
    • 72. Override control
    • 73. adidas miCoach: desktop expectations
    • 74. Familiarity
    • 75. If it looks like a drop-down…
    • 76. &nbsp;
    • 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>
    • 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

    ×