the architecture of understanding

1

The Architecture of Understanding

Peter Morville, UX Lisbon 2012

2

3

4

5

#dtdt

6

in•for•ma•tion ar•chi•tec•ture n.

• The structural design of shared information environments.

• The combination of organization, labeling, search, and navigation systems in web sites and intranets.

• The art and science of shaping information products and experiences to support usability and findability.

• An emerging discipline and community of practice focused on bringing principles of design and architecture to the digital landscape.

Polar Bear IA

7

Framing

1. Classic Information Architecture (Polar Bear).

2. Web Strategy (Web, Mobile, Social).

3. Cross-Channel Strategy (Physical, Digital).

4. Ubiquitous IA (Intertwingularity)..

8

The Library of Congress“To further the progress of knowledge and

creativity.”.

FragmentationFragmentation into multiple sites, domains, and identities is clearly a major problem. Users don’t know which site to visit for which purpose.

Findability Users can’t find what they need from the home page, but most users don’t come through the front door. They enter via a web search or a deep link, and are confused by what they find. Even worse, most never use the Library, because its resources aren’t easily findable.

10

1. One Library

2. Core Areas

3. Network Intelligence

Web Strategy

11

Interfaces• Portal• Search• Object• Set• Page

Caveats• Visual Design• Starting Point

Wireframes

12

13Source: Search Patterns (2010)

Search is a Complex, Adaptive System

14

15

Where architects use forms and spaces to design environments for inhabitation, information architects use nodes and links to create environments for understanding.Jorge Arango, Architectures

16

17“Desire Lines” Photo: Berkeley Path Gallery by Kevin Fox

18

19

20

Experiences Across Channels

22

“People keep pretending they can make things deeply hierarchical, categorizable, and sequential when they can’t.

Everything is deeply intertwingled.” Ted Nelson

“Information is blurring the lines between products and services to create multi-channel, cross-platform, trans-media, physico-digital user experiences.” Peter Morville

23Source: Subject to Change (2008)

World’s Best Information

Architect

25

26

Desktop

Kiosk

Mobile

27

• Location (GPS)• Orientation (Compass)• Motion (Accelerometer)• Orientation/Motion (Gyroscope)• Touch (Multi-Touch, Gestural)• Light (Ambient)• Proximity• Device (Bluetooth)• Audio (Microphone)• Image/Video (Camera)• RFID (Soon)

Sensors

28

29

“After a half-hour, a three-tone alert sounds…If the bottle

still has not been opened, the system makes an automated

reminder phone call to the patient or a caregiver. The

GlowCap system compiles adherence data which anyone

can be authorized to track. That way the doctor can make

sure Gramps stays on his meds.”

30

31

32

33

BrainPort

Camera in glasses captures video.

Image recreated on grid of 400 electrodes.

User feels the shape on the tongue.

Brain learns to see through the tongue.

34

ProductPackagingPrint CatalogCall CenterWebsiteBlogFacebookTwitterYouTubeEmailDirect MailRadioTelevision

ChannelWebSocial MediaEmailMessagingTelephonePrint

PlatformWebiOSAndroidMac OS XMS Windows

DeviceDesktopLaptopMobileTabletTelevisionKiosk

ScaleCovertMobilePersonalEnvironmentalArchitecturalUrban

MediaBookNewspaperMagazineVideoAudioPosterBillboard

ContextHomeWorkWalkingDrivingShoppingPlanePartyPersonalSocialLocationTimeTask

Touchpoint Taxonomy

35

Design PrinciplesDesign

Principles

36

Cross-Channel Strategy

Composition multi- or cross-channel; mix of

platforms, devices, media; coherence

Consistency brand, features, organization, interaction

balanced against value of optimization

Connection links, tags, signs, maps; call to action

Continuity bookmark, resume playback, flow

Context personal, social, location, time, task

Conflict identify/resolve, org chart, free-riding

http://findability.org/archives/000652.php

37Adapted from Cross-Platform Service User Experience

portal.acm.org/citation.cfm?id=1851637

38

Craft beautiful designs that deliver a quality experience

to your users no matter how large (or small) their display.

1. Fluid Grids2. Flexible Images3. Media Queries

39

40

Why Separate Mobile & Desktop Web Pages at Bagcheck?

With a dual template system, we were able to optimize:

1. Source Order2. Media (Speed, Quality, Interaction)3. URL Structure4. Application Design

Navigation at Bottom

Navigation at Top

41

To make the right decisions about composition and

consistency, you need a cross-channel strategy.

42

Design for

Connection

43

Over 50% of REI online business is picked up in a store.

44

45

46

BarcodeIdentifies a Product (e.g. Kellogg’s Frosted Flakes 14

oz.)

QR CodeInitiates a Response (e.g., URL, Message, Phone, SMS,

Email)

48

Price CheckProduct DetailEndless Aisle

49

Continuity

50

Conflict

51

Context

52

Marathon

Triathlon

Cross-Channel

We must leave ourcomfort zones, cross-

train,and collaborate.

53

54

55

Source: delightability.com

56

57

morville@semanticstudios.com

58

morville@semanticstudios.com

59

morville@semanticstudios.com

60

UX Swimlanes

morville@semanticstudios.com

61

“There is nothing more basic than categorization to our thought, perception, action, and speech.”

62

What architects do for buildings, information architects do for…

64

“There is a problem in discussing systems only with words. Words and sentences must, by necessity, come only one a time in linear, logical order. Systems happen all at once. They are connected not just in one direction, but in many directions simultaneously. To discuss them properly, it is necessary to use a language that shares some of the same properties as the phenomena under discussion.”

"In an era of cross-channel experiences and product-service systems, it makes less and less sense to design sitemaps and wireframes without also..."

“…mapping the customer journey, modeling the system dynamics, and analyzing impacts upon business processes, incentives, and the

org chart."

68

69

morville@semanticstudios.com

Richard Saul Wurman’s Sandcastles (1971). Stolen from The Nature of IA by Dan Klyn (2010).

71

IA Therefore I AmPeter Morvillemorville@semanticstudios.com

Understanding IA (Prezi)http://is.gd/iaprezi

Bloghttp://findability.org/

Twitter@morville