site architecture

Organizing & Presenting Information Online

Cesare Massarenti - copyright 2003

Every choice the designer makes including organizational strategies, site structures, and navigational aids should be weighed against the question: Are you assisting or inhibiting the intended use of the educational environment?

Good site architecture is quickly forgotten with use, great site architecture is invisible from the start.

Introduce strategies and a process for organizing and structuring online content and functionality

Organization Matters

session six: goals & assumptions

site architecture defined

Basic

To organize, structure and represent the contents of your online environment in order to facilitate access and ease of use.

Educational

To organize, structure and represent the contents of your online environment in order

to facilitate access and ease of use and to highlight salient relationships and connections between educational materials and concepts.

site architecture: interrelated processes

site architecture: interrelated processes

organize

structure

represent

How we organize information…is a balance between how information ‘wants’ to be organized and how users want to find it.

- J. Fleming

stage I: content organization

Are organizational structures intrinsic to the content itself or is organization a product of human convention?

content organization: factors

Organization conventions & standards

Nature and scope of the content

Needs & expectations of the audience

organization: schemes (Rosenfeld & Morville)

alphabetical

chronological

organization: schemes

geographic

topical

organization: schemes

functional

metaphor driven

organization: schemes

audience specific

Site architecture or structure provides the

relationships between groupings of content

and/or functionality

Whereas content organization deals with conceptual/intellectual access points, site structure provides the foundation for digital access or navigation

Structure depends upon how you want people to use the environment and is based largely upon you educational agenda

stage II: site structure

site structure: information priorities

Hierarchical structures can be used to convey priorities of information and the sequence in which participants should access or work through the content

X

learning structures: tutorial

Information is sequenced in a linear fashion

User control is limited

Content is broken up into small lessons

Adobe Tutorials

learning structures: flexible tutorial

Central theme or topic like tutorial, but provides opportunities to explore links beyond the sequential presentation

Greater user control

Windows to the Universe

learning structures: exploratory

Non-linear

Self-directed discovery

Jerome B. Wiesner: A Random Walk Through the 20th Century

learning structures: reference

Logical organization of content - often category based hierarchies

Designed for fast access

Often non-linear in structure

Perseus Project

Representation of organization and structure

– Communicate content organization and structure through navigational elements and design – establishes mental models

– Highlight important relationships between areas of the environment

– Lay the foundation for navigation and orientation

stage III: representation

Where am I now?

Where can I go?

How can I get there?

How do I know I’m on my way?

How do I know that I’ve arrived?

How do I get back to where I came from?

navigation conventions: books

Table of contents, index

Page headers, chapter headings

Sequential numbering

Consistent layout of pages

navigation design conventions: WWW

Implement a common and repeatable navigational unit– Appears at same place on each page of site– Allow participants access to all and major sections of site plus the home

page– Answers “where can I go” and “how can I get there” question

Indicate visually what section of the site is being viewed– Answers “where am I now” and “how do I know that I’ve arrived” questions

Create trails (way finding)– Answers “how do I get back to where I was” question”

Show system status– Answers “how to I know that I’m on my way” question

representation: providing for navigation

Web-based navigational structures/user interfaces should:

Facilitate access to and movement through site contents, features and functionality

Present a clear and consistent representation of relationships between primary content and functional areas of your environment

Provide orientation for your users

navigation: primary level

Facilitates traversal of main sections of site

Indicates where user is located

May provide link to the home or index page

navigation: secondary level

navigation: tertiary & functional

functional

tertiary

navigation: way finding

Trails of text links can be a simple and effectives means of providing for way finding

navigation: fast lanes

navigation: audience preferences

text-based

graphical

representation: language & labels

Follow labeling conventions (e.g. home, search)

Use the language of your audience

Develop labeling system that reflects a consistent level of granularity

Create a labeling system that is consistent in scope and language

Bleeding Heart or Dicentra spectabilis?

site architecture: interrelated processes

organize

structure

represent

site architecture: process content

List all content topics, activities and important relationships

Identify meta-categories for list items

Create new meta-categories as necessary

Be mindful of digit span

test with audiences

site architecture: process audiences

Consider educational objectives and information sequencing

Consider audiences – access priorities & expectations

Create access to and paths through content

Consider depth vs. breadth

site architecture: process representation

Reflect site architecture graphically

Chunk information in a manner appropriate to the content, educational use, and online viewing

Create standard – primary and secondary – navigational structures

Reflect all of the above graphically – the focus of next week’s lecture

session six: References

Fleming, Jennifer. Web Navigation: Designing the User Experience.

Horton, Sarah & Patrick Lynch. Web Style Guide: Basic Principles for Creating Web Sites.

Rosenfeld, Louis & Peter Morville. Information Architecture for the World Wide Web.

site architecture: additional information

Additional information

usability: depth vs. breadthLynch & Horton

usability: depth vs. breadthLynch & Horton

site structure: chunking information

For the sake of usability limit the size of your web pages and organize information into meaningful chunks

Chunking refers to breaking longer runs of information into more manageable, screen friendly units

Avoid pages that scroll to infinity as they:– increase download times

– encourage disorientation (via scrolling)

– frustrate impatient users (i.e. all web users)

organization & navigation: hypertext

Advantage– Ability to easily create links between any number of documents,

anywhere

Disadvantage– Ability to easily create links between any number of documents,

anywhere

Design Challenge: to minimize cognitive overhead and disorientation while exploiting the potential of hypertext

organization & navigation: hypertext

Cognitive overhead– Increased number of decisions the average user has to make when

viewing a document which contains several opportunities for digression (several paths to ancillary information) or when attempting to use a complex application

Disorientation– Ease with which one can get lost while following these paths and

from hopping from place to place in cyberspace or trying to work with an incoherent user interface

site structure: reducing cognitive overhead

Limit choices– Be selective in creating links– Only point to appropriate information

Embedded links– Provide context

Descriptive links– Provide 1-2 lines describing contents at other end of link; use meaningful colors

Paths of interest– Create links that address different interests: teacher, parent, administrator,

student ex. Engines for Education

Resource pages or sections– Create resource page linking to ancillary material rather than breaking up flow

of presentation

navigational aids: technical aids

FramesReduces possibility of users getting lost in cyberspace when forced to jump to other sites for information ex. Paradise Lost; Fantastic Forest

Pop-up windowsLaunches a separate window to display contentex. CSS Resource File

Alt tags Displays alt tag information when mouse moves over the link

DHTMLCan use in place of pop-up windows and can be used to create dynamic interfaces

JavaScriptCan use to place information in status bar or to create an informational image

navigation: evaluation

Questions to ask about a site’s navigational design.

– How does the site help to orient the user?

– How does the site support way finding?

– Are navigational units consistent throughout the site?

– Are multiple levels of navigation relevant and consistent?

– Does the site provide shortcuts to information?

– What special audience considerations are reflected?

Review these examples:– Web Style Guide

– Sotheby’s

– Knowlton School of Architecture (OSU)

session six: site architecture

THE END

Cesare Massarenti - copyright 2003