Usability

1
5 Web Design
2
Learning Outcomes

• Describe Common Types of Website Organization
• Describe Principles of Visual Design
• Design for Target Audience
• Create Clear, Easy-to-use Navigation
• Improve the Readability of Text on Web Pages
• Apply Universal Design to Web Pages
• Describe Web Page Layout Design Techniques

3
Web Site Structure

• Hierarchical
• General to Detail Progression
• Linear
• Purchasing Sequence of E-Commerce Site
• Book
• Web
• Mimic Associative Thought and the Free Flow of
  Ideas

4
Web Site Structure

• Shallow
• Too Many Choices Confusing Less Usable Web
  Site
• Deep
• Too Many Clicks to Navigate to Desired Page
• Three Click Rule
• From a Page to Any Other Page in a Maximum of
  Three Clicks

5
Accessibility
?

• W3Cs WAI (Web Accessibility Initiative)
• http//www.w3.org/WAI
• Web Content Accessibility Guidelines
• http//www.w3.org/WAI/WCAG20/quickref/
• Accessible Website
• Provides Accommodations for Individuals with
• Visual, Auditory, Physical, Neurological
  Disabilities

6
Importance of Accessibility Compliance
?

• Federal Law
• Americans with Disabilities Act (ADA)
• Prohibits Discrimination Against People with
  Disabilities
• Section 508 of US Rehabilitation Act
• Mirrors Web Accessibility Initiative of W3C
• Web Projects Funded by Government
• Took Effect 2001

7
W3C WAI Guidelines

• Guideline 1
• Provide Equivalent Alternatives to Auditory
  Visual Content
• Provide Text Equivalent for Every Non-text
  Element
• Images, Image Maps, Animations, Graphical
  Buttons, Sounds, Audio, Audio Tracks of Video,
  Video
• Provide Redundant Text Links for Image Links
• Provide Auditory Description for Visual
  Multimedia Content

8
W3C WAI Guidelines

• Guideline 2
• Do Not Rely on Color Alone
• All Information Conveyed with Color is Available
  without Color
• Ensure Foreground Background Provide Sufficient
  Contrast
• Guideline 3
• Use Markup Style Sheets Properly
• Use Markup Rather than Images to Convey
  Information
• Create Documents that Validate to Published
  Formal Grammars
• Use Relative Rather than Absolute Units in Markup
• Use Header Elements to Convey Document Structure

9
W3C WAI Guidelines

• Guideline 4
• Clarify Natural Language Usage
• Clearly Identify in Text
• Captions
• Specify Expansion of Abbreviation/Acronym When it
  First Occurs
• Guideline 5
• Create Pages that Transform Gracefully
• For Data Tables, Identify Row Column Headers

10
W3C WAI Guidelines

• Guideline 6
• Ensure Pages with New Technologies Transform
  Gracefully
• Organize Documents So They May be Read Without
  Styles
• Ensure Pages are Usable When Scripts, Applets,
  etc. are
• Turned Off
• Not Supported

11
W3C WAI Guidelines

• Guideline 7
• Ensure User Control of Time-sensitive Content
  Changes
• Avoid Causing the Screen to Flicker
• Avoid Causing Content to Blink
• Avoid Movement in Pages
• Do Not Create Periodically Auto-refreshing Pages
• Do Not Use Markup to Redirect Pages Automatically
  
• Configure the Server to Perform Redirects

12
W3C WAI Guidelines

• Guideline 8
• Ensure Direct Accessibility of Embedded User
  Interfaces
• Embedded Objects with Their Own Interface Must be
  Accessible
• Guideline 9
• Design for Device-independence
• Provide Client-side Image Maps Vs. Server-side
  Image Maps
• Create a Logical Tab Order Through Links Form
  Controls
• Provide Keyboard Shortcuts To
• Important Links
• Form Controls
• Groups of Form Controls

13
W3C WAI Guidelines

• Guideline 10
• Use Interim Solutions
• Do Not Cause Pop-ups or Other Windows to Appear
• Do Not Change the Current Window Without
  Informing User
• Ensure Proper Position For Form Controls With
  Labels
• Label Must Immediately Precede Its Control On The
  Same Line
• Allowing More Than One Control/Label Per Line
• Be in the Line Preceding the Control
• With Only One Label One Control Per Line
• Provide a Linear Text Alternative for Tables that
  Use Parallel, Word-wrapped Columns

14
W3C WAI Guidelines

• Guideline 11
• Use W3C Technologies Guidelines
• Use W3C Technologies When Available Appropriate
  For Tasks
• Use Latest Versions
• Avoid Deprecated Features of W3C Technologies
• Provide Info to Users According To Their
  Preferences
• Language, Content Type
• If You Cannot Create an Accessible Page
• Provide a Link to an Alternative Page That
• Uses W3C Technologies
• Is Accessible
• Has Equivalent Information or Functionality

15
W3C Guidelines

• Guideline 12
• Provide Context Orientation Information
• Divide Large Content Areas into More Manageable
  Groups
• Use OPTGROUP to Group OPTION Elements Inside a
  SELECT
• Group Form Controls with FIELDSET LEGEND
• Use Nested Lists where Appropriate
• Use Headings to Structure Documents
• Associate Labels Explicitly with Their Controls
• Use LABEL its FOR Attribute

16
W3C WAI Guidelines

• Guideline 13
• Provide Clear Navigation Mechanisms
• Clearly Identify the Target of Each Link
• Information About Version 4.3 Vs. Click Here
• Use of TITLE Attribute
• Use Navigation Mechanisms in a Consistent Manner
• Group Related Links, Identify the Group

17
W3C WAI Guidelines

• Guideline 14
• Ensure that Documents are Clear Simple
• Use Clearest Simplest Language Appropriate For
  Site
• Supplement Text With Graphic or Auditory
  Presentations
• Only Where They Will Facilitate Comprehension of
  Page
• Create a Style of Presentation that is Consistent
  Across Pages

18
Three Levels of Emotional Design

• Behavioral
• Usability
• Visceral
• Appearance
• Hardwired
• Reflective
• Branding

19
Underlying Principles of Design

• Subjective
• Communication
• Visual Appeal
• Objective
• Utility
• Engagement

20
Underlying Principles of Design

• Communication
• User Interaction
• First Seconds
• Site Must Clearly Communicate Why it is Useful
• 10 Seconds
• Convince User Site can be Navigated Easily
• 1 Minute
• Content is of Real Interest Value

21
Underlying Principles of Design

• Communication
• Clarity
• Logical Organization
• Opening Content that can be Scanned v. Read
• Concisely Stated, Without Extraneous Material
• Benefit to User
• Clear v. Obscure
• Error Free
• Spelling Grammar
• Accurate Current
• Link Rot, Link Quality, Link Descriptions

22
Underlying Principles of Design

• Communication
• Legibility
• High Contrast
• Color
• Text Size
• Typeface
• Density
• Use Headings Lists
• Images
• Meaningful Relationship to Content
• White Space

23
Underlying Principles of Design

• Communication
• Readability
• Understanding
• Familiar Terms Phrases
• Language
• Vivid
• Active
• Personable

24
Underlying Principles of Design

• Visual Appeal
• Richness
• Uncluttered
• White Space
• Balance
• Images Complement Content Each Other
• Images
• High Quality

25
Underlying Principles of Design

• Visual Appeal
• Style
• Suitable for Purpose
• Convey Mood or Tone
• Formal/Informal, Youthful/Mature, Playful/Serious
• Stylistic Elements Fit Together
• Color Combinations
• Typefaces
• Images

26
Underlying Principles of Design

• Visual Appeal
• Unity
• Organization
• Consistency Repetition
• Color, Navigational Elements, Logo
• Makes Each Page Appear to be Part of the Whole
• Creates a Sense of Order
• Immediately Obvious Which Elements Relate to Each
  Other

27
Underlying Principles of Design

• Utility
• Intuitive Interface
• Easy to Use
• Clear as to How to Perform Tasks
• Predictable
• Lack of Frustration
• Successful Accomplishment of Tasks

28
Underlying Principles of Design

• Utility
• Navigability
• Clearly Identified Links
• Describes Link Destination
• Should NOT Have to Backtrack to Home
• Where You Are, Where You Can Go, Where Youve
  Been
• Logical Organization of Content

29
Underlying Principles of Design

• Utility
• Value
• What is Benefit for User?
• Remember Site
• Return Visitors

30
Underlying Principles of Design

• Engagement
• User Awareness
• Types of Visitors Site Hopes to Engage
• Anticipate What Users Want Expect
• Clearly Recognize Benefits

31
Underlying Principles of Design

• Engagement
• User-Centered Purpose
• Does the Site Have a Purpose?
• Knowledge
• Decision Support
• Accomplishing Tasks
• Interconnectedness
• Enjoyment
• Is Purpose Immediately Apparent?

32
Underlying Principles of Design

• Engagement
• Interpersonal Rapport
• Visitors Feel
• Comfort
• Trust
• Understanding
• Duration
• Return to Site?

33
Typography (Sans Serif v. Serif)
Lorem Ipsum Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Nunc placerat ante
in libero. Vivamus sed enim. Nunc malesuada. Sed
facilisis. Pellentesque et odio. Cras tortor.
Etiam consequat diam at ligula. Sed vestibulum
diam sed pede. In hendrerit nulla et justo. Donec
ullamcorper mattis pede. Donec lectus pede,
aliquet et, nonummy eu, sagittis sit amet, est.
Lorem Ipsum Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Nunc placerat ante
in libero. Vivamus sed enim. Nunc malesuada. Sed
facilisis. Pellentesque et odio. Cras tortor.
Etiam consequat diam at ligula. Sed vestibulum
diam sed pede. In hendrerit nulla et justo. Donec
ullamcorper mattis pede. Donec lectus pede,
aliquet et, nonummy eu, sagittis sit amet, est.
34
Heading / Body Size Contrast
Lorem Ipsum Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Nunc placerat ante
in libero. Vivamus sed enim. Nunc malesuada. Sed
facilisis. Pellentesque et odio. Cras tortor.
Etiam consequat diam at ligula. Sed vestibulum
diam sed pede. In hendrerit nulla et justo. Donec
ullamcorper mattis pede. Donec lectus pede,
aliquet et, nonummy eu, sagittis sit amet, est.
Nam faucibus nulla nec nulla.
Lorem Ipsum Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Nunc placerat ante
in libero. Vivamus sed enim. Nunc malesuada. Sed
facilisis. Pellentesque et odio. Cras tortor.
Etiam consequat diam at ligula. Sed vestibulum
diam sed pede. In hendrerit nulla et justo. Donec
ullamcorper mattis pede. Donec lectus pede,
aliquet et, nonummy eu, sagittis sit amet, est.
Nam faucibus nulla nec nulla.
35
Headings (Fewer Larger)
Lorem Ipsum Dolor Sit Amet Lorem ipsum dolor sit
amet, consectetuer adipiscing elit. Nunc placerat
ante in libero. Vivamus sed enim. Nunc malesuada.
Sed facilisis. Pellentesque et odio. Cras tortor.
Etiam consequat diam at ligula. Sed vestibulum
diam sed pede. In hendrerit nulla et justo. Donec
ullamcorper mattis pede. Donec lectus pede,
aliquet et, nonummy eu, sagittis sit amet, est.
Lorem Ipsum Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Nunc placerat ante
in libero. Vivamus sed enim. Nunc malesuada. Sed
facilisis. Pellentesque et odio. Cras tortor.
Etiam consequat diam at ligula. Sed vestibulum
diam sed pede. In hendrerit nulla et justo. Donec
ullamcorper mattis pede. Donec lectus pede,
aliquet et, nonummy eu, sagittis sit amet, est.
36
Subheads As Named Anchors
Lorem Ipsum Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Nunc placerat ante
in libero. Vivamus sed enim. Nunc malesuada. Sed
facilisis. Pellentesque et odio. Cras tortor.
Etiam consequat diam at ligula. Sed vestibulum
diam sed pede. In hendrerit nulla et justo. Donec
ullamcorper mattis pede. Dolor Sit Amet Nam
faucibus nulla nec nulla. Praesent porttitor
ultricies eros. Nam mauris. Proin augue libero,
convallis non, hendrerit sed, condimentum at,
magna. In convallis, ligula ac interdum
adipiscing, lorem leo ultrices dolor, id
tincidunt odio dolor at nibh. Aliquam nisl ante,
vestibulum sed, ultricies a, ullamcorper id,
turpis. Pellentesque quam lacus, dapibus vitae,
interdum at, viverra non, orci.
37
Leading
Lorem ipsum Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Nunc placerat ante
in libero. Vivamus sed enim. Nunc malesuada. Sed
facilisis. Pellentesque et odio. Cras tortor.
Etiam consequat diam at ligula. Sed vestibulum
diam sed pede. In hendrerit nulla et justo. Donec
ullamcorper mattis pede.
Lorem ipsum Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Nunc placerat ante
in libero. Vivamus sed enim. Nunc malesuada. Sed
facilisis. Pellentesque et odio. Cras tortor.
Etiam consequat diam at ligula. Sed vestibulum
diam sed pede. In hendrerit nulla et justo. Donec
ullamcorper mattis pede.
http//www.typetester.org/
38
White Space

• Space Between Visual Elements
• The Part of the Design that Isnt There
• Just as Important as the Elements that are There

39
Graphic Placement
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc placerat ante in libero.
Vivamus sed enim. Nunc malesuada. Sed facilisis.
Pellentesque et odio. Cras tortor. Etiam
consequat diam at ligula. Sed vestibulum diam sed
pede. In hendrerit nulla et justo. Donec
ullamcorper mattis pede. Donec lectus pede,
aliquet et.
40
Graphic Cropping (Visual Impact)
41
Layout (Conservative / Dynamic)
Well-defined, rectangular areas on the page Warm
greens accompanied by cool blues Balance intimacy
with professionalism
Overlapping panels Imagery evokes customer
service technology Entertain the eye
communicate innovation
42
Balance (Symmetrical / Asymmetrical )

• Provide Sense of / Lack of Equilibrium
• Create Tension Visual Weight

Use of Approximate Horizontal Symmetry Imagery
Incorporates Good Amount of White Graphic Text is
Thin Unobtrusive Elements Blend into
Background Not Dominant in Any One Place Subtle
Greens Used Sparingly
43
Diagonal Balance

• Upper Left to Lower Right
• POA (Primary Optical Area) to TA (Terminal
  Anchor)

Natural Eye Movement Use Color to Draw
Attention Guides the Eye Creates Focal Area
44
Dominance

• Emphasis Visual Weight in a Composition
• Where the Eye is First Led to When Looking at a
  Design

Right-most Column is Dominant Largest Area of
Color Uses Big, Reversed Text for Major Headings
Center Column is Subdominant Uses Less Color
Smaller Text in Less Space Left-most Column is
Subordinate
45
Writing for the Web

• Legibility
• See, Distinguish, Recognize Characters/Words in
  Text
• Typeface
• No More Than Three Different Fonts
• No More Than Four Colors
• Use a Reasonably Large Default Font Size
• Even Larger for Young Children Seniors
• Users Aged 65 Are 43 Slower at Using Websites
• Sans-Serif Easier to Read on Monitor
• Verdana Most Readable Online Typeface

46
Writing for the Web

• Legibility
• Contrast
• Black on White Preferable
• Use Grayscale to See if Content is Discernable
• Subtle Background
• Color Blindness
• 8 Men, 5 Women

47
Writing for the Web

• Legibility
• Low Contrast
• Legibility Suffers
• Discoverability and Findability Are Reduced
• Mobile Use Becomes Even More Difficult
• Accessibility Is Severely Reduced
• Users With Low Vision or Cognitive Impairments
• Cognitive Strain Increases

48
Writing for the Web

• Readability
• Complexity of Words/Sentence Structure in Content
• Use Plainspoken Words
• Use Short Sentences
• Reading Monitor 25 Slower than Paper
• Web Content Should be About Half of Print Content
• Start Sentences with Verbs
• More Impact

49
Writing for the Web

• Readability
• Write in Active Voice
• Aim at an 8th-grade Reading Level
• If Targeting Broad Consumer Audience
• Aim at a 12th-grade Reading Level
• For Educated or Specialized B2B Audience

50
Writing for the Web

• Comprehension
• Understand Intended Meaning Draw Correct
  Conclusions
• User-centric vs. Maker-centric Language
• Focus on Benefits of Product / Service, Not
  Features
• Avoid Industry Business Jargon
• Speak to Your Readers, Not at Them
• You and We Instead of Our Customers or
  Company X

30-day money-back satisfaction guarantee entitles
customer to a refund of installation fees and
first months Cox High Speed Internet service fee
and modem charge if purchased from Cox and
excludes other Cox service fees. Customer must
claim refund within 30 days of service
activation. Other restrictions may apply.
51
Writing for the Web

• Comprehension
• Use Specialized Terminology for Specialized
  Audience
• Terminology
• Consider User Demographics
• FedStats.gov Metropolitan Area v. City
• User-centric vs. Maker-centric Language
• Focus on Benefits of Product / Service, Not
  Features
• Avoid Industry Business Jargon
• Speak to Your Readers, Not at Them
• You and We Instead of Our Customers or
  Company X

52
Writing for the Web

• Comprehension
• Plain Language
• Inverted Pyramid
• Start with Overview
• One Idea per Paragraph
• Only First Sentence Read
• Most Important Point Within First Two Lines of
  Paragraph
• Spell Check / Grammar
• Proofread
• Other than Author

G e n e r a l
Detail
53
Writing for the Web

• Satisficers
• Settle for Something that Meets Our Essential
  Needs
• 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 lt 5 Sentences
• Short Sentences lt 20 Words

54
Writing for the Web

• Scannability
• SubHeads
• Bulleted Lists
• Bullet List Read More Often than Without (70 vs.
  55)
• Sorting
• Highlighting Emphasis
• Dont Confuse with Hyperlinks

55
Writing for the Web

• Scannability
• Occasionally Break Grammar Rules on Websites for
  Clarity
• Use Sentence Fragments
• Show Numbers as Numerals
• For Numbers up to a Billion
• One Sentence Paragraphs
• Use Exclamation Points
• Users Miss Subtle Enthusiasm in Content
• Eyetracking Reveals Users are Attracted to
  Exclamation Points

56
Writing for the Web

• Scannability
• Paragraph Visitors Viewing Paragraph
• 1 81
• 2 71
• 3 63
• 4 32

57
Color

• Eyes Response to Wavelengths of Radiation
• Hue, Value, Saturation

All Hues Brought Down to a Mid-range Value
Surrounded by Red Orange Plays Off of Natural
Complements Very Warm, Very Rich Set of Tones
Feel Full Vibrant http//paletton.com/
58
Color

• Color Wheel Based Schemes
• Monochromatic Shades / Tints / Tones of a Color

59
Color

• Color Wheel Based Schemes
• Analogous Adjacent Colors

60
Color

• Color Wheel Based Schemes
• Complentary Opposite Colors

61
Color

• Color Wheel Based Schemes
• Triadic Three Equidistant Colors

62
Color

• Color Wheel Based Schemes
• Tetradic Two Complementary Sets of Colors

63
Color

• Psychological Response
• Red
• Power, Energy, Warmth, Passion, Aggression,
  Danger
• Green
• Nature, Health, Renewal, Good Luck, Jealousy
• Problems in Global Market
• Blue
• Trust, Conservative, Security, Order

64
Color

• Psychological Response
• Yellow
• Optimism, Hope, Cowardice, Betrayal
• Sacred Color to Hindus
• Purple
• Spiritual, Mystery, Royalty, Arrogance
• Orange
• Energy, Balance, Warmth
• Signifies a Product is Inexpensive in the US

65
Color

• Psychological Response
• Brown
• Earth, Reliability, Comfort, Endurance
• Successful Food Packaging in US
• Poor Sales in Columbia
• Gray
• Intellect, Future, Modest, Sadness, Decay

66
Color

• Psychological Response
• White
• Purity, Cleanliness, Precision, Innocence, Death
• Signifies Marriage in the US
• Signifies Death in India, Other Eastern Cultures
• Black
• Death, Mystery, Fear, Unhappiness
• Packaging
• Power, Sexuality, Sophistication, Elegance

67
Shape

• Psychological Response
• Rectangle
• Order, Logic, Containment
• Circle
• Connection, Community, Wholeness
• Female
• Warmth, Comfort, Sensuality, Love
• Triangle
• Energy, Power, Law, Science, Religion
• Male
• Strength, Aggression, Dynamic

68
Branding

• Signifies Goods/Services
• Name
• Slogan
• Logo
• Something That Wont Come Off in the Wash

69
Branding

• Functional Objective, Logical, Practical
• Communicate
• Recognition Recall
• Differentiate
• Emotional Subjective, Emotive, Creative
• Personality
• Add Value
• Attractive

70
Branding

• General
• Leo Burnett
• Nike v. Adidas
• Logitech
• Michelin v. Firestone
• FedEx

71
Branding

• Web Principles
• Consistency
• Logo
• Tagline
• Navigation
• Color Scheme

72
Branding

• Web Principles
• Characters
• Simple Stylistic Trend
• Permeates Site to Thematically Unite It
• Element of Logo
• Used Next to Header Text
• Used as Bullet Marker

73
File Size

• Page Size HTML Objects
• 10 Second Threshold
• Bailout Users Who Dont Wait For Full D/L
• Slow or Broken Links
• Unable to Find Data
• Unable to Find Company Data
• Limited Search Functionality
• Poorly Labeled Links

74
File Size

• 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

75
Resolution

• Desktop Resolution
• Other 1
• 1024 x 768 6
• 1024 x 768 93
• Optimize For 1440 Pixel Widescreen Monitors
• Percentage v. Fixed Width

w3schools 1/14
76
Page Layout Design

• Wireframe
• Layout of Web Page
• Depict Containers for All Major Page Elements
  Functionality
• Navigation
• Images
• Content
• Functional Elements (e.g., Search)
• Footer
• Created for Home Page
• Each Unique Second Level Page
• Any Other Significantly Different Page On Site

77
Page Layout Design

• Techniques
• Fixed
• Fixed-width
• Can Be Left Aligned or Centered
• Configured with a Fixed or Percentage Width
• Fluid
• AKA Liquid
• Expands to Fill Browser Window at All Resolutions

78
Mobile Web Design

• Approaches
• Develop Separate Site
• Use .mobi TLD
• Separate Site Hosted within Same Domain
• m.domain.com
• Use Responsive Design

79
Mobile Web Design

• Considerations
• Small Screen Size
• Low Bandwidth
• Font, Color, Media Issues
• Awkward Controls, Limited Processor Memory
• Functionality