u sability

CIS 1300 – Web Design Software M i c h a e l J . L o s a c c o

Usability

Guidelines

CIS 1300 – Web Design Software

• Easy / Efficient Use to Accomplish a Task• Web Sites

– Ease in Learning How to Use Site– Efficiency in Using Site– Remembering How to Use Site Upon Return– General Sense of Whether Users Like Using Site

• Design Darwinism– Survival of the Easiest

• Users Use Sites that are Easy to Use & Treat Them Well

What is Usability?


• Interviews, Focus Groups, and Questionnaires– Find Out Preferences, Experiences, and Needs– Rating/Monetary

• Benchmarking and Competitive Analysis– Evaluate Similar Products in the Marketplace

• Participatory Design– Elicit User's Perspective Early in Development

• Paper Prototyping– Generate User Feedback Through Storyboards

Usability Process


Usability Process

• Creation of Guidelines– Assure Design Consistency Through Standards

• Heuristic Evaluations – Evaluate Against Accepted Usability Principles

• Usability Testing ($15-30K / 12-15 Users)– Observe Actual Users Performing Real Tasks– Record What They Do– Analyze the Results


Why Web Usability?

• Traditional

– Get Product, Use Product

• Web

– Use Product, Get Product


Usability Redesign Examples

• IBM– Search & Help were Most Used Features– After Redesign

• Sales +400%

• Help Clicks Reduced 84%

• Staples– Low Registration– 53% Decrease in Registration Drop-off

• After Redesign


Design Considerations

• Page Design

• Content Design

• Site Design


Page Design

Real Estate• Minimize Navigation

– 20%

• Maximize User Content

– 50% - 80%

• White Space


Page Design

Real Estate

Weinreich 2006 & Hotchkiss 2005

Heat Mapping


Page Design

Real Estate

useit.com 8/07

Heat Mapping


• Resolution

– Unknown

– 800 x 600

– 1024 x 768

– 1024 x 768 +

• Percentage v. Fixed Width

6%

8%

48%

38%

w3schools 1/08

Page Design

Real Estate


Page Design

Cross Platform• US Browsers

– Internet Explorer– Firefox– Safari– Opera– Netscape– Mozilla

• Versions Current as of 2 Years Ago

75.2%17.1%

5.8%0.7%0.7%0.5%

NetApplications Q1/08


Page Design

Cross Platform• Semantic Encoding

– Meaning v. Presentation

• <H2> v. 18 Point Garamond

– Desktop, PDA, Cell

– Accessibility, Cars


Page Design

Response Time• Page Size = HTML + Objects• 10 Second Threshold

– Bailout (Users Who Don’t Wait For Full D/L)• Slow or Broken Links

• Unable to Find Data

• Unable to Find Company Data

• Limited Search Functionality

• Poorly Labeled Links


Page Design

Response Time• Setting Expectations

– Indicate D/L Size When Greater Than 50Kb• Graphics

– Use Colored Table Cells, CSS • Complex Tables

– 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=“MJL Biography”> Mike</a>• Supplementary Information or Warnings

• Less Than 60 Chars

• Don’t Be Redundant


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


Page Design

Cascading Style Sheets (CSS)• Use to Globally Format Text• Use Linked v. Embedded v. Inline

– Update Only Once

– Smaller Pages

• Use Only 2 Fonts (Head, Body)– List Alternates Consistently

• Use Relative v. Absolute Point Sizes


Page Design

Audience

• Animation / Sound

• Mine Sweeping

• Advertising

• Scrolling

• Reading

Kids

+

+

+

-

-

Teen

+/-

-

+/-

+/-

-

Adult

-

-

-

+

+/-useit.com 1/05


Content Design

Writing For the Web• Succinct

– Reading Monitor 25% Slower Than Paper

– Start Sentences With Verbs• Shorter, More Impact

• Spell Check / Grammar

• Proofread– Other Than Author


Content Design

Writing For the Web• Scannability

– 79% Scan v. Read

– Average User Reads Only 20% of Page

• Short Paragraphs

– < 5 Sentences

• Short Sentences

– < 20 Words


Content Design

Writing For the Web• Scannability

– SubHeads

– Bulleted Lists

– Highlighting & Emphasis• Don’t Confuse w/ Hyperlinks

– Show Numbers as Numerals• For Numbers up to a Billion

– Pull Quotes


Content Design

Writing For the Web• Plain Language

– Inverted Pyramid• Start w/ Overview

– One Idea per Paragraph• Only First Sentence Read

• Terminology– Consider User Demographics

• FedStats.gov: Metropolitan Area v. City

G e n e r a l

Detail


Content Design

Microcontent• Page Titles

– Search Engine Indexing

– Often Used as Main Reference

– 2 – 10 Words

– Clearly Reflect Content

– Different Pages Need Different Titles• Identical Bookmark Entries


Content Design

Microcontent• Titles, Headings, Links

– Optimize For Scanning

• Eliminate Articles

– A, An, The

» Alphabetized

– Billboard Slogan v. Grammatical Sentence


Content Design

Microcontent• Titles, Headings, Links

– 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• Minimal Amount

• Do Not Loop Infinitely

• No Marquees


Content Design

Functionality• Web Benchmarking

– Competition

– Other Sites that Your Users Frequent

• Offer Comparable Features / Capabilities

– Paradigm Shifts


Site Design

Lack of Success

TaskUsing Web-based App

Shopping on E-commerce Site

Finding Company Location

Using “About Us” Info

Subscribing to E-zines

Average

Success Rate45%

56%

63%

70%

78%

65%


Site Design

Home Page• First (and Sometimes Only) Impression

– One Chance to Capture Interest

• Establish Consistent Style

• Refrain From Metaphors

– Southwest Airlines


Site Design

Home Page• Answers “What Does This Site Do?”

– Company Name– Logo– Tagline

• Upper Left Corner Standard

• Navigation Entry Point– No Home Link– Search or Search Link


Site Design

Home Page• Guidelines

– <TITLE> Begins with Company Name then Description– Mission Statement– Group Corporate Info in One Area– Emphasize Site’s Main Tasks– Search– Easy Access to Recent Features– Meaningful Graphics


Site Design

Home Page• Other Considerations

– News & Special Promotions• Restrict Real Estate Usage

– Avoid Detail• With Less to Consider, People Understand More of What's There

– Avoid Scrolling

– Avoid Splash Screens• Only Appropriate for Filtering Users


Site Design

Interior Pages• Site Name & Logo on All Pages

• An Interior Page Should NOT Link to Itself


Site Design

Navigation• Answers “Where Am I?” (Relative to Web)• Consistency

– Logo On Every Page• Consistent Placement

• Should Always Link to Home Page

– Related Color Scheme

– Labels — Home v. Main

– Nouns / Verbs


Site Design

Navigation• Answers “Where Am I?” (Relative to Site)

– Indicate Current Page in Relation to Site Structure

• Hierarchical

– Breadth — Show Full Scope of Site• Linear

– Depth — Show Path To Current Page» Breadcrumbs

– Clear Main Headings– Relevant <TITLE> for Browser Bookmarks


Site Design

Navigation• Answers “Where Have I Been?”

– Keep Standard Link Colors

• Blue = Unvisited

• Red/Purple = Visited

– Image Links Do Not Indicate Visited Status


Site Design

Navigation• Answers “Where Can I Go?”

– Structure• Linear

– Purchasing Sequence of E-Commerce Site– Book

• Hierarchical– General to Detail Progression

• Star– Multiple Unified Sets of Information– e.g., Destinations, Accommodations, Air Travel, Cruise, Rentals

• Mesh– Every Page is Accessible to Every Other Page


Site Design

Navigation• Answers “Where Can I Go?”

– Use Same Structural Links on Pages

– Broad & Shallow v. Narrow & Deep

• 7 – 9 Main Navigational Items

– Sitemaps

– Separate Internal & External Links


Site Design

Site Credibility• Most Harmful Elements

– Ads that are Indistinguishable from Content

– Links to Sites that Lack Credibility

– Content that is Rarely Updated

– Linkrot Persuasive Technology by Fogg


Site Design

Search• Habits

– 50% Search-Dominant

– 20% Link-Dominant

• Available From Any Page

– Upper Right Standard

u sability

Documents