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/

1. 10 GOLDEN
HEURISTICS
OF USABILITY
ELIDA ARRIZZA | MONTREAL GIRL GEEKS SEPTEMBER 2014

2. t @elida_ca
HIYA
elida @ elida.ca
• UX Designer at Sid Lee
• Photographer
• Designer
• Teacher
ca.linkedin.com/in/elida
ELIDA ARRIZZA

3. I have an affinity towards these communities

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. 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. USABILITY IS CORE
TO USER EXPERIENCE
USABILITY
#UXGALAXY

7. Usability is about…
GETTING THE TASK DONE

8. HEURISTICS?
Never heard of it.

9. JAKOB NIELSEN
!
“On the Web, usability
is a necessary
condition for survival.
If a website is difficult
to use, people leave.”

10. JAKOB NIELSEN’S USABILITY PRINCIPLES
www.nngroup.com/articles/ten-usability-heuristics

11. JAKOB NIELSEN’S USABILITY PRINCIPLES
TURN
LEFT TURN
LEFT

12. SHOW SYSTEM STATUS

13. http://bluecow.co.za/?p=mfm_926

14. ACTIONS (IMMEDIATE FEEDBACK)
Hyperlink
Hyperlink hover
Hyperlink visited

15. FLOW AND ORIENTATION
http://developer.fellowshipone.com/patterns/

16. TIME. WAIT FOR IT.

17. SHOW TOTAL TIME UPFRONT

18. SPACE
http://www.loc.gov/exhibits/music-and-animation/aladdin-1992.html#obj2

19. FAMILIAR METAPHORS AND LANGUAGE

20. FAMILIAR LANGUAGE

21. FAMILIAR METAPHORS

22. MATCH BETWEEN SYSTEM
AND REAL WORLD

23. OLD SKOOL METAPHORS
SAVE

24. BEWARE OF UNADOPTED ICONS
PRO TIP:
Add an affordance!
http://exisweb.net/mobile-menu-abtest

25. CONTROL AND FREEDOM

26. PREVENT DATA LOSS
unneeded
encoding

27. OFFER ALTERNATIVE INPUT
Can you imagine Photoshop without shortcut keys?

28. OFFER REASONABLE CONTROL

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. CONSISTENCY AND STANDARDS

31. POSITION ?

32. VISUAL LANGUAGE (UI KIT)
http://www.easyvirtuemart.com/images/bootstrap.png
Primary button
(Encouraged Action)
Secondary

34. (TOTAL) RECOGNITION OVER RECALL
SHOW and TELL
TURN
LEFT TURN
LEFT

35. LEFT MEMORIZING VS. PROPOSED OPTIONS
TURN
LEFT TURN
Command lines eat up
too much mental RAM! Filezilla

36. RECOGNITION WITH PREVIEWS
autosuggest google
TURN
LEFT TURN
LEFT
Show thumbnails!

37. LEFT HIGHLIGHT RELEVANT
TURN
LEFT TURN

38. ERROR PREVENTION

39. Personal
attempt at
reducing
errors

40. Physical
gate to
protect
fingers!
ERROR PROOFING

41. PREVENT CONFLICTS

42. PREVENT BAD INPUT

43. REDUCE UNNECESSARY STEPS
Transit App
Geo detection
reduces
unnecessary
hurdles

44. FLEXIBILITY AND EFFICIENCY
For novice and power user

45. OFFER AUTOMATIC AND MANUAL
Accelerators to customize experience for efficiency

46. OFFER AUTOMATIC AND MANUAL
5 minute install or manual install
Optional Tutorials

47. OFFER AUTOMATIC AND MANUAL

48. POWER SEARCH AND FILTERING
duproprio.com bhphotovideo.com

49. AESTHETIC AND MINIMALIST DESIGN

50. User-modified and simplified remote control interface. [Bill Moggridge]

51. 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

52. FOCUS ON MAIN ACTIVITY
Reduce unnecessary elements.

54. HELP AND DOCUMENTATION (SELF SERVE)

55. SELF SERVE HELP AND DOCUMENTATION
Knowledge base, FAQ, forums

56. IN CONTEXT TOURS AND TUTORIALS
Visual Tutorials (and videos)
In context tour

57. HELP USERS WITH ERRORS

60. HELP USERS RECOGNIZE, DIAGNOSE
AND RECOVER FROM ERRORS.

61. HELP USERS RECOGNIZE, DIAGNOSE
AND RECOVER FROM ERRORS.
THE 404:
Be on brand
and offer an
action.
• Search
• Suggest
similar
• Report to
webmaster
• etc…

62. PERSONALIZED HELP
Also: customer support by phone and in person

63. 10 HEURISTICS
TURN
LEFT TURN
LEFT

64. How to apply
HEURISTIC EVALUATION

65. IDENTIFY EVALUATION TYPE AND LEVEL
System Level (website)
Scenario Level (use case)
Local Level (page)
Applications
Software
Websites
Objects, environments and experiences too!

66. 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

67. 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/

68. NO RIGHT OR WRONG
Use the 10 Principles as a technique to
evaluate and start the dialogue on
improving usability and UX.

69. 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

70. QUESTIONS?
THANKS AND GOOD LUCK!
t @elida_ca
bit.ly/usabilityMTLGG
(slideshare.net/elida-arrizza)

71. SKEUOMORPHIC VS. FLAT
Perception from real world experience
Found on lovelustfashionbeautyromance.tumblr.com

72. SKEUOMORPHIC VS. FLAT?
Depends on the “UI maturity” of your audience

73. AFFORDANCES