comp 1850 | web design and development one

lecture six

agenda

  • midterm quiz
  • site planning overview
  • information architecture components
  • organization systems
  • labeling systems
  • navigation systems
  • in-class exercise
  • readings

site planning overview

  • define site objectives - what's the point? business goals? creative goals? (context)
  • define audience - who are they and what do they need? do they need to do things? buy things? learn something? all of the above? (users)
  • identify content requirements - what kind of "stuff" must be included to meet user needs? (content)
  • specify features - what must the site do (i.e., specific functionality) to meet user needs?
  • create information architecture - how will you structure the information space to allow quick and easy access to content and features?

information architecture components

  • 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).

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
    • products, catalogue, shop
    • 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

  • one of the key factors in website design
  • navigation design goals:
    • tell people what's on the site and how to get there - use meaningful labels!
    • tell people where they are and how the pieces are related
    • give people something to hold on to - make it persistent, repetitive
    • give people confidence that we know what we’re doing - helping them find stuff leaves a good impression
    • tell people what you have on your site and how to find it
    • tell people where they are and how to get back
  • flavours of navigation:
    • global/main navigation
    • local navigation
    • supplementary navigation - shortcuts
    • contextual navigation - inline
    • courtesy navigation
    • remote navigation - a-z index, sitemap
    • the design challenge is to accommodate various levels of navigation without overwhelming the content

in-class exercise

Your instructor will divide you into groups to complete the following tasks:

  1. Review the client brief for WidgetWerks Inc.
  2. Work as a group to brainstorm all the content and features you feel would be needed on the new site to meet the business objectives and needs of the user groups (note: don't organize yet!).
  3. Using your master content/feature list, organize and label the content as you see fit, creating a final sitemap or blueprint
  4. Based on your sitemap, create a wireframe depicting the new homepage and how it would accommodate the new site features.
  5. You will be asked to briefly present your organizational structure in class.
comp 1850 home | about the course | readings | assignments | resources | 01 | introduction | 02 | html & ftp | 03 | images & tables | 04 | css: colour & text | 05 | css: page layout | 06 | site structure | 07 | design principles | 08 | design techniques | 09 | forms | 10 | client-side scripting | 11 | ssi, video & analytics | | students on bcitwebdev | example projects | textbook website | my.bcit | D2L login | example projects | bcit | bcit: computing |