presentation source

Download Report

Transcript presentation source 

Web Page Design &
Construction
Greg McArthur
Digital Information Group
Scientific Computing Division/NCAR
December 11, 1997
1
“Design is the successive application of
constraints until only a unique product is
left.”
Richard Pew
Human Factor & Industrial Design
December 11, 1997
2
Overview
• Mental Models
• Design Considerations
– audience
– purpose
– content
– user interface
– navigation
• Writing style
December 11, 1997
3
Overview (cont)
• Avoiding rookie mistakes
• Copyright issues
• Questions & Answers
December 11, 1997
4
Mental Models
• …are the models people have of
themselves, others, the environment,
and the things with which they interact.
• People form mental models through
experience, training, and instruction.
Dan Norman
The Design of Everyday Things
December 11, 1997
5
Mental Models
• YOU:
– have a specific mental model of your website.
• The USER:
– may have a completely different mental
model of your site.
• The DESIGN GOAL:
– to meld the two perspectives.
December 11, 1997
6
Design Considerations
“You never know what is enough unless
you know what is more than enough.”
William Blake
December 11, 1997
7
Identify your Audience
• Who constitutes the primary audience?
– General public
– K - 12
– University
– Business, Political, Special Interest
– Scientific
– Government Agencies
– Associates/Friends
December 11, 1997
8
Purpose
•
•
•
•
•
•
Provide service(s)
Publish Information
Lists of Lists
Distance Learning
Web Development Tools
etc.
December 11, 1997
9
Content
Web content is like print content … with
a few exceptions:
– living document
– viewed on different browsers/crt screens
– continuously evolves
– may never be “finished”
December 11, 1997
10
Content ...
•
•
•
•
•
Keep writing tight and concise
Avoid long paragraphs and use of italics
Use an editor (the human kind)
Intersperse graphics with text
Put important information first, link to
additional information as needed
December 11, 1997
11
User Interface
• Use screen real estate wisely
– avoid filling screen with text
– use “white space” around text/images
• Use an easy-to-read font
• Use 12 - 14 pt. size
December 11, 1997
12
White Space
• White space makes
printing easier to read.
• Use it on left or right of
the screen.
• Experiment with amount
to white space for your
pages.
• Use <blockquote>,
<frames> or <table>
December 11, 1997
13
Text on Screen
• Remember -- your reader is looking at a
computer screen!
– Eye tends to wander if sentence are too
long
– Line wraps may appear odd looking on
some browsers
December 11, 1997
14
User Interface
• Background Images
– When in doubt…leave them out.
– Tend to be very distracting to viewer
– If used, keep them simple, low-key
• HTML
<body background=“xy.gif”>
December 11, 1997
15
User Interface
• Background Colors
– Use white primarily…easier to read text
– If non-white, then use pastel colors
– Colors can be very useful as navigational
aid…but may interfere with link colors
• HTML
<body bgcolor=“#FFFFFF”>
<body bgcolor=“white”>
December 11, 1997
16
User Interface
• Text on Screen
– Make it easy to read
• no italics
• leading caps <font size=4>N</font>ow is the ….
– Use default link colors
– Avoid long paragraphs
<body text=“white” link=“white” vlink=“blue” alink=“red”>
December 11, 1997
17
User Interface
• Fonts
– Pick a readable Font
– Don’t mix fonts -- be consistent
– Good choices:
• Helvetica
Bookman Arial
• Force a font:
<font face=“bookman” size=6 color=black>
December 11, 1997
18
Images
• Scan and Save images at 75 dpi
– higher resolutions = larger image on low
resolution screens
• Maximum image size = 600 x 400 pixels
• Default browser window on most
monitors is 800 x 600 pixels
December 11, 1997
19
Image Size
• General Rule:
– Use them, but size them for default
displays and quick loading
• Consider
– Image quality/resolution
– Type of image format
– Download time
December 11, 1997
20
Image Format
• Two major formats for the web:
– GIF (and GIF89a)
– JPEG
• GIF = uses up to 256 colors
– excellent for line art, lettering and images
that don’t have a lot of colors
• JPEG = uses up to 16 million colors
– best for photos and high-res images
December 11, 1997
21
Download Time
• Images take Bandwidth = Time
– Don’t make user wait
– Let the browser “know” how to format
images on the page as it is downloading
• Use WIDTH= and HEIGHT= attributes
<img WIDTH=200 HEIGHT=150
src=“MY.gif” ALT=“my picture”>
December 11, 1997
22
Navigation
• Hardest Task in Web-site design
– not necessarily intuitive
– non-linear…the web site is not unidirectional
– keeps user from being lost in your
cyberspace
December 11, 1997
23
Navigation
• Keep navigational tools simple and
intuitive
– avoid ambiguous images/icons
– be consistent in use
• One icon -- one purpose
– Use “alt=“ for all icons
– Don’t overload site with many nav. tools
December 11, 1997
24
Navigation
• You must provide user with a way to get
around within your site:
– top
– back (to a home page)
– next
– previous
– exit
December 11, 1997
25
Navigation
• 7 +/- 2 Rule:
– 5 minimum nav elements
– 9 maximum nav elements
• Natural, cognitive ability to remember
and use
• Plan navigational elements accordingly
December 11, 1997
26
Avoid Common Mistakes
• Using Frames
– multiple frames are confusing
– can’t bookmark page
– printing becomes difficult
• Bleeding-edge Technology
– untested and volatile results
– can result in “over designed” site
December 11, 1997
27
Common Mistakes
• Scrolling text, marquees, running
animations
– page elements that move incessantly
– give users peace and quiet to read
• Overly complex URLs
– should contain reasonable file structure
– adequately reflects the info. space
December 11, 1997
28
Common Mistakes
• Orphan pages
– all should indicate what site they belong to
– each should have a link to the site home
page
• Long scrolling pages
– 10% of users will scroll beyond first page
– keep all critical content and nav tools at the
top of the page
December 11, 1997
29
Common Mistakes
• Lack of Navigational Support
– design around your information space
– clear, strong sense of direction
– use a search engine
• Non-standard Link Colors
– active links (red), visited links (blue)
– keep these defaults when in doubt
December 11, 1997
30
Common Mistakes
• Outdated Information
– keep old info weeded out of the site
– always have a “last updated” stamp
• Overly long download times
– images, sounds, etc.
– pay attention to file sizes
from “Top Ten Mistakes in Web Design”
Jakob Nielson
December 11, 1997
31
Copyrights
• Anything you create can be copyrighted
– Asserts your rights to your material
– Not required but considered prudent
– Pages for NCAR/UCAR…just link to the
current copyright page
– or: Copyright © 1997, Your Name
Institution Name (if any)
All rights reserved.
December 11, 1997
32
Questions & Answers
December 11, 1997
33