Learning Center
Plans & pricing Sign in
Sign Out



Hypermedia/Multimeda Design
& Authoring

         Feb. 27, 2006

   Today’s discussion
     Content & Site structure
     Navigation
Web Development Process

 Planning
 Design with building
 Building with design
 Evaluation
 Release

Note: It is an iterative process.
    Design Phase
   Content
       What topics the website will cover
       May work with other content creators
   Structure
       How the pages fit together into a well-organized structure
       Note cards
       An outline in MSWord
   Appearance
       Interface design
Design is a dialogue

   Content - what to say
   Information architecture - how to arrange your
    stuff to maximize users' success
   Layout - how to arrange elements on screen to
    make most sense
   Clarity - how to format elements to work visually
   Behavior - how to make it work interactively
Content & Structure

   Remember the purpose of design
       to facilitate communication.
 Choosing what to communicate (Content) is
  the first step.
 A good site design creates a structure that
  enables a clear two-way dialogue with all its
Designing for communication

1) Remember your goals, and your users' goals
2) What needs to be said in order to achieve those
3) What features, functions and content will best
   express the dialogue?
4) Prioritize those messages and dialogs
5) Organize your features, functions and content in a
   meaningful way
Arranging your content

   The way you structure your stuff to make it easy
    to navigate and to manage
   What's the right way to order and arrange
    information on a web site?
       There isn’t a right way.
       It simply isn’t possible to describe everything on one
       Split a site up into sections and provide useful
        navigation between those sections.
Architecture mirroring real systems

   For example:
     A different section for each geographical sales
      region (Europe, US, Asia)
     Sections for each area of business (e.g. Sales,

      Service, Fulfillment, Human Resources)
Architecture based on users' goals

   For example:
      A site that sells train tickets might have "Quick
       booking" from the home page, favorite journeys for
       registered users, and "Trip planner" that lets users book
       hotels and car hire at the same time.
      A software vendor might construct their site around
       their different audiences
            Technology expert is offered "Technical white papers" or
            "Feature comparisons"
            Business buyer is offered "Benefits of switching to us" or
            "Business case studies"
            Press audience is offered "Press releases" and "Press contacts"
Multi-dimensional Architecture

 Offer many views, not a single rigid
 Taking an online bookstore for example.
       Many different views
            By category
            Search for a specific author or title
            The site would advertise other titles similar to the
             ones the user is interested in.
A few basic models

   All-in-one      Hub-and-spoke

   Flat

   Index
   Strict hierarchy


   Multi-dimensional hierarchy
Web Page Structures
Tutorial 2 (Carey, p. 211)
   Storyboarding your Web pages before you create
    links helps you determine which structure works
    best for the type of information you’re presenting.
   You want to ensure that readers can navigate easily
    from page to page without getting lost.
   You’ll encounter several Web structures as you
    navigate the Web.
   Examining some of these structures can help you
    decide how to design your own system of Web

   Principles for good navigation design
        A site must:
             Let me know where I am at all times
             Clearly differentiate hyperlinks from content
             Let me know clearly where I can go from here
             Let me see where I've already been
             Make it obvious what to do to get somewhere
             Indicate what clicking a link will do
Good navigation
   Easily learned
   Consistent
       In terms of their placement, offerings, and appearance
   Provides feedback
   Requires an “economy of action and time”
   Users understandable labels
   Is appropriate to site’s purpose
   Supports users’ goals
   Provide contextual clues and flexibility
Where should you put
 Depends on the type of navigation
 The golden rules are:
     Put the most useful navigation where it’s
      closest to hand
     Put navigation where the user is likely to look
      for it.
Navigation Models
   common IA and navigation conventions.
       List of contents
       Breadcrumb trail
       Horizontal top bar
       Tabs
       2-level top (bar or tabs)
       Top and side bars
       Buttons bar with revealed drop-down
       Multiple-level tree nav
       Paging
Where should you put
 Depends on the type of navigation
 The golden rules are:
     Put the most useful navigation where it’s
      closest to hand
     Put navigation where the user is likely to look
      for it.
Types of navigation systems
   Hierarchical navigation systems
       Similar to the information hierarchy
       Require additional navigation systems
   Global navigation systems (site-wide navigation
       Able to jump back to the main page
       Important to extend the global navigation system
        throughout the sub-site
   Local navigation systems
   Ad hoc navigation
       Embedded links
            Global navigation

Local nav
Navigation Models
   common IA and navigation conventions.
       List of contents
       Breadcrumb trail
       Horizontal top bar
       Tabs
       2-level top (bar or tabs)
       Top and side bars
       Buttons bar with revealed drop-down
       Multiple-level tree nav
       Paging
Breadcrumb trail

   The breadcrumb trail is the familiar navigation
    device that:
       Shows you where you in are in a hierarchy, and
       Lets you click back to any point above where you are
   Breadcrumb trails are great in situations where:
       You've got a particularly deep hierarchy, say four levels
        or more
       The possible flow is such that a typical user might want
        or need to get back to a specific previous place
Horizontal top bar

   some extra advantages over a line of links:
       They serve to show the active section/selection very
       They naturally have a working visual hierarchy, with a
        real-world connection that makes them extremely clear.
        A tab is normally attached to (part of) a folder or sheet
        in a binder, and physically labels everything in the
        folder, or on the sheet.
       They are unambiguously mutually-exclusive. It's
        physically impossible to have two tabs selected
        (because they would both have to be at the front).
Top and side bars

   Very common. The top bar is used for the
    site-level navigation/tools and often first-
    level navigation, because these are more
Nav bar with revealed drop-downs
Multiple-level tree nav

   Benefits
       It is relatively familiar and
        intuitive (provided it is
        presented in a conventional
       It can provide relatively simple
        access to a complex structure.

   Where you get a piece of content that spans several pages
    (typically long articles, long indexes, forums, or search
   By providing paging buttons and links to local home pages
    and contents pages you give users the tools to understand
    how you have organized your Web site information, even
    if they have not entered your Web of pages through a
    home page or contents page.
   The buttons don't prevent people from reading the
    information in whatever order they choose, but they do
    allow readers to follow the sequence of pages you have
    laid out.
Remote Navigation Elements

   Provide an alternative bird’s-eye view of
    the site’s content
     Tables of contents
     Site Map

     Index
Table of Contents

 Book presents top few levels of information
 Shows organizational structure
 Shows broad view of content in site and
  facilitates random access to portions of site
 Use when site is hierarchically organized
 Small site might not even need it
 Design of TOC: Significant to usability
Rules of Thumb

   Reinforce information hierarchy so user becomes
    increasingly familiar with how content is
   Facilitates fast direct access to contents
   Avoid overburdening user with too much
   Graphics can be used -- can be aesthetically
    pleasing but costs to design and maintain and
    slows things down
   Form less important than function
   For sites that are not strongly         Key question:
    hierarchical                                 What terms are users going to
   Manual index                                  look for
   Keywords and phrases                    How
   Generally flat and only one or 2             Use query tracking tools that
    levels of depth                               capture all search terms and
   Good for users who already know               use to refine index
    name of item when they are              Index should point only to
    looking for quick scan of alpha          destination pages and not
    listing                                  navigation pages
   Challenge? level of granularity of      Rotates words in phrases so
    indexing                                 users can find phrases in two
   What do you index                        places in alpha sequence
                                            Do not clutter index
Site Map

 Graphical representation of architecture of
  web site
 Not traditionally used to facilitate
  navigation thru bodies of text
 Used to navigate physical rather than
  intellectual space
Keep in mind

 No Single Combination Of Navigation
  Elements Work For All Users
 Must fit to audiences' needs & content of
Next Time

   Wed. Lab for Tutorial 5
     Continue Ch. 4 (Shelly’s book)
     Tutorial 5 (Frame)- practice

     Tutorial 5 Assignment - Case #2 (due on 3/7)

   For next week
       3/8 (next wed.) – midterm (Temporarily)

To top