Page Layout

Page Layout

Design for Screens for InformationDivide vertically into zones with

different functionsEach vertical zone should provide

suitable information

Page Header

Headers gives site visual identity“Signature” allows user to grasp

purpose of page and where it fits within site

Important since page might be jumped into from other site

Page HeaderGuidelines

Should always be near topGraphical or TextNot too largeRelated series of documents might

have subtitles or section titlesShould be standardized across site

Page Footer

Provide navigation links back to top of page

Similar location information as header

Important because top of page might not be visible

Page FooterGuidelines

Contain basic data:Origin AgeCopyrightSet of links to related pages

Text Layout

Original HTML: single column of textHard to readNeed to use technique developed by

print documents

Text Layout

Line length determined by page width

When resize text reflows to fill spaceHinders readability Hinders usability

Text Layout

Line Length:Reading becomes uncomfortable

when there are more that 12 words per line

Margins:Define reading are by separating

main text from non text

Text Layout

Columns:Allows for variations in page layoutReduces line lengthGuttersSpace between columns

Text Layout with Tables

Most complex text layout can be done with tables

Why? Least common denominator

Examples

Tables

Handles text layout with images:

Tables

Use to make composite images:

Navigation

Getting lost is a bad thingGreatly hinders usabilityKey aspect of site’s usability

Navigation

Product of two factors:

Navigation

Content Organization Visual Organization

Navigation

Navigation interfaces need to answer three questions:

Where am I?Where have I been?Where can I go?

Most important is “Where am I?”

Where am I?

User’s location needs to be shown:Relative to site’s structureRelative to web as a whole

Where have I been?

Harder to support without special techniques

Browser Back ButtonBrowser History ListLink colors

Where can I go?

Handled by visible navigation linksThree types of links:Embedded links in body textStructural Links: points to other parts

of siteAssociative links: points to pages

related to page currently on

User Controls Navigation

In traditional interface design, designer control where user can go

Web users control where they can goWeb sites need to support user

controlled navigationDesign to support this freedom of

movement

Navigation Types

BrowserEmbeddedSupplemental

Browser Navigation

Go to URLBack/Forward buttonHistory ListVisited linked different colorBookmarks

Browser Navigation

Do not override:Color of visited/unvisited linksKill back buttonDisable bookmark feature

Embedded Navigation

Three types of embedded navigation systems:

GlobalLocalContextualEach system solves a particular

problem

Navigation Types

Global Navigation

Site-wideIndented to be present on every

pageOften implemented as global

navigation bars

Navigation Bars

Effective implementing both global and local navigation

Collection of links grouped together on page

Most provide link to home pageSubtle differences per sub-site

Navigation Bars

Local Navigation

Complements global navigationAllows navigation of immediate areaCan be combined with global

navigationCan be so different and unique they

become sub-sites

Contextual Navigation

Navigation link specific to page or items

For items which do not fit into local or global navigation

“See Also” linksCan support associative learning

Contextual Navigation

Two Types:Inline - true hypertextLinks within page text

External - placed on page“Related products” links

Navigation Implementation

Navigation systems are closely links to organizational structures

Three types:HierarchicalAd-HocDatabase driven

Hierarchical

Provides top down view of siteMost sites support this viewIn pure form, does not facilitate easy

traversalAdditional links added to increase

ease of traversal

Navigation Hierarchy

Ad-Hoc and Database

Ad-Hoc: additional links to make connections based on relationships

Used for embedded navigationDatabase: not used to global or local

navigation, but used as supplemental navigation, search engines

Site Navigation

Supplemental

External to basic navigation structure

Can be critical for ensuring usabilitySitemapsBreadcrumbsIndexes Guides

Sub Navigation

Site Map

A table of contents for a siteTypically presents top few levels of

informationMost used for web sites which are

hierarchical based

Breadcrumbs

Display a record of links user traveled to get to page

Record user’s trail through siteBased on: Just wait, Gretel, until the moon rises, and then we

shall see the crumbs of bread which I have strewn about; they will show us our way home again - Hansel and Gretel

Guided Tour

Take several forms:Guided toursTutorialsMicro-portalsUsed for training or introduction of

site to new users

Search

Central part of supplemental navigation

Search by passes all other navigationShould provide reasonable resultsDo allow for search for phrasesDo not provided search of web

Advanced

Personalized and customized navigation

Play important or limited rolesRequire solid foundation of structure

and organizationDifficult to do well

Icons

Text is usually better than iconsIcons harder to changeOften ambiguous

Icons

Menus

Pack a large amount of navigational elements in a small space

Requires users to understand how to use them

No all items visible User must act to see menu elements

Frames

Used in early days of webTake valuable real-estateBookmaking becomes a problemPrinting becomes a problemTypically not used anymore

Navigation Stress Test

Ignore the home page and jump directly to middle of site

For each random page, can you figure out where you are within the site?

Can you tell where the page will lead you next?

Color and Usability

Integral part of web pageProperly used makes page attractive

and usableProvides contrast for pageCan show button’s state or function

Human Vision

Cones on retina responsible for detecting color

Three different types of conesEach responds to different

wavelengthsBasis for tristimulus theory of color

mixing

Vision

Physics of Color

Visible light small part of electromagnetic spectrum

Different wavelengths correspond to different colors

Light which contains all visible wavelengths is perceived as white

Black is absence of light

Visible Spectrum

Color Systems

Model which quantifies the description of color

Two types of color mixing:AdditiveSubtractive

Additive Color Schemes

Model based on lightAdd colors added together = whiteMost common one: RGBA few variations on color model

Additive Color

Hue Saturation Brightness (HSB)

Hue Value Saturation

Subtractive Color

Additional of colors = black Since most objects reflect light

subtractive is very commonColors primaries subtract color from

reflected lightMost common model: CMYK

Subtractive Color

CMYK

Color Gamut

Refers to range of color for a particular device

Can greatly alter the color of material when printed or displayed

Different devices show colors differently

Color Harmony Scheme

Depend on references to a color wheel

Mixing equal amounts of primaries results in a secondary color

Mixing two secondary colors results in a tertiary color

Color Wheel

Primary & Secondary Colors

Monochromatic

Monochromatic

Complementary

Complementary

Analogous

Analogous

Triadic

Triadic

Color Harmonies

Color Harmonies

Color and Browsers

Not all colors can be displayed on all devices

Color of text can affect readabilityWeb-Safe palletMonitor Type: CRT vs LCD