u sability
Post on 22-Feb-2016
39 Views
Preview:
DESCRIPTION
TRANSCRIPT
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?
CIS 1300 – Web Design Software
• 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
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
Weinreich 2006 & Hotchkiss 2005
Heat Mapping
CIS 1300 – Web Design Software
Page Design
Real Estate
useit.com 8/07
Heat Mapping
CIS 1300 – Web Design Software
• 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
CIS 1300 – Web Design Software
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
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
• Animation / Sound
• Mine Sweeping
• Advertising
• Scrolling
• Reading
Kids
+
+
+
-
-
Teen
+/-
-
+/-
+/-
-
Adult
-
-
-
+
+/-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• 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
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
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%
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 Persuasive Technology by Fogg
CIS 1300 – Web Design Software
Site Design
Search• Habits
– 50% Search-Dominant
– 20% Link-Dominant
• Available From Any Page
– Upper Right Standard
top related