Transcript design lecture

Design in Web Sites
L. Grewe
1
Design
• Describe the most common types of web site
organization
• Utilize guidelines for web site navigation design
• Apply guidelines for web page design
• Use guidelines for text usage on web pages
• Describe guidelines for using graphics on web
pages
• Utilize guidelines for creating accessible web
pages
• Describe design principles
• Describe web page design techniques
• Apply best practices of web design
2
Why Design?



Tests of time to complete shopping tasks
at several major on-line stores - number
of clicks varied from 8 to 50; high
abandonment rate on poor sites
Jakob Nielsen review of comparative tests
on web sites - average 68% difference in
task completion times
Nielsen finds 135% improvement from
redesign effort
3
Web Design Competing
Concepts
Dueling Concepts
Structure
Design
Scientist
Artist
Organization
Library
Aesthetics
Gallery
4
Site Development Stages
1. Identify objectives, create design plan
2. Generate content
3. Organize content - clusters
4. Transform content to pages with graphic
design
5. Test and iterate
5
Overall Design Is Related
to the Site Purpose
Consider the
target audience
of these sites.
6
Purpose and Design

Business
7
Purpose and Design- Business

IBM
8

Orbitz
Travel
9

Local agent
Travel
10
Purpose and Design- Education

CSUEB
11
Purpose and Design - Educaton

Stanford
12
Design and Purpose Education

iOS, apple
13
Styles change

Amazon Then
14
Goals








• Convey
information/access


employees, shareholders,
customers
colleagues, public
• Sell products
• Advertise/market
service
• Recruit
• Announce, survey
• Nurture communities





Convey image or
impression
• Meet people
• Raise
money/donations
• Entertain an
audience
• Promote myself
• Teach people about
a topic
• Get famous
• Tell a story
15

Concept Summary- Objectives
• What is the purpose/objective or goal of
the site?
• Who is your intended audience?
16
Some Design/ Usability Issues
1.
2.
3.
4.
5.
Navigation
Text content
Graphic design
Structure
Links
17
Web Site
Organization



Hierarchical
Linear
Random (sometimes called Web
Organization)
18
Hierarchical
Organization


Characterized by a
clearly defined home
page with links to
major site sections
Often used for
commercial and
corporate web sites
19
Hierarchical
Too Shallow

Be careful that the organization is not too shallow.
• This provides many choices and could result in a confusing and less
usable web site
• Information Chunking


George A. Miller found that humans can store only five to nine chunks of
information at a time in short-term memory -- the "seven plus or minus
two" principle.
20
Many web designers try not to place more than nine major navigation
links on a page or in a well-defined page area.
Hierarchical
Too Deep

Be careful that the organization
is not too deep.
• This results in many “clicks” needed
to drill down to the needed page.
• User Interface “Three Click Rule”

A web page visitor should be able to
get from any page on your site to
any other page on your site with a
maximum of three hyperlinks.
21
Linear
Organization

Used when the purpose of a site or
series of pages on a site is to
provide a tutorial, tour, or
presentation that needs to be
viewed in a sequential fashion.
22
Random
Organization




Sometimes called
“Web”
Organization
Utilized there is no
clear path through
the site
May be used with
artistic or concept
sites
Generally not used
for commercial
web sites.
23
Web Site Navigation
Best Practices(1)

Make your site easy to navigate
• Provide clearly labeled navigation in the
same location on each page
• Most common – across top or down left
side
• Provide “breadcrumb” navigation

Types of Navigation
• Graphics-based
• Text-based
• Interactive Navigation
Technologies



DHTML
Java Applet
Flash
24
Web Site Navigation
Best Practices(2)

Accessibility Tip
• When graphics, DHTML, a Java
Applet, or Flash is used for the
main navigation of a web site,
provide clear text-based links
on the bottom of each page.
25
Web Site Navigation
Best Practices(3)



Use a Table of Contents (with links to
other parts of the page) for long pages.
Consider breaking long pages in to
multiple shorter pages using Linear
Organization.
Large sites may benefit from a site map
or site search feature
26
Design Principles

Repetition
• Repeat visual elements
throughout design

Contrast
• Add visual excitement and
draw attention

Proximity
• Group related items

Alignment
• Align elements to create
visual unity
27
Web Page Design
Best Practices




Page layout design
Text design
Graphic design
Accessibility considerations
28
Web Page Design Load Time


Watch the load time of your pages
Try to limit web page document and
associated media to under 60K on the home
page
29
Web Page Design
Target Audience

Design for your target audience
• Appropriate reading level of text
• Appropriate use of color
• Appropriate use of animation
30
Web Page Design
Colors & Animation

Use colors and animation that appeal to your
target audience
• Kids

Bright, colorful, tons of animation
• Generation X,Y,Z,etc.

Dark, often low contrast, more subtle animation
• Everyone:



Good contrast between background and text
Easy to read
Avoid animation if it makes the page load too slowly
• Accessibility Tip: Many individuals are unable to
distinguish between certain colors.

See http://www.vischeck.com/showme.shtml
31
Web Page Design
Browser Compatibility



Web pages do NOT look the same in all the
major browsers
Test with current and recent versions of:
• Internet Explorer
• Firefox, Mozilla
• Opera
• Mac versions
Design to look best in one browser and degrade
gracefully (look OK) in others
32
Web Page Design
Screen Resolution

Test at various screen resolutions
• Most widely used: 1024x768 and 800x600

Design to look good at various screen
resolutions
<div align="center">
<table>
....Page content goes here. The table may be given either a
percentage width or an exact width using pixels.
</table>
</div>
33
Web Page Design
Page Layout(1)



Place the most important information
"above the fold"
Use adequate "white" or blank space
Use an interesting page layout
This is usable,
but a little
boring. See the
next slide for
improvements
in page layout.
34
Web Page Design
Page Layout(2)
Bette
Columns
make the
r
page more interesting
and it’s easier to read
this way.
Best
Columns of different widths
interspersed with graphics and
headings create the most
interesting, easy to read page.
35
Page Layout Design
Techniques

Ice Design
• AKA rigid or fixed design
• Fixed-width table usually at left margin

Jello Design
• Page content typically centered and
often configured with a table of
percentage width

Liquid Design
• Page expands to fill the browser at all
resolutions. Often configured with a
table width of 100%
• New Trend: Use CSS to configure liquid
design page layout (see Chapter 10) 36
Questions
1.
List the four basic principles of design.
View the home page of your school and
describe how each principle is applied.
2.
View http://www.walmart.com,
http://www.mugglenet.com/, and
http://www.sesameworkshop.org/sesam
estreet/. Describe the target audience
for each site.
How do their designs differ?
Do the sites meet the needs of their
target audiences?
37
Questions
3. View your favorite web site (or a
URL provided by your instructor).
• Maximize and resize the browser
window.
• Decide whether the site uses ice, jello,
or liquid design.
• Adjust the screen resolution on your
monitor
(Start > Control Panel > Display >
Settings) to a different resolution than
you normally use.
• Does the site look similar or very
different?
• List two recommendations for improving
the design of the site.
38
Text Content


Attention spans are short on the web users want instant gratification, and
reading is 25% slower on screen than on
paper
So…
• People tend to skim web pages, just read
headers, highlights, selected paragraphs

Therefore
• Tune your writing style to this reality

J. Nielsen column on writing for WWW
• www.useit.com/alertbox/9703b.html
39
Text Design
Best Practices



Avoid long blocks of text
Use bullet points
Use short paragraphs
40
INVERSE PYRAMID WRITING STYLE
Inverse Pyramid Writing
This is the short blurb describing
the article
Most important info
This is some nonsensical text This is some nonsensical text This is some nonsensical
text To see how well this thing w This is some nonsensical text This is some nonsensical
text This is some nonsensical text This is some nonsensical text This is some
nonsensical text
Title
Short
Blurbs
To see how well this thing works
This is some
nonsensical text This is some nonsensical
text This is some nonsensical text Does this work at all? I don’t know. I am in love with
XXX To see how well this thingSummaries
works This is some nonsensical text This is some
nonsensical text This is some nonsensical text This is some nonsensical text This is
some nonsensical text Does this work at all? I don’t
Overviews
know. This is some nonsensical text This is some the dog is barking nonsensical text
This is some nonsensical text DoesTeasers
this work at all? I don’t know. What is love? What is
the good life? What is, and is not? That which
.
is, is. The world is all that exists. Nothing unreal
. exists, metaphysics law #1. This is some
the the the the nonsensical text This is some nonsensical text Does this work at all? I
don’t know. This is Is there a god? Are we a. quantum accident? Will we ever know? Are
there questions that should never be asked? What is the nature of goodness? Why are
we so mean to each other? How can we be so cruel to one another?
Less important info
This is some nonsensical text This is some nonsensical text This is some nonsensical
text To see how well this thing works This is some nonsensical text This is some
nonsensical text This is some nonsensical text This is some nonsensical text This is
some nonsensical text
To see how well this thing works
Background Information
Supporting Details
This is some nonsensical text This is some nonsensical text This is some nonsensical
text This is some nonsensical text This is some nonsensical text This is some
Long
Quotes
nonsensical What is good in life,
he asks? That
is a question we may never have an
answer to. is some nonsensical text This is some nonsensical text This is some
41
Journalists Use Inverted Pyramid
from
www.nytimes.com
42
Text Design
“Easy to Read” Text (1)

Use common fonts:
• Arial, Helvetica, Verdana, Times New
Roman



Use appropriate text size: Normal, 12
pt, size=“3”
Use strong contrast between text &
background
Use columns instead of large areas of
horizontal text
43
Text Design
“Easy to Read” Text (2)





Bold text as needed
Avoid “click here”
Hyperlink key words or phrases, not
entire sentences
Separate text with “white space” or
empty space.
Chek yur spellin (Check your spelling)
44
Graphic Design
Best Practices(1)

Be careful with large graphics!
• Remember 60k recommendation


Use the alt attribute to supply
descriptive alternate text
Be sure your message gets across
even if images are not displayed.
• If using images for navigation provide
plain text links at the bottom of the
page.

Use animation only if it make the
page more effective and provide a
text description.
45
Graphic Design
Recommended Practices(2)






Choose colors on the web palette if consistency
across older Windows/Mac platforms is needed
Use anti-aliased text in images
Use only necessary images
Reuse images
Keep images as small as possible
If there are a large number of images, or the page
is dependent on them consider creating a special
46
text-only version of the page.
Designing for Accessibility(1)
Quick Checklist Courtesy of W3C

Images & animations.
• Use the alt attribute to describe
the function of each visual.

Image maps.
• Use the client-side map and text
for hotspots.

Multimedia.
• Provide captioning and transcripts
of audio, and descriptions of
video.
47
Designing for Accessibility(2)
Quick Checklist Courtesy of W3C

Hypertext links.
• Use text that makes sense when read
out of context. For example, avoid "click
here."

Page organization.
• Use headings, lists, and consistent
structure. Use Cascading Style Sheets
for layout and style where possible.

Graphs & charts.
• Summarize or use the longdesc
attribute.
48
Designing for Accessibility(3)
Quick Checklist Courtesy of W3C

Scripts, applets, & plug-ins.
• Provide alternative content in case
active features such as JavaScript,
Java Applets, Flash are
inaccessible or unsupported.

Frames.
• Use the <noframes> element and
meaningful titles.

Tables.
• Make line-by-line reading sensible.
Summarize.
49
Designing for Accessibility(4)
Quick Checklist Courtesy of W3C



Check your work.
Validate.
http://validator.w3.org
Test for Accessiblity
• Use tools, checklist, and
guidelines at
http://www.w3.org/TR/WCAG
50
Best Practices Checklist
Table 7.1 in your Textbook
http://terrymorris.net/bestpra
ctices
•Page Layout
•Browser Compatibility
•Navigation
•Color and Graphics
•Multimedia
•Content Presentation
•Functionality
•Accessibility
51
Questions
1.
2.
3.
View the home page of your school.
Use the Best Practices Checklist
(Table 7.1) to evaluate the page.
Describe the results.
List three best practices of writing text
for the Web. See your text for the rest
of this question.
List three best practices of using
graphics on web pages. View the
home page of your school. Describe
the use of graphic design best
practices on this page.
52
Main Pages/Components




Entry Page (optional)
Home Page
Links
Search / Browse features
53
Entry Page(s)

Often large graphic or animation with
single link to home page
• To lure/entice viewer in
Entry
Page
Content
Pages
Site
Map
FAQ
Home
Page
Credits
Exit
Page
54
Entry Pages




When are they good?
Art/Media site versus a
News/Shopping site
Typically go to a “2nd order” style
site.
Always provide “Skip this
introduction” link to get past.
55
Home Page

Most important page at your site
• Critical for image
• Entices viewer to look at more




Could be a hybrid between an Entry and
2nd order or simply a 2nd order style.
Quick impact, easy navigation
Inportant info “above the fold”
If links are in images, have parallel text
labels near page bottom
56
Home Page Evolution
Georgia Tech College of Computing
Ancient
home page
Old
home page
Current
home page
57
Links

Success of link ->
• can user predict where link will lead
• Differentiation between links
• Useful content at linked page

Link Style:
• Short (use whenever possible)

Products, Home, Blog, Gifts, etc.
• Longer text explanations , possibly part of it
not linked.

Current prices – price for current tax year.
• Avoid – here, back
• Media links – link on thumbnail or title.
58
Link Issues
• Embedded Links - Links set in surrounding
text. They can be harder for user to pick and use.
• Wrapped Links - Confusing - 3 or 4 items??
Janus Twenty
Investment Company
of America
Royce Premier
• Too many on a page can be confusing and
take too long to parse
• Problem with Image links - Don’t change color to indicate
prior traversal
•Within-page links
Can be confusing
Is this the same page or a differnet page?
59
Things to avoid
•All capitals text
•Scrolling horizontally
•Teeny, tiny text size, especially in italics
•Dead links
•Telling the user how to set the browser
•Poor contrast in text-to-background color
•Large typeface (one without impact and contrast)
•Animations that don’t stop
•Things that look like buttons but aren’t
•“Under construction” notices
•Neglecting ALT tags for images
•Not denoting image sizes
•Do-nothing home page
•Changing color for the heck of it
•Lack of mail to/feedback throughout site
•Sites requiring advanced browser or plug in
•Blink tags
60
Jeff Johnson’s (author) Web
Bloopers
Chapter 1 – Content Bloopers
1. Home page identity crisis. Home page
doesn’t clearly identify organization or its
purpose.
2. Confusing classifications. Content categories
seem arbitrary or nonsensical.
3. Unhelpful descriptions. Content descriptions
do not support choosing among items.
4. Conflicting content. Information in different
parts of site disagrees.
5. Outdated content. Content on site is out-ofdate, but not clearly marked as archival.
6. Missing or useless content. Information users
need to accomplish goals is missing.
7. Unfinished content. Blatantly incomplete
areas of site.
Chapter 2 – Task-Support Bloopers
8. Redundant requests. Asking users for the
same data repeatedly.
9. Requiring unneeded data. Making users
provide non-essential information.
10. Pointless choice. Offering or requiring
meaningless choices.
11. Omitting important options. Choice excludes
options some users need.
12. Clueless back-end. Back-end lacks "common
sense" data needed to support user tasks.
13. Dead-end path: Now you tell me! Allowing
users to go down a path towards a goal before
telling them it is unavailable.
14. Agonizing task-flow. Accomplishing tasks
requires many unnecessary, distracting steps.
61
Jeff Johnson’s Web Bloopers
Chapter 3 – Navigation Bloopers
15. Site reflects organization chart. Site structure
reflects organization’s structure or history.
16. Numerous navigation schemes. Many ways
to navigate, but no clear guidance.
17. Deceptive duplicate links. Making users think:
"Do those go to the same place?".
18. Not linking directly. Specific-looking links that
go to generic pages or home pages.
19. Lost in space: Current page not indicated.
Page doesn’t clearly show where user is.
20. The circle game: Active link to here. Page
has active link to itself.
21. Missing links: It’s BACK or nothing. Page
provides no navigation links.
Chapter 4 – Form Bloopers
22. Making people type. Using a text field for a
choice setting.
23. Intolerant data fields. Text field is too picky
about how data must be typed.
24. No defaults. Controls and form fields with no
default value.
25. Faulty defaults. Controls and form fields with
the wrong default value.
26. Compulsory clicking: No default text input
focus. Users can’t just start typing.
27. Lame label placement. Labels mis-aligned
with, or too far from, data fields.
28. Checkboxes or radiobuttons? Checkboxes
misused as radiobuttons, or vice-versa.
29. Looks editable but isn’t. Using standard datainput controls for display-only data.
30. Mysterious controls. Operation of controls is
unclear due to poor labeling, poor layout, or
uniqueness of controls.
62
Jeff Johnson’s Web Bloopers
Chapter 5 – Search Bloopers
31. Baffling search controls. Search options
require knowledge of computer or industryinsider concepts.
32. Dueling search controls. Competing search
boxes on page, with no guidance.
33. Hits look alike. List of found items cannot be
easily distinguished by scanning.
34. Duplicate hits. List of found items contains
duplicates.
35. Search myopia: Missing relevant items.
Items that should be found are not.
36. Needle in a haystack: Piles of irrelevant
hits. Many items don’t match search criteria.
37. Hits sorted uselessly. Sort-order of found
items doesn’t support user tasks.
38. Crazy search behavior. Modifying search
criteria yields unexpected results.
39. Search-terms not shown. Not showing what
search terms produced these results.
40. Number of hits not revealed. Not showing
how many items were found.
Chapter 6 – Text & Writing Bloopers
41. Too much text. Overly-verbose instructions,
messages, or link-labels.
42. Speaking Geek. Computer jargon in error
messages, commands, or instructions.
43. Calling site visitors "user" . Using the
computer jargon term "user" on a website.
44. Insider jargon. Using the vocabulary of
industry experts, rather than that of users.
45. Variable vocabulary: Different words for the
same thing. Inconsistent terms.
46. Inconsistent style. Text on site does not follow
consistent style rules.
47. Typos and grammos: Sloppy writing. Failing
to check and fix text before going live.
63
Jeff Johnson’s Web Bloopers
Chapter 7 – Link Appearance Bloopers
48. Links don’t look like links. Links not marked
well enough, so users miss them.
49. Non-links look like links. Non-link text is
underlined; or non-link graphics look clickable.
50. Bizarre buttons: Click target smaller than it
seems. Entire boxed area surrounding link
label looks like part of button, but only label
accepts clicks.
51. Wrapped links: How many? Multi-line text
links.
52. "Click here": Burying links in text. Important
navigation links embedded in prose.
53. Been there, done that? Can’t tell. Traversed
links not clearly marked.
Chapter 8 – Graphic Design & Layout Bloopers
54. Tiny text. Text typeface too small for many
users to read.
55. Camouflaged text. Text contrasts poorly with
background.
56. Centering everything. Centering prose text,
bullet items, controls, or data fields.
57. Unobtrusive error messages. Error messages
easy to miss due to poor placement.
58. Shades of beige: color differences too
subtle. Relying on small color differences to
convey important meaning.
59. Dead or Alive? Active buttons look inactive.
Buttons appear "grayed out" but aren’t.
60. Terrible tabs. Navigation tabs don’t look and
act enough like real tabs.
64