An Introduction to Usability Dirk Swart Web Technologies Director University Communications

Keywords Simplicity User orientation Trade-offs Ease of use Patterns Reversability Details

Why do usability? Diebold Voting System Has 'Delete' Button for Erasing Audit Logs Wired News (03/03/09) Zetter, Kim Auditors report: "The proximity of the clear button to the "print" and "save as" buttons raises the risk of the logs being erased accidentally, and the system provides no warning to operators of the danger of clicking on the button."

Diebold Voting System Has 'Delete' Button for Erasing Audit Logs

Wired News (03/03/09) Zetter, Kim

Auditors report:

"The proximity of the clear button to the "print" and "save as" buttons raises the risk of the logs being erased accidentally, and the system provides no warning to operators of the danger of clicking on the button."

“ Commandeer. Technical term. We’re going to commandeer that ship”.

Progressive disclosure : Showing overviews and hiding details until the user requests them. Affective : Appealing to the emotions of the user. Affordance : Property of a thing which determines how it is (or can be) used.

Insert photo of Mann Library doors

Academics for $200 please Alex What do economists study most?

A: Money B: People C: Utility D: !@#$# economists! What do economists study most?

C: Utility We will call this ‘happiness’ or ‘satisfaction’. “…changes in utility are sometimes expressed in units called utils.” (Wikipedia)

For our purposes … Something is Pareto Optimal if we can’t make someone better off without making someone else worse off.

For our purposes …

Something is Pareto Optimal if we can’t make someone better off without making someone else worse off.

Usability: “ The degree to which an object, device, software application, etc. is easy to use with no specific training” - Wikipedia

Usability: “ The degree to which an object, device, software application, etc. is easy to use with no specific training” - Wikipedia “ Quite simply, usability is making your site easy for your customers to find the exact information they need when they need it.” – www.searchenginewriting.com

Usability: “ The degree to which an object, device, software application, etc. is easy to use with no specific training ” - Wikipedia “ Quite simply, usability is making your site easy for your customers to find the exact information they need when they need it.” – www.searchenginewriting.com “ Usability is the study of how to Pareto optimize your website or application”

User Experience: “Impression left in a person's mind after the sum of a series on interactions.”

Q: Who decides if a website is easy to use?

A: Your target audience But that is not very informative - will discuss more.

Click … Whirr

Fixed Action Pattern: A behavioral sequence that runs to completion. It has a trigger feature (releaser) plus a sequence, and in people is usually cultural. Our take home: People like patterns. We’ll come back to this in a bit.

Fixed Action Pattern:

A behavioral sequence that runs to completion.

It has a trigger feature (releaser) plus a sequence, and in people is usually cultural.

Our take home: People like patterns.

We’ll come back to this in a bit.

Q:

Form Follows Function Beyond the introductory level this principle becomes more complicated. But this is an introduction to usability, so we’ll stick with it We’ll come back to this in a bit too. Function first. Then form.

Form Follows Function

Rule 1

Web behavior is always rushed: Your website is a means to an end. Rule 1

Web behavior is always rushed:

Your website is a means to an end.

Implications Good design ≠ easy to use. Simplicity is a choice.

Good design ≠ easy to use.

Simplicity is a choice.

Total Visitor time = search time + load time + browse time + scan time Think utility.

Total Visitor time = search time + load time + browse time + scan time

Think utility.

Consistency & Expectations Rule 2

Consistency & Expectations

Patterns Count

Patterns Count

Thinky things … Interlude

Thinky things …

Ready to hand Present at hand

Ready to hand

Present at hand

OK, back to work

People expect patterns

People

expect

patterns

Rule 2 Looks right, but isn’t

Law School vanishing menus

Law School vanishing menus

People try stuff Rule 3

People try stuff

Implications Words Count. Words are the steak, not the sizzle. (And use sans serif, scalable. No A -A band aid crap)

Words Count. Words are the steak, not the sizzle.

(And use sans serif, scalable. No A -A band aid crap)

Implications Plan for the scent of information. Be reversible. Allow users to undo mistakes. Garden Path: a sequence of actions a user takes that each seem to be leading to the desired outcome but don't produce the desired result in the end.

Plan for the scent of information.

Be reversible. Allow users to undo mistakes.

Don't let the exciting, the periphery, drive you out of your core business Rule 3

Don't let the exciting, the periphery, drive you out of your core business

Don’t focus on everything equally: Vegas effect. What is the most important: remember economics Rule 4

Don’t focus on everything equally: Vegas effect.

What is the most important: remember economics

It’s ALL details Bonus

Common Mistakes

Heavy Pages <- violates rule 1 When OK? If you have a pattern. Eg: Amazon.com

Heavy Pages <- violates rule 1

Heavy Pages <- violates rule 1 When OK? If you have a pattern. Eg: Amazon.com

Heavy Pages <- violates rule 1

Ambiguous choices <- violates rule 3

Ambiguous choices <- violates rule 3

Ambiguous choices <- violates rule 3

Ambiguous choices <- violates rule 3

Lack of focus - Violates rule 4?

Lack of focus - Violates rule 4?

Summary Usability is important. You think so they don’t have to. Every decision is a trade-off. If you can, separate design, usability, focus, user experience. They are different. Learn the vocabulary

Usability is important. You think so they don’t have to.

Every decision is a trade-off.

If you can, separate design, usability, focus, user experience. They are different.

Learn the vocabulary

More Information? MIT Usability Guidelines: http://web.mit.edu/is/usability/usability-guidelines.html SUS, a quick and dirty usability scale http://www.usabilitynet.org/trump/documents/Suschapt.doc Designing for the Scent of Information Email me for a copy Vocabulary http://www.usabilityfirst.com/glossary/main.cgi Humor http://www.ok-cancel.com Yahoo Design Pattern Library http://developer.yahoo.com/ypatterns/

MIT Usability Guidelines: http://web.mit.edu/is/usability/usability-guidelines.html

SUS, a quick and dirty usability scale http://www.usabilitynet.org/trump/documents/Suschapt.doc

Designing for the Scent of Information Email me for a copy

Vocabulary http://www.usabilityfirst.com/glossary/main.cgi

Humor http://www.ok-cancel.com

Yahoo Design Pattern Library http://developer.yahoo.com/ypatterns/

&quot;Civilization advances by extending the number of operations we can perform without thinking about them“ Alfred North Whitehead (1861 – 1947)

&quot;Civilization advances by extending the number of operations we can perform without thinking about them“

Alfred North Whitehead

(1861 – 1947)

Usability Testing End User Usability 161 Secondary School Teachers filled in on line form. 73% had no affiliation to Cornell, 7.5% were Cornell alums. 46% were not within driving distance of Cornell. Admin Usability 8 Detailed interviews (1 hr +) conducted on 1 day. Effort to produce these results: End user: 160 hours over a month, Admin; 45 hours over three weeks.

End User Usability

161 Secondary School Teachers filled in on line form.

73% had no affiliation to Cornell, 7.5% were Cornell alums.

46% were not within driving distance of Cornell.

Admin Usability

8 Detailed interviews (1 hr +) conducted on 1 day.

Effort to produce these results:

End user: 160 hours over a month, Admin; 45 hours over three weeks.

Usability Findings - Overall 68.3% used the net to find educational information 37% had never looked for educational materials at Cornell. 27% had looked “once or twice” They expected access to a very broad range of material. 33% would expect to find material in ‘Outreach’ section.

68.3% used the net to find educational information

37% had never looked for educational materials at Cornell. 27% had looked “once or twice”

They expected access to a very broad range of material.

33% would expect to find material in ‘Outreach’ section.

Usability Findings - Interface Search 55% of respondents did not like the “simple search”. Simple search with Primary and Secondary browse was most preferred. Browsing as a hierarchical sequence “is desirable” > 86%) >90% said program profile page was well designed. Search + Browse ‘front and center’ is essential.

Search

55% of respondents did not like the “simple search”.

Simple search with Primary and Secondary browse was most preferred.

Browsing as a hierarchical sequence “is desirable” > 86%)

>90% said program profile page was well designed.

Search + Browse ‘front and center’ is essential.

Key Features of our execution Search and Browse Not trying to replace other sites. Refers people onward at Cornell. Reports: Ability to revise search and browse. Add to taxonomy Track and count search terms

Search and Browse

Not trying to replace other sites. Refers people onward at Cornell.

Reports:

Ability to revise search and browse.

Add to taxonomy

Track and count search terms

Example: Alice and Bob

Usability Economics Psychology Human Factors Tips &Tricks 4 Rules Bauhaus Click, Whirr Choices, choices Scent Utility Theory SUS Examples More information