Transcript Human Computer Interaction: Internet

Human Computer Interaction:
World Wide Web
Rebecca W. Boren, Ph.D.
Introduction to Human Factors &
Ergonomics Engineering
IEE 437/547
November 2, 2011
Most people visit a web site to solve
one or more of these four problems:




They want/need information.
They want/need to make a purchase/
donation.
They want/need to be entertained.
They want/need to be part of a
community.
Designing the Home Page




The Home page should provide an
overview.
Readers need you to set up a mental model
of the site.
Every page should have a link to your home
page.
Don’t have a link to the Home page on your
Home page.
Consider the Following





First Impression / Big Picture
Text and Links
Graphics, Video, Audio
Navigation
Content
Other Design Considerations





“Branding” means every page on the site should look
and work like every other page.
The most important material should be at the top of the
page, either at the center or the left.
Fonts should be easy to read.
Certain color combinations work better than others.
Avoid distractions such as flashing graphics, scrolling
text, or too much clutter.
Characteristics of Web readers



Skip & scan (use minimal text)
Prefer to print out longer documents to read
from paper.
Prefer narrow columns of text, like
newspaper.
Structure of a web page



Blocks of about 100 words or less fit on
a single screen.
Reader can print out a single screen.
Works well for skipping and scanning.
Hypertext




Allows the users to skip and scan
Users may get lost
Since the context may be complex,
users may miss important information.
May be difficult to get a hard copy of
the information required.
Put important information
Above the fold.
 Across the top or down the
left side.
 Where it is obvious.

Sometimes it is appropriate to
scroll.


Some people have slow connections and
going from link to link can be arduous.
Can manage a long page by putting targets
on it: linking a page to another part of the
same page.
Graphics vs. Text
"Of users' first three eye-fixations on a page,
only 22% were on graphics; 78% were on text.
In general, users were first drawn to
headlines, article summaries, and captions."
Jakob Nielsen's Alertbox, May 12, 2000.
Using Graphics


Large graphics increase download time
which frustrate readers. They are especially
disappointed when the graphic turns out to
be a company logo, decoration, or devoid of
information.
Small graphics are okay if they are helpful.
Be sure to include





Last updated
Sponsoring organization
Contact person
A site map if the website is large
“PDF” label if the file opens as a PDF file.
Things to avoid




A splash page (you only
have seconds to hook the
viewer)
Use of flash (animated
graphics)
Linkrot (dead links)
Underlined words that
aren’t links.
Let’s go to the W W W and
look at some real-life
examples of good and bad
design.
Examples of Poor Design*



Jesus Forgives
World Glaucoma Association
Graphic Arts Exchange
* Courtesy of Vincent Flanders, Web Pages That Suck.
Examples of Poor Navigation*


Mystery Meat Navigation
Maison martin margiela
* Courtesy of Vincent Flanders, Web Pages That Suck.
Let’s look at some
examples from our
class website.