Web Site Architecture: Issues of Design
University of Toronto
o Information Design
o Levels of Interaction
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
Before begining to design, the information must be defined. The steps in information
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
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
• 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
• dmpnet Mailing List
• Putting Web Pages On Hopper
• Ryerson Projects
• Web Links
Step 2 - Master List - Some of the items on your list
might become categories, others will be topics in those
or other categories
• dmpnet Mailing List
• Putting Web Pages On Hopper
• Ryerson Projects
• Web Links
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
• 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 &
• Online Links
"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
Defines how links appear in Netscape, and how long they take to expire (i.e. turn to their
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
• Notepad (!)
For creating interactive material
• Director using Shockwave
• Authorware using Shockwave
For creating and editing graphics
• PaintShop Pro
For video editing
• Final Cut Pro
For sound editing
• Sound Forge
• Gold Wave
For media delivery
• Windows Media
For creating animation
• GIF Construction Set
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
• video editing
• audio recording
How many do you feel comfortable doing yourself? What will you need to get help with?
How long will each task take?
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,
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:
require additional elements,
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?
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 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
• 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
Will your interface include:
• buttons and controls?