ECT 250: Survey of e-commerce technology

An introduction to information
architecture
 Topics
Information architecture
Organization systems
Schemes
Structures
Navigation systems
Labeling systems
Searching issues
Discussion of the midterm

2
 Organization system
Organization systems are composed of:

1. Schemes: Defines the shared characteristics

of content items and influences the grouping
of those items.

2. Structures: Defines the types of relationships

between content items and groups.

3
 Examples
Yellow Pages
Scheme: Topics
How were the topics chosen?
Structure: Alphabetical

Grocery store
Scheme: Food categories, food tasks
Structure: Complex, unclear
Where would you find marshmallows?
What about soy sauce?

4
 Organization schemes
The three major types:
1. Exact
2. Ambiguous
3. Hybrid

Each has its benefits, drawbacks, and uses.

5
 Exact organization schemes
Divide information into well-defined, mutually
exclusive sections.
Features:
Easy to define and maintain
Supports known-item searching
Requires user to have detailed information
Some types:
Alphabetical
Chronological
Geographical

6
Ambiguous organization schemes
Divide information into categories that defy exact
definition.
Features:
Difficult to define
Supports browsing by users with no immediate
goal or with vague information
Some types:
Topical
Task-oriented
Audience-specific
Metaphor-driven
7
 Hybrid organization schemes
Use with caution! If you must have hybrid schemes,
separate them clearly or you will create confusion.
Better Library Listing

Bad Library Listing Age Group

Adult
Adult Teen
Arts & Humanities Youth
Community Center Topics
Get a Library Card Arts & Humanities
Learn About Our Library Science
Science Social Science
Social Science
Teen Other
Youth Community Center
Services:
Get a Library Card
8
Learn About Our Library
 Organization structures
The structure of information defines the ways in
which users can navigate.
Example: Street structure in NYC vs. Paris

The main organizational structures are:

Hierarchy
Hypertext
Database
Each structure has its strengths and weaknesses.

9
 Hierarchical structure
A well-designed hierarchy forms good foundation
for many web sites.
The mutually exclusive subdivisions and parent-
child relationships of hierarchies are simple.
Users are familiar with hierarchies so that they
are quickly and easily understood.
Users can use a hierarchy to develop a mental
model of the sites structure and their location
within the site.
Takes a top-down approach to design.

10
 Types of hierarchies
Narrow and deep Broad and shallow

http://facweb.cs.depaul.edu/asettle/
11
 Designing hierarchies
Be aware of, but not bound by, the idea that
hierarchical categories should be mutually
exclusive.
Consider the balance between breadth and
depth in the hierarchy.
Breadth: Be sensitive to the cognitive limits
of your user. More than ten options on the
main menu can overwhelm users.
Depth: If users are forced to click through
more than four or five levels, they may
give up and leave.
12
 Hypertext structure
In hypertext systems, content chunks are connected
via links in a loose web of relationships.
Features:
Great flexibility
Substantial potential for complexity and confusion
Rarely useful as the primary structure
Often used to complement structures based on the
other two models.
Example: Microsoft Help

13
 Database structure
A database is a collection of records, each of which
has a number of associated fields.
Features:
Allows field-specific searching
Permits repackaging of information into different
formats for different audiences
Records must follow rigid rules
Best for listings, catalogues, directories, and other
subsites with structured, homogeneous data.
Example: The Oracle of Bacon

14
 Topics
Information architecture
Organization systems
Schemes
Structures
Navigation systems
Labeling systems
Searching issues
Discussion of the midterm

15
 Navigation systems
A good navigation system:
Helps exploration/orientation
The page must indicate its location within the site.
DePaul CTI
LLBean
Leads users to what they seek
Care must be given to clear directions/options.
Informs about the available products/services/tasks
Doing this requires anticipating the users needs
Amazon

16
 Built-in navigational features
Most browsers offer built-in navigational features:
URL : direct access to any page
Back/forward : bi-directional backtracking
History : random access to pages visited
Bookmarks : save the location of pages visited
Color coding of links : helps users understand where they
have been and retrace their steps through a site
Mouseover effects : may indicate site structure

These effects should be modified cautiously, if at

all. Standards exist for a reason.
17
 Purposes of navigation systems
Navigational systems can aid users by:
Providing context: Users must have a good idea of
where the page fits into the overall site.
Company logo
Page title
Subsite/task indicators
Properly named links out of the site
Example: DePaul CTI
Providing flexibility: Multiple means of navigation
are important. At the very least, provide a link
back to the main page for a site/subsite.
18
 Types of navigation systems
Hierarchical: Usually the primary system, it
follows the information hierarchy closely.
Global: Used for quick access to distant (often
unrelated) sections of the site. May include
a opening page.
Local: Used in conjunction with a global system
when a site has more than one purpose or
audience.
Embedded links: Never used alone or for vital
pages. Studies have shown that users are more
likely to miss them.
19
 Types of navigation elements
Integrated: Integrated within the page and thus
context-related.
Navigation bars (graphic or text)
Pull-down menus
Frames
Remote: Complement other navigation systems
Table of contents
Index
Site map

20
 Building a navigation system
Use the information hierarchy as the primary
navigation system.
The major categories in the hierarchy become
the global navigation system.
The local navigation will depend on the choices
made in the global system.
The sites size and goal will determine what
other navigation systems are required.
Above all, test your navigation on users!
(And pay attention to the results )

21
 Topics
Information architecture
Organization systems
Schemes
Structures
Navigation systems
Labeling systems
Searching issues
Discussion of the midterm

22
 Whats in a label?
A rose by any other He never will know if
name smells just as the Gick or the Goor fits
sweet. into the Skrux or the Snux
Shakespeare or the Snoor. Dr. Seuss
Labels represent chunks of information.
They can be either headings or links.
They are closely tied to navigation.
For this reason they must be:
meaningful
representative
consistent
23
 Labeling systems
We are concerned with labeling systems not individual labels.
Better (far from perfect) List
Unplanned List Offices
Faculty Skunkworks English Composition Board
Office for Instructional Technology Office for Instructional Technology
K12 PDN Projects Web Page Office Technology Management
Digital Library Project Technology Dissemination Office
Institute for Information Technology
Office Technology Management
The New Media Center
Extension Services
Projects
The New Media Center
Project 1999
Project 1999
K12 PDN Projects Web Page
Institute for Information Technology
Digital Library Project
English Composition Board
?????
Technology Dissemination Office Extension Services
Faculty Skunkworks 24
 Navigation labels
Navigation labels are created during the design of
the navigation system. You need to review them
for clarity and consistency.

When possible, use what standards exist:

Main, Main page, Home, Home page
Search, Find, Browse, Site map, etc.
Contact Us, Contact webmaster, Feedback
Help, Frequently Asked Questions, FAQ
News, Whats New
About, About Us, Who We Are
25
 Indexing labels
Indexing labels are crucial to the site.
Usually found in the Meta tag.
Used by search engines.
Should be descriptive and representative of
the sites purpose.
Example: http://www.clearinghouse.net

26
 Link labels
Link labels appear within the text of pages.
The context provides meaning to the link.
Be cautious that the linked item makes sense
relative to the links context.

Examples:
Amazon
Assignment 4

27
 Heading labels
Heading labels:
Condense into 1-3 words the meaning of entire
paragraphs or pages of information.
The user relies on these labels to determine if
a section should be read or not.
They must be consistent both in granularity and
visual form.
Examples:
Amazon
Chicago Tribune

28
 Iconic labels
Iconic labels are graphically appealing but poor
communicators.
There is no fixed iconic language
Few concepts have standard icons
Using icons forces the user to learn your system.
How many users will be motivated to do that?
Guidelines:
Use a few icons
Stick to simple graphics
Use icons consistently throughout the site

29
 Topics
Information architecture
Organization systems
Schemes
Structures
Navigation systems
Labeling systems
Searching issues
Discussion of the midterm

30
 How users search
What kinds of searches do people do?
Known-item searching
Existence searching
Exploratory searching
Comprehensive searching

Many of these searches also involve browsing.

For this reason searching and browsing must
be integrated.

31
 To search or not to search?
When NOT to make your site searchable:
It contains only a few, well-labeled documents.
Its purpose is to be a patch for a badly designed
browsing system.
There is no time to maintain the search engine.

When to make your site searchable:

The site is substantial.
The site contains dynamic content, making an
index difficult or impossible to maintain.

32
 Information architecture
The elements of information architecture, namely

organization systems
navigation systems
labeling systems
searching methods

hold a Web site together and aid its development.

33
 A first step
Before building a web site, you must define it.
1. What is the sites purpose?
2. What will be the content?
3. What functionality will it offer?
4. Define the sites
Organization
Navigation
Labeling
Search systems
5. How will this system change and grow?

34
 Skills needed for web design
Marketing: Defines the purpose and audience
Information architecture: Designs the organization,
navigation, labeling, and searching systems.
Graphic design: Finds the graphic identity of the
site.
Editorial: Proofreading, editing, content, etc.
Technical: Programming, Web administration,
production, etc.
Management: Keeps all of the above in line, on time,
and in budget.

35
 Organizational challenges
The Web forces us to deal with classification:
How should we label this content?
What classification system should we use?
Who will catalogue all this information?

Classification issues caused by the WWW:

Differing perspectives
Ambiguity
Politics

36
 Different perspectives
When labeling items in your site, how can you be
sure that a visitor will understand your system?

What differentiates these three groups?

1. lamp, stapler, wall
2. table, ballpoint pen, chair
3. telephone, paper

It helps to know your audience, but you should not

assume that your classification system will make
sense to others.
37
 Ambiguity and politics
Ambiguity
The Web uses words for classification and
words can be ambiguous.

Politics
Words can convey unintended or controversial
meaning in certain contexts.
Example: A bachelors in electronic commerce
technology vs. a bachelors in e-commerce
Internal battles over control of Web sites

38
Classic Web problems
Poor organization
Poor graphic design and layout
Gratuitous bells and whistles
Lack of attention to details
Under construction
Inappropriate tone
Designer-centeredness

39
 Poor organization
You suspect the information is there but it is hard
(or impossible) to find.
DePaul University
Phone number of Jeffrey Carlson, an
Associate Dean in LA&S?
Inconsistencies in navigational headers and footers,
labeling, or page background and design.
Atlanta.com
Berkshire Record Outlet
CTI Intranet

40
 Poor graphic design
Too much or too little effort with graphics is a
bad thing.
Amazon
Amber Settles home page
Metra
MSN/NBC
Clarity may be sacrificed for the sake of design
Kleber

41
 Gratuitous bells and whistles
It looks cool is not enough reason to bombard
your visitor.
Arneeon
Jim Jacobsons personal page

42
 Lack of attention to detail
Crashing scripts, sloppy presentation, errors, typos
out of date content, etc.
CTI Intranet (Make an advising appointment)
Diamond Multimedia Europa (News releases)

43
 Others
Under construction: Why let people look before
you are done with your work?
Agama Path Foundation
DePaul faculty member
Inappropriate tone: A site concerned more with
jargon or technological prowess than with
usability.
Designer-centeredness: Company sites that are
outlets for the webmasters self-expression
including items such as my favorite links.

44
 Rules of thumb
Rules of thumb for good Web sites:
1. Keep the purpose of the site clear and focused.
2. Make it easy for the user to find what they need.
3. Proper use of color and graphics can help the
flow of information much as formatting in a
document helps to organize its content.
4. Make your site adaptable to different users.
5. Be consistent in your design.

45