Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

User Experience Design Heuristics


Published on

Brief explanation of user experience with a focus on usability and accessibility. Heuristic assessments, WCAG 1.0 checkpoints and how this fits in with real user testing.

Published in: Design
  • Photo credits:
    Are you sure you want to  Yes  No
    Your message goes here
  • This year our team decided to scratch daily morning stand-ups and replace them with twice-weekly 'Sunday Afternoon Barbecue' sessions where everyone gets up for about 20 minutes and delivers a presentation about a topic of their choice.

    I teamed up with Marty to delivery a two-part presentation ... he spoke about UCD and the importance of user testing while I presented on usability heuristic principles, design approaches and assessments.
    Are you sure you want to  Yes  No
    Your message goes here

User Experience Design Heuristics

  1. 1. User Experience Design Heuristics Presented by Nathanael Boehm Thursday 22 January 2009
  2. 2. What is User Experience Design? <ul><li>User Experience is defined by the perception people develop and retain following their interaction with an interface, device or service. </li></ul><ul><li>Therefore User Experience Design is about consciously designing an interface, device or service to ensure users develop a desired perception: a positive experience. </li></ul>
  3. 3. User Experience Honeycomb Copyright Peter Morville
  4. 4. User Experience Honeycomb Copyright Peter Morville
  5. 5. Heuristics in Design <ul><li>Design between user-testing points </li></ul><ul><li>Absence of active user input </li></ul><ul><li>Based on: </li></ul><ul><ul><li>general research and experience </li></ul></ul><ul><ul><li>project-specific knowledge of users </li></ul></ul><ul><ul><li>documented checklists and guidelines </li></ul></ul>
  6. 6. Heuristics in Testing <ul><li>Laboratory-style simulation versus real-world use of product by real people. </li></ul><ul><li>Each aspect generally evaluated in isolation. </li></ul><ul><li>Won’t pick up all accessibility and usability problems. </li></ul>
  7. 7. Usability vs. Accessibility <ul><li>Accessibility : Ability to access the product or service </li></ul><ul><li>Usability : Ability to use and interact with the product or service once it has been accessed </li></ul>
  8. 8. Accessibility is not about blind users <ul><li>Colour blindness and poor sight </li></ul><ul><li>Epilepsy </li></ul><ul><li>JavaScript and client configuration </li></ul><ul><li>Web browser compatibility </li></ul><ul><li>Bandwidth and connectivity </li></ul><ul><li>Screen resolutions </li></ul><ul><li>Mobile devices </li></ul><ul><li>Input/output device limitations </li></ul><ul><li>Search engines </li></ul><ul><li>Data access </li></ul><ul><li>Printing </li></ul>
  9. 9. Heuristic Accessibility Testing <ul><li>Colour contrast </li></ul><ul><li>Cross-browser compatibility </li></ul><ul><li>Variety of screen resolutions </li></ul><ul><li>Mobile devices </li></ul><ul><li>JavaScript disabled </li></ul><ul><li>CSS disabled </li></ul><ul><li>Search engine indexing performance </li></ul><ul><li>Slow Internet connections </li></ul>
  10. 10. Accessibility is Mandatory <ul><li>W3C Web Content Accessibility Guidelines </li></ul><ul><li>Disability Discrimination Act 1992 </li></ul><ul><li>World Wide Web Access: Disability Discrimination Act Advisory Notes Human Rights and Equal Opportunity Commission </li></ul><ul><li>2000 Government Online Strategy Agencies must achieve level &quot;A&quot; conformance Level &quot;AA&quot; conformance recommended </li></ul><ul><li>Commonwealth Disability Strategy </li></ul>
  11. 11. Web Content Accessibility Guidelines <ul><li>Priority 1 includes: </li></ul><ul><ul><li>Screen is readable without stylesheets </li></ul></ul><ul><ul><li>Information conveyed with colour is also available without colour </li></ul></ul><ul><ul><li>Text equivalents for non-text elements (images) </li></ul></ul><ul><ul><li>Control flickering </li></ul></ul><ul><ul><li>Simplest language </li></ul></ul><ul><ul><li>Row and column headers in tables </li></ul></ul>
  12. 12. Naked pages: Done right
  13. 13. Naked pages: Done right
  14. 14. Naked pages: Not so good Copyright The Good Guys -
  15. 15. Naked pages: Not so good Copyright The Good Guys -
  16. 16. Web Content Accessibility Guidelines <ul><li>Priority 2 includes: </li></ul><ul><ul><li>Foreground/background contrast </li></ul></ul><ul><ul><li>Use stylesheets to control presentation </li></ul></ul><ul><ul><li>Relative units (resizability, flexibility) </li></ul></ul><ul><ul><li>Dynamic content is accessible </li></ul></ul><ul><ul><li>Header elements </li></ul></ul><ul><ul><li>Metadata </li></ul></ul><ul><ul><li>Site map </li></ul></ul><ul><ul><li>Tables only for tabulated data </li></ul></ul>
  17. 17. Usable design <ul><li>Interfaces, language and processes appropriate to the user; considering: </li></ul><ul><ul><li>cognitive schemas and metaphors </li></ul></ul><ul><ul><li>business </li></ul></ul><ul><ul><li>situation and environment </li></ul></ul><ul><ul><li>education and training </li></ul></ul><ul><ul><li>culture </li></ul></ul>
  18. 18. Considerations in Usable Design <ul><li>User-focused rather than system-focussed </li></ul><ul><li>System feedback to users </li></ul><ul><li>Control, flexibility and freedom </li></ul><ul><li>Consistency and standards </li></ul><ul><li>Error handling/prevention, exception support </li></ul>
  19. 19. Considerations in Usable Design <ul><li>Minimising thought-process disruption and need for recall </li></ul><ul><li>Efficiency & performance </li></ul><ul><li>Aesthetics & simple/ minimalist design </li></ul><ul><li>Help and guidance </li></ul>
  20. 20. Useless error messages Copyright The Good Guys - Now what do I do?
  21. 21. Cognitive load & disruption
  22. 22. A bit of science Positioning downlights so they illuminate work areas.
  23. 23. Making an exception an exception At this screen during a normal transaction the ATM would be asking you if you want a receipt. I normally say &quot;No&quot; which in this exception would cancel the transaction. It's not obvious it's an exception.
  24. 24. Post-development <ul><li>There are just some things that are either impossible to anticipate, plan for and document. </li></ul><ul><li>There are some aspects of implementing usable design that require experience and diligence from the developer. </li></ul><ul><li>There is always going to be the need to assess and calibrate designs post-development. </li></ul>
  25. 25. Detail matters – small tweaks <ul><li>Dynamic menus: </li></ul><ul><ul><li>Show trigger & visuals </li></ul></ul><ul><ul><li>Gaps & buffers </li></ul></ul><ul><ul><li>Timing </li></ul></ul><ul><ul><li>Effects </li></ul></ul>
  26. 26. Detail matters – small tweaks <ul><li>Dynamic menus: </li></ul><ul><ul><li>Show trigger & visuals </li></ul></ul><ul><ul><li>Gaps & buffers </li></ul></ul><ul><ul><li>Timing </li></ul></ul><ul><ul><li>Effects </li></ul></ul>
  27. 27. Detail matters – small tweaks <ul><li>Dynamic menus: </li></ul><ul><ul><li>Show trigger & visuals </li></ul></ul><ul><ul><li>Gaps & buffers </li></ul></ul><ul><ul><li>Timing </li></ul></ul><ul><ul><li>Effects </li></ul></ul>
  28. 28. Detail matters – small tweaks <ul><li>Dynamic menus: </li></ul><ul><ul><li>Show trigger & visuals </li></ul></ul><ul><ul><li>Gaps & buffers </li></ul></ul><ul><ul><li>Timing </li></ul></ul><ul><ul><li>Effects </li></ul></ul>
  29. 29. Accessibility assessments <ul><li>How a heuristic accessibility assessment is conducted: </li></ul><ul><ul><li>Examining source code </li></ul></ul><ul><ul><li>Page assembly deconstruction </li></ul></ul><ul><ul><li>Running it through validators </li></ul></ul><ul><ul><li>Screen readers </li></ul></ul><ul><ul><li>SEO analytics </li></ul></ul><ul><ul><li>Testing against W3C WCAG </li></ul></ul>
  30. 30. Usability assessments <ul><li>How a heuristic usability assessment is conducted: </li></ul><ul><ul><li>Exploratory navigation </li></ul></ul><ul><ul><li>Interactive component/widget analysis </li></ul></ul><ul><ul><li>Asset load sequence & timing analysis </li></ul></ul><ul><ul><li>Assessment against principles such as: </li></ul></ul><ul><ul><ul><li>Jakob Nielsen’s Ten Usability Heuristics </li></ul></ul></ul><ul><ul><ul><li>Bruce Tognazzi’s First Principles of Interaction Design </li></ul></ul></ul>
  31. 31. Conclusion <ul><li>Heuristic expert accessibility and usability design input and assessment is an important part of the process. However … </li></ul><ul><li>It alone does not constitute user-centred design and must complement end user testing. </li></ul>
  32. 32. Conclusion <ul><li>“ In the absence of detailed information, we all work from assumptions about who the user is, what he or she does, and what type of system would meet his or her needs. Following these assumptions, we tend to design for ourselves, not for other people.” </li></ul><ul><ul><li>- Human Factor: Designing Computer Systems for People by Richard Rubinstein and Harry Hersh </li></ul></ul>
  33. 33. Conclusion <ul><li>Heuristic expert accessibility and usability design input will get you in the ballpark but involving real users to inform the design throughout the project and validate the output is essential. </li></ul><ul><li>Client acceptance, stakeholder acceptance – all good but what we’re really after is user acceptance . </li></ul>