UID: Lesson 05 - Information Architecture & Content Organization

INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
welcome to
USER INTERACTION DESIGN
Lecturer
Itamar Medeiros (Brazil)
BA in Industrial Design;
PgDip in Information Design;
1 /56

Expertise
Multimedia/Web Design,
Photography, Information Design
and Human-Computer Interaction.
CLASSROOM RULES
itamar medeiros
Answer to commands promptly;
No food, no drinks, no games in class;
Always keep your mobile in silent mode;

2 /56
No electronic devices during class-time;

Bring only class related material to class;
LESSON 05:
INFORMATION ARCHITECTURE
& CONTENT ORGANIZATION
learning outcome
Students will understand principles of
creating sensible, comprehensible,
memorable, and convenient organization 3 /56
of the content and the tasks to be

performed on their interactive product.
LESSON 05:
content
Introduction to Information Architecture
principles;
4 /56
Introduction to Content Organization

techniques;
Organizing functionality and content into

a structure that people are able to
navigate intuitively doesn’t happen by
chance.
5 /56
Organizations must recognize the

importance of information architecture*
or else they run the risk of creating great
content and functionality that no one can
ever find.
information architecture | 信息构架
The design and structure of an interactive
system/product.
一个交互系统或者产品的设计和结
构。
6 /56

information architecture | 信息构架
Good information architecture ensures that
data is structured so that information
can be easily found by the user.
好的信息构架保数据结构化，致使 7 /56
用户可以轻易地找到信息。

The incredible amount of functionality and

information has become the new
problem: the challenge facing
organizations is how to guide people
through the vast amount of 8 /56
information on offer, so they can

successfully find the information they
want and thus find value in the system?
what is it?
Information architecture helps us describe

the structure of a system:
The way information is grouped;

9 /56
Its navigation system;

The terminology* used within the system.
terminology | 术语
The technical or specialized words and

expressions of a subject or system.
一门学科或者系统的技术或者专业单
词和表达。
10/56

what is it?
Information architecture take into account the

information itself -- content --, the people
using the information -- users --, and the
business issues -- context* -- in which the
information is being presented. 11/56

context | 背景
The set of facts or circumstances that

surround a situation or event.
围绕某一情况或者事件的一系列情况
或者环境。
12/56

context | 背景
While designing the information architecture,

the context is the information that lets
the user know where they are, where
have they just been, when where can
they go to. 13/56

在设计信息构架时，指让用户知晓他
们在里，去过里和何时、他们
去何处的信息。
helping people find information
Information architecture organize content

and design navigation systems* to help
people find and manage information, based
in the context of use of the system/product.
15/56

navigation systems | 导航系统
The navigation system is the physical

manifestation of an organizational
structure. It determines how information
is actually going to be interconnected.
16/56
一个组织结构的物理性表述。它决定

了信息究竟是如何相互链接的。
NAVIGATION SYSTEMS
A well designed navigation system is critical to

a good interactive product. Whether or not
people can find their way around is what
will most commonly make or break a
Web site, for example. 17/56

NAVIGATION SYSTEMS
most common elements
The most common navigation element is a

menu* of some kind, but navigation
elements can also be include inline links*,
tables of contents*, search engines*, site
maps*, and most any way of organizing 18/56
connections between documents that can

be though of.
NAVIGATION SYSTEMS
menu | 菜单
A component of a user interface that allows

the user to make choices from a preset
list, each of which performs a desired
action such as choosing a command or to
navigate within a system/product. 19/56

允许用户从预先设置列单中选择的用
户界面的一个组成部分，其中每一
项执行一个期望的命令，例如选择
一个命令，或者在一个系统或者产
品内导航等。
USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
20/56
NAVIGATION SYSTEMS
links | 链接
A graphic, line of text, or both on a web-

page that connects to another page on
the same website or to one in another
website located anywhere in the world.
21/56
在网页上一个图片、文字行或者与

同一网站上的另一页网页链接，或
与位于其他网站上的网页链接。
NAVIGATION SYSTEMS
table of contents | 目录
An organized list of titles for quick

information on the summary of a book or
document and quickly directing the
reader/user to any topic or part of the
document. 23/56

一个有条理性的主题列单，提供书本
或文件内容的快速检索及向读者或
者用户引导文件中的任何主题或者
部分。
NAVIGATION SYSTEMS
search engines | 搜索引擎
Web services which help search through

Internet addresses for user-defined
terms or topics in which users are
interested.
26/56
通过互联网地址针对用户感趣的用

户定义的术语或者主题，提供的网
络搜索服务。
NAVIGATION SYSTEMS
site map | 网站地图
Overview of the navigational structure of a

website, acting like a Table of Contents,
and used to orient users and show them
the scope of the site.
29/56
网站的导航结构的概况，好比一个目

录，用来导向用户，展示网站范
围。
NAVIGATION SYSTEMS
purpose
The purpose of a good navigation system goes

beyond just getting people from one place
to another. They should provide three
elements to assist in moving around within
a interactive system: 30/56

• Structure
• Flexibility
• Context
NAVIGATION SYSTEMS
structure
Interactive products with a good navigation

system allows the user to understand its
structure in a way that facilitates
navigation.
31/56
This is why the navigation system should grow

out of the scheme and structure of the
product. If it grows out of the underlying
structure then it will fit that structure and
reflect it in what is hopefully a
comprehensible way.
32/56
NAVIGATION SYSTEMS
flexibility
As well as having structure, navigation

systems should also be flexible. They
should allow different people to use
them in different ways to get to the same
information. 33/56

NAVIGATION SYSTEMS
flexibility
The information structure the site is built upon

should be rigidly structured. The
navigation system is where you put in
the exceptions and the additional tools
to facilitate navigating around. A well 34/56
designed navigation system can actually

reinforce the site structure by effectively
working around it.
NAVIGATION SYSTEMS
context
Context is information that lets the user

know where they are, where have they
just been, when where can they go to.
Any element that provides context can be
seen as part of the navigation system. 35/56

For instance, page and section titles tell the
user where they are, links such as previous
or next.
NAVIGATION SYSTEMS
context
Also, organizing links into menus of like topics

allows people to see relationships between
links and the information behind them,
such as breadcrumb navigation* menus.
36/56

NAVIGATION SYSTEMS
breadcrumb navigation | 面包屑导航
A textual representation of where and how

information is located within a system/
product. It displays how major categories
of information are linked along a
sequential order. 37/56

于网站内部信息定位位置和方式的
有描述；它展示了各主要类型
的信息是如何通过一个连续顺序而
链接起来的。
A very important step of thinking through the

structure of your interactive product are the
labels* used in the navigation system.
40/56

labels | 标签
In information architecture, labels are the

names used to identify the links, the names
of the pages and section headings, or the
names of the features of a system.
41/56
在信息构架中，指用来识链接的名

称、页面的名字和章节的标题，或
者某一系统各特征的名称。
labels | 标签
They help to orient the user and keep them

on track, as well as to inform them about
the contents of the section they are in.
它们可帮助用户定位，使其保持在正 42/56
常状态，通告他们所在章节的内

容。
building a good labeling system
The most important rule of building a good

labeling system is to think like a user.
If your Website is designed for the end user, do

not include engineering or marketing 43/56
jargon in the copy -- this will only serve to

alienate your users (at best). Labeling must
also be clear and consistent throughout
the site.
BUILDING A GOOD LABELING SYSTEM
sources of labeling
Your Site
Create a table of the existing labels and what
they represent;
Comparable & Competitive Sites 44/56
Find the labeling pattern that is already in

place in the industry/competition;
Controlled vocabularies and thesauri

Seek out focused vocabularies that help
specific audience (e.g.. medical, engineering)
sources of labeling
Content Analysis
Focus on things like titles, summaries, and
abstracts;
Content Authors 45/56
Make their own suggestions;

User Advocates and Subject Matter Experts
Work with librarians and the like who can
speak on behalf of the user - those who
know what the users want;
sources of labeling
Users
Learn how the site's users will use the
information - card sorting* exercises where
users are asked to cluster labels of existing
content into their own categories and then 46/56
label the categories or where they are given

existing categories and asked to sort
content into those categories
card sorting | 卡片排序
A technique for exploring how people

group items, so that you can develop
structures that maximize the probability
of users being able to find items.
47/56
拓展人们如何将项目成组的一技

法，你可以设计各结构，将用
户找到项目的概率最大化。
CARD SORTING
benefits
Is easy and cheap to conduct;
Enables you to understand how real

people are likely to group items;
48/56
Identifies items that are likely to be

difficult to categorize and find;
Identifies terminology that is likely to be

misunderstood.
CARD SORTING
how is it conducted?
1. Names of items to be categorized are

printed on individual cards:
Cards should be large enough to
accommodate the names in a font that
participants can read easily when 49/56
spread out on a desk or table–at least

14 point.
2. Participants are asked to group

items in a way that makes sense to
them.
50/56
ACTIVITY #06
card sorting
1. Using post-it note cards, write down all

the features (特征) of your interactive
product (one feature per card);
2. Allow another team to group the 51/56
features in a way to make sense to

them;
3. Analyze the grouping and create a

navigation system based on that
organization;
HOMEWORK [ GROUPS ]
navigation system
1. In your groups, analyze the grouping of

information done during the card-sorting
session and devise a complete
navigation system.
52/56
2. The navigation system must contemplate

all issues of information architecture:
-Flexibility, Structure & Context;
-Good & Consistent Labeling System;
53/56
HOMEWORK [ INDIVIDUAL ]
sketchbook
1. Choose 5 (five) words marked with asterisks

(*) you’ve seen in this class and create 5 (five)
posters -- one for each word -- on separate
pages of your sketchbook;
55/56
2. Each poster must include:

-The word chosen, with its English definition;
-3 (three) pictures;
-2 (two) websites;
-Your comments/impressions of the definition.
HOMEWORK [ INDIVIDUAL ]
tags
MJOLT UFSNJOPMPEZ
NFOVT
UBCMFPGDPOUFOUT
OBWJHBUJPOTZTUFNT
DPOUFYU TFBSDIFOHJOFT
56/56
DBSETPSUJOH

CSFBEDSVNCOBWJHBUJPO
TJUFNBQT
MBCFMT

UID: Lesson 05 - Information Architecture &amp; Content Organization

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

UID: Lesson 05 - Information Architecture &amp; Content Organization

Uploaded by

Copyright:

Available Formats

INFORMATION ARCHITECTURE & CONTENT ORGANIZATION

USER INTERACTION DESIGN

Answer to commands promptly;

No food, no drinks, no games in class;

Always keep your mobile in silent mode;

No electronic devices during class-time;

USER INTERACTION DESIGN

of the content and the tasks to be

USER INTERACTION DESIGN

USER INTERACTION DESIGN

Organizing functionality and content into

Organizations must recognize the

USER INTERACTION DESIGN

USER INTERACTION DESIGN

好的信息构架 保数据结构化，致使 7 /56

USER INTERACTION DESIGN

The incredible amount of functionality and

information on oﬀer, so they can

USER INTERACTION DESIGN

Information architecture helps us describe

The way information is grouped;

USER INTERACTION DESIGN

The technical or specialized words and

USER INTERACTION DESIGN

Information architecture take into account the

USER INTERACTION DESIGN

The set of facts or circumstances that

USER INTERACTION DESIGN

While designing the information architecture,

USER INTERACTION DESIGN

Information architecture organize content

USER INTERACTION DESIGN

The navigation system is the physical

USER INTERACTION DESIGN

A well designed navigation system is critical to

USER INTERACTION DESIGN

The most common navigation element is a

connections between documents that can

USER INTERACTION DESIGN

A component of a user interface that allows

USER INTERACTION DESIGN

A graphic, line of text, or both on a web-

USER INTERACTION DESIGN

An organized list of titles for quick

USER INTERACTION DESIGN

Web services which help search through

USER INTERACTION DESIGN

Overview of the navigational structure of a

USER INTERACTION DESIGN

The purpose of a good navigation system goes

USER INTERACTION DESIGN

Interactive products with a good navigation

This is why the navigation system should grow

USER INTERACTION DESIGN

As well as having structure, navigation

USER INTERACTION DESIGN

The information structure the site is built upon

designed navigation system can actually

USER INTERACTION DESIGN

Context is information that lets the user

USER INTERACTION DESIGN

Also, organizing links into menus of like topics

USER INTERACTION DESIGN

A textual representation of where and how

UID: Lesson 05 - Information Architecture & Content Organization

UID: Lesson 05 - Information Architecture & Content Organization

好的信息构架保数据结构化，致使 7 /56