CIS 1310 – HTML & CSS
UsabilityUsability
Guidelines
CIS 1310 – HTML & CSS
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?What is Usability?
CIS 1310 – HTML & CSS
Why Web 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 Site Indicated
Only 60% for Unspecific Sites
CIS 1310 – HTML & CSS
Why Web Usability?Why Web Usability?
ForeSee 12/12
CIS 1310 – HTML & CSS
Why Web Usability?Why Web Usability?
Baymard Institute 2013
CIS 1310 – HTML & CSS
Why Web Usability?Why Web Usability?
Statista 2013
CIS 1310 – HTML & CSS
You Are Not AverageYou Are Not Average You
Most Likely Have Above-Average IQ
Most Likely Have Above-Average Education
Have Above-Average Reading Skills
(Will) Have Superior Knowledge of Web Design
Have Superior Knowledge of Computer Concepts
You’re a Veritable Geek Compared to Normal People
You Cannot Predict How an Average Person Will Use Something Based on Your Personal Experience
CIS 1310 – HTML & CSS
Usability Redesign ExamplesUsability Redesign Examples IBM
Search & Help Were Most Used Features Sales +400% Help Clicks Reduced 84%
Staples Low Registration
53% Decrease in Registration Drop-off
WordPress Increased Size of Signup Area Added Action Statement Made Signup Button Larger & Different Color
25% Increase in Registration
CIS 1310 – HTML & CSS
Usability Redesign ExamplesUsability Redesign Examples Mozilla (Firefox)
Articles on Basic & Frequent Issues are More Findable Visitors Ask Fewer Questions
70% Decrease in Support Questions
CIS 1310 – HTML & CSS
User-Experience (UX) Research MethodsUser-Experience (UX) Research Methods
CIS 1310 – HTML & CSS
User-Experience (UX) Research MethodsUser-Experience (UX) Research Methods
CIS 1310 – HTML & CSS
Natural Use of Product
Minimize Interference From Study
Understand Behavior / Attitudes As Close To Reality
Provides Greater Validity But Less Control Over Topics
Scripted Study of Product
Focus Insights on Specific Usage Aspects
e.g., Newly Redesigned Flow
UX Research MethodsUX Research Methods
CIS 1310 – HTML & CSS
Product Not Used
Examine Issues That Are Broader Than Usage / Usability
e.g., Study of Brand or Larger Cultural Behaviors
Hybrid
Concept-Testing Method
Employ Rough Approximation of Product / Service
Gets At Heart of What Would be Provided
Understand if Users Would Want / Need Product / Service
UX Research MethodsUX Research Methods
CIS 1310 – HTML & CSS
Usability-Lab Studies Participants Brought Into a Lab
One-On-One With A Researcher
Given Set of Scenarios That Lead to Product Tasks / Usage
Ethnographic Field Studies Research Conducted in Participants’ Natural Environment
Participatory Design Participants Given Design Elements / Creative Materials
Construct Their Ideal Experience
Expresses What Matters To Them Most and Why
UX Research MethodsUX Research Methods
CIS 1310 – HTML & CSS
Focus Groups
3-12 Participants Lead Through Discussion on Set of Topics
Give Feedback Through Discussion / Exercises
Interviews
Researcher Meets With Participants One-On-One
In Depth Discussion Regarding Topic In Question
Eyetracking
Precisely Measure Where Participants Look as They Perform:
Tasks, Website Interactions, Applications, Physical Products
UX Research MethodsUX Research Methods
CIS 1310 – HTML & CSS
Usability Benchmarking Tightly Scripted Studies Performed With Several Participants
Use Precise and Predetermined Measures of Performance
Moderated Remote Usability Studies Conducted Remotely
Use Screen-Sharing Software, Remote Control Capabilities
Unmoderated Remote Panel Studies Panel of Trained Participants Use Website or Product
Have Video Recording / Data Collection Software Installed
On Their Own Personal Devices
UX Research MethodsUX Research Methods
CIS 1310 – HTML & CSS
Concept Testing Researcher Shares Approximation of Product / Service Captures Key Essence of New Product / Service Determine if Needs of Target Audience Are Met
Diary/Camera Studies Participants Given Diary / Camera Record / Describe Aspects of Lives Core to Product / Service
Customer Feedback Open- And / Or Close-Ended Info Provided By Self-Selected Sample of Users Often Through Feedback Link, Button, Form, or Email
UX Research MethodsUX Research Methods
CIS 1310 – HTML & CSS
Desirability Studies
Participants Offered Different Visual-Design Alternatives
Associate Alternatives To Set of Attributes From Closed List
Card Sorting
Asks Users To Organize Items Into Groups
Assign Categories to Each Group
Helps Create or Refine Information Architecture of Site
Clickstream Analysis
Analyze Record of Screens / Pages That Users Clicks On
UX Research MethodsUX Research Methods
CIS 1310 – HTML & CSS
A/B Testing
Scientifically Testing Different Site Designs
Randomly Assign Groups To Interact with Each Design
Measure Effect on User Behavior
Unmoderated UX Studies
Automated Method
Uses Specialized Software Tool To Capture Behaviors
Capture Attitudes Through Embedded Survey Questions
Usually Give Participants Goals / Scenarios To Accomplish
UX Research MethodsUX Research Methods
CIS 1310 – HTML & CSS
True-Intent Studies
Asks Random Site Visitors What Their Goal or Intention Is
Measures Their Subsequent Behavior
Asks Whether They Were Successful in Achieving Goal
Intercept Surveys
Triggered During Use of Site / Application
Email Surveys
Participants Recruited From Email Message
UX Research MethodsUX Research Methods
CIS 1310 – HTML & CSS
Rating/Monetary
Heuristic Evaluations
Evaluate Against Accepted Usability Principles
10% of Design Budget Typically Allocated to Testing
Other Usability ProcessesOther Usability Processes
CIS 1310 – HTML & CSS
Usability ConsiderationsUsability Considerations
Page
Content
Site
CIS 1310 – HTML & CSS
PagePage
Real EstateReal Estate Minimize Navigation
20%
Maximize User Content
50% - 80%
Content, Navigation, Logo
White Space
52% of Screen Space is Wasted
NNGroup 11/13
CIS 1310 – HTML & CSS
PagePage
Real EstateReal Estate
Weinreich 2006 & Hotchkiss 2005
Heat Mapping
CIS 1310 – HTML & CSS
PagePage
Real EstateReal Estate
useit.com 8/07
Heat Mapping
CIS 1310 – HTML & CSS
PagePage
Real EstateReal Estate
ProVim
Heat / Click Mapping
CIS 1310 – HTML & CSS
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 (Search Engine Result Page) = 47%
PagePage
Real EstateReal Estate
CIS 1310 – HTML & CSS
Right-Rail Blindness
Don’t Design Content that Look Like Ads
Position Content Away from Ads
Use Thumbnails Only if They Communicate Useful Info
Not Effective if Too Detailed
Feature Content that Is Relevant & Helpful
PagePage
Real EstateReal Estate
CIS 1310 – HTML & CSS
PagePage
Cross PlatformCross Platform Encoding
Process of Getting Information into Memory for Storage
Semantic Encoding
Meaning of Something Encoded vs. Sound or Vision of It
<h2> v. 18 Point Garamond
Accessibility, Cars
We Have Better Memory for Things We Associate Meaning to
CIS 1310 – HTML & CSS
ContentContent
Age Group DifferencesAge Group DifferencesAge Hunting Tabbed
BrowsingScrolling Search Patience Animation
& Sound
3-12 13-17 18-24 25-64
Enjoyable, Interesting, Appealing, or Can Easily Adjust to It
Might Appreciate to Some Extent, But Overuse Can Be Problematic
Dislike It, Don‘t Do It, or Find It Difficult to Operate
CIS 1310 – HTML & CSS
ContentContent
MicrocontentMicrocontent 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 1310 – HTML & CSS
ContentContent
MicrocontentMicrocontent Headings
Billboard Slogan v. Grammatical Sentence
Clear
Plain Language
Terms Users Know & Understand
CIS 1310 – HTML & CSS
ContentContent
MicrocontentMicrocontent Headings
Optimize For Scanning
Maximum 60 Characters
Eliminate Articles
A, An, The
Alphabetized
Make the First Word Important
Impact at Beginning
CIS 1310 – HTML & CSS
ContentContent
MicrocontentMicrocontent 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
CIS 1310 – HTML & CSS
ContentContent
MicrocontentMicrocontent Links
Ambient Signifiers
Use Size & Contrast to Communicate:
Importance
Age
CIS 1310 – HTML & CSS
ContentContent
Hero ImageHero Image Prominently Placed Large Banner Image
Generally In The Front And Center
Often the First Visual a Visitor Encounters
Present Overview of Site‘s Most Important Content
Often Consists of Image & Text
Can Be Static or Dynamic
Relevant News About The Site
Specific Site-Links
Best-Selling or Strategically Placed Products / Services.
CIS 1310 – HTML & CSS
ContentContent
IconsIcons Benefits
Easily Touched
Compact
Fast to Recognize
Translation Not Required
Visually Pleasing
CIS 1310 – HTML & CSS
ContentContent
IconsIcons Disadvantages
Universal Icons are Rare
Hamburger
Menu vs. List
Heart vs. Star
Need Text Labels for Clarification
CIS 1310 – HTML & CSS
ContentContent
AnimationAnimation Animation
Minimal Amount
Quickly Draw Attention & Interrupt User Primary Task
Use Peripheral Motion
Provide Access to Contextual Feature without Interruption
Use Subtle Animation with No Position Shift
Do Not Loop Infinitely
No Marquees
CIS 1310 – HTML & CSS
ContentContent
CarouselsCarousels Carousel
Multiple Pieces of Content Occupy a Single, Coveted Space
Filmstrip Animation Signposts
CIS 1310 – HTML & CSS
ContentContent
CarouselsCarousels Traits
Appears Toward Top of Homepage
Occupies Substantial Section of “Above the Fold” Area
Multiple Pieces of Content Appear In the Same Place
Indicates There is More than One Piece of Featured Content
Contains Images & Small Amount of Text
About Brand, Mission, Featured Information, or Promotions
CIS 1310 – HTML & CSS
ContentContent
CarouselsCarousels Guidelines
Five or Fewer Frames
Crisp-Looking Text & Images Coinciding with Mission
Indicate Number of Frames & Current Frame in Progression
Use Icons & Links that are Understandable & Recognizable
Navigation Controls Appear Inside Carousel
Links & Buttons Are Large Enough to Decipher & Click
CIS 1310 – HTML & CSS
ContentContent
Progress IndicatorsProgress Indicators Always Give Some Type of Immediate Feedback
Advantages Reassure User that System Is Working
Reduces The User’s Uncertainty
Give User Something to Look at While Waiting
Makes Waiting Period Easier to Tolerate
Offer Reason to Wait for System to Finish
Reduce Users’ Perception of Time
Users Devote Some Cognitive Resources to Feedback Itself
Users Pay Less Attention to Time Waited
CIS 1310 – HTML & CSS
ContentContent
Progress IndicatorsProgress Indicators Types
Looped Animation
2-10 Seconds
Include Text that Explains Why User Is Waiting
Adds Additional Clarity
CIS 1310 – HTML & CSS
ContentContent
Progress IndicatorsProgress Indicators Types
Percent-done Animation
More than 10 Seconds
Most Informative Because They Show Progress
CIS 1310 – HTML & CSS
SiteSite
Lack of SuccessLack 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%
CIS 1310 – HTML & CSS
SiteSite
Home PageHome Page First (and Sometimes Only) Impression
One Chance to Capture Interest
Establish Consistent Style
Refrain From Metaphors
Southwest Airlines
CIS 1310 – HTML & CSS
SiteSite
Home PageHome 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%
CIS 1310 – HTML & CSS
SiteSite
Home PageHome 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 1310 – HTML & CSS
SiteSite
Home PageHome 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 1310 – HTML & CSS
SiteSite
Home PageHome 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
CIS 1310 – HTML & CSS
SiteSite
Home PageHome Page Other Considerations
Site Change Announcements
Notify Users of Changes in Advance by Email
Avoid Scrolling
Avoid Splash Screens
Only Appropriate for Filtering Users
CIS 1310 – HTML & CSS
SiteSite
Home PageHome Page Annualized Degree of Change in Home Page Design
Trend: huge changes in the Web's early years, a fall off around the dot-com bubble, and a stabilization in the low 40s in recent years.
Summary: users hate change.
CIS 1310 – HTML & CSS
SiteSite
Interior PagesInterior 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
CIS 1310 – HTML & CSS
SiteSite
NavigationNavigation 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 1310 – HTML & CSS
SiteSite
NavigationNavigation 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 1310 – HTML & CSS
SiteSite
NavigationNavigation Answers “Where Have I Been?”
Issues
Links that Do Not Change Colors
Image Links Do Not Indicate Visited Status
Don’t Depend Solely on Hand Cursor to Indicate Links
CIS 1310 – HTML & CSS
SiteSite
NavigationNavigation Answers “Where Can I Go?”
Use Same Structural Links on Pages
Flat v. Deep
7 – 9 Main Navigational Items
Flat Preferred for Distinct, Recognizable Categories
Deep Preferred When There Are Too Many Categories to List
Sitemaps
Separate Internal & External Links
CIS 1310 – HTML & CSS
SiteSite
NavigationNavigation Answers “Where Can I Go?”
Vertical Dropdown
Shorter is Better
Megamenus
Should Not Replace Main Navigation
Except on Mobile Sites
Horizontal Fly-out
Keep to Two Levels
CIS 1310 – HTML & CSS
SiteSite
NavigationNavigation Clickability
Visitor can Predict Simply by Looking that Object is Clickable
Text Links
Link Color
Clearly Stands Out from Body Text
People with Colorblindness Can Easily See Them
Don’t Use Blue Text (or Underline Text) For Nonclickable Items
Link Position
Navigation Along Peripheral Page Areas Don’t Require Underlining
CIS 1310 – HTML & CSS
SiteSite
NavigationNavigation Clickability
Buttons
Remotely Resemble Physical Buttons
Don’t Make Nonclickable Items Look Like Buttons
E.g., Giving Headings a Background Color
Focus on Content Hierarchy
Similar-looking Items Compete with Each Other
CIS 1310 – HTML & CSS
SiteSite
NavigationNavigation Clickability
Images & Graphics
Make All Elements Associated with Each Other Clickable
E.g., Picture, Icon, Text
Avoid Multiple Calls to Action for a Given Image
Unless Options within that Image Are Plainly Presented
Symbols & Icons
Instantly Recognizable
Unless Standard, Combine with Another Visual Cue
Such as Text Label or Arrow to Indicate Clickability
CIS 1310 – HTML & CSS
SiteSite
NavigationNavigation Clickability
CIS 1310 – HTML & CSS
SiteSite
NavigationNavigation Clickability
CIS 1310 – HTML & CSS
SiteSite
NavigationNavigation Navigation Used
Top of PageLeft ColRight ColFooterContent
CIS 1310 – HTML & CSS
SiteSite
LinksLinks Poor Link Text Hurts Usability, Accessibility, and SEO
Qualities of Good Links
Descriptive
Unique
Users Who See the Same Link Twice on the Same Page
Assume They Go to Same Page
Start with Keywords
People Mostly Look at First 2 Words of a Link
CIS 1310 – HTML & CSS
SiteSite
LinksLinks Links Should Stand Alone
Attract User Attention when Different than Surrounding Text
Confirm the User's Assumption
Link Names Clearly Describe Where They Lead
Linked Page Is Clearly Where They Expected to Be
Position the Expected Content in the Default Viewable Area
Do Not Force Users To Scroll, Click, or Tap to Display It
An Understandable and Visible Page Heading
An Image that Very Much Relates to Topic at Hand
CIS 1310 – HTML & CSS
SiteSite
LinksLinks Anchor Text Length
Accurately Describe Referenced Page While Being Concise
Good Information Scent
Must Clearly Explain Where They Will Take Users
Shouldn’t Need to Read Surrounding Text to Determine Meaning
Underlined Blue Text Still Most Obvious Link Indicator
CIS 1310 – HTML & CSS
SiteSite
LinksLinks Use title Attribute
<a href=“bio.htm” title=“John Smith Biography”>learn more about John</a>
Supplementary Information or Warnings
Less Than 60 Characters
Don’t Be Redundant
CIS 1310 – HTML & CSS
PagePage
ChromeChrome UI Elements
Buttons, Menus, Other Widgets
Chrome & Navigation Get Smaller Since ‘02
Disadvantages to Hiding Chrome
Users Must Discover Chrome
Users Must Recall How to Access It Later
Users Suffer Increased Interaction Cost to Access Functionality
Maximize Content-To-Chrome Ratio
Compress Chrome for Smaller Screens
CIS 1310 – HTML & CSS
SiteSite
Site CredibilitySite 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 1310 – HTML & CSS
SiteSite
SearchSearch Habits
50% Search-Dominant
20% Link-Dominant
Available From Any Page
Upper Right Standard
CIS 1310 – HTML & CSS
SiteSite
FAQ (Frequently Asked Questions)FAQ (Frequently Asked Questions) Strategic Value
Provide Decision Support For Prospects & Customers
Could I Get an Answer to My Questions Easily?
How Credible Is the Provided Information?
Are the Answers Written In Clear, Grammatical Language?
Do the Answers Seem Factual or More Like Marketing Hype?
Can I Dismiss All My Concerns Before Spending Money?
How Mature Is the Product or Service?
CIS 1310 – HTML & CSS
SiteSite
FAQ (Frequently Asked Questions)FAQ (Frequently Asked Questions) Strategic Value
Improve Your Website's SEO and Increase Site Visits
Reduce the Burden on Customer Support Staff
Route Visitors to Other Key Content
Contribute to Your Continuous Improvement Cycle
CIS 1310 – HTML & CSS
SiteSite
FAQ (Frequently Asked Questions)FAQ (Frequently Asked Questions) Usability
Short And Medium-Length (Less than 10-Page) FAQs
Question List
Followed By Individual Questions & Answers
Longer FAQs
Those With Involved Answers, Screenshots, or Alternatives
A Separate List of Questions that Lead to Answer Pages
CIS 1310 – HTML & CSS
SiteSite
Cross ChannelCross Channel Web Desktop, Web Mobile, Email, Physical Location
Consistent
Seamless
Resume When Switching Channels
Available
Identify & Support Users’ Top Tasks on All Channels
Context Specific
Emphasize & Leverage Each Channel’s Unique Strengths
Top Related