Download Web Design - Dr. S. home

Web Design for the
User Experience:
Important Issues
Angela D’Auria Stanton, Ph.D.
Common Web Site Objectives

Generate leads

Explain, educate, inform

Sell products or services

Provide information

Obtain competitive advantage

Have a corporate Web presence

Traditional objectives translated into the web environment – e.g. increase revenue,
reduce costs, improve customer service, grow market share

Complement existing marketing strategies

Explain, educate, inform

Social responsibility objectives.

A recent study on web sites showed that 85% of visitors
reach sites by direct navigation (type the
URL)/bookmarks or by using a search engine.

The days of Web users randomly 'surfing' to sites is
ending. Now more than ever, people know exactly where
they want to go on the Web. This does not mean search
sites or other Web links are now less important, because
users still have to initially find a site before they can
bookmark it. However, having a site worth returning to is
becoming increasingly important to businesses.
Source: WebSideStory StatMarket
The Eight Axioms of Web Page Design
1. Design for the User
2. The Medium Determines the Design of
the Message
3. Site Design can be a Barrier to Entry
4. Usability is Important
5. Web Sites Must Have an Attractive Look
and Feel
6. Pages Should be Scannable
7. Users Care About Content
8. Navigation for Ease of Access
Axiom 1: Design for the User

Design strategy is NOT based solely on





A corporate organizational chart
The marketer’s campaign
The IT department’s enthusiasm for efficiency and easy maintenance
The website designer’s need for self-expression.
You must determine the primary purpose of your web site.






Build your brand
Provide information to generate response offline
Provide customer service and support
Sell products and services directly over the Internet
Save money
Keep up with the competition

At the same time, you must design for the user with a customer-centric approach.

The bottom line: think and act like the average user; then design
(http://www.useit.com)
Axiom 2: The Medium Determines the
Design of the Message

Lean Back
versus Lean
Forward
 The
problem with
lean forward
media is “clutter”
Axiom 3: Site Design can be a
Barrier to Entry

Don’t put up unnecessary road blocks

Jelly Belly and Wharton did this
KISS (keep it simple stupid)
is not always better – especially on the
home page
 More

southwest.com makes liberal use of white space
Put the user in context
 Convey
to your user… “I know who you are and I
know what you want to do here.”
 Create gateways for each market segment.

Dell and Patagonia
Axiom 4: Usability is Important

Usability is a quality attribute that assesses how
easy user interfaces are to use. It is comprised
of:
– how easy is it for users to accomplish
basic tasks the first time they encounter the design
 Efficiency – once users have learned the design, how
quickly can they perform tasks
 Memorability – when users return to the design after a
period of not using it, how easily can they reestablish
proficiency
 Errors – how many errors do users make, how sever
are the errors, and how easily can they recover
 Satisfaction – how pleasant is it to use the design
 Learnability
Usability Issue:
Screen Resolution & Page Layout

Some recent statistics (source: w3schools.com)








Three main criteria in optimizing a page layout




Initial visibility – is all key info above the fold so users can see it w/o scrolling
Readability – how easy is it to read the text in various columns
Aesthetics – how good does your page look when the elements are at the
proper size and location for the screen size (e.g. captions next to photos)
Do not design solely for a specific monitor size


1024x768 – 44.36%
1280x1024 – 16.51%
1280x800 – 15.51%
800x600 – 5.85%
1440x900– 5.52%
Other – 12.61%
As the use of laptops and wide screen desktop monitors increases, these
will continue to change
Not only do screen sizes vary; window sizes vary even more since
users don’t always maximize their browsers
Use a liquid layout (one that stretches to the current user’s window
size
Improving Usability

User testing is paramount
 Find
representative users
 Ask the users to perform representative tasks
 Observe what the users do, where they
succeed and where they have difficulties

Don’t ask them – listening to what people say may
be misleading; you have to watch what they
actually do.
Axiom 5: Web Sites Must Have an
Attractive Look & Feel

A web site must look good and professional as it
is a reflection of the business

The best looking and feeling sites:
 are
clean and understated
 use a few aesthetically pleasing colors and
incorporate white space
 use graphics strategically
 employ a limited number of fonts (typically san serif)
that are not too small or large
Axiom 6: All pages should be
Scannable (even if they are meant to be Readable)
A
E
E
E
B
D
A
B
C
D
E
C
E
E
E
E
E
E
E
E
E
E
E
E
F-Shaped Pattern for
Reading Web Content
How to Employ Scannable Text






highlighted or hyperlinked keywords
meaningful sub-headings
bulleted lists
one idea per paragraph (users will skip over
additional ideas if they are not caught in the first
few words)
the inverted pyramid style, starting with the
conclusion
half the word count (or less) than conventional
writing
Relative Weighting of
Page Elements
1
2
2
2
3
3
3
3
3
1
2
2
2
3
3
3
3

Example of content not easily scanned
The "Little House on the Prairie Bed and Breakfast" is a charming B&B located in
Walnut Grove, WI. This B&B includes a gourmet breakfast, featuring Belgian waffles
with strawberries and whip cream on top. All rooms in this B&B have: a fireplace,
Jacuzzi, antiques, queen size bed, and pull-out couch. This week, we are featuring
"Laura's Room".

A scannable online description
Little House on the Prairie Bed and Breakfast
• Located in Walnut Grove, WI.
• Gourmet breakfast included (specializing in Belgian waffles with
strawberries and whip cream on top).
All rooms in this B&B have the following:
• Fireplace
• Jacuzzi
• Antiques
• Queen size bed
• Pullout couch
This week, we are featuring Laura's Room
Question for Discussion
What is the 7 +/-2 Rule?
Should this be followed in web
design?
Axiom 7: Users Care About
Content

Keep content factual (unless the purpose of your
site does not pertain to factual information)

Chunk content into groups

Minimize text through “word economy”

Update the content regularly
Everyone THINKS their site has
content

Ask yourself…why would anybody visit my
site a second time?

A third time?

A fourth time?
Content Ideas



Contests and
sweepstakes

http://www.hgtv.com/hgtv/pac_ctnt_988/text/0,,HGTV_22056_
66109,00.html /

Tours http://www.elvis.com/graceland/vtour/
Demonstrations

http://www.webct.com/products/viewpage?name=products_de
mo_webinars

Recipes
http://www.jellybelly.com/fun_stuff/jelly_belly_bean_recipes.as
px

FAQ Pages
http://www.myspace.com/index.cfm?fuseaction=misc.faq


History http://docs.yahoo.com/info/misc/history.html
News http://www.radford.edu/NewsPub/
Free Offers
http://www.qualityhealth.com/psp/registration.jspa?rf=15970&h
ydraPID=2901
Unique Information
Links to other related
sites
http://www.cnn.com/SPECIALS/1998/10/kosovo/related.sites



Coupons http://www.4electronicscoupons.com/ /
Interesting tests, polls &
quizzes http://www.cnn.com/
Message boards
http://myidol.americanidol.com/boards/
Sources for Content

http://www.freesticky.com/stickyweb/

Really Simple Syndication (RSS) Feeds
 http://rssfeedreader.com/
 http://newsgator.com/home.aspx
 http://rsscontentbuilder.com/
Axiom 8: Navigation for Ease of
Access

Visitors should always know where they are, where they
were, and where they can go

Title tags, page headings, icons, and link colors

Navigation link titles should be short, descriptive and
intutive

Navigation should be consistent



Levels of choice (primary/secondary) should be clearly displayed
Always provide a link back home and e-mail
Provide an internal “search” tool if possible
Primary Navigation

Primary Navigation
 Should consist of the 6 – 8 most important links
 These links should stand out without being too
graphically intense

Alternatives
navigation – most common because in most
cultures people start reading from left
 Top navigation – advantage is that it leaves more
room below for content (provided it clearly looks like
navigation)
 Left
Secondary Navigation

Links that do not belong in the primary
navigation such as Contact Us, About Us,
Privacy Policy, Terms of Use, Site Map,
etc.

Should be distinguished from primary
navigation (separated from primary,
smaller fonts, alternative placements
Remember: A Website is often
a New Experience

Don’t assume that people know how to
navigate your site. Therefore, design for the
“novice” or the “first time user”
 Consistency
makes sites easy to learn
 Users need robust confirmation dialogs
 Users need clear visual metaphors
In Summary: Some Common
Design Mistakes










Frame Technology (yes some sites still use it)
Too much Moving Text, Display, and Animation
Detailed Backgrounds
Lack of contrast in colors; too many different text colors
Lost Pages (a.k.a. Linkrot) & poor navigation (treat every page
like a home page)
Long Scrolling Pages
Funky fonts
Pages that don’t adapt to alternative browsers and
resolution/pixels per page
Use of the Latest “Bells and Whistles”
Long Downloads – 8-10 second rule!!! Don’t assume that
everyone has broadband (even today).
Web Site Review Evaluation Criteria*

Value
 Does
the home page provide evidence that
user goals can be completed (in other words
do users think they’ve come to the right
place)?
 Is essential content available where needed?
 Is essential function available where needed?

Honda Price Quote
 Are
essential content and function given
priority on a page
* Source: Forrester Research, “Best and Worst of Site Design, 2005”
Web Site Review Evaluation Criteria

Navigation
 Are
category and subcategory names clear
and mutually exclusive?
 Do menu categories immediately expose or
describe their subcategories?
 Are items classified logically?

K-Mart pairs traditional navigation with guided browsing
 Are
hyperlinks clear and informative?
 Are keyword-based searches comprehensive
and precise?
Web Site Review Evaluation Criteria

Presentation
 Does
 Does
the site use language that’s easy to understand?
the site use graphics, icons and symbols that are
easy to understand?
 Is text legible?
 Does text formatting and layout support easy scanning?
 Do page layouts use space effectively?
 Are form fields and interactive elements placed logically
on the page?
 Are interactive elements easily recognizable?
 Are interactive elements consistent?
 Does the site accommodate the user’s range of handeye coordination?
Web Site Review Evaluation Criteria

Trust
 Does
the site present privacy and security
policies in context?
 Do pages provide location cues?
 Does site functionality provide feedback in
response to user actions?
 Is contextual help available at key points?
 Does the site help users recover from
errors?
 Does the site perform well?
Web Design for the
User Experience:
Home Pages
Angela D’Auria Stanton, Ph.D.
Homepages are Key!

The most valuable real estate in the world

Your company’s faces to the world

The most important page on most websites

Gets more page views than any other page
3 Basic Functions of a Homepage

To introduce the site's navigation, the basic links a user will click on to
reach the pages in your site. These should stay consistent throughout the
site.

To be a "landing page", or the first page that appears when first time
visitors visit! It's important to include a few basic sentences about who
you are and what you do, so that they can see at a glance if they are in
the right place.

To allow frequent visitors to find out what's new on your site and in
your business. If you have sections on your site that you update regularly
(like articles or a portfolio), or if your business adds a new product or
service, these updates should be featured on your site's main page. This
makes it easy return visitors to learn about your new features.
Top 10 Guidelines for
Homepage Usability *
1.
Include a 1 sentence tagline - it must be short
enough that users will read it, explain what the
company does and what makes it unique
among competitors

Collect taglines from your own site and your three
strongest competitors. Print them in a bulleted list
w/o identifying the company names. Ask yourself
whether you can tell which company does what.
More importantly, ask a handful of people outside
your company the same question.
* http://www.useit.com/alertbox/20020512.html
Top 10 Guidelines for
Homepage Usability
2.
Write a Window Title with good visibility in search engines and
bookmark lists – begin with the company name followed by a brief
description of the site
Poor: http://www.hbo.com
Better: http://www.nbc.com
3.
Group all corporate information in one distinct area
(e.g. http://www.lucent.com)
4.
Emphasize the sites top high-priority tasks (http://www.ebay.com/)
5.
Include a Search Input box – searches allow users:

to control their own destiny from the site’s navigational structure
an escape hatch when they are stuck and can’t figure out where to go next

http://www.qvc.com/

Top 10 Guidelines for
Homepage Usability
6.
Show examples of real site content
(http://www.msnbc.msn.com/)
7.
Begin link names with the most important keyword
(http://www.radford.edu)
8.
Offer easy access to recent homepage features
9.
Don’t over-format critical content (such as navigation areas) –
users often dismiss graphics as ads and focus on parts of the
homepage that look more likely to be useful
10.
Use meaningful graphics
The Four Most Popular
Variations of a Home Page

The Front Door Approach


http://www.thaifong.ca/
The Banner and Menu Approach

http://www.spirecorp.com/
 http://www.midwestseed.com
 http://www.cabelas.com

The Runner and Main Page or “Frames” Approach


http://www.bonsaietc.com/BEtcSiteSearchEngine_Frame.htm
The “Let us solve your problem” approach

http://www.edmunds.com/