UID: Lesson 04 - Information Architecture & Way-Finding

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43

welcome toUSER INTERACTION DESIGN

LecturerItamar Medeiros (Brazil)BA in Industrial Design;PgDip in Information Design;

ExpertiseMultimedia/Web Design, Photography, Information Design and Human-Computer Interaction.

1

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43

CLASSROOM RULESitamar medeiros

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

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43

LESSON 04:INFORMATION ARCHITECTURE& WAY-FINDING learning outcome

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

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43

LESSON 04:INFORMATION ARCHITECTURE& WAY-FINDING content

Introduction to Information Architecture principles;

Introduction to Content Organization techniques;

4

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43

INFORMATION ARCHITECTURE& WAY-FINDING

The first generation of corporate Web sites consisted mainly of online brochures— a few static HTML pages with occasional online form to request more information.

Since then, the Web has grown exponentially: company Web sites that were once a few static pages are now hundreds or thousands of pages in size, meriting their own budgets and staff.

5

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43


In order to keep the interaction of your product meaning to the users, one must put effort on designing an interface* with a meaningful navigation*, and organize its content* in appropriate ways.

6

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43

INFORMATION ARCHITECTURE& WAY-FINDINGinterface | 界面An integrated composite that consists of one

or more of the processes, hardware, software, facilities and people, that provides a capability to satisfy a stated need or objective.

包括一个或者更多过程、硬件、软件、设备和人员的一个一体化合成体，它具有满足一项陈述的需要或者目的的能力。

7

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43

INFORMATION ARCHITECTURE& WAY-FINDINGinterface | 界面A user interface is the system of controls

with which the user controls a device.

一个用户界面是用户控制某设备的控制系统。 8

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43

INFORMATION ARCHITECTURE& WAY-FINDINGnavigation | 导航Process by which a user explores all the

levels of interactivity, moving forward, backward, and through the content and interface screens.

用户探索互动活动的所有水平的过程，包括向前、向后、通过内容和界面屏幕。

11

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43

INFORMATION ARCHITECTURE& CONTENT ORGANIZATIONcontent | 内容The text, pictures and sound that make up

a interactive system/product, as opposed to the display characteristics like font size, colors, positioning, borders, etc.

组成一个交互系统或者产品的文字、图片和声音。相对于展示特点而言，例如字体大小、色彩、定位和边界等；

13

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43


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.

15

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43

INFORMATION ARCHITECTURE& WAY-FINDINGinformation architecture | 信息构架The design and structure of an interactive

system/product.

一个交互系统或者产品的设计和结构16

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43

INFORMATION ARCHITECTURE& WAY-FINDINGinformation architecture | 信息构架Good information architecture ensures that

data is structured so that information can be easily found by the user.

好的信息构架确保数据结构化，致使用户可以轻易地找到信息。

17

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43

THE PROBLEM:FINDING IS THE NEW DOING

Computer systems used to be frustrating because they did very little quite badly. People using systems became frustrated because they simply weren’t capable of doing what they were required to do.

18

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43


But technology has progressed and now technology can do practically whatever people want it to do.

So why doesn’t everyone using a computer have a large smile on their face?

19

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43


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?

20

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43

FINDING IS THE NEW DOINGinformation architecture

Information Architecture can draw from the physical world orienting principles, such as way-finding, so that we can help users build their own strategy to navigate through the content of a product/system.

21

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43

FINDING IS THE NEW DOINGway-finding

Imagine a world where there were no signs or indications of where one thing ended and another began?

We rely on visual cues in the environment to not only tell us where we are, how to get where we want to be, but also when we get there.

22

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43

FINDING IS THE NEW DOINGway-finding | 建

In architecture, it refers to the user experience of orientation and choosing a path within the built environment.

在已经建造完成的环境中，选择行路方向的行路者体验。

24

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43


It also refers to the set of architectural and/or design elements that aids orientation.

有助于导引方向的建筑和/或设计元素组合。

25

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43


Architects and designers face unique challenges in combining visual guidance with their designs.

Understanding what way-finding-- or spatial orientation is--, is essential to incorporating it into the built environment: physical or virtual.

26

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43

FINDING IS THE NEW DOINGway-finding

The way-finding strategy in the physical world -- such as in public spaces -- should be place-based and as intuitive possible, referring to notable and memorable buildings and landmarks as well as clearly defined and identified places.

31

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43

ACTIVITY #5way-finding

In your GROUPS, locate the room you’ve picked inside the campus, and trace a route from it to THIS CLASSROOM, referring to any notable or memorable buildings and landmarks;

The objective is to make a way-finding guide, well as clearly defined and identified places.

34

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43

INTUITIVE NAVIGATIONDOESN’T HAPPEN BY CHANCE

Not only is this extremely frustrating for users, but it has serious repercussions for organizations.

35

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43

INTUITIVE NAVIGATIONDOESN’T HAPPEN BY CHANCEthe cost of failure

For intranets* it means low adoption rates and staff reverting to unsupported offline resources.

For websites* with online shopping facilities -- for example -- it has a significant impact on revenue*.

36

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43

COST OF FAILUREintranet | 内部网络

A private network inside a company or organization that uses the same kinds of software that you would find on the public Internet, but that is only for internal use.

公司或者组织内容的一个私人化网站，使用在公共因特网上可以找到的同样种类的软件，但是该网站只为内部使用。

37

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43

COST OF FAILUREwebsite | 网站

A set of interconnected web-pages, generally located on the same server, and prepared and maintained as to provide some kind information or service by a person, group, or organization.

一组相互链接的网页，往往位于一个同样的服务器上，准备和维护以用来提供个人、团体或者组织的某些信息。

38

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43

COST OF FAILURErevenue | 收入

The amount of money that a company actually receives from its activities, mostly from sales of products and/or services to customers.

公司从其活动，大多数来自于向客户销售产品和/或服务中的实际所得。

39

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43

COST OF FAILUREcomplicated navigation

Research suggests that a significant number of shopping attempts fail not because the user has evaluated the products on offer and decided against a purchase, but because the navigation system has failed and user can't find the product they are interested in.

40

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43

HOMEWORK [ GROUPS ]way-finding

1. Choose 3 (three) of the following websites:http://www.thebar.com/http://whatisthematrix.warnerbros.com/http://www.nationalgallery.org.uk/http://shopping.yahoo.com/http://www.sydneyoperahouse.com/sections/tours/virtual_tour/

2. Navigate each website your group have chosenin a way that you go -- at least -- 3 (three) clicks away from the home-page, then trace the route back from that point to the home-page;

41

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43

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.

42

USE

R IN

TERA

CTIO

N D

ESIG

NIN

FORM

ATIO

N A

RCH

ITEC

TURE

& W

AY-F

IND

ING

/43

HOMEWORK [ INDIVIDUAL ] tags

43

Documents

UID: Lesson 04 - Information Architecture & Way-Finding