Week 11: Site Design and Navigation

1
April 1, 2008

• Week 11 Site Design and Navigation

Margaret Kipp margaret.kipp_at_gmail.com http//myweb
.liu.edu/mkipp/
2
Basic Site Design

• Site design is more difficult than contents or
  page design.
• Site design depends more heavily on the intended
  audience of the site
• e.g. a good corporate web site would probably be
  boring for children
• Because it is so audience dependent it is
  extremely important to get it right
• ... and very difficult

3
Site Structure

• This is known as information architecture
• Some sites have a linear structure, but most are
  hierarchically arranged
• One job of information architects is the design
  of taxonomies (hierarchies of categories) for
  websites
• The site should reflect how the user will want to
  use it, not the structure of the organisation
  creating the website.

4
Information Architecture

• Involves a number of different issues
• development of taxonomies to help users navigate
  a site
• design, organisation and layout of the page to
  make it easier to use and more aesthetically
  pleasing
• usability testing to ensure that the page really
  is easy to use
• many IAs are librarians, graphic designers and
  usability testers

5
A Few Rules for Site Navigation and Organisation

• A good taxonomy should lead the user quickly
  towards their chosen task or information
• Suggestions
• not more than four levels of depth
• 72 rule for the elements in each hierarchy (i.e.
  no more than 5-9 elements)?
• in any case, choices should be as unambiguous as
  possible

6
The Home Page

• The front page of the website
• it should
• point users to other parts of the site
• explain the purpose of the site
• explain why someone would want to use the site
• Generally requires a slightly different design
  from other pages.

7
The Home Page versus Other Pages

• Every page should link back the home page, a good
  way to do this is via a logo
• Every page should have a unique title, but
  reference the company or organisation name so it
  is obvious this is still the same site
• Users need to be able to access the main
  navigation information from all pages of the
  site, often search engines do not direct users to
  the home page

8
Using CSS for Site Layout and Design

• CSS allows you to choose text, colour and font
  styles for your site
• You can also use CSS to layout and arrange the
  items on your site
• You could do some of this with HTML tags but
  these are mainly deprecated by the W3C

9
Navigating Web Sites

• People are usually trying to find something.
• Navigating the web is more difficult than
  navigating in a store (or at least not any
  easier)?
• no sense of scale
• no sense of direction
• no sense of location

10
Purpose of Navigation

• Navigation can
• give users a sense of location
• tell users what is available
• explain how to use the site
• increase the credibility of the site
• allow users who have entered somewhere other than
  the homepage to navigate to the homepage or other
  pages

11
Purpose of Navigation 2

• Navigation should address three questions
• where am I?
• relative to the whole web
• relative to the site
• where have I been?
• this is indicated by different coloured links for
  visited versus not visited links (this can be
  modified using CSS, but should be distinct)?
• where can I go?
• navigation options show where you can go

12
Navigation Elements

• Site ID / logo linking to home page
• common way to provide a link back to the home
  page on all pages, also provides a visual link to
  all sites
• Categories of items
• Utilities
• link to home page if no logo
• link to search page
• separate instructions sheet
• the current item should be indicated to make it
  stand out

13
Navigational Elements 2

• Which pages should have navigation?
• home page should have links to major categories
• site map should link to all pages
• normal pages should show links to previous page
  and related categoriesat least and home page
• Should any pages not have navigation?
• search page? (navigation might still be useful on
  a search page)?
• instruction pages?

14
Breath vs Depth in Navigation

• Broad navigations would list as many categories
  as possible with less regard for hierarchies
• Deep navigation would use a limited number of
  categories and try to organise everything
  hierarchically so users would never be confronted
  by too many categories at once

15
Top Level Categories

• Many sites list all top level categories on the
  right side
• Users are reminded of all the site has to offer
• Stripe can brand a site through a distinctive
  look
• Other sites have the top level categories along
  the top
• this gives users a clear view of where they are

16
Top Level Categories 2

• Some sites combine navigation across the top and
  side
• top list provides a view of where the user is in
  the categories
• side list provides a view of the major categories
  at this level

17
Top Level Categories 3

• Example
• Books
• Electronics
• Clothes
• Groceries
• Toys

Site Content
18
Top Level Categories 4

• This could be coded as a list or simply be
  separated by breaks ltbr/gtltbr/gt
• ltulgt
• ltli style"color red"gtBookslt/ligt
• ltligtElectronicslt/ligt
• ltligtClotheslt/ligt
• ltligtGrocerieslt/ligt
• ltligtToyslt/ligt
• lt/ulgt

19
Navigation Through Breadcrumbs

• Breadcrumbs a list of categories in hierarchical
  order from broadest to narrowest
• these categories form a path from the broadest
  category to the narrowest
• It can be done as a one liner "Books gt Science gt
  Physics gt System Theory"

20
Breadcrumbs 2

• Breadcrumbs
• Books gt Science gt Physics gt System Theory
• XHTML Code
• lta href"index.html"gtBookslt/agt gt lta
  href"science.html"gtSciencelt/agt gt lta
  href"physics.html"gtPhysicslt/agt gt lta
  href"systemtheory.html"gtSystem Theorylt/agt

21
Combined Navigation

• Example
• Books gt Science gt Physics gt Astronomy
• Physics
• Acoustics Sound
• Applied Physics
• Astronomy
• Biophysics
• Chaos Systems (etc.)?

22
Navigation Through Tabs

• Amazon.ca and other commercial sites have them
  (http//www.amazon.ca/)?
• Nielsen does not think that Amazon is an example
  worth following as far as e-commerce sites go
• many sites find tabs to be useful as they give
  users a visual indicate of what upper level
  category they are working in

23
Navigation Through Pulldown Menus

• These are mostly done with javascript
• In principle this is a good idea since it matches
  the structure of most computer software
• There are problems with inconsistent
  implementation in Javascript and javascript is
  not universally supported

24
Organising Navigation to Reduce Clutter

• Techniques for organising data
• Categorisation
• Aggregation cluster items together into groups
• Summarization limited number of categories
• Filtering limit the information provided,
  generally show only upper level categories and
  popular destinations
• Truncation show the first few categories and a
  link to see "more"
• Example-based presentation show examples of
  categories

25
Subsites

• A subsite is a page devoted to a category of the
  website, e.g. Amazon has subsites for books,
  electronics, toys, etc.
• A subsite is a bunch of pages with common
  appearance and navigational structure on a
  specific topic
• Each page in the subsite should point to the
  subsite home page as well as to global homepage
• Subsites should combine global and local
  navigation

26
FAQ Pages

• FAQ Frequently Asked Questions
• FAQ pages can be extremely useful to users who
  are seeking the answer to questions about a site
• e.g. how do I renew my boating license?
• how do I apply for a passport?
• unfortunately some FAQs are actually a list of
  questions the site owners wish people would ask

27
Search and Link Behaviour

• Searching behaviour
• Slightly more than 50 of users are
  search-dominant, they go straight to search and
  use categories only to refine the search.
• One in five users is link-dominant. They will
  search only after exhausting the categories.
• The rest have mixed behaviour. (Nielson 2002)?
• Many users actually just type the site name into
  Google to find it and do not bother bookmarking

28
Search and Links 2

• Search is used by some users as a first choice
  for locating items, by others as a last choice
  after failing to find items
• The average query length is two words (this used
  to be one!)?
• Users rarely look beyond the first result screen
• Users rarely use advanced search and often are
  not aware that it exists

29
Search and Links 3

• Google search has some nice features which would
  be useful for users and Google can be set up to
  search a specific site (http//www.google.com/coop
  /cse/)?
• perhaps the most useful feature is the term
  suggestions when searching, this is helpful for
  correcting spelling errors or showing users
  alternate spellings of terms

30
Search and Links 4

• users often use only 2 words for a query, this
  may or may not be sufficient
• Information retrieval research has shown that
  users tend to enter more words in a wider box
• search links should have a wider box

31
Results Pages

• search results should be sorted so the user sees
  the most relevant page first (for example,
  answers from the FAQ should take precedence, as
  should pages that match the keywords perfectly)?
• URLs pointing to the same page should be
  consolidated

32
Results Pages 2

• It is useful to show the user their search terms
  on the new page
• Google does this by highlighting the search terms
• This helps the user to quickly locate relevant
  results
• and helps in understanding why the user reached
  this result

33
Designing URLs

• In practice, URL design is a big part of site
  design and navigation
• it is also an important part of site maintenance
• URLs are the unique identifier for a page, this
  is also what users will bookmark if they find the
  page useful

34
Designing URLs 2

• URLs can help a user see where they are on your
  site
• all directory names must be human-readable
• they must be words or compound words
• A site should allow users to remove the final
  page name, this should allow the user to reach
  the subsite page for this category or your
  homepage

35
Designing URLs 3

• URLs should be as short as possible (this means
  short page names)?
• Use lowercase letters throughout and avoid
  special characters
• Stick to one visual word separator (hyphen or
  underscore, spaces can cause problems)?
• try not to change URLs, this causes dead links

36
Archival URLs

• After search engines and email recommendations,
  links are the third most common way for people to
  come across a web site.
• URLs can change though, making it more difficult
  to find a site
• some sites attempt to create "archival" URLs that
  will remain constant even after the page has
  stopped being front page news

37
Archival URLs 2

• Sometimes it is necessary to have two URLs for
  the same contents
• todays_news
• feature_article_2008_04_01
• Todays news would be a transitory link existing
  only for that day
• the second link would be the archival link with a
  unique title

38
Archival URLs 3

• Old URLs should be kept alive for as long as
  possible.
• Best way to deal with them is to set up an http
  redirect 301 or a temporary redirect 302
• good browsers will update bookmarks
• search engines will delete old URLs
• This can be done by IT or by the site
  administrator (whoever runs the webserver)?

39
HTML Meta Redirect

• send someone to a new page (or site)
• ltmeta http-equiv"refresh" content"10
  urlhttp//example.com/"gt
• Content"10 tells the browser to wait 10 seconds
  before transfer
• it is also useful to put a link to your new site
  on the page since older browsers do not support
  the meta redirect

40
Example of Site Design for Different Groups

• Look at Beginner, Intermediate and Advanced pages
  and see the differences
• http//www.windows.ucar.edu/tour/link/earth/Life/
  classification_intro.htmleduelem

41
Site Navigation Examples

• What types of navigation are available?
• US Department of State
• http//www.state.gov/
• Government of Ontario, Canada
• http//www.gov.on.ca/
• Webmd.com
• http//www.webmd.com/
• 025.431 The Dewey Blog
• http//ddc.typepad.com/

42
Site Navigation 2

• Del.icio.us
• http//del.icio.us/
• Wikipedia
• http//en.wikipedia.org/wiki/Main_Page
• Amazon.com
• http//www.amazon.com
• Yahoo! Kids
• http//kids.yahoo.com/