Web Site Architecture Issues of Design

Document Sample
Web Site Architecture Issues of Design Powered By Docstoc
					Web Site Architecture: Issues of Design
                            University of Toronto
                                Jay Moonah

Design Process
      o   Information Design
      o   Goals
      o   Audience
      o   Inventory
      o   Organization
      o   Flowchart
      o   Tools
      o   Planning

Interaction Design
      o   Levels of Interaction
      o   Orientation
      o   Navigation
      o   Usability
      o   Functionality
      o   Storyboard

Presentation Design
      o   Style
      o   Layout
      o   Elements
      o   Prototyping
Design Process
Interactive Design - The Process
Information Design             Interaction Design               Presentation Design

What is the site?              How should it work?              How should it look?

   •    Define the site and        •   Design the                   •   Define the style and
        audience, plan the             navigation, types of             layout of the
        project and organize           interaction and                  elements in the
        the content into a             controls, and map                storyboard, and
        flowchart                      these onto a                     produce a prototype

               The primary reference for this seminar will be the text:
                             Interactivity By Design
         By Amy Satran and Ray Kristof ▪ Adobe Press ▪ ISBN: 1-56830-221-5

Information Design
Before begining to design, the information must be defined. The steps in information
design are:
Goals                  define goals for the site - what is it for, will a design decision
                       move you closer or further from the goal

Audience               define what the audience wants to do - who is controlling/using
                       the site, where will it be used, audience research, decide how the
                       site will reach its audience

Tools                  choose the authoring tool and environment for delivery -
                       Web/networked based, CD-ROM, etc.

Inventory              create a content inventory list - what do you already have, what
                       must be included, what can be left out

Organization           organizing the content - create categories, refine and rework

Flowchart              produce a content flowchart - content, usability, simplicity

Planning               create a project plan - budgeting time, money and human

A clear set of goals are important. They define the rest of the process, including what
tools you will use what information will be included, what types of interaction you will
want and what the presentation will look like.

Some goals for the users of your project may include:

Finding Information                    Learning a subject

Being evaluated                        Having fun

   •    Some of your goals for the
        project might include:

Easily updated                           Get information about users

Audience & Environment
Audience               •   Who will be using the site?
                       •   What level of experience with the computer do
                           they have?

Usage                  •   How will it be displayed? (projection, monitor,
                       •   How often will it be used?

Environment            •   Is the environment noisy?
                       •   Will there be multiple users in one room or
                       •   Will it be used in variety of environments?

Equipment              •   What kind of computers will this site be
                           delivered on?
                       •   Are they connected to a local network or to the
                       •   Do they need a CD-ROM drive or other larger-
                            scale storage device?


Take inventory of the elements you already have, and what will be necessary for you to
create. Take the example of a site used to deliver course material.

You might already have:                 You might need:

   •   Course notes                         •   Original video
   •   Overheads                            •   An animation to illustrate a
   •   Diagrams                                 concept
                                            •   Audio narration recorded

Step 1 - List all possible content categories
Step 2 - Start to group things by topic
Step 3 - Refine the topic groups

Step1 - Master List for DMP site
   •   Bookings
   •   Consulting
   •   Courses
   •   dmpnet Mailing List
   •   Equipment
   •   Events
   •   People
   •   Putting Web Pages On Hopper
   •   Research
   •   Ryerson Projects
   •   Web Links
   •   Webtools
           Step 2 - Master List - Some of the items on your list
           might become categories, others will be topics in those
           or other categories
             •   Bookings
             •   Consulting
             •   Courses
             •   dmpnet Mailing List
             •   Equipment
             •   Events
             •   People
             •   Putting Web Pages On Hopper
             •   Research
             •   Ryerson Projects
             •   Web Links
             •   Webtools

           Step 3 - Refine and work with your topics and
           categories until you have a logical set-up.

Services            Projects             Courses               Resources         Research

   •   The             •   Course           •   Introduction      •   Putting       •   Java
       People              Projects             to Web                Web           •   JavaScript
   •   Consulting      •   Information          Authoring             Pages On      •   mediaBridge
   •   Digital             Resources        •   Interactive           Hopper        •   SPIRIT
       Media           •   Ryerson              Web               •   Webtools      •   Course
       Projects            Organizatio          Authoring         •   Internal          Vault
       Network             ns               •   Using                 Links         •   Webtools
   •   Equipment       •   Other                Netscape          •   WWW
   •   Bookings            Organizatio      •   Lecture               Links
   •   Events              ns                   Notes             •   Internet
                                            •   Other                 &
                                                Ryerson               Software
                                                Courses               Info
                                            •   Online                Links
The Flowchart
"An information flowchart is simply an outline presented as a box diagram, with lines
that show the access routes amoung its parts. The ideal flowchart is a clear, easy-to-
follow specification of a project's topic categories, levels and links" - Interactivity by


Defines how the Toolbars appear in the main Netscape Window


Defines how your Netscape screen looks when you start the program, including what you
use as a home page

Link Styles

Defines how links appear in Netscape, and how long they take to expire (i.e. turn to their
unvisited color.)
Multimedia Tools
There are many different pieces of software you can use for creating your site. The ones
you select will depend very much on what you are producing.

For creating HTML pages

   •   Dreamweaver
   •   FrontPage
   •   GoLive
   •   Arachnophilla
   •   Notepad (!)

For creating interactive material

   •   JavaScript
   •   Java
   •   Director using Shockwave
   •   Authorware using Shockwave

For creating and editing graphics

   •   Photoshop
   •   PaintShop Pro
   •   Illustrator
   •   FreeHand

For video editing

   •   Premiere
   •   Final Cut Pro

For sound editing

   •   CoolEdit
   •   SoundEdit
   •   Sound Forge
   •   Gold Wave
For media delivery

   •   RealMedia
   •   Quicktime
   •   Windows Media
   •   MP3/MPEG

For creating animation

   •   GIF Construction Set
   •   Flash
   •   LiveMotion

Allocating resources and time is of the utmost importance when planning a multimedia
project. Always this keep in mind, and always try to overestimate rather than
underestimate. What jobs are involved in creating this project?

   •   HTML coding
   •   graphic editing
   •   photography
   •   writing/editing
   •   video editing
   •   audio recording
   •   etc.

How many do you feel comfortable doing yourself? What will you need to get help with?
How long will each task take?
Interaction Design
Adding interactivity to the information is what sets a multimedia project apart from
traditional books, videos, etc. The steps in interaction design are:

Levels of              decide how much control the user will have - is this a slide show,
Interaction            a fully interactive game or something in between

Orientation            create a guidance system to orient users - using images,
                       metaphors, etc.

Navigation             design the navigation and access routes - will there be direct or
                       random access, will it be step through navigation only

Usability              make the interface intuitive - buttons and menus that make sense,
                       objects that act the way the user expects

Functionality          design conrols for interaction - consistency, logical layout and

Storyboard             integrate the elements into a storyboard - define on-screen
                       elements, sounds, user actions, etc.

Levels Of Interaction
How much control should the user have? Your interaction design is dependent first of all
upon the level of interaction. Is your site:

   1. Is it a slide show style of delivery, where the user only has the ability to move
      forward and backward?
      Michael Murphy & West Suhanic's StorageTek presentation
   2. A "typical" website with hyperlinks, categories, etc?
      U of T Home Page Collection (http://www.utoronto.ca/)
   3. A demonstration or test, where users enter variables or answers to questions?
      Hitesh Doshi's Roofing Defect Explorer (http://www.ryerson.ca/~hdoshi/roofing/)
   4. A game or simulation, where the user can move a character or object in space,
      change perspective of view, etc?
      Rampage! from Shockwave.com
Different types of media use different methods to give their users a sense of their content
without going through the whole thing.

           o CANOE (http://www.canoe.ca/) is similar to a newspaper - it uses
             headlines and pictures.
           o Yahoo! (http://www.yahoo.com) uses categories and subcategories, along
             with menu items and other text.
           o Disney.com (http://disney.go.com/park/homepage/today/flash/) uses
             images and imaginary locations as the primary orientation method

       In your flowchart, you defined the direct links between topics and levels. Now
       you must decide how much ability the user will have to move randomly
       throughout the site. The following sites all provide different levels of access and
       different navigation methods:

           o   The U of T Site (http://www.utoronto.ca/)
           o   SNOW - Special Needs Opportunity Windows (http://snow.utoronto.ca/)
           o   User's Guide to Academic Computing, Ryerson

       The best design for most projects should be the one that is intuitive. Buttons and
       menus should make sense and objects and functions should act the way that users
       expect. Also, feedback is important - let the user know that something is

       According to Interactivity By Design a usable interface should:

           o   Remove obstacles
           o   Minimize effort
           o   Give feedback
           o   Be explicit
           o   Be flexible
           o   Be forgiving

Defining interaction     o         what happens when a control is used?
controls                 o         how? how do users get there, leave,
                             and what happens in between?

Solving organizational   o          how are unusual or exceptional cases
problems                     handled? items that are:
                                           too long
                                           too short
                                           require additional elements,
                                    references, etc.

Ensuring consistency     o           are controls and menus consistent?
                         o           are elements like narration, graphics,
                             etc. available throughout?

Managing                 o          is a cue provided to indicate that
dependencies                 necessary material has been covered?

Controling media and     o          are controls for audio, video etc.
custom features              available, usable, etc?
        The Storyboard

        On the storyboard, be sure to include:

            o   a title or reference so you know what you're looking at
            o   a list of important elements, especially sound, video, etc.
            o   reminders of links, info to include

Presentation Design
Presentation is the style and layout of the site.

Style            define the visual theme and style - stylistic unity, etc.

Layout           design a system of screen layout

Elements         create the structural elements of each screen - interface and control
                 elements, backgrounds, media

Prototyping      create prototype screens
If you wish to create a uniform style, make sure the different elements of the design
refect that style.

   •    CIBC Home Page (http://www.cibc.com)
   •    HotWired (http://www.hotwired.com)
   •    Gravely Mistaken (http://www.geocities.com/Area51/1968/vampyre.html)

Layout in an interactive site is of particular importance since visual elements exist not
only to impart information but to allow navigation through the material. A balance
between the various elements is very important to the usefulness of the site. Consider the
layout of:

   •    The IBM site (http://www.ibm.com/)
   •    The SGI site (http://www.sgi.com/)
   •    The CHUM-FM site (http://www.chumfm.com/)
   •    Eighty20 (http://www.eighty20.com/flash/index.htm)

Any interface is made up of a series of elements that can be used together on various
screens. It is important to consider each of the groups of elements so they are consistant
and meaningful.

Will your interface include:

   •    text?
   •    images?
   •    frames?
   •    buttons and controls?
   •    animation?