Ubiquitous IA

  • View
    2.577

  • Download
    0

  • Category

    Design

Preview:

DESCRIPTION

Peter Morville's keynote for Internet User Experience 2011.

Citation preview

morville@semanticstudios.com

1

Ubiquitous IACross-Channel Strategy

Peter Morville, IUE 2011

morville@semanticstudios.com

2

morville@semanticstudios.com

3

morville@semanticstudios.com

4

morville@semanticstudios.com

5

#dtdt

morville@semanticstudios.com

6

ArchitectureDesignTechnology

Information Architecture: It’s What You Do First.

morville@semanticstudios.com

7

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

morville@semanticstudios.com

8

morville@semanticstudios.com

9

On the Web, the sign is the path, the map is the territory.

morville@semanticstudios.com

10

STRUCTURE

S T R A T E GY

IA

What architects do for buildings, we do

for…

morville@semanticstudios.com

11

Framing

1. Classic Information Architecture (Polar Bear).

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

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

4. Ubiquitous IA (Intertwingularity)..

morville@semanticstudios.com

12

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

creativity.”.

morville@semanticstudios.comFragmentationFragmentation 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.

morville@semanticstudios.com

14

Visual Thinking Unwritten Rule #1

“Whoever best describes a problem is the person most likely to solve the problem.

…or, whoever draws the best picture gets the funding.”

morville@semanticstudios.com

15

1. One Library

2. Core Areas

3. Network Intelligence

Web Strategy

morville@semanticstudios.com

16

morville@semanticstudios.com

17Source: Search Patterns (2010)

Search is a Complex, Adaptive System

morville@semanticstudios.com

18

Interfaces• Portal• Search• Object• Set• Page

Caveats• Visual Design• Starting Point

Wireframes

morville@semanticstudios.com

19

morville@semanticstudios.com

20

morville@semanticstudios.com

21

morville@semanticstudios.com

22Desire Paths

morville@semanticstudios.com

23

morville@semanticstudios.com

24

morville@semanticstudios.com

25

morville@semanticstudios.com

26

Modes of Information Seeking

Marcia Bates, UCLA (2002)

“We absorb perhaps 80 percent of all our knowledge through simply being aware in our social context and

physical environment.”

morville@semanticstudios.com

27

morville@semanticstudios.com

28

“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

morville@semanticstudios.com

29Source: Subject to Change (2008)

World’s Best Information

Architect

morville@semanticstudios.com

morville@semanticstudios.com

31

morville@semanticstudios.com

32

Desktop

Kiosk

Mobile

morville@semanticstudios.com

33

ProductPackagingPrint CatalogCall CenterWebsiteBlogFacebookTwitterYouTubeEmailDirect MailRadioTelevision

ChannelWebSocial MediaEmailMessagingTelephonePrint

PlatformWebiOSAndroidMac OS XMS Windows

DeviceDesktopLaptopMobileTabletTelevisionKiosk

ScaleCovertMobilePersonalEnvironmentalArchitecturalUrban

MediaBookNewspaperMagazineVideoAudioPosterBillboard

ContextHomeWorkWalkingDrivingShoppingPlanePartyPersonalSocialLocationTimeTask

Touchpoint Taxonomy

morville@semanticstudios.com

34

Design PrinciplesDesign

Principles

morville@semanticstudios.com

35

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

morville@semanticstudios.com

36Adapted from Cross-Platform Service User Experience

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

morville@semanticstudios.com

37

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

morville@semanticstudios.com

38

morville@semanticstudios.com

39

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

morville@semanticstudios.com

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

Embedded Video

Thumbnail (few pixels / detail)

morville@semanticstudios.com

41

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

One Page(with modules)

Four Pages(mobile-only URLs)

morville@semanticstudios.com

42

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

Modal Dialog

Barcode Scan

morville@semanticstudios.com

43

To make the right decisions about composition and

consistency, you need a cross-channel strategy.

morville@semanticstudios.com

44

Design for

Connection

morville@semanticstudios.com

45

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

morville@semanticstudios.com

46

morville@semanticstudios.com

47

morville@semanticstudios.com

48

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

oz.)

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

Email)

morville@semanticstudios.com

morville@semanticstudios.com

50

Price CheckProduct DetailEndless Aisle

morville@semanticstudios.com

51

Continuity

morville@semanticstudios.com

52

Conflict

morville@semanticstudios.com

53

Context

morville@semanticstudios.com

54Source: Mobile First (2011) by Luke Wroblewski

morville@semanticstudios.com

55

• 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

morville@semanticstudios.com

56

morville@semanticstudios.com

57

morville@semanticstudios.com

58

“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.”

morville@semanticstudios.com

59

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.

morville@semanticstudios.com

60

Marathon

Triathlon

Cross-Channel

We must leave ourcomfort zones, cross-

train,and collaborate.

morville@semanticstudios.com

61

morville@semanticstudios.com

62

morville@semanticstudios.com

63

Source: delightability.com

morville@semanticstudios.com

64

morville@semanticstudios.com

65

Ubiquitous IA

http://iainstitute.org/

http://worldiaday.org/ February 11, 2012 in 14 citieshttp://iasummit.org/March 21-25, 2012 in New Orleans, USA

euroia.org/ September 27-29, 2012 in Rome, Italy

http://semanticstudios.com/publications/semantics/

http://rosenfeldmedia.com/uxzeitgeist/topics/information-architecture/

morville@semanticstudios.com

66

reFraming

1. Classic Information Architecture (Polar Bear).

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

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

4. Intertwingularity (Ubiquitous, Ambient).

morville@semanticstudios.com

67

morville@semanticstudios.com

68

IA Therefore I AmPeter Morvillemorville@semanticstudios.com

Search Patternshttp://searchpatterns.org/

Semantic Studioshttp://semanticstudios.com/

Bloghttp://findability.org/