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
