Heuristic Evaluation in Reverse for UX Improvement

53
Heuristic Evaluation in Reverse for UX Improvement Bohyun Kim Associate Director for Library Applications and Knowledge Systems, University of Maryland, Baltimore Health Sciences & Human Services Library @ bohyunkim (Twitter) | http://bohyunkim.net (Website) ACRL MD MILEX Fall Program, Nov. 14, 2014 #acrlmdmilix14

description

Invited talk for the ACRL MD-MILEX Fall Program, Nov. 14, 2014. Presented by Bohyun Kim, Associate Director for Library Applications and Knowledge Systems, University of Maryland, Baltimore, Health Sciences & Human Services Library.

Transcript of Heuristic Evaluation in Reverse for UX Improvement

Page 1: Heuristic Evaluation in Reverse for UX Improvement

Heuristic Evaluation in

Reverse for UX Improvement

Bohyun Kim

Associate Director for Library Applications and Knowledge Systems, University of Maryland, Baltimore

Health Sciences & Human Services Library

@bohyunkim (Twitter) | http://bohyunkim.net (Website)

ACRL MD – MILEX Fall Program, Nov. 14, 2014 #acrlmdmilix14

Page 2: Heuristic Evaluation in Reverse for UX Improvement

1. Usability, UX, UCD

Page 3: Heuristic Evaluation in Reverse for UX Improvement

Usability

Usability is a quality attribute that assesses how easy user interfaces are to use.

Usability - 5 Quality components:

Learnability

Efficiency

Memorability

Errors

Satisfaction

- Source: Jakob Nielsen, “Usability 101: Introduction to Usability” http://www.nngroup.com/articles/usability-101-introduction-to-usability/

Page 4: Heuristic Evaluation in Reverse for UX Improvement

User Experience

"User experience" encompasses all aspects of the end-

user's interaction with the company, its services, and its

products. … It is a broader concept.

- Source: Jakob Nielsen and Don Norman, “The Definition

of User

Experience”http://www.nngroup.com/articles/usability-101-

introduction-to-usability/

Task vs. Experience

Page 5: Heuristic Evaluation in Reverse for UX Improvement

User-Centered Design (UCD)

User-centered design (UCD) is a design philosophy where the end-user’s needs, wants and limitations are a focus at all stages within the design process and development lifecycle. Products developed using the UCD methodology are optimized for end-users, and emphasis is placed on how the end-users need or want to use a product, instead of forcing the end user to change his behavior to use the product.

- Source: Webopedia, “User centered design,”http://www.webopedia.com/TERM/U/user_centered_design.html

UCD Process :https://www.gov.uk/service-manual/user-centred-design/user-centred-design-alpha-beta

Page 6: Heuristic Evaluation in Reverse for UX Improvement

2. Why Usability, UX, UCD?

Page 7: Heuristic Evaluation in Reverse for UX Improvement

Image from Flickr by the CC License:

https://www.flickr.com/photos/rowenarants/4661978934

Page 8: Heuristic Evaluation in Reverse for UX Improvement
Page 9: Heuristic Evaluation in Reverse for UX Improvement

Because…

UX/Usability is one of the most important concerns for

things that have been created for use.

UX/Usability interests of businesses and customers can

sometimes conflict.

There is no one perfect design.

Still, most of the time, UX/Usability interests of businesses

and customers are closely aligned.

Page 10: Heuristic Evaluation in Reverse for UX Improvement

3. Problem & Proposal

Page 11: Heuristic Evaluation in Reverse for UX Improvement

Usability Testing Methods

Great but time-and-labor intensive!

Expert Review / Heuristic Evaluation

Survey / Questionnaire

Focus Group

Interviews

Usability Testing

Card Sorting

User Personas

Journey Map

Contextual Inquiry

Page 12: Heuristic Evaluation in Reverse for UX Improvement

How Can We Make

Immediate UX Improvement?

Image from Flickr by the CC License: https://www.flickr.com/photos/hisgett/5836924514/

Page 13: Heuristic Evaluation in Reverse for UX Improvement

Heuristic Evaluation

“Expert reviews – also known as heuristic evaluations –

are low cost usability methods that don’t involve

participation of real end users. An ‘expert’ usability

evaluator can assess a product (or web site) against a

known set of ‘heuristics’, or usability guidelines (best

practice). An alternative approach is to conduct a

‘cognitive walkthrough’ against specific use cases or

scenarios. “

– Source: “Expert reviews,”https://www.gov.uk/service-

manual/user-centred-design/user-research/expert-

review.html

Page 14: Heuristic Evaluation in Reverse for UX Improvement

Heuristic Evaluation in Reverse

Instead of the traditional approach, try using the ‘Scratch

Your Itch’ approach as the starting point.

Hence, Heuristic Evaluation ‘In Reverse’

Find the problem/pain point.

Think about a solution from a user’s perspective.

Look for specific guidelines that apply.

Look for specific best practices that apply.

Otherwise, check the general heuristics and usability

components.

Page 15: Heuristic Evaluation in Reverse for UX Improvement

4. Thinking from a User’s

Perspective like a UX Expert

Page 16: Heuristic Evaluation in Reverse for UX Improvement
Page 17: Heuristic Evaluation in Reverse for UX Improvement

Too Many Options

Streamline

Page 18: Heuristic Evaluation in Reverse for UX Improvement
Page 19: Heuristic Evaluation in Reverse for UX Improvement

Many Important Things

Be Selective

Page 20: Heuristic Evaluation in Reverse for UX Improvement
Page 21: Heuristic Evaluation in Reverse for UX Improvement

5. Conducting

Heuristic Evaluation in Reverse

Page 22: Heuristic Evaluation in Reverse for UX Improvement

(a) Scratch Your Itch - Web

Start with your own pain points.

Example:

No redirect between with and without ‘www.’

Page 23: Heuristic Evaluation in Reverse for UX Improvement

5. Error Prevention

9. Help users recognize, diagnose, and recover from errors

http://www.designprinciplesftw.com/collections/10-usability-heuristics-for-

user-interface-design

Page 24: Heuristic Evaluation in Reverse for UX Improvement

Tryamazon.com

www.amazon.com

google.com

www.google.com

slideshare.net

www.slideshare.net

prattlibrary.org

www.prattlibrary.org

http://med.fsu.edu/index.cfm?fuseaction=library.home

Page 25: Heuristic Evaluation in Reverse for UX Improvement

(a’) Findability of the Library

Building

Analogous case to (a) in terms of the library’s physical

space:

Is the building clearly identified as a library outside?

Are there library signs in the vicinity to point to the building?

Are there signs that visitors can follow to the library parking

lot?

Page 26: Heuristic Evaluation in Reverse for UX Improvement

Image from Flickr by the CC License:

https://www.flickr.com/photos/herzogbr/7380229378

Page 27: Heuristic Evaluation in Reverse for UX Improvement
Page 28: Heuristic Evaluation in Reverse for UX Improvement

Image from Flickr by the CC License:

https://www.flickr.com/photos/funkbrothers/5760421318

Page 29: Heuristic Evaluation in Reverse for UX Improvement

v

Image from Flickr by the CC License:

https://www.flickr.com/photos/nataliejohnson/2570839947

Page 30: Heuristic Evaluation in Reverse for UX Improvement

(b) Scratch Your Itch - Web

No redirect between with and without ‘www.’

Position of the OK/Cancel Button (ILLiad, PeopleSoft)

Page 31: Heuristic Evaluation in Reverse for UX Improvement
Page 32: Heuristic Evaluation in Reverse for UX Improvement
Page 33: Heuristic Evaluation in Reverse for UX Improvement

“According to usability studies OK buttons work best on the right rather than left.”

http://uxmovement.com/buttons/why-ok-buttons-in-dialog-boxes-work-best-on-the-

right/

Page 34: Heuristic Evaluation in Reverse for UX Improvement
Page 35: Heuristic Evaluation in Reverse for UX Improvement
Page 36: Heuristic Evaluation in Reverse for UX Improvement

Image from Flickr by the CC License:

https://www.flickr.com/photos/14296351@N00/15408276849/

Page 37: Heuristic Evaluation in Reverse for UX Improvement

‘Uber’ App

Password

Reset

Screen

Page 38: Heuristic Evaluation in Reverse for UX Improvement

(b’)

Analogous

Example?

Page 39: Heuristic Evaluation in Reverse for UX Improvement

Counter-intuitive

Follow the Convention

Be Predictable

Page 40: Heuristic Evaluation in Reverse for UX Improvement

(c) Scratch Your Itch - Web

No redirect between with and without ‘www.’

Location of the OK/Cancel Button (ILLiad, PeopleSoft)

Locating ‘Contact Us’ or ‘Help’

Page 41: Heuristic Evaluation in Reverse for UX Improvement

http://www.santarosa.edu/library/

Page 42: Heuristic Evaluation in Reverse for UX Improvement
Page 43: Heuristic Evaluation in Reverse for UX Improvement

https://www.godaddy.com/

Page 44: Heuristic Evaluation in Reverse for UX Improvement

Contact Us, Help, FAQs

“Include a "Contact Us" link on the homepage that goes to

a page with all contact information for your company. If

you want to encourage site visitors to contact your

company directly instead of seeking information on the

website first, include contact information such as the

primary address, phone number, and email directly on

the homepage.”

- Source: Jakob Nielsen, “113 Design Guidelines for

Homepage Usability http://www.nngroup.com/articles/113-

design-guidelines-homepage-usability/

Page 45: Heuristic Evaluation in Reverse for UX Improvement

- Source: Dacular Branch Library,

Georgiahttp://rjsdesigns.net/Dacula%20Branch%20Library%2008.htm

(c’) Where to Find ‘HELP’

Page 46: Heuristic Evaluation in Reverse for UX Improvement

Source - Santa Rosa Junior College Library

http://www.santarosa.edu/library/about/doyletour2.html

Page 47: Heuristic Evaluation in Reverse for UX Improvement

Locating

Cordelia

http://www.aqua.org/blog/2014/october/hap

py-world-octopus-day

Page 48: Heuristic Evaluation in Reverse for UX Improvement

“Look for

the

‘Feeding’

Section”

Page 49: Heuristic Evaluation in Reverse for UX Improvement

Not Enough Information

Jargon

Cryptic Message

Clear & To The Point

Page 50: Heuristic Evaluation in Reverse for UX Improvement

5. Strategies

Page 51: Heuristic Evaluation in Reverse for UX Improvement

Conducting H.E.I.R

at Your Library

Heuristic Evaluation /Expert Review

Scratch Your Itches (+ Content/Space Audit)

Use a variety of usability guidelines for ‘Pain Points.’

Combine immediate changes + changes through discussion

Use the result of heuristic evaluation as the guide for more formal usability testing plan.

Evaluate on an ongoing basis.

Have a maintenance plan for content addition.

Page 52: Heuristic Evaluation in Reverse for UX Improvement

Usability GuidelinesTop 10 Guidelines for Homepage Usabilityhttp://www.nngroup.com/articles/top-ten-guidelines-for-homepage-usability/

10 Usability Heuristics for User Interface Design http://www.designprinciplesftw.com/collections/10-usability-heuristics-for-user-interface-design

Usability.govhttp://guidelines.usability.gov/

UK Government Service Design Manualhttps://www.gov.uk/service-manual

247 Usability Guidelineshttp://www.userfocus.co.uk/resources/guidelines.html

Usability Express: Recipes for Librarieshttp://www.slideshare.net/bohyunkim/usability-express-recipe-for-libraries

Kupersmith, John. (2012). Library Terms That Users Understand. UC Berkeley: UC Berkeley Library. Retrieved from: http://escholarship.org/uc/item/3qq499w7

Page 53: Heuristic Evaluation in Reverse for UX Improvement

Questions?

Slides: http://slideshare.net/bohyunkim

Twitter @bohyunkim

Website/Blog http://bohyunkim.net