Transcript CIS 1310 – HTML & CSS

5
Web Design
CIS 1310 – HTML & CSS
Learning Outcomes
 Describe
Common Types of Website Organization
 Describe
Principles of Visual Design
 Design
for Target Audience
 Create
Clear, Easy-to-use Navigation
 Improve
 Apply
the Readability of Text on Web Pages
Universal Design to Web Pages
 Describe
Web Page Layout Design Techniques
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
Accessibility

W3C’s 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
CIS 1310 – HTML & CSS
?
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
CIS 1310 – HTML & CSS
?
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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


Be in the Line Preceding the Control


Allowing More Than One Control/Label Per Line
With Only One Label & One Control Per Line
Provide a Linear Text Alternative for Tables that Use Parallel,
Word-wrapped Columns
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
Three Levels of Emotional Design

Behavioral


Usability
Visceral

Appearance


“Hardwired”
Reflective

Branding
CIS 1310 – HTML & CSS
Underlying Principles of Design


Subjective

Communication

Visual Appeal
Objective

Utility

Engagement
CIS 1310 – HTML & CSS
Underlying Principles of Design

Communication

User Interaction

First Seconds


10 Seconds


Site Must Clearly Communicate Why it is Useful
Convince User Site can be Navigated Easily
1 Minute

Content is of Real Interest & Value
CIS 1310 – HTML & CSS
Underlying Principles of Design

Communication

Clarity

Logical Organization

Opening Content that can be Scanned v. Read


Benefit to User


Concisely Stated, Without Extraneous Material
Clear v. Obscure
Error Free

Spelling & Grammar

Accurate & Current

Link Rot, Link Quality, & Link Descriptions
CIS 1310 – HTML & CSS
Underlying Principles of Design

Communication

Legibility

High Contrast


Color
Text Size

Typeface

Density


Use Headings & Lists
Images

Meaningful Relationship to Content

White Space
CIS 1310 – HTML & CSS
Underlying Principles of Design

Communication

Readability

Understanding


Familiar Terms & Phrases
Language

Vivid

Active

Personable
CIS 1310 – HTML & CSS
Underlying Principles of Design

Visual Appeal

Richness

Uncluttered

White Space

Balance


Images Complement Content & Each Other
Images

High Quality
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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 You’ve Been

Logical Organization of Content
CIS 1310 – HTML & CSS
Underlying Principles of Design

Utility

Value

What is Benefit for User?

Remember Site

Return Visitors
CIS 1310 – HTML & CSS
Underlying Principles of Design

Engagement

User Awareness

Types of Visitors Site Hopes to Engage

Anticipate What Users Want & Expect

Clearly Recognize Benefits
CIS 1310 – HTML & CSS
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?
CIS 1310 – HTML & CSS
Underlying Principles of Design

Engagement

Interpersonal Rapport

Visitors Feel

Comfort

Trust

Understanding

Duration

Return to Site?
CIS 1310 – HTML & CSS
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.
CIS 1310 – HTML & CSS
Heading / Body Size Contrast
Lorem Ipsum
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 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.
CIS 1310 – HTML & CSS
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.
CIS 1310 – HTML & CSS
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.
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.
CIS 1310 – HTML & CSS
Leading
Lorem ipsum
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 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
http://www.typetester.org/
CIS 1310 – HTML & CSS
mattis pede.
White Space

Space Between Visual Elements

The Part of the Design that “Isn’t” There

Just as Important as the Elements that are There
CIS 1310 – HTML & CSS
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.
CIS 1310 – HTML & CSS
Graphic Cropping (Visual Impact)
CIS 1310 – HTML & CSS
Layout (Conservative / Dynamic)
Well-defined, rectangular areas on the page
Overlapping panels
Warm greens accompanied by cool blues
Imagery evokes customer service & technology
Balance intimacy with professionalism
Entertain the eye & communicate innovation
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
Diagonal Balance

Upper Left to Lower Right

POA (Primary Optical Area) to TA (Terminal Anchor)
Natural Eye Movement
LOGO
LOGO
Use Color to Draw Attention
Guides the Eye
Creates Focal Area
CIS 1310 – HTML & CSS
Button
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
Writing for the Web

Readability

Write in Active Voice

Aim at an 8th-grade Reading Level


Aim at a 12th-grade Reading Level


If Targeting Broad Consumer Audience
For Educated or Specialized B2B Audience
Use Specialized Terminology for Specialized Audience
CIS 1310 – HTML & CSS
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 month’s 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.
CIS 1310 – HTML & CSS
Writing for the Web

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 < 5 Sentences

Short Sentences < 20 Words
CIS 1310 – HTML & CSS
Writing for the Web

Scannability

SubHeads

Bulleted Lists

Bullet List Read More Often than Without (70% vs. 55%)

Sorting

Highlighting & Emphasis

Don’t Confuse with Hyperlinks
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
Writing for the Web

Scannability
Paragraph #
Visitors Viewing Paragraph
1
81%
2
71%
3
63%
4
32%

Spell Check / Grammar

Proofread

Other than Author
CIS 1310 – HTML & CSS
Writing for the Web

Plain Language

Inverted Pyramid



General
Start with Overview
One Idea per Paragraph
Detail

Only First Sentence Read

Most Important Point Within First Two Lines of Paragraph
Terminology

Consider User Demographics

FedStats.gov: Metropolitan Area v. City
CIS 1310 – HTML & CSS
Priming

Exposure to a Stimulus


Influences Behavior in Subsequent, Possibly Unrelated Tasks
Interface Can Prime User Behavior / Expectations
Promotion Code field primes
users to search for a coupon
CIS 1310 – HTML & CSS
Images of young children misleads users to
think it does not cater to older children
Color

Eye’s 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/
CIS 1310 – HTML & CSS
Color

Color Wheel Based Schemes

Monochromatic – Shades / Tints / Tones of a Color
CIS 1310 – HTML & CSS
Color

Color Wheel Based Schemes

Analogous – Adjacent Colors
CIS 1310 – HTML & CSS
Color

Color Wheel Based Schemes

Complentary – Opposite Colors
CIS 1310 – HTML & CSS
Color

Color Wheel Based Schemes

Triadic – Three Equidistant Colors
CIS 1310 – HTML & CSS
Color

Color Wheel Based Schemes

Tetradic – Two Complementary Sets of Colors
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
Color

Psychological Response

Yellow

Optimism, Hope, Cowardice, Betrayal


Purple


Sacred Color to Hindus
Spiritual, Mystery, Royalty, Arrogance
Orange

Energy, Balance, Warmth

Signifies a Product is Inexpensive in the US
CIS 1310 – HTML & CSS
Color

Psychological Response

Brown


Earth, Reliability, Comfort, Endurance

Successful Food Packaging in US

Poor Sales in Columbia
Gray

Intellect, Future, Modest, Sadness, Decay
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
Branding


Signifies Goods/Services

Name

Slogan

Logo
Something That Won’t Come Off in the Wash
CIS 1310 – HTML & CSS
Branding


Functional — Objective, Logical, Practical

Communicate

Recognition & Recall

Differentiate
Emotional — Subjective, Emotive, Creative

Personality

Add Value

Attractive
CIS 1310 – HTML & CSS
Branding

General

Leo Burnett

Nike v. Adidas

Logitech

Michelin v. Firestone

FedEx
CIS 1310 – HTML & CSS
Branding

Web Principles

Consistency

Logo

Tagline

Navigation

Color Scheme
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
File Size

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 1310 – HTML & CSS
Resolution

Desktop Resolution

1024x??? -
6%

1280 x ???
10%

1366 x 768 +
84%
w3schools 1/16

Optimize For 1440 Pixel Widescreen Monitors

Percentage v. Fixed Width
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
Mobile Web Design

Approaches

Develop Separate Site


Separate Site Hosted within Same Domain


Use .mobi TLD
m.domain.com
Use Responsive Design
CIS 1310 – HTML & CSS
Mobile Web Design

Considerations

Small Screen Size

Low Bandwidth

Font, Color, & Media Issues

Awkward Controls, Limited Processor & Memory

Functionality
CIS 1310 – HTML & CSS