Lecture 01 - Design Issues PDF

1
Lecture 01
DESIGN ISSUES
2
The Making of a Good Design

Content is important, but content alone will not
make your site work.
Good Design is:

Understandable
Interesting
Easy to use
Uniform in look and feel
Done from a visitors point of view:
WYSIWYW (What You See Is What You WANT)
3
Good Design Maxims
Rules are only guidelines -- no single model fits

every situation, and there is no such thing as the
right way to create a web site.
Remember WYSIWYW
Web users want control over the online material --
they want to seamlessly obtain the information
they need.
Dont force visitors down a specific path -- give
them control.
4
Typical Website Evolution

Generation 1 -- replaces paper information
Generation 2 -- has flashy elements
Generation 3 -- is bleeding edge, causing content to suffer
Generation 4 -- content and technology are integrated
Ideally, try to skip the problems of

Generations 1-3 by planning your web site
carefully.
5
General Methods for Design

Ad-hoc Process (seat of the pants)
Hastily put together
Created on the fly
We need a web site TODAY
A methodical, well-thought process includes:

Planning
Quality-assurance testing
6
Pitfalls of Ad-hoc Process
Many under construction banners

Old content
Dated design and techniques
Errors (broken links, broken scripts)
Convoluted logic results in a confusing site
Spaghetti code in the CSS that only the original
designer understands
Difficult to update and maintain
7
Benefits of Ad-hoc Process
Sometimes quick and dirty is not only good

enough, its the best way.
Its useable for:

Sites that will have a short lifespan
Very small web sites
Sites designed for a very specific purpose (a single
survey, a single class, a specific event, etc.)
8
Why take the time to design and test

before launching?
Although it takes a lot more time up front, a well-

thought-out web site:
Has fewer problems
Is more effective
Is more understandable
Is easier to navigate
and may end up taking less time overall to create
and maintain.
9
Pre-design Work
Consider your organizations mission

Define the target audience
Set goals for the web site
Immediate
Long-term
Gather content
Organize and establish hierarchy of content
Chunk content into logical information units
10
More Pre-design Work

Create an outline or plan for content
Create your web site on paper first
Use a flowchart to depict how visitors will go
from one page to another
Think about the actual HTML, PDF, graphic,
sound, and other files you will need in the site
Where will they be placed?
How will visitors access them?
Organize the files logically, so that the
development team can understand the
hierarchy of the web pages.
11
Influences of Technology on Design

Browsers
Chrome is the dominant browser
<http://www.w3schools.com/browsers/browsers_stats.asp>
<http://www.e-janco.com/browser.htm>
Operating systems
Windows 7 is the most popular operating system
Connection speeds
75% access the Internet using broadband (DSL/T1/T3)
25% access it using narrowband (modem)
<http://www.websiteoptimization.com/bw/0609/>
User screen sizes

80% of users are using a display with 1024x768 pixels or more and a
color depth of at least 65000 colors
<http://www.w3schools.com/browsers/browsers_stats.asp>
12
Influences of Content on Design

The content drives how the web site looks
Sites designed for students look different than sites designed for staff,
which look different from sites designed for potential faculty
Sites designed to get people to purchase items look different than sites
designed to provide information
Use quality content from subject matter experts
Have site reviewed PERIODICALLY by key members
(CEOs, Department Heads, Supervisors, etc.) of the
group the site supports
Have non-affiliated people review content for clarity
Have others proofread for grammar
Fresh eyes often see things you miss!
13
Usability
Browsers dont use web sites -- people do. Dont

design a site for a particular browser -- design a
site for the user.
There are no generic people. Try to envision a
real person accessing your site.
Most users absorb data visually.
Most users will not expend effort to remember
things about how your site works.
14
Visual items
15
Usability -- Making It Easy To Read

Factors that affect readability
Poor eyesight of users
Smaller, older computer monitors as displays
Poor color perception of users
Cocktail-party effect -- lots of information on a single web page
Design fixes:
Use high contrast between text and background
Use lots of white space
Use larger fonts
Put key navigation buttons in the upper left
Dont rely on color alone to distinguish between elements on a web page
Avoid busy graphics
Limit page noise -- ensure page elements dont compete for a visitors
attention
16
Usability -- Users Memory
Dont force visitors to remember how to

navigate/use the site
Provide redundant, easily recognizable features
Generally, have visited and unvisited links be
different colors to make it easy for users to
remember where theyve been
Limit the number of items in a group of choices
17
Usability -- Response Times
The amount of time a user will wait is proportional to

the payoff. If they know there is something they want
to see, they will wait for it.
Otherwise
1 second: no major potential for interrupt
10 seconds: users become bored
More than 10 seconds: user may leave
Without a progress bar or other browser feedback, users generally

will go about other business -- look at sites in other windows, talk on
the phone, etc. Designers must provide some sort of indication as to
how much longer the download will take, if the wait will be more
than 10 seconds.
18
Using Cutting-Edge Tools
Good reasons: Poor reasons:

To look cool! To look cool
To draw attention To prove you can
To maintain
attention
To enhance
information
To inform or
educate

Lecture 01 - Design Issues PDF

Uploaded by

Copyright:

Available Formats

Lecture 01 - Design Issues PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 01 - Design Issues PDF

Uploaded by

Copyright:

Available Formats

1

The Making of a Good Design

Good Design is:

Good Design Maxims

Rules are only guidelines -- no single model fits

Typical Website Evolution

Ideally, try to skip the problems of

General Methods for Design

A methodical, well-thought process includes:

Pitfalls of Ad-hoc Process

Many under construction banners

Benefits of Ad-hoc Process

Sometimes quick and dirty is not only good

Its useable for:

Why take the time to design and test

Although it takes a lot more time up front, a well-

Consider your organizations mission

More Pre-design Work

Influences of Technology on Design

User screen sizes

Influences of Content on Design

Browsers dont use web sites -- people do. Dont

Usability -- Making It Easy To Read

Usability -- Users Memory

Dont force visitors to remember how to

Usability -- Response Times

The amount of time a user will wait is proportional to

Without a progress bar or other browser feedback, users generally

Using Cutting-Edge Tools

Good reasons: Poor reasons:

You might also like