SlideShare uma empresa Scribd logo
1 de 56
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
welcome to
USER INTERACTION DESIGN

Lecturer
  Itamar Medeiros (Brazil)
  BA in Industrial Design;
  PgDip in Information Design;
                                    1 /56




                                    USER INTERACTION DESIGN
Expertise
  Multimedia/Web Design,
  Photography, Information Design
  and Human-Computer Interaction.
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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;




                                              USER INTERACTION DESIGN
Bring only class related material to class;
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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




                                             USER INTERACTION DESIGN
   performed on their interactive product.
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
LESSON 05:
INFORMATION ARCHITECTURE
& CONTENT ORGANIZATION
content
Introduction to Information Architecture
   principles;
                                           4 /56
Introduction to Content Organization




                                           USER INTERACTION DESIGN
   techniques;
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
INFORMATION ARCHITECTURE
& CONTENT ORGANIZATION

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




                                                USER INTERACTION DESIGN
  importance of information architecture*
  or else they run the risk of creating great
  content and functionality that no one can
  ever find.
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
INFORMATION ARCHITECTURE
& CONTENT ORGANIZATION
information architecture | 信息构架
The design and structure of an interactive
  system/product.

一个交互系统或者产品的设计和结
  构。
                                             6 /56




                                             USER INTERACTION DESIGN
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
INFORMATION ARCHITECTURE
& CONTENT ORGANIZATION
information architecture | 信息构架
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
& 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                 8 /56

  information on offer, so they can




                                             USER INTERACTION DESIGN
  successfully find the information they
  want and thus find value in the system?
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
INFORMATION ARCHITECTURE
what is it?

Information architecture helps us describe
   the structure of a system:

The way information is grouped;
                                             9 /56
Its navigation system;




                                             USER INTERACTION DESIGN
The terminology* used within the system.
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
INFORMATION ARCHITECTURE
terminology | 术语

The technical or specialized words and
  expressions of a subject or system.

一门学科或者系统的技术或者专业单
  词和表达。
                                         10/56




                                          USER INTERACTION DESIGN
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
INFORMATION ARCHITECTURE
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




                                                   USER INTERACTION DESIGN
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
INFORMATION ARCHITECTURE
context | 背景

The set of facts or circumstances that
  surround a situation or event.

围绕某一情况或者事件的一系列情况
  或者环境。
                                         12/56




                                          USER INTERACTION DESIGN
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
INFORMATION ARCHITECTURE
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




                                                 USER INTERACTION DESIGN
在设计信息构架时,指让用户知晓他
  们在       里,去过         里和何时、他们
  去何处的信息。
Information Architecture and Content Organization
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
INFORMATION ARCHITECTURE
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




                                                   USER INTERACTION DESIGN
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
INFORMATION ARCHITECTURE
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

一个组织结构的物理性表述。它决定




                                              USER INTERACTION DESIGN
  了信息究竟是如何相互链接的。
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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




                                                    USER INTERACTION DESIGN
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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




                                                 USER INTERACTION DESIGN
  be though of.
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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
允许用户从预先设置列单中选择的用
 户界面的一个组成部分,其中每一
 项执行一个期望的命令,例如选择
 一个命令,或者在一个系统或者产
 品内导航等。
USER INTERACTION DESIGN           INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
                          20/56
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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

在网页上一个图片、文字行或                        者与




                                              USER INTERACTION DESIGN
  同一网站上的另一页网页链接,或
  与位于其他网站上的网页链接。
Information Architecture and Content Organization
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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




                                             USER INTERACTION DESIGN
一个有条理性的主题列单,提供书本
 或文件内容的快速检索及向读者或
 者用户引导文件中的任何主题或者
 部分。
Information Architecture and Content Organization
Information Architecture and Content Organization
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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

通过互联网地址针对用户感                    趣的用




                                          USER INTERACTION DESIGN
  户定义的术语或者主题,提供的网
  络搜索服务。
Information Architecture and Content Organization
Information Architecture and Content Organization
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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

网站的导航结构的概况,好比一个目




                                               USER INTERACTION DESIGN
  录,用来导向用户,展示网站范
  围。
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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




                                                USER INTERACTION DESIGN
• Structure

• Flexibility

• Context
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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




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




                                               USER INTERACTION DESIGN
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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




                                                    USER INTERACTION DESIGN
  reinforce the site structure by effectively
  working around it.
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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




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




                                                    USER INTERACTION DESIGN
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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




                                                USER INTERACTION DESIGN
  于网站内部信息定位位置和方式的
  有 描述;它展示了各 主要类型
  的信息是如何通过一个连续顺序而
  链接起来的。
Information Architecture and Content Organization
Information Architecture and Content Organization
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
INFORMATION ARCHITECTURE


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 & CONTENT ORGANIZATION
INFORMATION ARCHITECTURE
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

在信息构架中,指用来识                      链接的名




                                                  USER INTERACTION DESIGN
  称、页面的名字和章节的标题,或
  者某一系统各特征的名称。
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
INFORMATION ARCHITECTURE
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



  常状态,通告他们所在章节的内




                                               USER INTERACTION DESIGN
  容。
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
INFORMATION ARCHITECTURE
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




                                                     USER INTERACTION DESIGN
    alienate your users (at best). Labeling must
    also be clear and consistent throughout
    the site.
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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




                                                    USER INTERACTION DESIGN
  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
BUILDING A GOOD LABELING SYSTEM
sources of labeling

Content Analysis
  Focus on things like titles, summaries, and
  abstracts;

Content Authors                                 45/56

  Make their own suggestions;




                                                 USER INTERACTION DESIGN
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
BUILDING A GOOD LABELING SYSTEM
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




                                                   USER INTERACTION DESIGN
  existing categories and asked to sort
  content into those categories
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
BUILDING A GOOD LABELING SYSTEM
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

拓展人们如何将项目成组的一                          技




                                               USER INTERACTION DESIGN
  法,你可以设计各                  结构,将用
  户找到项目的概率最大化。
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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




                                              USER INTERACTION DESIGN
  difficult to categorize and find;

Identifies terminology that is likely to be
  misunderstood.
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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




                                             USER INTERACTION DESIGN
   14 point.

2. Participants are asked to group
   items in a way that makes sense to
   them.
USER INTERACTION DESIGN           INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
                          50/56
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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




                                               USER INTERACTION DESIGN
   them;

3. Analyze the grouping and create a
   navigation system based on that
   organization;
INFORMATION ARCHITECTURE & CONTENT 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




                                               USER INTERACTION DESIGN
   all issues of information architecture:
   -Flexibility, Structure & Context;
   -Good & Consistent Labeling System;
USER INTERACTION DESIGN           INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
                          53/56
Information Architecture and Content Organization
INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
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:




                                                       USER INTERACTION DESIGN
   -The word chosen, with its English definition;
   -3 (three) pictures;
   -2 (two) websites;
   -Your comments/impressions of the definition.
tags
                                                                  HOMEWORK [ INDIVIDUAL ]




USER INTERACTION DESIGN           INFORMATION ARCHITECTURE & CONTENT ORGANIZATION
                          56/56

Mais conteúdo relacionado

Semelhante a Information Architecture and Content Organization

Paper Prototyping & Wireframes (User Interaction Design at Raffles Design In...
Paper Prototyping & Wireframes  (User Interaction Design at Raffles Design In...Paper Prototyping & Wireframes  (User Interaction Design at Raffles Design In...
Paper Prototyping & Wireframes (User Interaction Design at Raffles Design In...Itamar Medeiros
 
Paper Prototyping and Wireframes
Paper Prototyping and WireframesPaper Prototyping and Wireframes
Paper Prototyping and WireframesItamar Medeiros
 
Developing an information architecture
Developing an information architectureDeveloping an information architecture
Developing an information architectureAdityasaini73
 
Long Live Information Architecture
Long Live Information ArchitectureLong Live Information Architecture
Long Live Information ArchitectureDarren Hood, MSUXD
 
User Research and Scenarios
User Research and ScenariosUser Research and Scenarios
User Research and ScenariosItamar Medeiros
 
Information Architecture Development
Information Architecture DevelopmentInformation Architecture Development
Information Architecture DevelopmentAchmad Solichin
 
STI, MetaRational #2
STI, MetaRational #2STI, MetaRational #2
STI, MetaRational #2João Ramos
 
Information Architecture Intro
Information Architecture IntroInformation Architecture Intro
Information Architecture Introhapy
 
Introduction to Interaction Design
Introduction to Interaction DesignIntroduction to Interaction Design
Introduction to Interaction DesignItamar Medeiros
 
The UX Disciplines
The UX DisciplinesThe UX Disciplines
The UX DisciplinesNick Finck
 
Information Architecture: Get Your Blue Prints in Order
Information Architecture: Get Your Blue Prints in OrderInformation Architecture: Get Your Blue Prints in Order
Information Architecture: Get Your Blue Prints in OrderBusinessOnline
 
Intranets - Vision, Approach and Best Practices by Optimus BT
Intranets - Vision, Approach and Best Practices by Optimus BTIntranets - Vision, Approach and Best Practices by Optimus BT
Intranets - Vision, Approach and Best Practices by Optimus BTOptimus BT
 
Engelman.2011.exploring interaction modes for image retrieval
Engelman.2011.exploring interaction modes for image retrievalEngelman.2011.exploring interaction modes for image retrieval
Engelman.2011.exploring interaction modes for image retrievalmrgazer
 
Konsep-UX-Design-dikonversi 02.pdf
Konsep-UX-Design-dikonversi 02.pdfKonsep-UX-Design-dikonversi 02.pdf
Konsep-UX-Design-dikonversi 02.pdfAgusNugrosNugroho
 
584697015-UI-and-UX-hiten presentation.pptx
584697015-UI-and-UX-hiten presentation.pptx584697015-UI-and-UX-hiten presentation.pptx
584697015-UI-and-UX-hiten presentation.pptxhirenmkaklotar19
 
Principles of Interaction Design
Principles of Interaction DesignPrinciples of Interaction Design
Principles of Interaction DesignPatrick Morgan
 
Konsep-UX-Design-dikonversi.pdf
Konsep-UX-Design-dikonversi.pdfKonsep-UX-Design-dikonversi.pdf
Konsep-UX-Design-dikonversi.pdfAgusNugrosNugroho
 

Semelhante a Information Architecture and Content Organization (20)

Paper Prototyping & Wireframes (User Interaction Design at Raffles Design In...
Paper Prototyping & Wireframes  (User Interaction Design at Raffles Design In...Paper Prototyping & Wireframes  (User Interaction Design at Raffles Design In...
Paper Prototyping & Wireframes (User Interaction Design at Raffles Design In...
 
Paper Prototyping and Wireframes
Paper Prototyping and WireframesPaper Prototyping and Wireframes
Paper Prototyping and Wireframes
 
Developing an information architecture
Developing an information architectureDeveloping an information architecture
Developing an information architecture
 
Long Live Information Architecture
Long Live Information ArchitectureLong Live Information Architecture
Long Live Information Architecture
 
User Research and Scenarios
User Research and ScenariosUser Research and Scenarios
User Research and Scenarios
 
Information Architecture Development
Information Architecture DevelopmentInformation Architecture Development
Information Architecture Development
 
STI, MetaRational #2
STI, MetaRational #2STI, MetaRational #2
STI, MetaRational #2
 
Information Architecture Intro
Information Architecture IntroInformation Architecture Intro
Information Architecture Intro
 
Introduction to Interaction Design
Introduction to Interaction DesignIntroduction to Interaction Design
Introduction to Interaction Design
 
What is IA?
What is IA?What is IA?
What is IA?
 
The UX Disciplines
The UX DisciplinesThe UX Disciplines
The UX Disciplines
 
Information Architecture: Get Your Blue Prints in Order
Information Architecture: Get Your Blue Prints in OrderInformation Architecture: Get Your Blue Prints in Order
Information Architecture: Get Your Blue Prints in Order
 
Intranets - Vision, Approach and Best Practices by Optimus BT
Intranets - Vision, Approach and Best Practices by Optimus BTIntranets - Vision, Approach and Best Practices by Optimus BT
Intranets - Vision, Approach and Best Practices by Optimus BT
 
Cross channel ux
Cross channel uxCross channel ux
Cross channel ux
 
Engelman.2011.exploring interaction modes for image retrieval
Engelman.2011.exploring interaction modes for image retrievalEngelman.2011.exploring interaction modes for image retrieval
Engelman.2011.exploring interaction modes for image retrieval
 
Konsep-UX-Design-dikonversi 02.pdf
Konsep-UX-Design-dikonversi 02.pdfKonsep-UX-Design-dikonversi 02.pdf
Konsep-UX-Design-dikonversi 02.pdf
 
584697015-UI-and-UX-hiten presentation.pptx
584697015-UI-and-UX-hiten presentation.pptx584697015-UI-and-UX-hiten presentation.pptx
584697015-UI-and-UX-hiten presentation.pptx
 
Principles of Interaction Design
Principles of Interaction DesignPrinciples of Interaction Design
Principles of Interaction Design
 
Konsep-UX-Design-dikonversi.pdf
Konsep-UX-Design-dikonversi.pdfKonsep-UX-Design-dikonversi.pdf
Konsep-UX-Design-dikonversi.pdf
 
3 Information Architecture
3 Information Architecture3 Information Architecture
3 Information Architecture
 

Mais de Itamar Medeiros

Communication-Oriented Interface Design Principles (User Interaction Design ...
Communication-Oriented Interface Design Principles  (User Interaction Design ...Communication-Oriented Interface Design Principles  (User Interaction Design ...
Communication-Oriented Interface Design Principles (User Interaction Design ...Itamar Medeiros
 
Communication-Oriented Interface Design Principles: Part II (User Interactio...
Communication-Oriented Interface Design Principles: Part II  (User Interactio...Communication-Oriented Interface Design Principles: Part II  (User Interactio...
Communication-Oriented Interface Design Principles: Part II (User Interactio...Itamar Medeiros
 
Strategy PROCESS, QUESTIONS & RESOURCES
Strategy PROCESS, QUESTIONS & RESOURCESStrategy PROCESS, QUESTIONS & RESOURCES
Strategy PROCESS, QUESTIONS & RESOURCESItamar Medeiros
 
Problem Framing for Strategic Design
Problem Framing for Strategic DesignProblem Framing for Strategic Design
Problem Framing for Strategic DesignItamar Medeiros
 
Helping Teams Paddle in the Same Direction
Helping Teams Paddle in the Same DirectionHelping Teams Paddle in the Same Direction
Helping Teams Paddle in the Same DirectionItamar Medeiros
 
The Importance of Vision for Product Design
The Importance of Vision for Product DesignThe Importance of Vision for Product Design
The Importance of Vision for Product DesignItamar Medeiros
 
Problem Framing and Reframing:
Problem Framing and Reframing: Problem Framing and Reframing:
Problem Framing and Reframing: Itamar Medeiros
 
"Look, Listen, and Maybe Speak" at UX Poland 2015
"Look, Listen, and Maybe Speak" at UX Poland 2015"Look, Listen, and Maybe Speak" at UX Poland 2015
"Look, Listen, and Maybe Speak" at UX Poland 2015Itamar Medeiros
 
Tinker Tailor Soldier Spy: Twists & Turns of Working in Global Design Teams
Tinker Tailor Soldier Spy: Twists & Turns of Working in Global Design TeamsTinker Tailor Soldier Spy: Twists & Turns of Working in Global Design Teams
Tinker Tailor Soldier Spy: Twists & Turns of Working in Global Design TeamsItamar Medeiros
 
Designing Interactions / Experiences: Lecture #05
 Designing Interactions / Experiences: Lecture #05 Designing Interactions / Experiences: Lecture #05
Designing Interactions / Experiences: Lecture #05Itamar Medeiros
 
Designing Interactions / Experiences: Lecture #04
 Designing Interactions / Experiences: Lecture #04 Designing Interactions / Experiences: Lecture #04
Designing Interactions / Experiences: Lecture #04Itamar Medeiros
 
Designing Interactions / Experiences: Reflection in Action
Designing Interactions / Experiences: Reflection in ActionDesigning Interactions / Experiences: Reflection in Action
Designing Interactions / Experiences: Reflection in ActionItamar Medeiros
 
Designing Interactions / Experiences: Lecture #03
Designing Interactions / Experiences: Lecture #03Designing Interactions / Experiences: Lecture #03
Designing Interactions / Experiences: Lecture #03Itamar Medeiros
 
Designing Interactions / Experiences: Lecture #02
Designing Interactions / Experiences: Lecture #02Designing Interactions / Experiences: Lecture #02
Designing Interactions / Experiences: Lecture #02Itamar Medeiros
 
Designing Interactions: Lecture #01
Designing Interactions: Lecture #01Designing Interactions: Lecture #01
Designing Interactions: Lecture #01Itamar Medeiros
 
Voltando às Origens: Conversa com alunos da UPFE / UNICAP
Voltando às Origens: Conversa com alunos da UPFE / UNICAPVoltando às Origens: Conversa com alunos da UPFE / UNICAP
Voltando às Origens: Conversa com alunos da UPFE / UNICAPItamar Medeiros
 
Creative Drive In Workshop: "Crossing Borders with Information Design
Creative Drive In Workshop: "Crossing Borders with Information DesignCreative Drive In Workshop: "Crossing Borders with Information Design
Creative Drive In Workshop: "Crossing Borders with Information DesignItamar Medeiros
 
"Creativity & Design in Collaborative/Distributed Environments" talk at Socia...
"Creativity & Design in Collaborative/Distributed Environments" talk at Socia..."Creativity & Design in Collaborative/Distributed Environments" talk at Socia...
"Creativity & Design in Collaborative/Distributed Environments" talk at Socia...Itamar Medeiros
 
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of MetaphorsInformation Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of MetaphorsItamar Medeiros
 

Mais de Itamar Medeiros (20)

Communication-Oriented Interface Design Principles (User Interaction Design ...
Communication-Oriented Interface Design Principles  (User Interaction Design ...Communication-Oriented Interface Design Principles  (User Interaction Design ...
Communication-Oriented Interface Design Principles (User Interaction Design ...
 
Communication-Oriented Interface Design Principles: Part II (User Interactio...
Communication-Oriented Interface Design Principles: Part II  (User Interactio...Communication-Oriented Interface Design Principles: Part II  (User Interactio...
Communication-Oriented Interface Design Principles: Part II (User Interactio...
 
Strategy PROCESS, QUESTIONS & RESOURCES
Strategy PROCESS, QUESTIONS & RESOURCESStrategy PROCESS, QUESTIONS & RESOURCES
Strategy PROCESS, QUESTIONS & RESOURCES
 
Problem Framing for Strategic Design
Problem Framing for Strategic DesignProblem Framing for Strategic Design
Problem Framing for Strategic Design
 
Helping Teams Paddle in the Same Direction
Helping Teams Paddle in the Same DirectionHelping Teams Paddle in the Same Direction
Helping Teams Paddle in the Same Direction
 
The Importance of Vision for Product Design
The Importance of Vision for Product DesignThe Importance of Vision for Product Design
The Importance of Vision for Product Design
 
Problem Framing and Reframing:
Problem Framing and Reframing: Problem Framing and Reframing:
Problem Framing and Reframing:
 
"Look, Listen, and Maybe Speak" at UX Poland 2015
"Look, Listen, and Maybe Speak" at UX Poland 2015"Look, Listen, and Maybe Speak" at UX Poland 2015
"Look, Listen, and Maybe Speak" at UX Poland 2015
 
Six Thinking Hats
Six Thinking HatsSix Thinking Hats
Six Thinking Hats
 
Tinker Tailor Soldier Spy: Twists & Turns of Working in Global Design Teams
Tinker Tailor Soldier Spy: Twists & Turns of Working in Global Design TeamsTinker Tailor Soldier Spy: Twists & Turns of Working in Global Design Teams
Tinker Tailor Soldier Spy: Twists & Turns of Working in Global Design Teams
 
Designing Interactions / Experiences: Lecture #05
 Designing Interactions / Experiences: Lecture #05 Designing Interactions / Experiences: Lecture #05
Designing Interactions / Experiences: Lecture #05
 
Designing Interactions / Experiences: Lecture #04
 Designing Interactions / Experiences: Lecture #04 Designing Interactions / Experiences: Lecture #04
Designing Interactions / Experiences: Lecture #04
 
Designing Interactions / Experiences: Reflection in Action
Designing Interactions / Experiences: Reflection in ActionDesigning Interactions / Experiences: Reflection in Action
Designing Interactions / Experiences: Reflection in Action
 
Designing Interactions / Experiences: Lecture #03
Designing Interactions / Experiences: Lecture #03Designing Interactions / Experiences: Lecture #03
Designing Interactions / Experiences: Lecture #03
 
Designing Interactions / Experiences: Lecture #02
Designing Interactions / Experiences: Lecture #02Designing Interactions / Experiences: Lecture #02
Designing Interactions / Experiences: Lecture #02
 
Designing Interactions: Lecture #01
Designing Interactions: Lecture #01Designing Interactions: Lecture #01
Designing Interactions: Lecture #01
 
Voltando às Origens: Conversa com alunos da UPFE / UNICAP
Voltando às Origens: Conversa com alunos da UPFE / UNICAPVoltando às Origens: Conversa com alunos da UPFE / UNICAP
Voltando às Origens: Conversa com alunos da UPFE / UNICAP
 
Creative Drive In Workshop: "Crossing Borders with Information Design
Creative Drive In Workshop: "Crossing Borders with Information DesignCreative Drive In Workshop: "Crossing Borders with Information Design
Creative Drive In Workshop: "Crossing Borders with Information Design
 
"Creativity & Design in Collaborative/Distributed Environments" talk at Socia...
"Creativity & Design in Collaborative/Distributed Environments" talk at Socia..."Creativity & Design in Collaborative/Distributed Environments" talk at Socia...
"Creativity & Design in Collaborative/Distributed Environments" talk at Socia...
 
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of MetaphorsInformation Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
 

Último

UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 

Último (19)

UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 

Information Architecture and Content Organization

  • 1. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION welcome to USER INTERACTION DESIGN Lecturer Itamar Medeiros (Brazil) BA in Industrial Design; PgDip in Information Design; 1 /56 USER INTERACTION DESIGN Expertise Multimedia/Web Design, Photography, Information Design and Human-Computer Interaction.
  • 2. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 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; USER INTERACTION DESIGN Bring only class related material to class;
  • 3. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 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 USER INTERACTION DESIGN performed on their interactive product.
  • 4. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION LESSON 05: INFORMATION ARCHITECTURE & CONTENT ORGANIZATION content Introduction to Information Architecture principles; 4 /56 Introduction to Content Organization USER INTERACTION DESIGN techniques;
  • 5. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 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 USER INTERACTION DESIGN importance of information architecture* or else they run the risk of creating great content and functionality that no one can ever find.
  • 6. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION INFORMATION ARCHITECTURE & CONTENT ORGANIZATION information architecture | 信息构架 The design and structure of an interactive system/product. 一个交互系统或者产品的设计和结 构。 6 /56 USER INTERACTION DESIGN
  • 7. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION INFORMATION ARCHITECTURE & CONTENT ORGANIZATION information architecture | 信息构架 Good information architecture ensures that data is structured so that information can be easily found by the user. 好的信息构架 保数据结构化,致使 7 /56 用户可以轻易地找到信息。 USER INTERACTION DESIGN
  • 8. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 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 8 /56 information on offer, so they can USER INTERACTION DESIGN successfully find the information they want and thus find value in the system?
  • 9. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION INFORMATION ARCHITECTURE what is it? Information architecture helps us describe the structure of a system: The way information is grouped; 9 /56 Its navigation system; USER INTERACTION DESIGN The terminology* used within the system.
  • 10. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION INFORMATION ARCHITECTURE terminology | 术语 The technical or specialized words and expressions of a subject or system. 一门学科或者系统的技术或者专业单 词和表达。 10/56 USER INTERACTION DESIGN
  • 11. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION INFORMATION ARCHITECTURE 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 USER INTERACTION DESIGN
  • 12. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION INFORMATION ARCHITECTURE context | 背景 The set of facts or circumstances that surround a situation or event. 围绕某一情况或者事件的一系列情况 或者环境。 12/56 USER INTERACTION DESIGN
  • 13. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION INFORMATION ARCHITECTURE 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 USER INTERACTION DESIGN 在设计信息构架时,指让用户知晓他 们在 里,去过 里和何时、他们 去何处的信息。
  • 15. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION INFORMATION ARCHITECTURE 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 USER INTERACTION DESIGN
  • 16. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION INFORMATION ARCHITECTURE 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 一个组织结构的物理性表述。它决定 USER INTERACTION DESIGN 了信息究竟是如何相互链接的。
  • 17. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 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 USER INTERACTION DESIGN
  • 18. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 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 USER INTERACTION DESIGN be though of.
  • 19. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 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 允许用户从预先设置列单中选择的用 户界面的一个组成部分,其中每一 项执行一个期望的命令,例如选择 一个命令,或者在一个系统或者产 品内导航等。
  • 20. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 20/56
  • 21. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 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 在网页上一个图片、文字行或 者与 USER INTERACTION DESIGN 同一网站上的另一页网页链接,或 与位于其他网站上的网页链接。
  • 23. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 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 USER INTERACTION DESIGN 一个有条理性的主题列单,提供书本 或文件内容的快速检索及向读者或 者用户引导文件中的任何主题或者 部分。
  • 26. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 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 通过互联网地址针对用户感 趣的用 USER INTERACTION DESIGN 户定义的术语或者主题,提供的网 络搜索服务。
  • 29. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 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 网站的导航结构的概况,好比一个目 USER INTERACTION DESIGN 录,用来导向用户,展示网站范 围。
  • 30. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 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 USER INTERACTION DESIGN • Structure • Flexibility • Context
  • 31. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 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 USER INTERACTION DESIGN 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. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 32/56
  • 33. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 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 USER INTERACTION DESIGN
  • 34. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 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 USER INTERACTION DESIGN reinforce the site structure by effectively working around it.
  • 35. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 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 USER INTERACTION DESIGN For instance, page and section titles tell the user where they are, links such as previous or next.
  • 36. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 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 USER INTERACTION DESIGN
  • 37. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 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 USER INTERACTION DESIGN 于网站内部信息定位位置和方式的 有 描述;它展示了各 主要类型 的信息是如何通过一个连续顺序而 链接起来的。
  • 40. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION INFORMATION ARCHITECTURE 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
  • 41. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION INFORMATION ARCHITECTURE 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 在信息构架中,指用来识 链接的名 USER INTERACTION DESIGN 称、页面的名字和章节的标题,或 者某一系统各特征的名称。
  • 42. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION INFORMATION ARCHITECTURE 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 常状态,通告他们所在章节的内 USER INTERACTION DESIGN 容。
  • 43. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION INFORMATION ARCHITECTURE 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 USER INTERACTION DESIGN alienate your users (at best). Labeling must also be clear and consistent throughout the site.
  • 44. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 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 USER INTERACTION DESIGN place in the industry/competition; Controlled vocabularies and thesauri Seek out focused vocabularies that help specific audience (e.g.. medical, engineering)
  • 45. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION BUILDING A GOOD LABELING SYSTEM sources of labeling Content Analysis Focus on things like titles, summaries, and abstracts; Content Authors 45/56 Make their own suggestions; USER INTERACTION DESIGN 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;
  • 46. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION BUILDING A GOOD LABELING SYSTEM 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 USER INTERACTION DESIGN existing categories and asked to sort content into those categories
  • 47. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION BUILDING A GOOD LABELING SYSTEM 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 拓展人们如何将项目成组的一 技 USER INTERACTION DESIGN 法,你可以设计各 结构,将用 户找到项目的概率最大化。
  • 48. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 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 USER INTERACTION DESIGN difficult to categorize and find; Identifies terminology that is likely to be misunderstood.
  • 49. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 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 USER INTERACTION DESIGN 14 point. 2. Participants are asked to group items in a way that makes sense to them.
  • 50. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 50/56
  • 51. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 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 USER INTERACTION DESIGN them; 3. Analyze the grouping and create a navigation system based on that organization;
  • 52. INFORMATION ARCHITECTURE & CONTENT 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 USER INTERACTION DESIGN all issues of information architecture: -Flexibility, Structure & Context; -Good & Consistent Labeling System;
  • 53. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 53/56
  • 55. INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 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: USER INTERACTION DESIGN -The word chosen, with its English definition; -3 (three) pictures; -2 (two) websites; -Your comments/impressions of the definition.
  • 56. tags HOMEWORK [ INDIVIDUAL ] USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 56/56