Lecturer Itamar Medeiros (Brazil) BA in Industrial Design; PgDip in Information Design;
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
welcome to USER INTERACTION DESIGN
Expertise Multimedia/Web Design, Photography, Information Design and Human-Computer Interaction.
USER INTERACTION DESIGN
1 /56
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;
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
Answer to commands promptly;
2 /56
USER INTERACTION DESIGN
CLASSROOM RULES itamar medeiros
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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 /56
USER INTERACTION DESIGN
LESSON 05: INFORMATION ARCHITECTURE & CONTENT ORGANIZATION learning outcome
Introduction to Content Organization techniques;
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
Introduction to Information Architecture principles;
4 /56
USER INTERACTION DESIGN
LESSON 05: INFORMATION ARCHITECTURE & CONTENT ORGANIZATION content
Organizing functionality and content into a structure that people are able to navigate intuitively doesn’t happen by chance.
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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.
USER INTERACTION DESIGN
5 /56
一个交互系统或者产品的设计和结 构。
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
The design and structure of an interactive system/product.
6 /56
USER INTERACTION DESIGN
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION information architecture | 信息构架
好的信息构架
保数据结构化,致使
用户可以轻易地找到信息。
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
Good information architecture ensures that data is structured so that information can be easily found by the user.
7 /56
USER INTERACTION DESIGN
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION information architecture | 信息构架
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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 /56
USER INTERACTION DESIGN
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
The way information is grouped; Its navigation system; The terminology* used within the system.
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
Information architecture helps us describe the structure of a system:
9 /56
USER INTERACTION DESIGN
INFORMATION ARCHITECTURE what is it?
一门学科或者系统的技术或者专业单 词和表达。
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
The technical or specialized words and expressions of a subject or system.
10/56
USER INTERACTION DESIGN
INFORMATION ARCHITECTURE terminology | 术语
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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
USER INTERACTION DESIGN
INFORMATION ARCHITECTURE what is it?
围绕某一情况或者事件的一系列情况 或者环境。
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
The set of facts or circumstances that surround a situation or event.
12/56
USER INTERACTION DESIGN
INFORMATION ARCHITECTURE context | 背景
在设计信息构架时,指让用户知晓他 们在
里,去过
去何处的信息。
里和何时、他们
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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
USER INTERACTION DESIGN
INFORMATION ARCHITECTURE context | 背景
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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
USER INTERACTION DESIGN
INFORMATION ARCHITECTURE helping people find information
The navigation system is the physical manifestation of an organizational structure. It determines how information is actually going to be interconnected.
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
INFORMATION ARCHITECTURE navigation systems | 导航系统
一个组织结构的物理性表述。它决定 了信息究竟是如何相互链接的。
USER INTERACTION DESIGN
16/56
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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
USER INTERACTION DESIGN
NAVIGATION SYSTEMS
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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/56
USER INTERACTION DESIGN
NAVIGATION SYSTEMS most common elements
允许用户从预先设置列单中选择的用 户界面的一个组成部分,其中每一 项执行一个期望的命令,例如选择 一个命令,或者在一个系统或者产 品内导航等。
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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
NAVIGATION SYSTEMS menu | 菜单
USER INTERACTION DESIGN
20/56
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
A graphic, line of text, or both on a webpage that connects to another page on the same website or to one in another website located anywhere in the world.
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
NAVIGATION SYSTEMS links | 链接
在网页上一个图片、文字行或
者与
同一网站上的另一页网页链接,或 与位于其他网站上的网页链接。
USER INTERACTION DESIGN
21/56
一个有条理性的主题列单,提供书本 或文件内容的快速检索及向读者或 者用户引导文件中的任何主题或者 部分。
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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
USER INTERACTION DESIGN
NAVIGATION SYSTEMS table of contents | 目录
Web services which help search through Internet addresses for user-defined terms or topics in which users are interested.
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
NAVIGATION SYSTEMS search engines | 搜索引擎
通过互联网地址针对用户感
趣的用
户定义的术语或者主题,提供的网 络搜索服务。
USER INTERACTION DESIGN
26/56
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.
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
NAVIGATION SYSTEMS site map | 网站地图
网站的导航结构的概况,好比一个目 录,用来导向用户,展示网站范 围。
USER INTERACTION DESIGN
29/56
• Structure • Flexibility • Context
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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
USER INTERACTION DESIGN
NAVIGATION SYSTEMS purpose
Interactive products with a good navigation system allows the user to understand its structure in a way that facilitates navigation.
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
NAVIGATION SYSTEMS structure
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.
USER INTERACTION DESIGN
31/56
USER INTERACTION DESIGN
32/56
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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
USER INTERACTION DESIGN
NAVIGATION SYSTEMS flexibility
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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/56
USER INTERACTION DESIGN
NAVIGATION SYSTEMS flexibility
For instance, page and section titles tell the user where they are, links such as previous or next.
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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
USER INTERACTION DESIGN
NAVIGATION SYSTEMS context
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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
USER INTERACTION DESIGN
NAVIGATION SYSTEMS context
于网站内部信息定位位置和方式的 有 描述;它展示了各 主要类型 的信息是如何通过一个连续顺序而 链接起来的。
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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
USER INTERACTION DESIGN
NAVIGATION SYSTEMS breadcrumb navigation | 面包屑导航
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
A very important step of thinking through the structure of your interactive product are the labels* used in the navigation system.
40/56
USER INTERACTION DESIGN
INFORMATION ARCHITECTURE
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.
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
INFORMATION ARCHITECTURE labels | 标签
在信息构架中,指用来识
链接的名
称、页面的名字和章节的标题,或 者某一系统各特征的名称。
USER INTERACTION DESIGN
41/56
它们可帮助用户定位,使其保持在正 常状态,通告他们所在章节的内 容。
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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
USER INTERACTION DESIGN
INFORMATION ARCHITECTURE labels | 标签
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.
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
The most important rule of building a good labeling system is to think like a user.
43/56
USER INTERACTION DESIGN
INFORMATION ARCHITECTURE building a good labeling system
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)
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
Your Site Create a table of the existing labels and what they represent;
44/56
USER INTERACTION DESIGN
BUILDING A GOOD LABELING SYSTEM sources of labeling
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;
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
Content Analysis Focus on things like titles, summaries, and abstracts;
45/56
USER INTERACTION DESIGN
BUILDING A GOOD LABELING SYSTEM sources of labeling
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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/56
USER INTERACTION DESIGN
BUILDING A GOOD LABELING SYSTEM sources of labeling
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.
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
BUILDING A GOOD LABELING SYSTEM card sorting | 卡片排序
拓展人们如何将项目成组的一 法,你可以设计各
技
结构,将用
户找到项目的概率最大化。
USER INTERACTION DESIGN
47/56
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.
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
Is easy and cheap to conduct;
48/56
USER INTERACTION DESIGN
CARD SORTING benefits
2. Participants are asked to group items in a way that makes sense to them.
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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.
49/56
USER INTERACTION DESIGN
CARD SORTING how is it conducted?
USER INTERACTION DESIGN
50/56
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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;
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
1. Using post-it note cards, write down all the features (特征) of your interactive product (one feature per card);
51/56
USER INTERACTION DESIGN
ACTIVITY #06 card sorting
1. In your groups, analyze the grouping of information done during the card-sorting session and devise a complete navigation system.
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
HOMEWORK [ GROUPS ] navigation system
2. The navigation system must contemplate all issues of information architecture: -Flexibility, Structure & Context; -Good & Consistent Labeling System;
USER INTERACTION DESIGN
52/56
USER INTERACTION DESIGN
53/56
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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;
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
HOMEWORK [ INDIVIDUAL ] 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.
USER INTERACTION DESIGN
55/56
UFSNJOPMPEZ
NFOVT
UBCMFPGDPOUFOUT
DPOUFYU
OBWJHBUJPOTZTUFNT TFBSDIFOHJOFT
DBSETPSUJOH
CSFBEDSVNCOBWJHBUJPO
MBCFMT
TJUFNBQT
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
MJOLT
56/56
USER INTERACTION DESIGN
HOMEWORK [ INDIVIDUAL ] tags