Transcript Web Design - Personal Web Pages

UI Design for the WWW
Creating Effective Sites and Pages
Why Web Site Design Matters
 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
 see http://www.useit.com/alertbox/20040119.html
Developing a Site
1. Identify objectives
2. Generate content - typically a topics list
3. Logically organize content - clusters
4. Provide structure to clusters
5. Transform content to pages with graphic design
6. Test and iterate
So what else is new????
Page/Site Goals
• Convey information/access • Convey image or impression
employees, shareholders, customers • Meet people
colleagues, public
• Raise money/donations
• Sell products
• Entertain an audience
• Advertise/market service
• Promote myself
• Recruit
• Teach people about a topic
• Announce, survey
• Get famous
• Nurture communities
• Tell a story
•Search: promote ease and speed
•Browse: without a goal, attractiveness trumps efficiency
Generate a Topics List
Raw brainstorming of just anything
CCI:
classes
people
faculty
students
administrators
equipment
directions
programs
degrees
mission
undergraduates
awards
unique points
table of contents
index
contact information
map
buildings
academic units
graduates
alumni
research
Put each on index card or post-it note
Organize Content
Group items into categories
People
Faculty
Students
Undergraduates
Graduates
Staff
Academics
Courses
Undergraduate
Graduate
Degrees
...
Put notecards into piles
Current Index on CCI Home Page

Departments












Programs
News
Events
Undergraduate Admissions
Graduate Admissions
Contacts
Dean’s List
Bioinformatics Intitiative
Faculty/Staff

Computer Science
SIS
Institutes

Charlotte Visualization Center

…
Research Labs

Bioinformatics

…
Information





Events


Faculty Listing
Staff Listing
Research Areas
Event Listing
Support

COIT Tech Support

Search

Computer Science





Undergraduate Program
Master’s Program
Ph.D. Program
Graduate Certificate
Software and Info. Systems





B.A. SIS
Master’s in IT
Ph.D. in IT
Certificate Programs
Research Projects
CCI Homepage
Web Site
Usability Problems

What problems do YOU have on the web?…
1.
2.
3.
…
…
…
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
 Tune your writing style to this reality
 J. Nielsen column on writing for WWW
 http://www.useit.com/alertbox/9710a.html
 www.useit.com/alertbox/9703b.html

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 thing
works This is some nonsensical text This is some
Summaries
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
Quotes
nonsensical What is good inLong
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
James Landy,
U Washington
Inverted Pyramid
 Start with a good concise title
Reflect the content
Continue with the most important points
 Use hypertext to split-up information
 People often won’t scroll or read
Use less text
 50% less than you would offline
Use a simple writing style
 Simple sentences -- no hype or advertising
Use EMBEDDED LINKS to help visitors find more
information
Use bullets and numbered lists
 Supports skimming






James Landy,
U Washington
Graphic Design
 All the graphic design considerations apply
here, too




Consistency
Visual structure reinforces logical structure
Color
Typography
www.amazon.com
Navigation
 Often most critical, and weakest
part
 Give user understanding of
information space structure



Table of Contents (Site Map)
Search, Index, Breadcrumbs
Navigation bar - tabs or similar
www.washingtonpost.com
Structure
 Connectivity - distance between page pairs,




averaged over all pairs
Branching factor - how many out-links
Long scrollable pages vs linked shorter pages
Number of links (clicks) to get to a goal page major cause of users abandoning a site
Search can lead directory to any page

Always include link to home page
Home Page
 Most important page at your site
 Critical for image
 Entices viewer to look at more
 Give viewer a good idea of what can be found at the




site
Make sure vital content is “above the fold”
Place real content on home page
How much graphics do you use?
If links are in images, have parallel text labels near
page bottom
Home Page Design Has Evolved
 From graphics-rich with few links – mostly to
top-level pages of major subsections
 To link-rich pages that give access to real
content in one click, plus have some content
Home Page Evolution
Georgia Tech College of Computing
Ancient
home page
Old
home page
Newer
home page
Latest
home page
Example evolution
Most Violated Homepage Guidelines










Emphasize what your site offers of value
Use a liquid layout
Use color to distinguish visited and unvisited links
Use graphics to show real content
Include a tag line to summarize what the company
does
Make it easy to access anything recently featured on
your homepage
Include short site description in the window title
Don’t use a heading to label search area, use search
button to right of box
With stock quotes, give percentage of change
Don’t include active link to homepage on the
homepage
http://www.useit.com/alertbox/20031110.html
Structure of Pages - Templates
 Layout consistency important
 Graphics, banners, grid, breadcrumbs,
navigation aids, search box
 Design just once, use for all pages
 Design tools support this - Dreamweaver etc
Evaluating Templates - “Greeking”
 Have people guess what the areas are  See: www.useit.com/alertbox/980517.html
Links
 Success of link depends on



How well user can predict where link will lead
How well user can differentiate one link from
other nearby ones
Useful content at other end of link
Link Wording
 Beware the famous “here”
Click here to learn about my BMW Z3
vs.
I drive fast in my BMW Z3
 When a link will take someone a good distance, use
word “jump”
For more on iguanas, jump to Fred’s iguana page.
 Say explicitly where link is
 Check out the tax calculator by Money Magazine.
Top Ten Web Design Mistakes










Bad Search
PDF Files for Online Reading
Not Changing Color of Visited Links
Non-Scannable Text
Fixed Font Size
Page Titles with low search engine visibility
Anything that looks like an ad
Violating design conventions
Opening new browser windows
Not answering user’s questions
 There are other lists for 2005 and others
Jacob Nielson
http://www.useit.com/alertbox/9605.html
Bad Design Bugaboos
All capitals text
Scrolling sideways
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
Jeff Johnson’s 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.
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.
Jeff Johnson’s Web Bloopers
Chapter 5 – Search Bloopers
31. Baffling search controls. Search options require
knowledge of computer or industry-insider
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.
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.
Sources
• Designing Web Usability, J. Nielsen, New Riders, 2000.
• The Non-Designer’s Web Book, R. Williams and J. Tollett, Peachpit
Press, 1998.
• Web Style Guide, P. Lynch and S. Horton, Yale Univ. Press, 1999.
• Creating Killer Web Sites, 2nd edition, D. Siegel, Hayden Books, 1997.
• Web Site Usability: A Designer’s Guide, User Interface Engineering,
North Andover, MA, 1997.
• Web by Design, The Complete Guide, M. Holzschlag, Sybex, 1998.
• Web Concept & Design, C. Waters, New Riders, 1996.
• Hot Wired Style, Principles for Building Smart Web Sites, J. Veen,
Wired Books, 1997.
• The Web Design Wow! Book, J. Davis and S. Merritt, Peachpit Press, 1998.
• How to Set Up and Maintain a Web Site, L. Stein, Addison Wesley
1997.
Sources

Jakob Nielsen’s home page, hotlist, recommended books



www.webtechniques.com
Web design fundamentals


http://www.web-bloopers.com/index.php
Web Techniques magazine


webreview.com/wr/pub/
Web Bloopers (Jeff Johnson)


www.useit.com/hotlist/
Web Review Design tips


www.useit.com/jakob/
www.useit.com/books/
www.pantos.org/atw/basics.html
User Interface Engineering
 www.uie.com
Good/Bad Sites
Good
Creating Killer Web Sites
www.killersites.com
Project Cool site of the day
www.projectcool.com
Bad
Web pages that suck
http://www.webpagesthatsuck.com/