Transcript CIS 1300 – Web Design Software

Usability
Guidelines
CIS 1300 – Web Design Software
Michael J. Losacco
What is Usability?
• 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
CIS 1300 – Web Design Software
Usability Process
• 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
CIS 1300 – Web Design Software
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
CIS 1300 – Web Design Software
Why Web Usability?
• Traditional
– Get Product, Use Product
• Web
– Use Product, Get Product
CIS 1300 – Web Design Software
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
CIS 1300 – Web Design Software
Design Considerations
• Page Design
• Content Design
• Site Design
CIS 1300 – Web Design Software
Page Design
Real Estate
• Minimize Navigation
– 20%
• Maximize User Content
– 50% - 80%
• White Space
CIS 1300 – Web Design Software
Page Design
Real Estate
Heat Mapping
Weinreich 2006 & Hotchkiss 2005
CIS 1300 – Web Design Software
Page Design
Real Estate
Heat Mapping
useit.com 8/07
CIS 1300 – Web Design Software
Page Design
Real Estate
• Resolution
– Unknown
6%
– 800 x 600
8%
– 1024 x 768
48%
– 1024 x 768 +
38%
• Percentage v. Fixed Width
w3schools 1/08
CIS 1300 – Web Design Software
Page Design
Cross Platform
• US Browsers
– Internet Explorer 75.2%
– Firefox
17.1%
– Safari
5.8%
– Opera
0.7%
– Netscape
0.7%
– Mozilla
0.5%
NetApplications Q1/08
• Versions Current as of 2 Years Ago
CIS 1300 – Web Design Software
Page Design
Cross Platform
• Semantic Encoding
– Meaning v. Presentation
• <H2> v. 18 Point Garamond
– Desktop, PDA, Cell
– Accessibility, Cars
CIS 1300 – Web Design Software
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
CIS 1300 – Web Design Software
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
CIS 1300 – Web Design Software
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
CIS 1300 – Web Design Software
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
CIS 1300 – Web Design Software
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
CIS 1300 – Web Design Software
Page Design
Audience
Kids Teen Adult
• Animation / Sound
+
+/-
-
• Mine Sweeping
+
-
-
• Advertising
+
+/-
-
• Scrolling
-
+/-
+
• Reading
-
-
+/useit.com 1/05
CIS 1300 – Web Design Software
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
CIS 1300 – Web Design Software
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
CIS 1300 – Web Design Software
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
CIS 1300 – Web Design Software
Content Design
Writing For the Web
• Plain Language
– Inverted Pyramid
General
• Start w/ Overview
– One Idea per Paragraph
Detail
• Only First Sentence Read
• Terminology
– Consider User Demographics
• FedStats.gov: Metropolitan Area v. City
CIS 1300 – Web Design Software
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
CIS 1300 – Web Design Software
Content Design
Microcontent
• Titles, Headings, Links
– Optimize For Scanning
• Eliminate Articles
– A, An, The
» Alphabetized
– Billboard Slogan v. Grammatical Sentence
CIS 1300 – Web Design Software
Content Design
Microcontent
• Titles, Headings, Links
– Clarity
– Plain Language
• Terms Users Know & Understand
– Make the First Word Important
• Impact at Beginning
CIS 1300 – Web Design Software
Content Design
Legibility
• High Contrast
– Content / Background
• Subtle Background
• Large Fonts
CIS 1300 – Web Design Software
Content Design
Image Reduction
• Thumbnails
– Relevance-Enhanced
• Crop to 32%
• Scale to 32%
• Result is 10% of Original
CIS 1300 – Web Design Software
Content Design
Animation
• Minimal Amount
• Do Not Loop Infinitely
• No Marquees
CIS 1300 – Web Design Software
Content Design
Functionality
• Web Benchmarking
– Competition
– Other Sites that Your Users Frequent
• Offer Comparable Features / Capabilities
– Paradigm Shifts
CIS 1300 – Web Design Software
Site Design
Lack of Success
Task
Success Rate
Using Web-based App
45%
Shopping on E-commerce Site 56%
Finding Company Location
63%
Using “About Us” Info
70%
Subscribing to E-zines
78%
Average
65%
CIS 1300 – Web Design Software
Site Design
Home Page
• First (and Sometimes Only) Impression
– One Chance to Capture Interest
• Establish Consistent Style
• Refrain From Metaphors
– Southwest Airlines
CIS 1300 – Web Design Software
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
CIS 1300 – Web Design Software
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
CIS 1300 – Web Design Software
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
CIS 1300 – Web Design Software
Site Design
Interior Pages
• Site Name & Logo on All Pages
• An Interior Page Should NOT Link to Itself
CIS 1300 – Web Design Software
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
CIS 1300 – Web Design Software
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
CIS 1300 – Web Design Software
Site Design
Navigation
• Answers “Where Have I Been?”
– Keep Standard Link Colors
• Blue = Unvisited
• Red/Purple = Visited
– Image Links Do Not Indicate Visited Status
CIS 1300 – Web Design Software
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
CIS 1300 – Web Design Software
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
CIS 1300 – Web Design Software
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
CIS 1300 – Web Design Software
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 Software