cis 1315 – web development for educators usability guidelines

CIS 1315 – Web Development for Educators

Usability

Guidelines


Easy and 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 Number & Severity of User Errors 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?


Why Web Usability? Traditional

Get Product, Use Product

Web

Use Product, Get Product

12% Revisit Rate

Successful Task Completion Rate

Only 66% for Specific Sites

Only 60% for Unspecific Sites


Why Web Usability? 2008 Holiday Season

63% Shopped Online

21% Abandoned Very Slow Site

13% Site Froze or Crashed

12% Could Not Complete Purchase on First Attempt

8% Site was Temporarily Down

6% Purchase Thought Completed Didn’t Go Through

Synovate 12/08


Page 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


Scrolling

Visitors See a Total of 2.3 Screens

Only 42% See Second Screenful

Only 14% View Beyond Second Screenful

Home = 23%

Interior = 42%

SERP = 47%

Page Design

Real Estate


Page Design

Cross Platform US Browsers

Internet Explorer Firefox Safari Chrome Opera Netscape Other

Browser Versions Wait 5 Years After Launch of New Browser

68.2%

21.3%

7.9%

1.0%

0.7%

0.6%

0.2%

NetApplications Q1/09


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

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

Audience

Animation / Sound

Mine Sweeping

Advertising

Scrolling

Reading

Kids

+

+

+

-

-

Teen

+/-

-

+/-

+/-

-

Adult

-

-

-

+

+/-

useit.com 1/05


Content Design


Content Design

Writing For the Web Succinct

Reading Monitor 25% Slower Than Paper

Web Content Should be About Half of Print Content

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

Visitors Average 27 Seconds on a Web Page

Visitors Average 1 Minute 49 Seconds on a Web Site

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

Most Important Point Within First Two Lines of Paragraph


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 Headings

Billboard Slogan v. Grammatical Sentence

Clear

Plain Language

Terms Users Know & Understand


Content Design

Microcontent Headings

Optimize For Scanning

Maximum 60 Characters

Eliminate Articles

A, An, The

Alphabetized

Make the First Word Important

Impact at Beginning


Content Design

Microcontent Lists

Four or More Items to Emphasize

Introduce with Clear, Descriptive Phrase

List items Wrap Under Text, Not Marker

Omit Articles at the Beginning of List Items

Use Parallel Phrasing

Consistent Style of Noun/Verb Agreement


Content Design

Microcontent Links

Ambient Signifiers

Use Size & Contrast to Communicate:

Importance

Age


Content Design

Legibility High Contrast

Content / Background

Black on White Preferable

View in Grayscale to Test if Content is Discernable

Color Blindness

8% Men, 5% Women

Subtle Background


Content Design

Legibility Typeface

No More Than Three Different Fonts

No More Than Four Colors

10 – 12 Point

12-14 for Young Children & Seniors

Sans-Serif Easier to Read on Monitor

Verdana Most Readable Online Font

All Caps Reduce Reading Speed by 10%


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


Site Design


Site Design

Lack of SuccessTask

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 Visitor Activity

Time Spent Visitors Who Scrolled

1st Visit 31 seconds 23%

2nd Visit 25 seconds 16%

3rd Visit 22 seconds 16%

4th Visit 19 seconds 14%


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

Direct Link

Restrict Real Estate Usage

Maximum of Three

Avoid Detail

With Less to Consider, People Understand More of What's There


Site Design

Home Page Other Considerations

Site Change Announcements

Notify Users of Changes in Advance by Email

Avoid Scrolling

Avoid Splash Screens

Only Appropriate for Filtering Users


Site Design

Interior Pages Account for 60% of Initial Page Views

Average 52 Seconds on an Interior Page

Site Name & Logo on All Pages

Direct Link to Home Page

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?”

Issues

Links that Do Not Change Colors

Image Links Do Not Indicate Visited Status


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

Navigation Answers “Where Can I Go?”

Vertical Dropdown

Shorter is Better

Horizontal Fly-out

Keep to Two Levels

Don’t Depend Solely on Hand Cursor to Indicate Links

Affordance

Perceived Clickability

Visitor can Predict Simply by Looking that Object is Clickable


Site Design

Navigation Navigation Used

Top of PageLeft ColRight ColFooterContent


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 1315 – web development for educators usability guidelines

Documents

web development

educators page design

web usability

educators content design

page design real estate

paper web content

task web sites

educators easy