This is part II of principles of creating a sensible, comprehensible, memorable and convenient organization of the content and the tasks to be performed on their interactive product.

1. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
welcometo
USERINTERACTIONDESIGN
Lecturer
Itamar Medeiros (Brazil)
BA in Industrial Design;
PgDip in Information Design;
Expertise
Multimedia/Web Design,
Photography, Information Design
and Human-Computer Interaction.
1

2. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
CLASSROOMRULES
itamarmedeiros
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;
Bring only class related material to class;
2

3. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
LESSON05:
INFORMATIONARCHITECTURE
&CONTENTORGANIZATION
learningoutcome
Students will understand principles of
creating sensible, comprehensible,
memorable, and convenient organization
of the content and the tasks to be
performed on their interactive product.
3

4. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
LESSON05:
INFORMATIONARCHITECTURE
&CONTENTORGANIZATION
content
Introduction to Information Architecture
principles;
Introduction to Content Organization
techniques;
4

5. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
INFORMATIONARCHITECTURE
&CONTENTORGANIZATION
Organizing functionality and content into
a structure that people are able to
navigate intuitively doesn’t happen by
chance.
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.
5

6. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
INFORMATIONARCHITECTURE
&CONTENTORGANIZATION
informationarchitecture | 信息构架
The design and structure of an interactive
system/product.
一个交互系统或者产品的设计和结
构。
6

7. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
INFORMATIONARCHITECTURE
&CONTENTORGANIZATION
informationarchitecture | 信息构架
Good information architecture ensures that
data is structured so that information
can be easily found by the user.
好的信息构架确保数据结构化，致使
用户可以轻易地找到信息。
7

8. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
INFORMATIONARCHITECTURE
&CONTENTORGANIZATION
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
information on offer, so they can
successfully find the information they
want and thus find value in the system?
8

9. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
INFORMATIONARCHITECTURE
whatisit?
Information architecture helps us describe
the structure of a system:
The way information is grouped;
Its navigation system;
The terminology* used within the system.
9

10. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
INFORMATIONARCHITECTURE
terminology | 术语
The technical or specialized words and
expressions of a subject or system.
一门学科或者系统的技术或者专业单
词和表达。
10

11. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
INFORMATIONARCHITECTURE
whatisit?
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

12. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
INFORMATIONARCHITECTURE
context | 背景
The set of facts or circumstances that
surround a situation or event.
围绕某一情况或者事件的一系列情况
或者环境。
12

13. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
INFORMATIONARCHITECTURE
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

15. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
INFORMATIONARCHITECTURE
helpingpeoplefindinformation
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

16. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
INFORMATIONARCHITECTURE
navigationsystems | 导航系统
The navigation system is the physical
manifestation of an organizational
structure. It determines how information
is actually going to be interconnected.
一个组织结构的物理性表述。它决定
了信息究竟是如何相互链接的。
16

17. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
NAVIGATIONSYSTEMS
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

18. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
NAVIGATIONSYSTEMS
mostcommonelements
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
connections between documents that can
be though of.
18

19. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
NAVIGATIONSYSTEMS
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

20. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
20

21. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
NAVIGATIONSYSTEMS
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

23. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
NAVIGATIONSYSTEMS
tableofcontents | 目录
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

26. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
NAVIGATIONSYSTEMS
searchengines | 搜索引擎
Web services which help search through
Internet addresses for user-defined
terms or topics in which users are
interested.
通过互联网地址针对用户感兴趣的用
户定义的术语或者主题，提供的网
络搜索服务。
26

29. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
NAVIGATIONSYSTEMS
sitemap | 网站地图
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

30. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
NAVIGATIONSYSTEMS
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:
• Structure
• Flexibility
• Context
30

31. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
NAVIGATIONSYSTEMS
structure
Interactive products with a good navigation
system allows the user to understand its
structure in a way that facilitates
navigation.
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.
31

32. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
32

33. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
NAVIGATIONSYSTEMS
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

34. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
NAVIGATIONSYSTEMS
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
designed navigation system can actually
reinforce the site structure by effectively
working around it.
34

35. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
NAVIGATIONSYSTEMS
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.
For instance, page and section titles tell the
user where they are, links such as previous
or next.
35

36. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
NAVIGATIONSYSTEMS
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

37. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
NAVIGATIONSYSTEMS
breadcrumbnavigation | 面包屑导航
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

40. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
INFORMATIONARCHITECTURE
A very important step of thinking through the
structure of your interactive product are the
labels* used in the navigation system.
40

41. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
INFORMATIONARCHITECTURE
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

42. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
INFORMATIONARCHITECTURE
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

43. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
INFORMATIONARCHITECTURE
buildingagoodlabelingsystem
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
jargon in the copy -- this will only serve to
alienate your users (at best). Labeling must
also be clear and consistent throughout
the site.
43

44. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
BUILDINGAGOODLABELINGSYSTEM
sourcesoflabeling
Your Site
Create a table of the existing labels and what
they represent;
Comparable & Competitive Sites
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)
44

45. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
BUILDINGAGOODLABELINGSYSTEM
sourcesoflabeling
Content Analysis
Focus on things like titles, summaries, and
abstracts;
Content Authors
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;
45

46. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
BUILDINGAGOODLABELINGSYSTEM
sourcesoflabeling
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
label the categories or where they are given
existing categories and asked to sort
content into those categories
46

47. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
BUILDINGAGOODLABELINGSYSTEM
cardsorting | 卡片排序
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

48. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
CARDSORTING
benefits
Is easy and cheap to conduct;
Enables you to understand how real
people are likely to group items;
Identifies items that are likely to be
difficult to categorize and find;
Identifies terminology that is likely to be
misunderstood.
48

49. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
CARDSORTING
howisitconducted?
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
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.
49

50. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
50

51. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
ACTIVITY#06
cardsorting
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
features in a way to make sense to
them;
3. Analyze the grouping and create a
navigation system based on that
organization;
51

52. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
HOMEWORK[GROUPS]
navigationsystem
1. In your groups, analyze the grouping of
information done during the card-sorting
session and devise a complete
navigation system.
2. The navigation system must contemplate
all issues of information architecture:
-Flexibility, Structure & Context;
-Good & Consistent Labeling System;
52

53. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
53

55. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/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;
2. Each poster must include:
-The word chosen, with its English definition;
-3 (three) pictures;
-2 (two) websites;
-Your comments/impressions of the definition.
55

56. USER
INTERACTION
DESIGN
INFORMATION
ARCHITECTURE
&
CONTENT
ORGANIZATION
/56
HOMEWORK[INDIVIDUAL]
tags
56
OBWJHBUJPOTZTUFNT
DBSETPSUJOH
DPOUFYU
TJUFNBQT
TFBSDIFOHJOFT
UBCMFPGDPOUFOUT
CSFBEDSVNCOBWJHBUJPO
UFSNJOPMPEZ
NFOVT
MJOLT
MBCFMT