Enhancing the user experience in our Web Applications

1,957 views

Published on

Summary of the UIE conference. I used this presentation to communicatet what changes we could bring to our own site / tools to enhance the user experience.

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

  • Be the first to like this

No Downloads
Views
Total views
1,957
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Enhancing the user experience in our Web Applications

    1. 1. Enhancing the user experience in our Web Applications Chris Cariglia
    2. 2. Optimizing the user experience Outline Opportunities for richness Anti-patterns Web App Summit 2008 Progressive enhancements
    3. 3. • Organized by User Interface Engineering (UIE) Web App Summit 2008 • 3-day event reviewing the best practices in today’s top web sites • Reviewing what makes a great web application Web App Summit 2008
    4. 4. Optimizing the user experience
    5. 5. • Web Applications (Web Apps) are where Business Rules meet the User Experience Optimize the user experience • The more rules in place, the more difficult a user’s experience can be • Need the right rule at the right time at the right place Optimizing the user experience
    6. 6. The Kano model Excitement Generators Performance Payoff Basic Expectations Quality & Capability User Satisfaction Optimizing the user experience
    7. 7. The Kano model Basic Expectations Quality & Capability User Satisfaction Optimizing the user experience
    8. 8. • Has to work properly Basic expectations for Web Apps • Need to smooth out any “rough edges” • Transactions are processed at the time of submit • Business rules shouldn’t deteriorate the process Optimizing the user experience
    9. 9. The Kano model Performance Payoff Basic Expectations Quality & Capability User Satisfaction Optimizing the user experience
    10. 10. • Real person support Performance payoffs for Web Apps • On-line “helping hand” Optimizing the user experience
    11. 11. Performance payoffs for Web Apps Optimizing the user experience
    12. 12. The Kano model Excitement Generators Performance Payoff Basic Expectations Quality & Capability User Satisfaction Optimizing the user experience
    13. 13. • Going above and beyond Excitement Generators for Web Apps Optimizing the user experience
    14. 14. Excitement Generators for Web Apps Findtape.com Optimizing the user experience
    15. 15. Excitement Generators for Web Apps Optimizing the user experience
    16. 16. The Kano model Excitement Generators Performance Payoff Basic Expectations Quality & Capability User Satisfaction Optimizing the user experience Time
    17. 17. <ul><li>It’s about the experience, not the application </li></ul>Optimizing the User Experience - Summary <ul><li>Don’t let the business rules take away from the experience </li></ul><ul><ul><li>Try to use the experience to help define the rules… </li></ul></ul><ul><li>Focus on where delight can be introduced – how to go above and beyond </li></ul><ul><li>The collision of business and design </li></ul>Optimizing the user experience
    18. 18. Opportunities for richness
    19. 19. <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 - registration) </li></ul></ul><ul><ul><li>Transactions </li></ul></ul>Opportunities for richness <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>Opportunities for richness
    20. 20. Finding Stuff: the early years Opportunities for richness
    21. 21. Finding Stuff: adolescence Opportunities for richness
    22. 22. <ul><li>wine.molecular.com </li></ul>Finding Stuff: Today <ul><li>Google Finance </li></ul>Opportunities for richness
    23. 23. Giving the user more control Opportunities for richness <ul><li>Backpack by 37 Signals </li></ul><ul><ul><li>Sign-up Create List </li></ul></ul>
    24. 24. <ul><li>Define the problem and review what technology can be used in the solution </li></ul>Opportunities for richness - Summary <ul><li>Customers don’t care what technology was used as long as the process works </li></ul><ul><li>Provide instant validation and feedback to the user </li></ul>Optimize the user experience
    25. 25. Anti-patterns
    26. 26. <ul><li>What are anti-patterns? </li></ul><ul><ul><li>“ Anti-patterns, also called pitfalls, are classes of commonly-reinvented bad solutions to problems. They are studied as a category so they can be avoided in the future, and so instances of them may be recognized when investigating nonworking systems.” - Wikipedia, Anti-Pattern. </li></ul></ul>The traps of bad design: anti-patterns <ul><li>Interaction design anti-patterns </li></ul><ul><ul><li>Like the software anti-pattern counterparts, the following anti-patterns are common pitfalls to avoid. </li></ul></ul>Anti-Patterns
    27. 27. Requiring the user to go down a level or two, perform an operation, come back to the top and then have to go back down again. Name comes from hopping up and down through the site. Pogo stick navigation Anti-Patterns
    28. 28. Pogo stick navigation Anti-Patterns
    29. 29. Pogo stick navigation Anti-Patterns
    30. 30. Pogo stick navigation Anti-Patterns <ul><li>Netflix </li></ul>
    31. 31. <ul><li>Draw flow arrows between pages to catch the zig-zag bouncing from page to page </li></ul><ul><li>To avoid pogo effect: </li></ul><ul><ul><li>Use in-context tools to bring actions into the current page </li></ul></ul><ul><ul><li>Use hover details to reveal information in context (with a slight delay) </li></ul></ul><ul><ul><li>Use overlays for encapsulating an alternate navigation path to allow temporary exploration without losing the original context of navigation </li></ul></ul>Pogo stick – a review Anti-Patterns
    32. 32. Making key interaction points too small increases the likelihood that users will be frustrated with the interface. Tiny targets Anti-Patterns Fitt’s law: The time to acquire a target is a function of the distance to and size of the target.
    33. 33. Tiny targets Anti-Patterns 10 x 10 pixels can be hard to get to if there are several on the screen.
    34. 34. <ul><li>Activation targets and important commands need to be large enough, visually distinct and in proximity to operation. </li></ul>Strategies for Tiny Targets Anti-Patterns <ul><li>Use in-context tools to support proximity. </li></ul><ul><li>Use “Call to Action” style buttons for most important operations. </li></ul>
    35. 35. The practice of throwing up unnecessary windows or boxes explaining the obvious. Windows aplenty Anti-Patterns
    36. 36. Anti-Patterns - Summary big ball of mud. meandering way. borg idiom. tiny targets . mystery meat. buried treasure. hover and cover. pogo stick navigation . novel notions. against the flow. metaphor mismatch. jabberwocky. double duty. linkitus. blind type. windows aplenty . animation gone wild. misguided misdirections. unmarked hazards. missed moments. missing scene. one at a time. non-symmetrical actions. Anti-Patterns
    37. 37. Progressive enhancements
    38. 38. <ul><li>Short release schedules </li></ul>Progressive enhancements <ul><li>All changes are based on data </li></ul><ul><li>Small changes - often </li></ul>Progressive Enhancements
    39. 39. <ul><li>Use quick paper mock-ups </li></ul>Validation <ul><li>Use the “painted door” test </li></ul><ul><li>Sanity check the data </li></ul>Progressive Enhancements <ul><li>Prod tests will yield the most accurate results than any test </li></ul>
    40. 40. <ul><li>Flush-out usability issues early </li></ul>Prototyping <ul><li>Something that can potentially be used in prod </li></ul><ul><li>More expensive than validation </li></ul>Progressive Enhancements
    41. 41. <ul><li>Qualitative </li></ul>User testing <ul><li>User growth sessions </li></ul><ul><li>Quantitative </li></ul>Progressive Enhancements
    42. 42. <ul><li>Ideas come from anywhere an everywhere </li></ul>Culture <ul><li>Cultivate experimentation </li></ul><ul><li>Plays a huge role in the end experience </li></ul>Progressive Enhancements <ul><li>The HIPPO isn't always right </li></ul><ul><li>Understanding the user is a good thing </li></ul>
    43. 43. Conclusion
    44. 44. Increasing customer transactions <ul><li>Online retailers can win customers by maximizing usability rather than lowering prices ( consumer watchdog site “Which?” – March 20, 2008 ) </li></ul>
    45. 45. <ul><li>Define the problem and review what technology can be used in the solution </li></ul>Conclusion <ul><li>Decisions need to be based on data, not just a hunch </li></ul><ul><li>It’s not about the application but the experience </li></ul><ul><li>The industry changes quickly – expect it! </li></ul>

    ×