comp 1850 | introduction to web design and development

lecture six

agenda

  • mid term quiz
  • site planning overview
  • information architecture components
  • navigation systems
  • in-class exercise
  • readings

site planning overview

  • define site objectives - the context of the site. what are the business goals? creative goals?
    • defining specific, measurable goals is best
    • if there is more than one objective, rank them by importance
  • define audience - the users of the site. who are they and what do they need? do they need to do things? buy things? learn something? all of the above?
    • define one or more target users. the ideal audience
    • describe specific, demographic user assessments
    • consider user age, gender, budget, location, culture, knowledge etc. the more thorough the better
  • identify content requirements - the content of the site. what kind of "stuff" must be included to meet user needs?
    • what textual content is needed? who will author it/where is it coming from?
    • account for required images, audio and sound files
    • schedule content expectations so you know when it will be ready to use on the site
  • specify features - what must the site do (i.e., specific functionality) to meet user needs?
    • consider site capabilities: nested navigation, shopping cart, forum, blog
    • determine technical requirements: databases, server side scripting, javascripting, etc
    • form a development team that has the required skills
  • create information architecture - how will you structure the information space to allow quick and easy access to content and features?
    • organize and structure site data to be intuitive and coherent
    • define descriptive labels for each topic and sub-topic
    • devise an appropriate navigation system (hyperlinked, linear, chronological, etc)
    • add courtesy and search navigation options

content is king

The content of a website is the text, images, video or sound that is presented to the user. No amount of clever information architecture can redeem a site that has no content of value to offer.

The value of the content is determined by the Objective(s) and Audience of the site.

information architecture components

Information Architecture is concerned with the organization and presentation of page content in a manner that is intuitive and easy to use. It is critical for an effective user experience.

  • organization systems - how we categorize the content (subject, date), which determines...
  • labelling systems - how we represent the information (products, history), which is reflected in...
  • navigation systems - how we browse or move through information (site wide, locally, supplemental), which are supported by...
  • search systems - how we search for information (execute a query).

Information Architecture Resources

  • Web Monkey provides a tutorial help you design your own information architecture
  • UXMatters offers a more simplified IA tutorial
  • Smashing magazine has an excellent 2 part article with several navigation examples

organization systems

  • schemes:
    • exact organizational schemes (well-defined, mutually exclusive):
      • alphabetical (white pages)
      • chronological
      • geographical
    • ambiguous organizational schemes (ill-defined, overlapping):
      • topical (yellow pages)
      • task-oriented (register, buy, edit)
      • audience-specific (investors, publishers, employees)
  • structures:
    • linear - "a" follows "b"
    • hypertext - nonlinear, flexible, but potentially confusing
    • hierarchy - top down; breadth and depth

labeling systems

  • obvious way of showing users your organization and navigation systems
  • we have options when choosing our labels for navigation elements:
    • main page, home, home page
    • search, find, browse
    • help, frequently asked questions, faq
    • news, what's new
    • about, about us, who we are
  • labels as headings - are actualy a key part of your navigation system (see below)
  • ultimately, choosing labels is about helping your user understand what's available and how they can access it

navigation systems

navigation standards

Following the conventions established online will make a website navigation easier for users to interact with. Common navigation design techniques:

  • follow established conventions when placing common page elements (eg: search, language, login options should usually be placed in the top-right corner)
  • the navigation should be visually prominent when the page first loads (above the fold/scroll)
  • navigations should be positioned/styled consistently across all pages of the site
  • the ordering of the navigation options will suggest priority and importance to options at the beginning, less importance to options at the end
  • the navigation options and their ordering should never change from page to page
  • ensure the labels used indicate what kind of page is linked to are descriptive and succinct (1-3 words)
  • wherever possible uses conventional labels ('about us', 'contact us', etc)
  • indicate to the user which page they are currently on (by styling the current page different in the navigation, and/or using 'breadcrumbs')
  • help to facillitate the 3-click rule. never force the user to do extra 'work' like additional mouse clicks or require them to manage inner scrollbars
  • site maps increase accessibility for screen readers and search engines, and should include simple, well styled hyperlinks to the most important pages of your site. site maps typically link to pages that are the ideal places for a user to begin thier browsing (eg: a site map would link to the cbc.ca/sports home page, but not to any specific article from the sports section). write a dedicated sitemap.html and link to it in the page footer, or add the site map links directly in the footer of every page. Never use javascript or images for sitemap links - that will only reduce accessibility
home | about the course | readings | resources | 01 | introduction | 02 | html & ftp | 03 | css: fonts & colors | 04 | css: links & tables | 05 | css: page layout | 06 | information architecture | 07 | design principles | 08 | css: layout & graphics | 09 | html forms | 10 | client side scripting | 11 | scripting & analytics | jeff parker | students on bcitcomp.ca | textbook website | my.bcit | bcit | bcit: computing |