cis 1310 – html & css usability guidelines. cis 1310 – html & css easy and efficient...

CIS 1310 – HTML & CSS

UsabilityUsability

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?What is Usability?


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


Why Web Usability?Why Web Usability?

ForeSee 12/12



Baymard Institute 2013



Statista 2013


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


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


Usability Redesign ExamplesUsability Redesign Examples Mozilla (Firefox)

Articles on Basic & Frequent Issues are More Findable Visitors Ask Fewer Questions

70% Decrease in Support Questions


User-Experience (UX) Research MethodsUser-Experience (UX) Research Methods


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


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



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



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



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



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



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



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



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



Rating/Monetary

Heuristic Evaluations

Evaluate Against Accepted Usability Principles

10% of Design Budget Typically Allocated to Testing

Other Usability ProcessesOther Usability Processes


Usability ConsiderationsUsability Considerations

Page

Content

Site


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


PagePage

Real EstateReal Estate

Weinreich 2006 & Hotchkiss 2005

Heat Mapping


PagePage


useit.com 8/07

Heat Mapping


PagePage


ProVim

Heat / Click Mapping


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



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



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


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


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


ContentContent

MicrocontentMicrocontent Headings

Billboard Slogan v. Grammatical Sentence

Clear

Plain Language

Terms Users Know & Understand


ContentContent

MicrocontentMicrocontent Headings

Optimize For Scanning

Maximum 60 Characters

Eliminate Articles

A, An, The

Alphabetized

Make the First Word Important

Impact at Beginning


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


ContentContent

MicrocontentMicrocontent Links

Ambient Signifiers

Use Size & Contrast to Communicate:

Importance

Age


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.


ContentContent

IconsIcons Benefits

Easily Touched

Compact

Fast to Recognize

Translation Not Required

Visually Pleasing


ContentContent

IconsIcons Disadvantages

Universal Icons are Rare

Hamburger

Menu vs. List

Heart vs. Star

Need Text Labels for Clarification


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


ContentContent

CarouselsCarousels Carousel

Multiple Pieces of Content Occupy a Single, Coveted Space

Filmstrip Animation Signposts


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


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


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


ContentContent

Progress IndicatorsProgress Indicators Types

Looped Animation

2-10 Seconds

Include Text that Explains Why User Is Waiting

Adds Additional Clarity


ContentContent

Progress IndicatorsProgress Indicators Types

Percent-done Animation

More than 10 Seconds

Most Informative Because They Show Progress


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%


SiteSite

Home PageHome Page First (and Sometimes Only) Impression

One Chance to Capture Interest

Establish Consistent Style

Refrain From Metaphors

Southwest Airlines


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%


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


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


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


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


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.


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


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


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


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


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


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


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


SiteSite


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


SiteSite


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


SiteSite



SiteSite

NavigationNavigation Navigation Used

Top of PageLeft ColRight ColFooterContent


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


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


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


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


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


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


SiteSite

SearchSearch Habits

50% Search-Dominant

20% Link-Dominant

Available From Any Page

Upper Right Standard


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?


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


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


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

cis 1310 – html & css usability guidelines. cis 1310 – html & css easy and efficient...

Documents