Cross-Channel Strategy: Workshop

  • View
    115

  • Download
    1

  • Category

    Design

Preview:

DESCRIPTION

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

Citation preview

morville@semanticstudios.com

1

Ubiquitous IACross-Channel Strategy

Peter Morville, UX Lisbon 2012

morville@semanticstudios.com

2

morville@semanticstudios.com

3

morville@semanticstudios.com

4

morville@semanticstudios.com

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)

.

morville@semanticstudios.com

6

#dtdt

morville@semanticstudios.com

7

ArchitectureDesignTechnology

Information Architecture: It’s What You Do First.

morville@semanticstudios.com

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

morville@semanticstudios.com

9

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

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

morville@semanticstudios.com

12

1. One Library

2. Core Areas

3. Network Intelligence

Web Strategy

morville@semanticstudios.com

13

Experience Across Channels

morville@semanticstudios.com

14

Interfaces• Portal• Search• Object• Set• Page

Caveats• Visual Design• Starting Point

Wireframes

morville@semanticstudios.com

15

morville@semanticstudios.com

16Source: Search Patterns (2010)

Search is a Complex, Adaptive System

morville@semanticstudios.com

17

morville@semanticstudios.com

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

morville@semanticstudios.com

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

morville@semanticstudios.com

20

morville@semanticstudios.com

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

morville@semanticstudios.com

22

morville@semanticstudios.com

23

morville@semanticstudios.com

Experiences Across Channels

morville@semanticstudios.com

Location Aware

The Future of Mobile Search

The Future of Mobile Search

Query by Wandering

Location Aware Search by Wandering Multisensory

morville@semanticstudios.com

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

morville@semanticstudios.com

27Source: Subject to Change (2008)

World’s Best Information

Architect

morville@semanticstudios.com

morville@semanticstudios.com

29

morville@semanticstudios.com

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

morville@semanticstudios.com

31

Desktop

Kiosk

Mobile

morville@semanticstudios.com

32

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

morville@semanticstudios.com

33

morville@semanticstudios.com

34

My Shelf

morville@semanticstudios.com

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

morville@semanticstudios.com

36

morville@semanticstudios.com

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

morville@semanticstudios.com

38

morville@semanticstudios.com

39

morville@semanticstudios.com

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

morville@semanticstudios.com

41

David Rose

ambientdevices.com

morville@semanticstudios.com

42

morville@semanticstudios.com

43

morville@semanticstudios.com

44

morville@semanticstudios.com

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.

morville@semanticstudios.com

46

ProductPackagingPrint CatalogCall CenterWebsiteBlogFacebookTwitterYouTubeEmailDirect MailRadioTelevision

ChannelWebSocial MediaEmailMessagingTelephonePrint

PlatformWebiOSAndroidMac OS XMS Windows

DeviceDesktopLaptopMobileTabletTelevisionKiosk

ScaleCovertMobilePersonalEnvironmentalArchitecturalUrban

MediaBookNewspaperMagazineVideoAudioPosterBillboard

ContextHomeWorkWalkingDrivingShoppingPlanePartyPersonalSocialLocationTimeTask

Touchpoint Taxonomy

morville@semanticstudios.com

47

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

48

morville@semanticstudios.com

49

What is Information Architecture?

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

morville@semanticstudios.com

What architects do for buildings, information architects do for…

morville@semanticstudios.com

51

morville@semanticstudios.com

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

morville@semanticstudios.com

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

morville@semanticstudios.com

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

org chart."

morville@semanticstudios.com

55

morville@semanticstudios.com

morville@semanticstudios.com

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”

morville@semanticstudios.com

58

morville@semanticstudios.com

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

morville@semanticstudios.comhttp://is.gd/iaprezi

morville@semanticstudios.com

61

morville@semanticstudios.com

62

Method

morville@semanticstudios.com

63

morville@semanticstudios.com

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

morville@semanticstudios.com

65

morville@semanticstudios.com

66

Design PrinciplesDesign

Principles

morville@semanticstudios.com

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

morville@semanticstudios.com

68Adapted from Cross-Platform Service User Experience

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

morville@semanticstudios.com

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

morville@semanticstudios.com

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

morville@semanticstudios.com

71

morville@semanticstudios.com

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

morville@semanticstudios.com

73Source: Mobile First (2011) by Luke Wroblewski

Mobile

morville@semanticstudios.com

74Source: Mobile First (2011) by Luke Wroblewski

morville@semanticstudios.com

morville@semanticstudios.com

76

morville@semanticstudios.com

77

morville@semanticstudios.com

78

morville@semanticstudios.com

79

morville@semanticstudios.com

80

morville@semanticstudios.com

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

morville@semanticstudios.com

82

To make the right decisions about composition and

consistency, you need a cross-channel strategy.

morville@semanticstudios.com

83

Design for

Connection

morville@semanticstudios.com

84

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

morville@semanticstudios.com

85

morville@semanticstudios.com

86

morville@semanticstudios.com

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

oz.)

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

Email)

87

morville@semanticstudios.com

morville@semanticstudios.com

89

Price CheckProduct DetailEndless Aisle

morville@semanticstudios.com

90

Continuity

morville@semanticstudios.com

91

Conflict

morville@semanticstudios.com

92

Context

morville@semanticstudios.com

Marathon

93Triathlon

Cross-Channel

We must leave ourcomfort zones, cross-

train,and collaborate.

morville@semanticstudios.com

94

morville@semanticstudios.com

95

morville@semanticstudios.com

96

morville@semanticstudios.com

97

morville@semanticstudios.com

98

Source: delightability.com

morville@semanticstudios.com

99

Mental Models

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

Tasks

Features

morville@semanticstudios.com

100

morville@semanticstudios.com

101

morville@semanticstudios.com

102

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

morville@semanticstudios.com

103

morville@semanticstudios.com

104

UX Swimlanes

morville@semanticstudios.com

105Urban Sensing by Dan Hill

morville@semanticstudios.com

106

Resources

morville@semanticstudios.com

107

IA Therefore I AmPeter Morvillemorville@semanticstudios.com

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

Bloghttp://findability.org/

Twitter@morville