LIS650 lecture 3 Web site design

1
LIS650 lecture 3Web site design

• Thomas Krichel
• 2005-10-08

2
Jakob Nielsen

• The self-styled King of Usability.
• He has a web site at http//www.useit.com
• This is recommended reading.
• His book, which we discuss here, is expensive and
  long-winded. For your purposes, stay with the web
  site. Use the web site, and these class notes to
  prepare the web page assessment.
• Use your brain too.
• Nielsen is very conservative. So am I.

3
his 1996 top 10 mistake list

• Using Frames
• Gratuitous Use of Bleeding-Edge Technology
• Scrolling Text, Marquees, Constantly Running
  Animations
• Complex URL
• Orphan Pages
• Long Scrolling Pages
• Lack of Navigation Support
• Non-Standard Link Colors
• Outdated Information
• Overly Long Download Times

4
same list of 1999

• Breaking or Slowing Down the Back Button
• Opening New Browser Windows
• Non-Standard Use of GUI Widgets
• Lack of Biographies
• Lack of Archives
• Moving Pages to New URLs
• Headlines That Make No Sense Out of Context
• Jumping at the Latest Internet Buzzword
• Slow Server Response Times
• Anything That Looks Like Advertising

5
same list 2002

• No Prices
• Inflexible Search Engines
• Horizontal Scrolling
• Fixed Font Size
• Blocks of Text
• JavaScript in Links
• Infrequently Asked Questions in FAQ
• Collecting Email Addresses Without a Privacy
  Policy
• URL gt 75 Characters
• Mailto Links in Unexpected Locations

6
same list 2003

• Unclear Statement of Purpose
• New URLs for Archived Content
• Undated Content
• Small Thumbnail Images of Big, Detailed Photos
• Overly detailed ALT Text
• No "What-If" Support
• Long Lists that Can't Be Winnowed by Attributes
• Products Sorted Only by Brand
• Overly Restrictive Form Entry
• Pages That Link to Themselves

7
same list in 2005

• In 2005, rather than coming up with a new list,
  Nielsen asked the readers of his newsletter to
  appoint top problem.
• Rather than finding new problems, he discovered
  that the old problems still dominate.
• I will go through that list in some more detail
  here.

8
legibility problems

• Users can help overcome these in firefox
• Frozen font sizes
• Small font sizes
• But they cant overcome
• Text embedded into graphics
• Lack of contrast between foreground and
  background.

9
non-standard links

• It needs to be obvious what is a link.
• Visited links and non-visited links need to
  contrast visually.
• Avoid javascript in links, especially opening new
  browser windows, except when dealing with PDF
  files maybe.

10
flash

• most of flash use is bad.
• flash is a proprietary software that allows for
  conventional graphical user interface application
  on the web, such as
• mainly used for splash screens, something that
  users hate.
• flash should not be used to jazz up the contents
  either, most users equate animated contents with
  useless contents.

11
contents not written for the web

• writing for the web, the contents should be
• short
• scannable
• to the point as opposed to marketese
• answer users questions (you have to anticipate
  them)
• use common terms rather than made-up words. this
  also improves search-engine visibility.

12
bad search

• this is more difficult to get right.
• search allows users to control their destiny
• search is an escape hatch for the user, if they
  are stuck
• search needs to be in a box in pages, not in a
  link
• users dont like to repeat searches and dont
  make sophisticated searches.
• average query length is two words
• advanced searches are almost used wrongly
• scoped searches may work.
• users almost never look beyond the first results
  page.

13
browser incompatibility

• for a while this seemed a dead subject with most
  folks using Internet Explorer.
• But with Firefox and Opera, the market is opening
  up again.
• The best way to avoid browser incompatibility is
  to use only standard-compliant HTML and keep use
  of CSS to a minimum.

14
cumbersome forms

• Forms tend to have too many questions.
• You can support the auto-fill that browsers now
  support by using common field names.
• Flexible input formats are better. Say I may want
  to type in my phone number with or without the 1,
  with or without spaces etc. Watch out for
  international users.

15
no contact or company info

• There needs to be information about a company
  other than its phone number or email address.
  People still want to know where a company is
  physically located.
• This data should be prominently linked to.

16
the last two

• (really just to mention for completeness)
• Frozen layouts with fixed page width
• Inadequate photo enlargement, where the enlarged
  photo is as big as the original

17
top ten guidelines for the homepage

• Include a One-Sentence Tagline
• Write a Window Title with Good Visibility in
  Search Engines and Bookmark Lists
• Group all Corporate Information in One Distinct
  Area
• Emphasize the Site's Top High-Priority Tasks
• Include a Search Input Box
• Show Examples of Real Site Content
• Begin Link Names with the Most Important Keyword
• Offer Easy Access to Recent Homepage Features
• Don't Over-Format Critical Content, Such as
  Navigation Areas
• Use Meaningful Graphics

18
Nielson's book

• page design 1697
• content design 98160
• site design 162259
• intranet design 260293
• accessibility 296311
• i18n 312344
• future predictions 346376
• conclusions 378396

19
screen real estate

• on a screen that displays a web page, as much as
  possible should be the contents of the page.
• Ideally the contents should occupy more than 50
  of the screen. Most often it does not.
• Some white space is almost inevitable
• Cut navigation to below 20 of screen
• When examining a page for usability, remove
  features by trial and error. If the page is still
  usable without the feature, remove it. Simplicity
  wins over complexity.

20
cross-platform design

• Unlike traditional GUI systems, the web offers
  very little to control the designer
• Users could come right into the middle of the
  site from a search engine.
• Users could use a variety of devices, e.g. web
  browser for car drivers
• Most pages only look good on an 17in monitor with
  at least 1024768 pixels. It should not be that
  way.
• WYSIWYG is dead!
• Separate contents from presentation, use style
  sheets.

21
resolution independent design

• Never use fixed width in pixels except perhaps
  for thin stripes and lines
• Make sure that design looks good with small and
  large fonts in the browser.
• Graphics must work at 100dpi and better.
• Text in graphics to be avoided.
• Provide a print version for long documents.

22
be conservative

• Avoid non-standard HTML code.
• Take account of installation inertia. Figures for
  1998/1999 show 1 of browsers updated a week.
• Only use technology that is at least 1 year old,
  if not at 2 years old. Let other make the errors
  that come with trial.

23
semantics versus presentation

• The original HTML tags were all based on
  semantics. For example lth2gt is a second level
  heading.
• Semantic encoding was lost with the "extensions"
  invented by the browser vendors.
• There will be a wide variety of browser in the
  future. It is already impossible to test pages on
  all user agents.
• Style sheets already make it possible to style
  the page according to the "media" used by the
  user agent.

24
watch response times

• Users loath waiting for downloads.
• Classic research by Mille in 1968 found
• delay below 0.1 second means instantaneous
  reaction to the user
• 1 second is the limit for the user's train of
  thought not to be disrupted
• 10 seconds is the limit to keep the user
  interested, otherwise they will start a parallel
  task
• low variability of responses is also important
  but the web is notoriously poor for this.

25
factors affecting speed

• The user's perceived speed depends on the weakest
  of the following
• the throughput of the server
• the server's connection to the Internet
• the speed of the Internet
• the user's connection to the Internet
• the rendering speed of the computer

26
making speedy pages

• keep page sizes small
• reduce use of graphics
• use multimedia only when it adds to the user's
  understanding
• use the same image several times on the site
• make sure that the / appear at the end of the URL
  for directories. http//openlib.org/home/krichel/
  downloads faster than http//openlib.org/home/kric
  hel

27
know your limits

• 1 second implies maximum pages size of 2KB on a
  modem, 8 KB on ISDN, and 100 KB on a T1. 10
  seconds implies maximum size of 34KB on a modem,
  150KB on an ISDN and 2MB on T1, Nielsen writes.
• I doubt these numbers.
• It would be good to find an update on these
  numbers.

28
Web site usability

• This is supposed to be a big topic in the LIS
  community.
• There are a lot of articles about using
  individual web sites, but there is little
  scientific material out there related to actual
  design.
• But it really comes down to common sense.
• There is no absolute right/wrong.

29
get some meaning out fast

• What matters most is the time until the user sees
  something that makes sense. The time for the full
  page to be available matters less. therefore
• top of the page should be meaningful without
  images having been downloaded
• use meaningful "alt" attribute for images
• use "width" and "height" attribute so that the
  user agent can build the page quickly
• cut down on table complexity. top table should be
  particularly easy.

30
Nielsen on style sheets

• "one of the greatest hopes for recapturing the
  Web's ideal of separation of presentation and
  contents".
• That why this course studies them extensively!
• Use a single style sheet for your site.
• Always use external style sheets.
• organizational benefits maximized
• faster loading
• Make sure your site still looks reasonable in
  your browser when you turn CSS off and reload the
  page

31
Don't go crazy with CSS

• More than two font families (plus perhaps one for
  computer code) and your page starts looking like
  a ransom note.
• Gimmicky looking sites will hurt the credibility
  of you site.
• No absolute font sizes.
• If you have multiple style sheets, use the same
  HTML class tags in both.

32
Nielsen on Frames

• He writes "Frames Just Say No"
• He then has a few pages where he thinks about why
  in exceptional circumstances frames may be ok.
• We have not discussed frame in this course at all
  and just mention them here.

33
more on scannability

• structure pages with 2 or 3 levels of headings
• you may want to highlight keywords in some way,
  but not in any way that they could be confused
  with hyperlinks. Put the keywords in a ltspan
  class"keyword"gt lt/spangt
• use meaningful, rather than cute headings.
• use one idea per paragraph
• almost no humor
• no metaphors
• no puns

34
page chunking

• Just simply splitting a long article by into
  different parts for linear reading is not good.
• Devise a strategy of front pages with the
  important information and back pages linked from
  the front pages with the detail.
• Base the distinction of important and not
  important stuff on audience analysis.

35
users rarely scroll

• early studies showed 10 of users would scroll.
• on navigational pages, users will tend to click
  something they see in the top portion.
• scrolling navigational pages are bad because
  users can not see all the options at the same
  time.
• the length of "destination" pages for users
  interested in details is less of a problem.

36
page lttitlegt

• needs to be cleverly chosen to summarize the page
  in a contents of a web search engine, esp.
• between 40 to 60 chars long
• different pages in a site should each have their
  own title.
• No
• welcome
• "a" "the" etc..

37
headline design

• Explain clearly what the page is about
• Use plain language
• Skip leading articles ("A", "the"..) in email
  subjects and page titles
• Make the first word the most important one
• Do not start all pages with the same word.

38
legibility

• Use high color contrast.
• Use plain or very subtle background images.
• Make the text stand still
• no zooming
• no blinking
• no moving
• Left-align almost always
• No all uppercase, it reads 10 slower.

39
rules for online documentation (if you must have
some)

• It is essential to make it searchable
• Have an abundance of examples
• Instructions should be task-oriented
• Nevertheless, you may have to provide a
  conceptual introduction to the system
• Hyperlink to a glossary

40
multimedia

• Since such files are long, they should have an
  indication of their size
• Write a summary of what happens in the multimedia
  document
• For a video, provide a couple of still images.
  This will give people
• quick visual scan of the contents of the
  multimedia
• an impression of the quality of the image

41
pictures

• Have a picture on a bio page
• No gratuitous images
• More pictures on background pages, that are
  reached by users with in-depth interest.
• Never have a picture look like an advertising
  banner.
• Maybe not have as many pictures of yourself on
  your site as Jakob Nielsen has.

42
animation

• Animal instinct draws human attention to moving
  things
• A spinning logo is a killer for reading, if you
  have it, have it spin only a few times
• No scrolling marquees!

43
animation may be good for

• Showing continuity in transition
• Indication dimensionality in transaction
• Illustrating change over time
• Multiplexing the display
• Enriching graphical representation
• Visualizing three dimensional structures
• Attracting attention
• but we will not discuss this as it is out of
  scope for the course

44
streaming video

• limited by available bandwidth
• could be used for
• promoting television shows, films etc
• give user impression of a speaker's personality
  (if any)
• demonstrate things that move
• good for demo of physical products
• less good for demos of software
• watch out for narration quality

45
downloadable video

• probably better than streaming
• breaks the interactive mode of use on the web
• should be limited in length, say lt 1 minute
• big topics should be broken down on a web page
  into smaller ones, each having its own video.

46
audio

• probably a better way to convey a speaker's
  personality
• can teach the pronunciation of words
• can enhance the user experience, a classic study
  had users claiming that the graphics were better
  on a video game that had better sound but the
  same graphics than another.

47
3D graphics

• has a range of problems
• man is not made for 3D watching
• screen is not made for rendering 3D
• interaction tools such as mouse have not been
  made for 3D
• poor screen resolution
• requires plug-ins
• therefore it should not be used unless absolutely
  necessary.

48
Nielsen on site design

• This is the longest of the chapters in his book.
• It is about the organization of sites.
• But the chapter itself is badly organized. It
  looks like a Jackson Pollock painting and reads
  like a bad student essay
• no structure
• things repeated from before

49
Nielsen on site design

• Usually there is more attention on pages design
  than on site design. Presumably because the page
  design is visual.
• But site design is more important.
• Study found that only 42 of users could find
  simple answers to questions on a web site.

50
the home page

• has to be designed differently than other pages.
• must answer the questions
• where am I?
• what does this site do?
• need a directory of main area
• needs a summary of the site purpose
• a principal search feature may be included,
  otherwise a link to a search page will do
• you may want to put news, but not prominently

51
the home page

• make the home pages a splash screen is not a good
  idea
• the name of the site should be very prominent,
  more so than on interior pages, where it should
  also be named
• There should be a link to the homepage from all
  interior pages, maybe in the logo.
• The less famous a site, the more it has to have
  information about the site on interior pages.
• Users should not be "forced" to go through the
  home page.

52
metaphor

• (why does he talk about this here?)
• it is usually not a good idea to have metaphor on
  the home page.
• a notable exception the shopping cart
• has become a standard feature
• but still illustrates some limits of metaphors
• when you want to buy multiple items of the same
  kind
• when you want to move something out of the cart

53
why navigation?

• Navigation should address three questions
• where am I?
• relative to the whole web
• relative to the site
• the former dominates, as users only click through
  4 to 5 pages on a site
• where have I been?
• but this is mainly the job of the browser esp. if
  links colors are not tempered with
• where can I go?
• this is a matter for site structure

54
site structure

• to visualize it, you have to have it first. Poor
  information architecture will lead to bad
  usability.
• Some sites have a linear structure,
• but most sites are hierarchically organized.
• What ever the structure, it has to reflect the
  users' tasks, not the company structure.

55
Nielsen's example company

• A corporate site may be divided into
• product information
• product families
• individual products
• employment information --investor information
• Now consider a page with configuration and
  pricing for SuperWidgets. It may belong to
• company's web site -- Widgets products
• products category -- SuperWidgets
• pricing and configuration
• Nielsen says show all five levels of navigation.
  Have links to WidgetsClassic and MiniWidgets on
  the SuperWidgets page.

56
breath vs depth in navigation

• some sites list all the top categories on the
  left or top
• users are reminded of all that the site has to
  offer
• stripe can brand a site through a distinctive
  look
• an alternative is to list the hierarchical path
  to the position that the user is in, through the
  use of breadcrumbs
• can be done as a one liner
• combining both
• takes up a lot of space -- can be done as an L
  shape
• recommended for large sites (10k pages) with
  heterogeneous contents

57
large volumes of information

• most user interfaces on the web are clones of the
  design of the Mac in 1984. They are not designed
  to handle vast amounts of information. Nielsen
  does not say why.
• Historically, early web pages had long lists of
  links
• Nowadays, there is more selective linking
• Users want site maps but they don't seem to be
  much help.

58
reducing navigational clutter

• aggregation shows that a single piece of data is
  part of a whole
• summarization represents large amounts of data by
  a smaller amount
• filtering is throwing out information that we
  don't need
• truncation is having a "more" link on a page
• example-based presentation is just having a few
  examples

59
subsites

• most sites are too large for the page belonging
  to them adding much information.
• therefore subsites can add structure
• a subsite is a bunch of pages with common
  appearance and navigational structure, with one
  page as the home page.
• each page in the subsite should point to the
  subsite home page as well as to global homepage
• should combine global and local navigation

60
search and link behavior

• Nielson says that his studies show that slightly
  more than 50 of users are search-dominant, they
  go straight to the search.
• One in five users is link-dominant. They will
  only use the search after extensive looking
  around the site through links
• The rest have mixed behavior. They will make up
  their mind depending on the task and the look of
  the site.

61
search

• site search should be on all pages
• in general it is not a good idea to scope the
  search to the subsite that you are on
• users don't understand the site structure
• users don't understand the scope of the search
• if you have a scoped search
• state the scope in query and results page
• include link to the search of the whole site, in
  query and results page "not found? try to
  ltagtsearch entire sitelt/agt"

62
Boolean searches

• they should be avoided because nobody understands
  them.
• Example task.
• "you have the following pets
• cats
• dogs
• find information about your pet"
• users search "cats and dogs" and find nothing.
• geeks or librarians among users will then say
  "oh, I should have used OR".

63
help the user search

• Nielsen says that computers are good at
  remembering synonyms, checking spelling etc, so
  they should evaluate the query and make
  suggestions on how to improve it.
• but I am not aware of systems that do this "out
  of the box".
• use a wide box. Information retrieval research
  has shown that users tend to enter more words in
  a wider box.

64
the results page

• computed relevance scores are useless for the
  user
• URLs pointing to the same page should be
  consolidated
• search should use quality evaluation. say, if the
  query matches the FAQ, the FAQ should give higher
  ranking.
• he has other suggestions that are either
  unrealistic or would be part of serious
  information retrieval research

65
metadata

• Nielsen thinks that metadata should be used
  because humans are better at saying what the page
  is about than machines.
• He recommends writing into the "name" attribute
  of ltmetagt with the value 'description'
• He also says you should add keywords, with your
  own keywords and those of your competitors.
• He mentions no engine that uses these

66
search destination design

• when the user follows a link from search to a
  page, the page should be presented in context of
  the user's search
• the most common way is to highlight all the
  occurrences of the search terms.
• This helps scanning the destination page.
• Helps understanding why the user reached this
  result.
• but will be no good if the term is in the
  metadata

67
URL design

• URLs should not be part of design, but in
  practice, they are.
• Leave out the "http//" when referring to your
  web page.
• You need a good domain name that is easy to
  remember.

68
understandable URLs

• Users rely on reading URLs when getting an idea
  about where they are on the web site.
• all directory names must be human-readable
• they must be words or compound words
• site must support URL butchering where users
  remove the trailing part after a slash
• make URLs as short as possible
• use lowercase letters throughout
• avoid special chars i.e. anything but letters or
  digits
• stick to one visual word separator, i.e. either
  hyphen or underscore

69
archival URL

• After search engines and email recommendations,
  links are the third most common way for people to
  come across a web site.
• Incoming links must not be discouraged by
  changing site structures

70
dealing with yesterday current contents

• Sometimes it is necessary to have two URLs for
  the same contents
• "todays_news"
• "feature_2004-09-12"
• some may wish to link to the former, others
  to the latter
• In this case you should advertise the URL at
  which the contents is archived (immediately) an
  hope that link providers will link to it there.
• You can put a note on the bottom of the page, or
  possibly use a simple convention if it is very
  easy to guess.

71
supporting old URLs

• Old URLs should be kept alive for as long as
  possible.
• Best way to deal with them is to set up a http
  redirect 301
• good browsers will update bookmarks
• search engines will delete old URLs
• There is also a 302 temporary redirect.

72
refresh header

• ltheadgtltmeta http-equiv"refresh" content"0
• urlnew_url"gt lt/headgt
• This method has a bad reputation because it is
  used by search engine spammers. They create pages
  with useful keywords, and then the user is
  redirect to a page with spam contents.

73
.htaccess

• If you use Apache, you can create a file
  .htaccess (note the dot!) with a line
• redirect 301 old_url new_url
• old_url must be a relative path from the top of
  your site
• new_url can be any URL, even outside your site
• This works on wotan by virtue of configuration
  set for apache for your home directory. Examples
• redirect 301 /krichel http//openlib.org/home/kri
  chel
• redirect 301 Cantcook.jpg http//www.foodtv.com

74
http//openlib.org/home/krichel

• Please shutdown the computers when
• you are done.
• Thank you for your attention!