Transcript Web Usability

Usability
Guidelines
What is Usability?

Ability to use a product easily and
efficiently to accomplish a task

Applies to aspects of a web site with
which a person interacts

Menus / Navigation

Icons / Buttons

Content Layout
?
What is Usability?

A usable product (Jakob Nielsen’s):
http://www.useit.com/alertbox/20030825.html

Is easy to learn

Is efficient to use

Provides quick recovery from errors

Is easy to remember

Is enjoyable to use

Is visually pleasing
Usability Process


Interviews, focus groups, and questionnaires

find out preferences, experiences, and needs

rating/monetary
Benchmarking and competitive analysis


Participatory design


evaluate similar products in the marketplace
elicit user's perspective in early stages of
development
Paper prototyping

generate user feedback through storyboards
Usability Process

Creation of guidelines


Heuristic evaluations


assure consistency in design through standards
evaluate against accepted usability principles
Usability testing

observe actual users performing real tasks

record what they do

analyze the results

recommend appropriate changes to enhance
usability
Why Web Usability?

Traditional


Get Product, Use
Product
Web

Use Product, Get
Product
Importance of Design Features

Ease of Use / Navigation
78%

Fast Download Time
67%

Content Quality
60%

Regular Updates
55%

Access to Customer Service
51%

Content Organization
45%

Search Engine
25%

Aesthetics
22%
?
Internet World 6/01
Large Site Usability Compliance

Amazon
72%

MotherNature
60%

CDNow
60%

Barnes&Noble
55%

Gateway
51%

Petsmart.com
49%

drugstore.com
48%

VictoriasSecret
47%
Jakob Nielsen 2000
Design Considerations

Page Design

Content Design

Site Design
Page Design
Page Design
Real Estate

Minimize Navigation


20%
Maximize User Content

50% - 80%


Map on MapQuest
White Space
?
Page Design
Real Estate


Resolution

640 x 480
7%

800 x 600
53%

1024 x 768
31%

1152 x 864

1280 x 1024
3%
3%
Percentage v. Fixed Width
statmarket.com 2//01
Page Design
Cross Platform

Multiple Browsers
(circa 2001)

Internet Explorer = 59%

Netscape Navigator = 32%
(8/2009 marketshare.hitslink.com)

Internet Explorer = 67%

Firefox = 23%

Safari = 4%

Chrome = 2.84%

Opera = 2%

Netscape = 0.49%
Page Design
Cross Platform

Semantic Encoding

Meaning v. Presentation


<H2> v. 18 Point
Garamond
Desktop, WebTV, PDA
Page Design
Response Time

Page Size = HTML + Objects

10 Second Threshold


User Attention Still Focused

Modem = 34Kb

ISDN = 150Kb

T1 = 2Mb
Bailout — Users Who Don’t Wait For Full D/L

34Kb = 7-10%

40Kb = 25-30%
?
Page Design
Reasons For Bailout

Slow or Broken Links
84%

Unable to Find Data
68%

Unable to Find Company Data
31%

Limited Search Functionality
23%

Poorly Labeled Links
16%
Jupiter Research 9/00
Page Design
Response Time

Setting Expectations


Graphics


Use Colored Table Cells, CSS
Complex Tables


Indicate D/L Size When Greater Than 50Kb
Use Smaller, Multiple Tables
Include Final Slash in URL

Differentiates Between Folder and Page
Page Design
Linking

Anchor Maximum 2-4 Words


Additional Verbiage to Explain Link
Link Titles (IE)

<a href=“bio.htm” title=“John Doe Biography”>
John</a>




Supplementary Information or Warnings
Less Than 60 Chars
Don’t Be Redundant
Color


Unvisited = Blue
Visited = Red/Purple
Page Design
Frames — Just Say No!

Bookmarks Don’t Reflect Frame State

URL Points to Frameset, Not Current View

Small Screens = Scrolling Frames

Search Engine Confusion

Always Link “target=_top” If Used
Page Design
Cascading Style Sheets (CSS)

Use to Globally Format Text
<style type="text/css">
<!-i { font-weight: bold; color: #CC0000}
-->
</style>

Functional in 4.0 Browsers or Greater
Page Design
CSS

Use Linked v. Embedded

Update Only Once

Smaller Pages

Test That Pages Render Properly w/o CSS

Use Only 2 Fonts (Head, Body)


List Alternates Consistently
Use Relative v. Absolute Point Sizes
Content Design
Content Design
Writing For the Web

Succinct

Reading Monitor 25% Slower Than Paper

Start Sentences With Verbs

Shorter, More Impact

Spell Check

Proofread

Other Than Author
Content Design
Writing For the Web

Scannability — 79% Scan v. Read

Short Paragraphs

SubHeads

Bulleted Lists

Highlighting & Emphasis


Don’t Confuse w/ Hyperlinks
Pull Quotes
Content Design
Writing For the Web

Plain Language
General

Inverted Pyramid


Start w/ Conclusion
One Idea per Paragraph

Only First Sentence Read
Detail
Content Design
Page Titles

Often Used as Main Reference

2 – 6 Words

Clearly Reflect Content

Different Pages Need Different Titles
Content Design
Page Titles

Optimize For Scanning

Eliminate Articles

A, An, The


Alphabetized
Billboard Slogan v. Grammatical Sentence
Content Design
Headlines

Clarity

Plain Language


Terms Users Know & Understand
Make the First Word Important

Impact at Beginning
Content Design
Legibility

High Contrast

Content / Background

Subtle Background

Large Fonts
Content Design
Image Reduction

Thumbnails

Relevance-Enhanced

Crop to 32%

Scale to 32%

Result is 10% of Original
Content Design
Animation

Do Not Loop Infinitely

No Moving Text

No Marquees
Site Design
Site Design
Lack of Success

Find Answers to Specific Questions


42% Success
Sequence of Steps to Complete Tasks

26% Success
Site Design
Home Page

Answers “What Does This Site Do?”

Company Name & Logo Prominent


Upper Left Corner Standard
Navigation Entry Point

No Home Link

Search or Search Link
Site Design
Home Page

News & Special Promotions

Restrict Real Estate Usage

Page Width = 600

Splash Screens Must Die


Appropriate for Filtering Users
Refrain From Metaphor

Door, Desk, Office, Etc.
Site Design
Interior Pages

Site Name & Logo on All Pages


Logo Should Always Link to Home Page
Deep Linking

Enable Other Sites to Link to Interior Pages
Site Design
Navigation

Answers “Where Am I?”

Answers “Where Have I Been?”

Answers “Where Can I Go?”

Consistency

Labels — Home v. Main; Up-Down

Nouns / Verbs
Site Design
Navigation

Answers “Where Am I?” (Relative to Web)

Consistency

Logo On Every Page

Consistent Placement

Related Color Scheme

Labels — Home v. Main; Up-Down

Nouns / Verbs
Site Design
Navigation

Answers “Where Am I?” (Relative to Site)

Indicate Current Page in Relation to Site
Structure

Clear Main Headline

Relevant <TITLE> for Bookmarks
Site Design
Navigation

Answers “Where Have I Been?”


Keep Standard Link Colors

Blue = Unvisited

Red/Purple = Visited
Graphic Links Do Not Indicate Visited Status
Site Design
Navigation

Answers “Where Can I Go?”


Use Same Structural Links on Pages
Structure

Hierarchical v. Linear

Breadth — Show Full Scope of Site (eonline)

Depth — Show Path To Current Page (useit)


Breadcrumbs
Sitemaps
Site Design
Search


Habits

50% Search-Dominant

20% Link-Dominant
Available From Any Page

Upper Right Standard

Atomz, Ask Jeeves, Yahoo!,
google
Site Design
Search


<META> Tags

Description — 150 Chars

Keywords
Search Logs

Indicate Terms Visitors Use
Site Design
Search

Number of Words Used in Search

1 = 45%

2 = 33%

3 = 14%

4 = 6%

5 = 2%