UI Design for the WWW

1
UI Design for the WWW

• Creating Effective Sites and Pages

2
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

3
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????

4
Page/Site 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

• Search promote ease and speed
• Browse without a goal, attractiveness trumps
  efficiency

5
Generate a Topics List
Raw brainstorming of just anything
CCI
awards unique points table of contents index conta
ct information map buildings academic
units graduates alumni research
classes people faculty students administrators equ
ipment directions programs degrees mission undergr
aduates
Put each on index card or post-it note
6
Organize Content
Group items into categories
People Faculty Students
Undergraduates Graduates
Staff Academics Courses
Undergraduate Graduate Degrees ...
Put notecards into piles
7
Current Index on CCI Home Page

• Departments
• Computer Science
• SIS
• Institutes
• Charlotte Visualization Center
• Research Labs
• Bioinformatics
• Information
• Programs
• News
• Events
• Undergraduate Admissions
• Graduate Admissions
• Contacts
• Deans List
• Bioinformatics Intitiative

• Faculty/Staff
• Faculty Listing
• Staff Listing
• Research Areas
• Events
• Event Listing
• Support
• COIT Tech Support
• Search
• Computer Science
• Undergraduate Program
• Masters Program
• Ph.D. Program
• Graduate Certificate
• Software and Info. Systems
• B.A. SIS
• Masters in IT
• Ph.D. in IT

8
CCI Homepage
9
Web SiteUsability Problems

• What problems do YOU have on the web?

10
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

11
Inverse Pyramid Writing Style
James Landy, U Washington
12
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 wont 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
13
Graphic Design

• All the graphic design considerations apply here,
  too
• Consistency
• Visual structure reinforces logical structure
• Color
• Typography

14
Navigation
www.amazon.com

• 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
15
(No Transcript)
16
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

17
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

18
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

19
Home Page Evolution

• Georgia Tech College of Computing

Old home page
Newer home page
Latesthome page
Ancient home page
20
Example evolution
21
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
• Dont use a heading to label search area, use
  search button to right of box
• With stock quotes, give percentage of change
• Dont include active link to homepage on the
  homepage

http//www.useit.com/alertbox/20031110.html
22
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

23
Evaluating Templates - Greeking

• Have people guess what the areas are -
• See www.useit.com/alertbox/980517.html

24
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

25
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 Freds iguana page.
• Say explicitly where link is
• Check out the tax calculator by Money Magazine.

26
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 users questions
• There are other lists for 2005 and others

Jacob Nielson
http//www.useit.com/alertbox/9605.html
27
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 dont stop Things that
look like buttons but arent 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
28
Jeff Johnsons Web Bloopers

• Chapter 1 Content Bloopers
• 1. Home page identity crisis. Home page doesnt
  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-of-date, 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.

29
Jeff Johnsons Web Bloopers

• Chapter 3 Navigation Bloopers
• 15. Site reflects organization chart. Site
  structure reflects organizations 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 doesnt clearly show where user is.
• 20. The circle game Active link to here. Page
  has active link to itself.
• 21. Missing links Its 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 cant 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 isnt. Using standard
  data-input controls for display-only data.
• 30. Mysterious controls. Operation of controls is
  unclear due to poor labeling, poor layout, or
  uniqueness of controls.

30
Jeff Johnsons 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 dont match search criteria.
• 37. Hits sorted uselessly. Sort-order of found
  items doesnt 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.

31
Jeff Johnsons Web Bloopers

• Chapter 7 Link Appearance Bloopers
• 48. Links dont 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? Cant 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 arent.
• 60. Terrible tabs. Navigation tabs dont look and
  act enough like real tabs.

32
Sources
Designing Web Usability, J. Nielsen, New
Riders, 2000. The Non-Designers 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 Designers 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.
33
Sources

• Jakob Nielsens home page, hotlist, recommended
  books
• www.useit.com/jakob/ www.useit.com/hotlist/
  
• www.useit.com/books/
• Web Review Design tips
• webreview.com/wr/pub/
• Web Bloopers (Jeff Johnson)
• http//www.web-bloopers.com/index.php
• Web Techniques magazine
• www.webtechniques.com
• Web design fundamentals
• www.pantos.org/atw/basics.html
• User Interface Engineering
• www.uie.com

34
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/