cis 1300 – web design softwaremichael j. losacco usability guidelines

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

Task

Using Web-based App

Shopping on E-commerce Site

Finding Company Location

Using “About Us” Info

Subscribing to E-zines

Average

Success Rate

45%

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

cis 1300 – web design softwaremichael j. losacco usability guidelines

Documents

web design softwaremichael

web design software

design consistency

page slide

page design real estate

web usability

product slide

redesign slide