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.
10 GOLDEN 
HEURISTICS 
OF USABILITY 
ELIDA ARRIZZA | MONTREAL GIRL GEEKS SEPTEMBER 2014
t @elida_ca 
HIYA 
elida @ elida.ca 
• UX Designer at Sid Lee 
• Photographer 
• Designer 
• Teacher 
ca.linkedin.com/in/e...
I have an affinity towards these communities
ISSUES WITH SHOELACES 
SHOELACES VELCRO FIXED ELASTIC LACES 
Initial setup: 10 mins 
Reboot: 30 seconds 
Learning curve: h...
http://www.nytimes.com/2011/09/04/books/review/the-mechanic-muse-from-scroll-to-screen.html 
• PORTABILITY AND 
DATA DENSI...
USABILITY IS CORE 
TO USER EXPERIENCE 
USABILITY 
#UXGALAXY
Usability is about… 
GETTING THE TASK DONE
HEURISTICS? 
Never heard of it.
JAKOB NIELSEN 
! 
“On the Web, usability 
is a necessary 
condition for survival. 
If a website is difficult 
to use, peop...
JAKOB NIELSEN’S USABILITY PRINCIPLES 
www.nngroup.com/articles/ten-usability-heuristics
JAKOB NIELSEN’S USABILITY PRINCIPLES 
TURN 
LEFT TURN 
LEFT
SHOW SYSTEM STATUS
http://bluecow.co.za/?p=mfm_926
ACTIONS (IMMEDIATE FEEDBACK) 
Hyperlink 
Hyperlink hover 
Hyperlink visited
FLOW AND ORIENTATION 
http://developer.fellowshipone.com/patterns/
TIME. WAIT FOR IT.
SHOW TOTAL TIME UPFRONT
SPACE 
http://www.loc.gov/exhibits/music-and-animation/aladdin-1992.html#obj2
FAMILIAR METAPHORS AND LANGUAGE
FAMILIAR LANGUAGE
FAMILIAR METAPHORS
MATCH BETWEEN SYSTEM 
AND REAL WORLD
OLD SKOOL METAPHORS 
SAVE
BEWARE OF UNADOPTED ICONS 
PRO TIP: 
Add an affordance! 
http://exisweb.net/mobile-menu-abtest
CONTROL AND FREEDOM
PREVENT DATA LOSS 
unneeded 
encoding
OFFER ALTERNATIVE INPUT 
Can you imagine Photoshop without shortcut keys?
OFFER REASONABLE CONTROL
PREVIEWS 
WYSIWYG NO WYSIWYG BACK TO WYSIWYG 
WordPerfect 2.1 for DOS MS WORD 97 
IBM Selectric Typewriter 
http://www.cov...
CONSISTENCY AND STANDARDS
POSITION ?
VISUAL LANGUAGE (UI KIT) 
http://www.easyvirtuemart.com/images/bootstrap.png 
Primary button 
(Encouraged Action) 
Seconda...
(TOTAL) RECOGNITION OVER RECALL 
SHOW and TELL 
TURN 
LEFT TURN 
LEFT
LEFT MEMORIZING VS. PROPOSED OPTIONS 
TURN 
LEFT TURN 
Command lines eat up 
too much mental RAM! Filezilla
RECOGNITION WITH PREVIEWS 
autosuggest google 
TURN 
LEFT TURN 
LEFT 
Show thumbnails!
LEFT HIGHLIGHT RELEVANT 
TURN 
LEFT TURN
ERROR PREVENTION
Personal 
attempt at 
reducing 
errors
Physical 
gate to 
protect 
fingers! 
ERROR PROOFING
PREVENT CONFLICTS
PREVENT BAD INPUT
REDUCE UNNECESSARY STEPS 
Transit App 
Geo detection 
reduces 
unnecessary 
hurdles
FLEXIBILITY AND EFFICIENCY 
For novice and power user
OFFER AUTOMATIC AND MANUAL 
Accelerators to customize experience for efficiency
OFFER AUTOMATIC AND MANUAL 
5 minute install or manual install 
Optional Tutorials
OFFER AUTOMATIC AND MANUAL
POWER SEARCH AND FILTERING 
duproprio.com bhphotovideo.com
AESTHETIC AND MINIMALIST DESIGN
User-modified and simplified remote control interface. [Bill Moggridge]
FOCUS ON MAIN ACTIVITY 
Which has had most success? 
lycos.fr le 15 mai 
http://fabien.collinet.free.fr/btsmm2007/index.ph...
FOCUS ON MAIN ACTIVITY 
Reduce unnecessary elements.
HELP AND DOCUMENTATION (SELF SERVE)
SELF SERVE HELP AND DOCUMENTATION 
Knowledge base, FAQ, forums
IN CONTEXT TOURS AND TUTORIALS 
Visual Tutorials (and videos) 
In context tour
HELP USERS WITH ERRORS
HELP USERS RECOGNIZE, DIAGNOSE 
AND RECOVER FROM ERRORS.
HELP USERS RECOGNIZE, DIAGNOSE 
AND RECOVER FROM ERRORS. 
THE 404: 
Be on brand 
and offer an 
action. 
• Search 
• Sugges...
PERSONALIZED HELP 
Also: customer support by phone and in person
10 HEURISTICS 
TURN 
LEFT TURN 
LEFT
How to apply 
HEURISTIC EVALUATION
IDENTIFY EVALUATION TYPE AND LEVEL 
System Level (website) 
Scenario Level (use case) 
Local Level (page) 
Applications 
S...
CRITIQUE TOOL 
First pass to begin the discussion the basics 
• Helps evaluators find problems in 
interfaces. 
• Helps de...
HEURISTIC EVALUATION 
http://www.nngroup.com/articles/how-to-rate-the-severity-of-usability-problems/ 
The frequency 
The ...
NO RIGHT OR WRONG 
Use the 10 Principles as a technique to 
evaluate and start the dialogue on 
improving usability and UX...
RESOURCES 
1 
10 Usability Heuristics for User Interface Design 
www.nngroup.com/articles/ten-usability-heuristics/ 
2 
Fi...
QUESTIONS? 
THANKS AND GOOD LUCK! 
t @elida_ca 
bit.ly/usabilityMTLGG 
(slideshare.net/elida-arrizza)
SKEUOMORPHIC VS. FLAT 
Perception from real world experience 
Found on lovelustfashionbeautyromance.tumblr.com
SKEUOMORPHIC VS. FLAT? 
Depends on the “UI maturity” of your audience
AFFORDANCES
The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)
The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)
The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)
The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)
Upcoming SlideShare
Loading in …5
×

The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)

6,066 views

Published on

A great User Experience (UX) is key to user delight and a positive attitude toward a brand. We’ve all had that moment when we’ve experienced frustration at doing or getting something online, but may have trouble understanding or communicating why.

A core element of UX is Usability, which focuses on whether or not a given task can be accomplished on a website, helping to rid us of any of those frustrations. This presentation will provide you with a basic understanding of the language and purpose of usability, as well as an overview of tools and techniques to improve your site’s usability by examining the 10 golden heuristics. This talk is ideal for designers, UX professionals, developers and anyone who wants to know more about how users think and what we can do to make things easier for our audience.
http://montrealgirlgeeks.com/2014/09/23/september-10-golden-usability-heuristics-with-elida-arrizza/

Published in: Technology

The 10 Golden Usability Heuristics (Montreal Girl Geeks September 2014)

  1. 1. 10 GOLDEN HEURISTICS OF USABILITY ELIDA ARRIZZA | MONTREAL GIRL GEEKS SEPTEMBER 2014
  2. 2. t @elida_ca HIYA elida @ elida.ca • UX Designer at Sid Lee • Photographer • Designer • Teacher ca.linkedin.com/in/elida ELIDA ARRIZZA
  3. 3. I have an affinity towards these communities
  4. 4. ISSUES WITH SHOELACES SHOELACES VELCRO FIXED ELASTIC LACES Initial setup: 10 mins Reboot: 30 seconds Learning curve: high Crashes per day: 3-4 Accessibility ease: fail Initial setup: 0 mins Reboot: 15 seconds Learning curve: low Accessibility ease: better Initial setup: 0 mins Reboot: 6 seconds Learning curve: none Accessibility ease: better https://www.youtube.com/watch?v=tIK1zgozm6w
  5. 5. http://www.nytimes.com/2011/09/04/books/review/the-mechanic-muse-from-scroll-to-screen.html • PORTABILITY AND DATA DENSITY: Hundreds of characters/lbs to infinity characters/lbs • PHYSICAL CONTACT: Two hands to a fingertip • FIND: Hours to milliseconds • Backups We’re still scrolling!
  6. 6. USABILITY IS CORE TO USER EXPERIENCE USABILITY #UXGALAXY
  7. 7. Usability is about… GETTING THE TASK DONE
  8. 8. HEURISTICS? Never heard of it.
  9. 9. JAKOB NIELSEN ! “On the Web, usability is a necessary condition for survival. If a website is difficult to use, people leave.”
  10. 10. JAKOB NIELSEN’S USABILITY PRINCIPLES www.nngroup.com/articles/ten-usability-heuristics
  11. 11. JAKOB NIELSEN’S USABILITY PRINCIPLES TURN LEFT TURN LEFT
  12. 12. SHOW SYSTEM STATUS
  13. 13. http://bluecow.co.za/?p=mfm_926
  14. 14. ACTIONS (IMMEDIATE FEEDBACK) Hyperlink Hyperlink hover Hyperlink visited
  15. 15. FLOW AND ORIENTATION http://developer.fellowshipone.com/patterns/
  16. 16. TIME. WAIT FOR IT.
  17. 17. SHOW TOTAL TIME UPFRONT
  18. 18. SPACE http://www.loc.gov/exhibits/music-and-animation/aladdin-1992.html#obj2
  19. 19. FAMILIAR METAPHORS AND LANGUAGE
  20. 20. FAMILIAR LANGUAGE
  21. 21. FAMILIAR METAPHORS
  22. 22. MATCH BETWEEN SYSTEM AND REAL WORLD
  23. 23. OLD SKOOL METAPHORS SAVE
  24. 24. BEWARE OF UNADOPTED ICONS PRO TIP: Add an affordance! http://exisweb.net/mobile-menu-abtest
  25. 25. CONTROL AND FREEDOM
  26. 26. PREVENT DATA LOSS unneeded encoding
  27. 27. OFFER ALTERNATIVE INPUT Can you imagine Photoshop without shortcut keys?
  28. 28. OFFER REASONABLE CONTROL
  29. 29. PREVIEWS WYSIWYG NO WYSIWYG BACK TO WYSIWYG WordPerfect 2.1 for DOS MS WORD 97 IBM Selectric Typewriter http://www.covingtoninnovations.com/selectric/ http://www.thewindowsclub.com/history-evolution-microsoft-office-software
  30. 30. CONSISTENCY AND STANDARDS
  31. 31. POSITION ?
  32. 32. VISUAL LANGUAGE (UI KIT) http://www.easyvirtuemart.com/images/bootstrap.png Primary button (Encouraged Action) Secondary
  33. 33. (TOTAL) RECOGNITION OVER RECALL SHOW and TELL TURN LEFT TURN LEFT
  34. 34. LEFT MEMORIZING VS. PROPOSED OPTIONS TURN LEFT TURN Command lines eat up too much mental RAM! Filezilla
  35. 35. RECOGNITION WITH PREVIEWS autosuggest google TURN LEFT TURN LEFT Show thumbnails!
  36. 36. LEFT HIGHLIGHT RELEVANT TURN LEFT TURN
  37. 37. ERROR PREVENTION
  38. 38. Personal attempt at reducing errors
  39. 39. Physical gate to protect fingers! ERROR PROOFING
  40. 40. PREVENT CONFLICTS
  41. 41. PREVENT BAD INPUT
  42. 42. REDUCE UNNECESSARY STEPS Transit App Geo detection reduces unnecessary hurdles
  43. 43. FLEXIBILITY AND EFFICIENCY For novice and power user
  44. 44. OFFER AUTOMATIC AND MANUAL Accelerators to customize experience for efficiency
  45. 45. OFFER AUTOMATIC AND MANUAL 5 minute install or manual install Optional Tutorials
  46. 46. OFFER AUTOMATIC AND MANUAL
  47. 47. POWER SEARCH AND FILTERING duproprio.com bhphotovideo.com
  48. 48. AESTHETIC AND MINIMALIST DESIGN
  49. 49. User-modified and simplified remote control interface. [Bill Moggridge]
  50. 50. FOCUS ON MAIN ACTIVITY Which has had most success? lycos.fr le 15 mai http://fabien.collinet.free.fr/btsmm2007/index.php?Campagnes-publicitaires 2007
  51. 51. FOCUS ON MAIN ACTIVITY Reduce unnecessary elements.
  52. 52. HELP AND DOCUMENTATION (SELF SERVE)
  53. 53. SELF SERVE HELP AND DOCUMENTATION Knowledge base, FAQ, forums
  54. 54. IN CONTEXT TOURS AND TUTORIALS Visual Tutorials (and videos) In context tour
  55. 55. HELP USERS WITH ERRORS
  56. 56. HELP USERS RECOGNIZE, DIAGNOSE AND RECOVER FROM ERRORS.
  57. 57. HELP USERS RECOGNIZE, DIAGNOSE AND RECOVER FROM ERRORS. THE 404: Be on brand and offer an action. • Search • Suggest similar • Report to webmaster • etc…
  58. 58. PERSONALIZED HELP Also: customer support by phone and in person
  59. 59. 10 HEURISTICS TURN LEFT TURN LEFT
  60. 60. How to apply HEURISTIC EVALUATION
  61. 61. IDENTIFY EVALUATION TYPE AND LEVEL System Level (website) Scenario Level (use case) Local Level (page) Applications Software Websites Objects, environments and experiences too!
  62. 62. CRITIQUE TOOL First pass to begin the discussion the basics • Helps evaluators find problems in interfaces. • Helps designers choose design alternatives. • Save your testers • Can be faster to pin point key usability problems before going more elaborate processes. • Smoother releases http://www.uxmatters.com/mt/archives/2012/12/case-study-methods-of-evaluating-an-ecommerce-checkout-experience.php
  63. 63. HEURISTIC EVALUATION http://www.nngroup.com/articles/how-to-rate-the-severity-of-usability-problems/ The frequency The impact The persistence 0 = no usability problem at all 1 = Cosmetic problem only 2 = Minor usability problem 3 = Major usability problem 4 = Usability catastrophe http://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/
  64. 64. NO RIGHT OR WRONG Use the 10 Principles as a technique to evaluate and start the dialogue on improving usability and UX.
  65. 65. RESOURCES 1 10 Usability Heuristics for User Interface Design www.nngroup.com/articles/ten-usability-heuristics/ 2 First Principles of Interaction Design http://asktog.com/atc/principles-of-interaction-design/ 3 Coursera Lectures: Human-Computer Interaction https://www.coursera.org/course/hciucsd
  66. 66. QUESTIONS? THANKS AND GOOD LUCK! t @elida_ca bit.ly/usabilityMTLGG (slideshare.net/elida-arrizza)
  67. 67. SKEUOMORPHIC VS. FLAT Perception from real world experience Found on lovelustfashionbeautyromance.tumblr.com
  68. 68. SKEUOMORPHIC VS. FLAT? Depends on the “UI maturity” of your audience
  69. 69. AFFORDANCES

×