cross-channel strategy: workshop

107
[email protected] 1 Ubiquitous IA Cross-Channel Strategy Peter Morville, UX Lisbon 2012

Upload: peter-morville

Post on 27-Jan-2015

121 views

Category:

Design


1 download

DESCRIPTION

Peter Morville's Cross-Channel Strategy workshop for UX Lisbon 2012.

TRANSCRIPT

Page 1: Cross-Channel Strategy: Workshop

[email protected]

1

Ubiquitous IACross-Channel Strategy

Peter Morville, UX Lisbon 2012

Page 5: Cross-Channel Strategy: Workshop

[email protected]

5

Agenda

1. Classic Information Architecture (Polar Bear).

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

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

4. Intertwingularity (Ubiquitous, Ambient).

Concept > Method > Practice (Small Groups)

.

Page 6: Cross-Channel Strategy: Workshop

[email protected]

6

#dtdt

Page 7: Cross-Channel Strategy: Workshop

[email protected]

7

ArchitectureDesignTechnology

Information Architecture: It’s What You Do First.

Page 8: Cross-Channel Strategy: Workshop

[email protected]

8

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

Page 9: Cross-Channel Strategy: Workshop

[email protected]

9

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

creativity.”.

Page 10: Cross-Channel Strategy: Workshop

[email protected] 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.

Page 11: Cross-Channel Strategy: Workshop

[email protected]

11

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

Page 12: Cross-Channel Strategy: Workshop

[email protected]

12

1. One Library

2. Core Areas

3. Network Intelligence

Web Strategy

Page 13: Cross-Channel Strategy: Workshop

[email protected]

13

Experience Across Channels

Page 14: Cross-Channel Strategy: Workshop

[email protected]

14

Interfaces• Portal• Search• Object• Set• Page

Caveats• Visual Design• Starting Point

Wireframes

Page 16: Cross-Channel Strategy: Workshop

[email protected]

16Source: Search Patterns (2010)

Search is a Complex, Adaptive System

Page 18: Cross-Channel Strategy: Workshop

[email protected]

18

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

Page 19: Cross-Channel Strategy: Workshop

[email protected]

19Bill Verplank, IxD11 Opening Keynote, http://vimeo.com/20285615 (00:19:30)

Page 21: Cross-Channel Strategy: Workshop

[email protected]

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

Page 24: Cross-Channel Strategy: Workshop

[email protected]

Experiences Across Channels

Page 25: Cross-Channel Strategy: Workshop

[email protected]

Location Aware

The Future of Mobile Search

The Future of Mobile Search

Query by Wandering

Location Aware Search by Wandering Multisensory

Page 26: Cross-Channel Strategy: Workshop

[email protected]

26

“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

Page 27: Cross-Channel Strategy: Workshop

[email protected]

27Source: Subject to Change (2008)

World’s Best Information

Architect

Page 30: Cross-Channel Strategy: Workshop

[email protected]

30

“Collaborative Consumption describes the rapid explosion in traditional sharing, bartering, lending, trading, renting, gifting, and swapping reinvented through network technologies on a scale and in ways never possible before.”

Page 31: Cross-Channel Strategy: Workshop

[email protected]

31

Desktop

Kiosk

Mobile

Page 32: Cross-Channel Strategy: Workshop

[email protected]

32

Up The Stairs“How do we make it easier for people to learn about multi-channel possibilities?”http://findability.org/archives/000640.php

Page 34: Cross-Channel Strategy: Workshop

[email protected]

34

My Shelf

Page 35: Cross-Channel Strategy: Workshop

[email protected]

35

• 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

Page 37: Cross-Channel Strategy: Workshop

[email protected]

37

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

Page 40: Cross-Channel Strategy: Workshop

[email protected]

40

find·a·bil·i·ty n

The quality of being locatable or navigable.

The degree to which an object is easy to discover or locate.

The degree to which a system or environment supports wayfinding, navigation, and retrieval.

am·bi·ent adj

Surrounding; encircling; enveloping (e.g., ambient air)

the ability to find anyone or anything from anywhere at anytime

Page 41: Cross-Channel Strategy: Workshop

[email protected]

41

David Rose

ambientdevices.com

Page 45: Cross-Channel Strategy: Workshop

[email protected]

45

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.

Page 46: Cross-Channel Strategy: Workshop

[email protected]

46

ProductPackagingPrint CatalogCall CenterWebsiteBlogFacebookTwitterYouTubeEmailDirect MailRadioTelevision

ChannelWebSocial MediaEmailMessagingTelephonePrint

PlatformWebiOSAndroidMac OS XMS Windows

DeviceDesktopLaptopMobileTabletTelevisionKiosk

ScaleCovertMobilePersonalEnvironmentalArchitecturalUrban

MediaBookNewspaperMagazineVideoAudioPosterBillboard

ContextHomeWorkWalkingDrivingShoppingPlanePartyPersonalSocialLocationTimeTask

Touchpoint Taxonomy

Page 47: Cross-Channel Strategy: Workshop

[email protected]

47

reFraming

1. Classic Information Architecture (Polar Bear).

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

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

4. Intertwingularity (Ubiquitous, Ambient).

Page 49: Cross-Channel Strategy: Workshop

[email protected]

49

What is Information Architecture?

http://www.maya.com/the-feed/what-is-information-architecture

Page 50: Cross-Channel Strategy: Workshop

[email protected]

What architects do for buildings, information architects do for…

Page 52: Cross-Channel Strategy: Workshop

[email protected]

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

Page 53: Cross-Channel Strategy: Workshop

[email protected]

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

Page 54: Cross-Channel Strategy: Workshop

[email protected]

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

org chart."

Page 57: Cross-Channel Strategy: Workshop

[email protected]

The fast parts learn, propose, and absorb shocks; the slow parts remember, integrate, and constrain.

The fast parts get all the attention. The slow parts have all the power.

Steward Brand on “Pace Layering”

Page 59: Cross-Channel Strategy: Workshop

[email protected]

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

Page 62: Cross-Channel Strategy: Workshop

[email protected]

62

Method

Page 64: Cross-Channel Strategy: Workshop

[email protected]

64

goals, strategy, brand, process, technology, resources, politics, culture…

objects, types, metadata, structure, relationships,source, volume, growth

audiences, user needs, use cases, mental models, vocabulary, behavior

Page 66: Cross-Channel Strategy: Workshop

[email protected]

66

Design PrinciplesDesign

Principles

Page 67: Cross-Channel Strategy: Workshop

[email protected]

67

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

Page 68: Cross-Channel Strategy: Workshop

[email protected]

68Adapted from Cross-Platform Service User Experience

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

Page 69: Cross-Channel Strategy: Workshop

[email protected]

69

Today's “service systems” may include interrelated sub-systems (e.g., person-to-person, self-service) across multiple locations, devices, and channels; and customer satisfaction is “influenced by the extent of integration and consistency” across those channels.

Bridging the “Front Stage” and “Back Stage” in Service System Design by Robert J. Glushko and Lindsay Tabas

Page 70: Cross-Channel Strategy: Workshop

[email protected]

70

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

Page 72: Cross-Channel Strategy: Workshop

[email protected]

72

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

Page 73: Cross-Channel Strategy: Workshop

[email protected]

73Source: Mobile First (2011) by Luke Wroblewski

Mobile

Page 74: Cross-Channel Strategy: Workshop

[email protected]

74Source: Mobile First (2011) by Luke Wroblewski

Page 81: Cross-Channel Strategy: Workshop

[email protected]

81

Transmedia Design by Jakob Nielsenhttp://www.useit.com/alertbox/3-screens-transmedia.html

“The highest-value use will stay predominantly on desktop.”

“Most companies must support both device classes …with separate UI designs.”

PCBig ScreensBetter Input DevicesFaster BandwidthHardware OomphSoftware MaturityPrinting

Mobile“The best computer is the one you have with you.”

Page 82: Cross-Channel Strategy: Workshop

[email protected]

82

To make the right decisions about composition and

consistency, you need a cross-channel strategy.

Page 83: Cross-Channel Strategy: Workshop

[email protected]

83

Design for

Connection

Page 84: Cross-Channel Strategy: Workshop

[email protected]

84

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

Page 87: Cross-Channel Strategy: Workshop

[email protected]

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

oz.)

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

Email)

87

Page 89: Cross-Channel Strategy: Workshop

[email protected]

89

Price CheckProduct DetailEndless Aisle

Page 90: Cross-Channel Strategy: Workshop

[email protected]

90

Continuity

Page 91: Cross-Channel Strategy: Workshop

[email protected]

91

Conflict

Page 92: Cross-Channel Strategy: Workshop

[email protected]

92

Context

Page 93: Cross-Channel Strategy: Workshop

[email protected]

Marathon

93Triathlon

Cross-Channel

We must leave ourcomfort zones, cross-

train,and collaborate.

Page 98: Cross-Channel Strategy: Workshop

[email protected]

98

Source: delightability.com

Page 99: Cross-Channel Strategy: Workshop

[email protected]

99

Mental Models

http://www.rosenfeldmedia.com/books/mental-models/

Tasks

Features

Page 100: Cross-Channel Strategy: Workshop

[email protected]

100

Page 101: Cross-Channel Strategy: Workshop

[email protected]

101

Page 102: Cross-Channel Strategy: Workshop

[email protected]

102

http://www.adaptivepath.com/ideas/the-anatomy-of-an-experience-map

Page 103: Cross-Channel Strategy: Workshop

[email protected]

103

Page 104: Cross-Channel Strategy: Workshop

[email protected]

104

UX Swimlanes

Page 105: Cross-Channel Strategy: Workshop

[email protected]

105Urban Sensing by Dan Hill

Page 106: Cross-Channel Strategy: Workshop

[email protected]

106

Resources

Page 107: Cross-Channel Strategy: Workshop

[email protected]

107

IA Therefore I AmPeter [email protected]

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

Bloghttp://findability.org/

Twitter@morville