Post on 01-Dec-2014
description
ELIDA ARRIZZA | MONTREAL GIRL GEEKS SEPTEMBER 2014
10 GOLDEN HEURISTICS OF USABILITY
DRAFT
t @elida_ca
HIYA
elida @ elida.ca
• UX Designer at Sid Lee • Photographer • Designer • Teacher
ca.linkedin.com/in/elida
ELIDA ARRIZZA
I have an affinity towards these communities
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
SHOELACES VELCRO FIXED ELASTIC LACES
https://www.youtube.com/watch?v=tIK1zgozm6w
ISSUES WITH SHOELACES
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!
USABILITY IS CORE TO USER EXPERIENCE
#UXGALAXY
USABILITY
Usability is about…
GETTING THE TASK DONE
Never heard of it.
HEURISTICS?
JAKOB NIELSEN !“On the Web, usability is a necessary condition for survival. If a website is difficult to use, people leave.”
JAKOB NIELSEN’S USABILITY PRINCIPLESwww.nngroup.com/articles/ten-usability-heuristics
TURNLEFT TURN
LEFT
JAKOB NIELSEN’S USABILITY PRINCIPLES
SHOW SYSTEM STATUS
ACTIONS (IMMEDIATE FEEDBACK)
Hyperlink Hyperlink hover Hyperlink visited
http://developer.fellowshipone.com/patterns/
FLOW AND ORIENTATION
TIME. WAIT FOR IT.
SHOW TOTAL TIME UPFRONT
http://www.loc.gov/exhibits/music-and-animation/aladdin-1992.html#obj2
SPACE
FAMILIAR METAPHORS AND LANGUAGE
FAMILIAR LANGUAGE
FAMILIAR METAPHORS
MATCH BETWEEN SYSTEM AND REAL WORLD
OLD SKOOL METAPHORS
SAVE
BEWARE OF UNADOPTED ICONS
http://exisweb.net/mobile-menu-abtest
PRO TIP: Add an affordance!
CONTROL AND FREEDOM
PREVENT DATA LOSSunneeded encoding
OFFER ALTERNATIVE INPUT
Can you imagine Photoshop without shortcut keys?
OFFER REASONABLE CONTROL
PREVIEWS
MS WORD 97WordPerfect 2.1 for DOS
http://www.thewindowsclub.com/history-evolution-microsoft-office-softwarehttp://www.covingtoninnovations.com/selectric/
IBM Selectric Typewriter
WYSIWYG BACK TO WYSIWYGNO WYSIWYG
CONSISTENCY AND STANDARDS
POSITION?
VISUAL LANGUAGE (UI KIT)
http://www.easyvirtuemart.com/images/bootstrap.png
Primary button (Encouraged Action)
Secondary
(TOTAL) RECOGNITION OVER RECALL
TURNLEFT TURN
LEFT
SHOW and TELL
TURNLEFT TURN
LEFT MEMORIZING VS. PROPOSED OPTIONS
Command lines eat up too much mental RAM! Filezilla
RECOGNITION WITH PREVIEWS
autosuggest google
TURNLEFT TURN
LEFT
Show thumbnails!
TURNLEFT TURN
LEFT HIGHLIGHT RELEVANT
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
Accelerators to customize experience for efficiency
OFFER AUTOMATIC AND MANUAL
OFFER AUTOMATIC AND MANUAL
5 minute install or manual install
Optional Tutorials
OFFER AUTOMATIC AND MANUAL
POWER SEARCH AND FILTERING
bhphotovideo.comduproprio.com
AESTHETIC AND MINIMALIST DESIGN
User-modified and simplified remote control interface. [Bill Moggridge]
lycos.fr le 15 mai http://fabien.collinet.free.fr/btsmm2007/index.php?Campagnes-publicitaires 2007
FOCUS ON MAIN ACTIVITY
Which has had most success?
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 • Suggest
similar • Report to
webmaster • etc…
PERSONALIZED HELP
Also: customer support by phone and in person
10 HEURISTICS
TURNLEFT TURN
LEFT
How to apply
HEURISTIC EVALUATION
IDENTIFY EVALUATION TYPE AND LEVEL
System Level (website) Scenario Level (use case) Local Level (page)
Applications Software Websites Objects, environments and experiences too!
CRITIQUE TOOL• 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
First pass to begin the discussion the basics
http://www.uxmatters.com/mt/archives/2012/12/case-study-methods-of-evaluating-an-ecommerce-checkout-experience.php
http://www.nngroup.com/articles/how-to-rate-the-severity-of-usability-problems/
0 = no usability problem at all 1 = Cosmetic problem only 2 = Minor usability problem 3 = Major usability problem 4 = Usability catastrophe
The frequency The impact The persistence
http://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/
HEURISTIC EVALUATION
NO RIGHT OR WRONGUse the 10 Principles as a technique to
evaluate and start the dialogue on improving usability and UX.
RESOURCES10 Usability Heuristics for User Interface Design
http://asktog.com/atc/principles-of-interaction-design/
www.nngroup.com/articles/ten-usability-heuristics/
First Principles of Interaction Design
123 Coursera Lectures: Human-Computer Interaction
https://www.coursera.org/course/hciucsd
QUESTIONS? THANKS AND GOOD LUCK!
t @elida_ca
(slideshare.net/elida-arrizza)
bit.ly/usabilityMTLGG
Found on lovelustfashionbeautyromance.tumblr.com
SKEUOMORPHIC VS. FLATPerception from real world experience
SKEUOMORPHIC VS. FLAT?Depends on the “UI maturity” of your audience
AFFORDANCES