the 10 golden usability heuristics (montreal girl geeks september 2014)

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

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

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