Transcript Web Site Design

Fundamentals of
Web Programming
Lecture 2: Web Site Design
20-753: Fundamentals of
Web Programming
Lecture 2: Web Site Design
1
Today’s Topics
• The
The
• The
• The
Audience, The Message, and
Medium
Elements of Site Design
Web Site Life Cycle
20-753: Fundamentals of
Web Programming
Lecture 2: Web Site Design
2
“Know Your Audience”
• How they see and understand
information
• What types of computers they use
• What browser software they have
• How fast their connections are
20-753: Fundamentals of
Web Programming
Lecture 2: Web Site Design
3
“Know Your Message”
• What types of information do you
want to convey
• How best to convey that
information to the target audience
20-753: Fundamentals of
Web Programming
Lecture 2: Web Site Design
4
“Know Your Medium”
• Possibilities and limitations of web
publishing
• Select the technologies to use in
the implementation of your site
• Overall Goal:
“Maximum Audience Appeal”
20-753: Fundamentals of
Web Programming
Lecture 2: Web Site Design
5
Site Design
• Site design is an example of a
constraint satisfaction problem
Audience
Requirements
Desired
Message
Limitations of
the Medium
DESIGN PROCESS
SITE DESIGN
20-753: Fundamentals of
Web Programming
Lecture 2: Web Site Design
6
The Web Site Lifecycle
Requirements
Analysis
Site
Design
• Basic content definition
Site
Construction
Site
Maintenance
“Spec sheets and ordering
options for all of our on-line products”
“Downloadable upgrades for
registered customers”
“Background about our company”
“How to contact us”
20-753: Fundamentals of
Web Programming
Lecture 2: Web Site Design
7
The Web Site Lifecycle
Requirements
Analysis
Site
Design
• Basic content definition
• Activity checklist
Site
Construction
Site
Maintenance
“Users can download a 30-day trial
version of our system”
“Users can browse our products and
configure the options”
“Users can send us bug reports”
“Users can join our mailing list”
20-753: Fundamentals of
Web Programming
Lecture 2: Web Site Design
8
The Web Site Lifecycle
Requirements
Analysis
Site
Design
• Basic content definition
• Activity checklist
• Information Flow In/Out
Site
Construction
Site
Maintenance
“User contact information (name,
email, …)”
“User profiles (password, site prefs,
purchase record, shopping cart, …)”
“Information about orders in progress,
completed, shipped, ...”
20-753: Fundamentals of
Web Programming
Lecture 2: Web Site Design
9
The Web Site Lifecycle
Requirements
Analysis
•
•
•
•
Site
Design
Basic content definition
Activity checklist
Information Flow In/Out
Performance Assumptions
Site
Construction
Site
Maintenance
“Site must be up 24/7 with a max.
5 minute recovery time”
“Secure data must not be lost or
compromised”
“The projected number of hits or
transactions per second must be
efficiently processed”
“Delivery speed must be acceptable
at 14.4 Kbps network bandwidth”
20-753: Fundamentals of
Web Programming
Lecture 2: Web Site Design
10
The Web Site Lifecycle
Requirements
Analysis
•
•
•
•
•
Site
Design
Basic content definition
Activity checklist
Information Flow In/Out
Performance Assumptions
User Technology Profile
Site
Construction
Site
Maintenance
“What kind of monitor should we
assume as a low-end?”
“What browsers should we plan
to support?”
“Designing for the visually impaired
audience”
“What plug-ins will we require?”
“Required network bandwidth?”
20-753: Fundamentals of
Web Programming
Lecture 2: Web Site Design
11
The Web Site Lifecycle
Requirements
Analysis
Site
Design
• Make use of association
Site
Construction
Site
Maintenance
“Site structure related to structure of
the message”
“Group related items together”
“Provide adequate distinction between
disparate groups of items”
“Make use of emerging conventions
(e.g. placement of navigation aids)”
20-753: Fundamentals of
Web Programming
Lecture 2: Web Site Design
12
The Web Site Lifecycle
Requirements
Analysis
Site
Design
Site
Construction
Site
Maintenance
“Consistency promotes understanding”
• Make use of association
• Make use of consistency
“Consistency reduces complexity”
“Inconsistent sites don’t inspire
confidence”
“Impacts on all aspects of a site
(style, navigation, icons, context, …)
20-753: Fundamentals of
Web Programming
Lecture 2: Web Site Design
13
The Web Site Lifecycle
Requirements
Analysis
Site
Design
Site
Construction
Site
Maintenance
“Exhaustive navigation options”
• Make use of association
• Make use of consistency
• Make use of context
20-753: Fundamentals of
Web Programming
“All parts of site equally accessible”
“Don’t assume a particular click
trail (entry can be random)”
Lecture 2: Web Site Design
14
The Web Site Lifecycle
Requirements
Analysis
Site
Design
Site
Construction
Site
Maintenance
Drill-Down Structure
•
•
•
•
Make use
Make use
Make use
Structure
of association
of consistency
of context
and navigation
•
•
•
•
hierarchical, layered approach
analogous to directory structure
PRO: organizes complex data
CON: can be tiring to navigate
Flat Structure
• minimize layers & depth
• exploit ‘slide show’ metaphor
• provide add’l navigation options
20-753: Fundamentals of
Web Programming
Lecture 2: Web Site Design
15
Navigation Styles
Drill-Down Structure
20-753: Fundamentals of
Web Programming
Flat Structure
Lecture 2: Web Site Design
16
The Web Site Lifecycle
Requirements
Analysis
•
•
•
•
•
Site
Design
Make use of association
Make use of consistency
Make use of context
Structure and navigation
Develop a “site style”
Site
Construction
Site
Maintenance
“Style should reflect corporate
identity (e.g., choice of background,
graphics, etc.)”
“Style should be compelling and
add to user interest in the site”
“Your home page is your ‘first
impression’ on the customer”
“Less is More”
20-753: Fundamentals of
Web Programming
Lecture 2: Web Site Design
17
The Web Site Lifecycle
Requirements
Analysis
Site
Design
• Should not interfere with the
foreground content
• Should reflect corporate style
• Images and colors are both
possible
• Be careful with contrast and
color (remember, monitors are
not all the same!)
20-753: Fundamentals of
Web Programming
Site
Construction
Site
Maintenance
• Use of Background
Lecture 2: Web Site Design
18
The Web Site Lifecycle
Requirements
Analysis
Site
Design
• You can control text and link
color as well as background
• Distinguish visited links
• Use color as a visual cue
• Available colors may be limited
to a specific palette (usually 256
colors)
• Color rendering can be hard to
control on some systems
20-753: Fundamentals of
Web Programming
Site
Construction
Site
Maintenance
• Use of Background
• Use of Color
Lecture 2: Web Site Design
19
The Web Site Lifecycle
Requirements
Analysis
Site
Design
• Use intuitive icons (i.e., form
follows function)
• Association between icon and
meaning must be instant, and
universal (cross-cultural)
• User testing can be very useful
(try icons without labels)
• Icons are useful because they
take up little space, and add
visual appeal
20-753: Fundamentals of
Web Programming
Site
Construction
Site
Maintenance
• Use of Background
• Use of Color
• Use of Iconography
Lecture 2: Web Site Design
20
The Web Site Lifecycle
Requirements
Analysis
•
•
•
•
•
•
•
•
•
•
Site
Design
Table of Contents (site map)
Search Engines
Navigation Tools
“What’s New” pages
Guest Books
Feedback Mechanisms
Mailing Lists
Threaded Discussion Groups
Chat Channels
Multimedia Content
20-753: Fundamentals of
Web Programming
Site
Construction
•
•
•
•
Site
Maintenance
Use of Background
Use of Color
Use of Iconography
Desirable Site Elements
Lecture 2: Web Site Design
21
The Web Site Lifecycle
Requirements
Analysis
Site
Design
• Beta test the site with some
sample users (both experienced
and novice)
• Test your site with different
browsers
• Test your site at different
screen resolutions
• Benchmark your site at
different connection speeds
20-753: Fundamentals of
Web Programming
Site
Construction
•
•
•
•
•
Site
Maintenance
Use of Background
Use of Color
Use of Iconography
Desirable Site Elements
Testing Your Design
Lecture 2: Web Site Design
22
The Web Site Lifecycle
Requirements
Analysis
Site
Design
• Update your ‘What’s New’ on
a regular basis
• Remove or update obsolete
information
• Use redirection for smoother
user experience
• A dynamic, evolving site will
invite ongoing user visits over
time; a tired site will not
20-753: Fundamentals of
Web Programming
Site
Construction
Site
Maintenance
• Keep Content Up to Date
Lecture 2: Web Site Design
23
The Web Site Lifecycle
Requirements
Analysis
Site
Design
• Most sites contain links to
external sites which change over
time
• Internal links can also change
over time
• Automated link testing is very
useful for testing large sites
• Remove / replace obsolete links
20-753: Fundamentals of
Web Programming
Site
Construction
Site
Maintenance
• Keep Content Up to Date
• Prune Dead Links
Lecture 2: Web Site Design
24
The Web Site Lifecycle
Requirements
Analysis
Site
Design
• All logs grow over time and must
be explicitly managed
• Access logs are useful source of
information for (rough) user
demographics and gauging interest
in site content
• Regular review of error logs is a
must
• Includes content-specific data
(e.g., guestbooks, feedback, etc.)
20-753: Fundamentals of
Web Programming
Site
Construction
Site
Maintenance
• Keep Content Up to Date
• Prune Dead Links
• Manage Server Log Info
Lecture 2: Web Site Design
25
The Web Site Lifecycle
Requirements
Analysis
Site
Design
• Software you depend on
(browsers, plug-ins) will change
over time
• Re-test your site on new
browser versions
• Be sure to link to latest plug-in
versions and re-test your content
• Help your users to manage the
plug-ins they need for your site
20-753: Fundamentals of
Web Programming
Site
Construction
•
•
•
•
Site
Maintenance
Keep Content Up to Date
Prune Dead Links
Manage Server Log Info
Regression Testing
Lecture 2: Web Site Design
26
Summary
• Site Design as Process and Result
• Analyze and document the
Audience, Message, and Medium
• Use explicit design documentation
to drive implementation
• Testing should explicitly match the
elements of the finished site with
the requisite design criteria
20-753: Fundamentals of
Web Programming
Lecture 2: Web Site Design
27