Designing usable web applications (part 1) experience dynamics web seminar

3,484 views
3,300 views

Published on

Designing Web Applications using usability best practices...Web application projects need a solid understanding of what success criteria constitutes a usable web application. Teams deploying web applications should be utilizing emerging best practices in Interaction Design, such as how to design for "progressive disclosure" using dynamic interface techniques. This seminar will outline best practices, things to avoid in designing usable web applications as well as a review of recent client case studies.

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

No Downloads
Views
Total views
3,484
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
56
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Designing usable web applications (part 1) experience dynamics web seminar

  1. 1. An Experience Dynamics training WEB SEMINAR With Frank Spillers, MS Designing Usable Web Applications (part 1)
  2. 2. About Your Speaker <ul><li>Frank Spillers </li></ul><ul><li>Masters Cognitive Science </li></ul><ul><li>12 years User Centered Design experience </li></ul><ul><li>Founder, Experience Dynamics- leading Usability Design Research firm </li></ul>
  3. 3. Agenda <ul><li>Web application projects need a solid understanding of what success criteria constitutes a usable web application. Teams deploying web applications should be utilizing emerging best practices in Interaction Design, such as how to design for &quot;progressive disclosure&quot; using dynamic interface techniques. This seminar will outline best practices, things to avoid in designing usable web applications as well as a review of recent client case studies. </li></ul><ul><li>The role of &quot;Interaction Design&quot; in a web application project </li></ul><ul><li>How do you measure usability of a web application? </li></ul><ul><li>The 10 common web application design mistakes (and what to do about them) </li></ul><ul><li>Case studies: Real-world examples of web application usability </li></ul><ul><li>Q & A </li></ul>
  4. 4. <ul><li>The role of &quot;Interaction Design&quot; in a web application project </li></ul>
  5. 5. Types of Web apps <ul><li>Account mgmt </li></ul><ul><li>Services managed online </li></ul><ul><li>Administrator apps (editing etc) </li></ul><ul><li>Data and dashboard views </li></ul><ul><li>Web site log in areas (enhanced and secure data) </li></ul><ul><li>Full software apps –web delivery </li></ul>
  6. 6. Why Interaction Design? <ul><li>Modeling user behavior </li></ul><ul><li>Task-centered design approach </li></ul><ul><li>Flow of user interactions </li></ul><ul><li>Better suited for web apps than Information Architecture </li></ul>Interaction Design: Focuses on how the user interacts with a page, application or product. Interaction design follows a task centered design approach ensuring the flow of the interaction as the central goal. Interaction design predates the Web world, and finds its roots in the wider field of Human Computer Interaction. Interaction design is a more general umbrella that many working on Web 2.0 interfaces and web applications prefer, since IA appears stuck in web-page centric paradigms.
  7. 7. <ul><li>Interaction Design moves you away from website centric paradigms and affords a focus on the mission critical component of a web app: helping users interact with controls quickly and efficiently . </li></ul>
  8. 8. Get a Free Poster if you attend Part 2 of this seminar! Poster details: http://bit.ly/cHWLXu
  9. 9. Problems and Solutions <ul><li>Progressive Disclosure </li></ul><ul><li>Task-centric </li></ul><ul><li>Containership </li></ul><ul><li>User adoption </li></ul><ul><li>Discoverability </li></ul><ul><li>Navigation </li></ul>Interaction design techniques: Design problems: (Note: “Designing Usable Web Apps-Part 2” goes into specific detail of how to apply these)
  10. 10. <ul><li>2. How do you measure usability of a web application? </li></ul>
  11. 11. Web app usability metrics <ul><li>Depends* on your industry but common metrics we use include: </li></ul><ul><ul><li>-Ease of learning decreases </li></ul></ul><ul><ul><li>-Ease of use increases </li></ul></ul><ul><ul><li>-Ease of understanding decreases </li></ul></ul><ul><ul><li>-Pleasurability or satisfaction increases </li></ul></ul><ul><ul><li>-Call center traffic decreases </li></ul></ul><ul><ul><li>-Sell-ability increases </li></ul></ul>*Context of use (other then Banking, consumers do not “want” to use web apps like they might mobile apps)
  12. 12. Two biggest challenges #1: Users are less in control of a web app experience… #2: Discoverability behavior is lacking (it’s not surfing it’s work)
  13. 13. <ul><li>3. The 10 common web application design mistakes (and what to do about them) </li></ul>
  14. 14. 10 web app usability mistakes <ul><li>1. Implicit knowledge required </li></ul><ul><li>2. Navigation nested and deep (not flat) </li></ul><ul><li>3. Task-Orientation missing </li></ul><ul><li>4. Too much Obscurity </li></ul><ul><li>5. Powerful features </li></ul><ul><li>6. Metaphor overload </li></ul><ul><li>7. Unhelpful forms </li></ul><ul><li>8. Log-in confusion </li></ul><ul><li>9. Work lost or loose track </li></ul><ul><li>10. Wildly powerful controls </li></ul>
  15. 15. #1 Implicit knowledge required <ul><ul><li>Invisible Rules and logic (do this to make this happen) </li></ul></ul>GOOD EXAMPLE BAD EXAMPLE
  16. 16. #2 Navigation nested and deep (not flat) <ul><ul><li>Dropdowns, hover menus, “deep drilling” </li></ul></ul>GOOD EXAMPLE BAD EXAMPLE
  17. 17. #3 Task Orientation <ul><li>-- Start pages (wrong info) </li></ul>GOOD EXAMPLE BAD EXAMPLE
  18. 18. 4. Too much Obscurity <ul><ul><li>Icons or Labels </li></ul></ul>BAD EXAMPLE GOOD EXAMPLE
  19. 19. 5. Powerful features <ul><ul><li>Hidden deep within (or in parallel) </li></ul></ul>BAD EXAMPLE GOOD EXAMPLE
  20. 20. 6. Metaphor overload <ul><ul><li>Abstract concepts or processes </li></ul></ul>BAD EXAMPLE GOOD EXAMPLE
  21. 21. 7. Unhelpful forms <ul><ul><li>Help or Inline examples </li></ul></ul>GOOD EXAMPLE
  22. 22. 8. Log-in confusion <ul><ul><li>Multiple logins </li></ul></ul>BAD EXAMPLE
  23. 23. 9. Work lost or loose track <ul><li>where left off; what working on </li></ul>GOOD EXAMPLE
  24. 24. 10. Wildly powerful controls <ul><ul><li>Eg. dropdowns that open pop ups or disappear- AJAX tricks </li></ul></ul>BAD EXAMPLE GOOD EXAMPLE
  25. 25. <ul><li>4. Case studies: Real-world examples of web application usability </li></ul>
  26. 26. Providence Health & Services Experience Dynamics work
  27. 27. Task-centric workflow
  28. 28. Visual Dashboard
  29. 29. Fuse Insight Experience Dynamics work
  30. 30. Nike Golf Experience Dynamics work
  31. 31. <ul><ul><ul><li>5. Q & A </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  32. 32. Join us for Part 2 <ul><li>Web application engagement: increasing user adoption and discoverability. </li></ul><ul><li>5 Common Web application mistakes and solutions. </li></ul><ul><li>What’s to know about Designing IA for Web apps: layout, navigation, progressive disclosure. </li></ul><ul><li>12 practical tips for web app elegance from our extensive usability testing over 5 years. </li></ul><ul><li>Q & A </li></ul>Get 50% OFF Enter Code WEBAPP2 (use anytime throughout 2011) Agenda Seminar details: http://bit.ly/dXiH1i
  33. 33. thank you ! 1-800-978-9183 www.experiencedynamics.com Frank Spillers, MS [email_address]
  34. 34. About Experience Dynamics: Experience Dynamics is a professional usability design research firm. Through its User Centered Design services, Experience Dynamics assists organizations with removing the frustration and confusion that plagues most website and software development projects. Companies benefiting from Experience Dynamics actionable usability recommendations include AutoNation, IBM, Hewlett Packard, Intel, Verizon, Microsoft, Four Seasons, Washington Mutual, Bank One, Target, Land Rover, Providence Health System and KeyBank. About Experience Dynamics web seminars: Experience Dynamics offers a recurring set of usability web seminars on hot usability topics. The web seminars provide an overview and quick review of key issues and opportunities related to best practices in usability research. The seminars are presented by Frank Spillers, MS, a recognized expert in the field of usability engineering and user experience design. Experience Dynamics seminars are complimentary and are attended by companies including Intel, Citigroup, KeyBank, The Hartford, Fujitsu, Intuit, EMC Corp, Chase, US Bank, Apple, Amazon.com, Business Objects, Mentor Graphics, GM, Toyota and others.

×