usability essentials

Sid B. Dane, CUAOnline / Front End DevelopmentNovember 29, 2010

Usability Essentials

Usability Essentials, Sid B. Dane, November 29, 2010

U s a b i l i t y E s s e n t i a l s

2

To: appendix

Who am I?

• 1990: Application Developer• 1994: Network Engineer• 1997: Internet and Multi Media Developer• 2006: Rich Internet Developer• 2008: Certified Usability Analyst• 2012: Scrum Master / Agile Project Lead / Coach

http://www.humanfactors.com/certification/cualist.asp?nlike=D&sortby=Name

http://www.adobe.com/support/certification/

http://www.humanfactors.com/certification/CUA.asp

http://humanfactors.com/home/usability.asp



3

Bad usability?



4

Bad usability?



5

Bad usability?



6

To: appendix

Why is usability important?

You are not your user(No matter how good you think you are)



7

To: appendix

Usability is about…

• Effectiveness– Can users achieve what they need by using the product?

• Ease of learning– How fast can a user who has never seen the interface learn to use it?

• Efficiency of use– How fast can the user complete tasks?

• Memorability– Can users remember enough to reuse the interface effectively?

• Error prevention– The best way to deal with errors is to design the interface so users do

not make errors• Satisfaction

– How much does the user like using the system?



8

To: appendix

User Centered Design: playground

Design

What will the end user gain?

User Experience

Technology

What can it do?

Business

What will the business gain?

Goal

A successful product



9

To: appendix

User Centered Design: methodology

Product Analysis

Research+Planning

Conceptual Design

Navigation Design

Detailed Design

Live Product

Strategic Planning Expert Review User Performance Tests

User Needs Assessment

ProductStrategy Brand

Guidelines

Task Design InformationArchitecture

High-level UI Structure

Strategic Objectives Review

Contrast Studies

ProductPerformance

RedesignOpportunities

DetailedUser Interface

Presentation Design Content

Design

Interaction Design



10

To: appendix

Research

• Discover:– Who the users are

(Personas)– How they think and work

(Scenarios and tasks)– The stakeholder goals and

objectives

• Collect data on…– User profiles– Work environment– Scenarios of how users will

use the interface– Task analysis



11

To: appendix

Mental models

• People come with mental models• Usually come from past experience• Mental models don’t always match reality• Mental models set expectations, which drive and shape behavior

People are “very active problem solvers who always have a current general model in mind that drives their behavior in a very systematic way, but who are also constantly refining and revising this model in response to feedback.” - Deborah Mayhew



12

To: appendix

Mental models: what are the rules for turning left?



13

To: appendix

Mental models: what are the rules for turning left?



14

To: appendix

http://www.youtube.com/watch?v=Ahg6qcgoay4&feature=player_embedded

It’s easy to miss something you’re not looking for





15

To: appendix

VIMM: Things that impact Usability

• Visual Clutter

• Intellectual Complexity

• Memory load (short & long term)

• Motor load (and inconsistency)



16

To: appendix

80%of Usability is

determined by the

interface structure or

navigational container



17

Usability guidelines

A bit more practical…



18

To: appendix

Usability guidelines, example 1: faces

Attracting attention: Users focus on faces

We’re instinctively drawn to faces, but if that face is looking somewhere other than at us, we’ll also look in that direction.



19

To: appendix

Usability guidelines, example 2: whitespace

White space makes content more readable.

A study (Lin, 2004) found that good use of white space between paragraphs and in the left and right margins increases comprehension by almost 20%.

Readers find it easier to focus on and process generously spaced content.

http://thenetsetter.com/blog/



20

Usability guidelines, example 3: advertising

Jakob Nielsen reports that most users are essentially blind to ad banners.

The implication of this is not only that users will avoid ads but that they’ll avoid anything that looks like an ad, even if it’s not an ad.

Some heavily styled navigation items may look like banners, so be careful with these elements.

http://www.flashden.net/



21

To: appendix

Usability guidelines, example 4: text

• According to classic typographic books, the optimal number of characters per line is between 55 and 75, but between 75 and 85 characters per line is more popular in practice.

• Twenty college-age students read news articles displayed in 35, 55, 75, or 95 characters per line (cpl) from a computer monitor. Results showed that passages formatted with 95 cpl resulted in faster reading speed.

• People with a higher education prefer more characters per line. Thos with lower education prefer columns and less characters per line.



22

To: appendix

Usability guidelines, example 4: text

• According to classic typographic books, the optimal number of characters per line is between 55 and 75, but between 75 and 85 characters per line is more popular in practice.

• Twenty college-age students read news articles displayed in 35, 55, 75, or 95 characters per line (cpl) from a computer monitor. Results showed that passages formatted with 95 cpl resulted in faster reading speed.

• People with a higher education prefer more characters per line. Thos with lower education prefer columns and less characters per line.



23

To: appendix

Usability principles change: “above the fold”• Jakob Nielsen’s study on how much

users scroll revealed that only 23% of visitors scroll on their first visit to a website.

• This means that 77% of visitors won’t scroll; they’ll just view the content above the fold (i.e. the area of the page that is visible on the screen without scrolling down).

• This data highlights just how important it is to place your key content on a prominent position, especially on landing pages

• However, users’ habits have significantly changed since then. Recent studies prove that users are quite comfortable with scrolling and in some situations they are willing to scroll to the bottom of the page. Many users are more comfortable with scrolling than with a pagination, and for many users the most important information of the page isn’t necessarily placed “above the fold” (which is because of the variety of available display resolutions a quite outdated, deprecated term). So it is a good idea to divide your layout into sections for easy scanning, separating them with a lot of white space.

• See: unfolding the fold

http://blog.clicktale.com/?p=19



24

To: appendix

Usability testing

The ideal number of users in a usability test has been a source of discussion for the past ten years. Five users are sufficient to discover most of the problems. More users could be helpful, but you will achieve better results by retesting when you have tried to solve the problems discovered in the first test. More on badusability.com

Image: useit.com

http://badusability.com/2010/november/

http://www.useit.com/alertbox/20000319.html

http://www.useit.com/alertbox/20000319.html



25

To: appendix

More information• HFI courses:

– User Centered Analysis and Conceptual Design– The Science and Art of Effective Web and Application Design– Practical Usability Testing– Putting Research into Practice– Courses in NL: http://academy.capgemini.nl/clusters/website-usability.aspx

• Online:– Jakob Nielsen’s Alertbox: www.useit.com– Usability.gov (U.S. Department of Health and Human Services):

www.usability.gov– What makes them click: www.whatmakesthemclick.net– UX magazine: uxmag.com– UX matters: www.uxmatters.com– How to experience the internet: www.siddane.com – Bad usability: badusability.com/

http://academy.capgemini.nl/clusters/website-usability.aspx

http://www.useit.com/

http://www.usability.gov/

http://www.whatmakesthemclick.net/

http://uxmag.com/

http://www.uxmatters.com/

http://www.siddane.com/

http://badusability.com/



26

Questions?

Any questions?

[email protected]

mailto:[email protected]

http://experiencetheinternet.blogspot.com/2008/10/if-it-walks-like-duck-and-quacks-like.html



27

To: appendix

Appendix

• Persona example



28

To: appendix

Persona example

usability essentials

Design

appendix usability essentials

usability essentialsuser

usability isdeterminedby

usability essentialssid

usability important

usability essentialsvimm

usability essentialswhy

usability essentialswho