design for cross-channel experiences
Post on 17-Aug-2014
7.918 Views
Preview:
DESCRIPTION
TRANSCRIPT
morville@semanticstudios.com
1
Design for Cross-Channel Experiences Samantha Starmer, REI Peter Morville, Semantic Studios
morville@semanticstudios.comwho am I?
morville@semanticstudios.com
3
morville@semanticstudios.com
4
morville@semanticstudios.com
5
morville@semanticstudios.com
6
Agenda9:00 - 9:15 Introductions
9:15 - 10:30 IA: Beyond the Web (Peter)
10:30 - 11:00 Coffee Break
11:00 - 12:00 What is X-Channel? (Samantha)
Exercise #1: Experience Opportunities
12:00 - 1:30 Lunch Break
1:30 - 2:30 X-Channel: How (Peter & Samantha)
2:30 - 3:30 Exercise #2: Experience Mapping
3:30 - 4:00 Coffee Break
4:00 - 5:00 Q&A, Discussion, Closing Remarks
morville@semanticstudios.com
7
SlidesSamantha’shttp://www.slideshare.net/sstarmer/
Peter’shttp://www.slideshare.net/morville/
http://semanticstudios.com/xchannel.pdf
http://prezi.com/aafmvya6bk7t/understanding-information-architecture/
morville@semanticstudios.com
8
Ubiquitous IACross-Channel Strategy
Peter Morville, IA Summit 2012
morville@semanticstudios.com
9
#dtdt
morville@semanticstudios.com
10
ArchitectureDesignTechnology
Information Architecture: It’s What You Do First.
morville@semanticstudios.com
11
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
12
Framing1. Classic Information Architecture (Polar
Bear).
2. Web Strategy (Web, Mobile, Social).
3. Cross-Channel Strategy (Physical, Digital).
4. Ubiquitous IA (Intertwingularity)..
morville@semanticstudios.com
13
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
15
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
16
1. One Library
2. Core Areas
3. Network Intelligence
Web Strategy
morville@semanticstudios.com
17
Experience Across Channels
morville@semanticstudios.com
18
Interfaces• Portal• Search• Object• Set• Page
Caveats• Visual Design• Starting Point
Wireframes
morville@semanticstudios.com
19
morville@semanticstudios.com
20Source: Search Patterns (2010)
Search is a Complex, Adaptive System
morville@semanticstudios.com
21
morville@semanticstudios.com
22
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
23Bill Verplank, IxD11 Opening Keynote, http://vimeo.com/20285615 (00:19:30)
morville@semanticstudios.com
24
morville@semanticstudios.com
25“Desire Lines” Photo: Berkeley Path Gallery by Kevin Fox
morville@semanticstudios.com
26
morville@semanticstudios.com
27
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
30
“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
31Source: Subject to Change (2008)
World’s Best Information
Architect
morville@semanticstudios.com
morville@semanticstudios.com
33
morville@semanticstudios.com
34
“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
35
Desktop
Kiosk
Mobile
morville@semanticstudios.com
36
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
37
morville@semanticstudios.com
38
My Shelf
morville@semanticstudios.com
39
• 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
40
morville@semanticstudios.com
41
“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
42
morville@semanticstudios.com
43
morville@semanticstudios.com
44
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
46
morville@semanticstudios.com
47
morville@semanticstudios.com
48
morville@semanticstudios.com
49
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
50
ProductPackagingPrint CatalogCall CenterWebsiteBlogFacebookTwitterYouTubeEmailDirect MailRadioTelevision
ChannelWebSocial MediaEmailMessagingTelephonePrint
PlatformWebiOSAndroidMac OS XMS Windows
DeviceDesktopLaptopMobileTabletTelevisionKiosk
ScaleCovertMobilePersonalEnvironmentalArchitecturalUrban
MediaBookNewspaperMagazineVideoAudioPosterBillboard
ContextHomeWorkWalkingDrivingShoppingPlanePartyPersonalSocialLocationTimeTask
Touchpoint Taxonomy
morville@semanticstudios.com
51
reFraming1. Classic Information Architecture (Polar
Bear).
2. Web Strategy (Web, Mobile, Social).
3. Cross-Channel Strategy (Physical, Digital).
4. Intertwingularity (Ubiquitous, Ambient).
morville@semanticstudios.com
52
morville@semanticstudios.com
53
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
55
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
59
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
62
morville@semanticstudios.com
Richard Saul Wurman’s Sandcastles (1971). Stolen from The Nature of IA by Dan Klyn (2010).
morville@semanticstudios.com
65
morville@semanticstudios.com
66
Agenda9:00 - 9:15 Introductions
9:15 - 10:30 IA: Beyond the Web (Peter)
10:30 - 11:00 Coffee Break
11:00 - 12:00 What is X-Channel? (Samantha)
Exercise #1: Experience Mapping
12:00 - 1:30 Lunch Break
1:30 - 2:30 X-Channel: How (Peter & Samantha)
2:30 - 3:30 Exercise #2: Experience Mapping
3:30 - 4:00 Coffee Break
4:00 - 5:00 Q&A, Discussion, Closing Remarks
morville@semanticstudios.com
67
A Framework for Cross-Channel Strategy
Peter Morville, IA Summit 2012
morville@semanticstudios.com
68
morville@semanticstudios.com
69
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
70
morville@semanticstudios.com
71
Design PrinciplesDesign
Principles
morville@semanticstudios.com
72
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
73Adapted from Cross-Platform Service User Experience
portal.acm.org/citation.cfm?id=1851637
morville@semanticstudios.com
74
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
75
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
76
morville@semanticstudios.com
77
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
78Source: Mobile First (2011) by Luke Wroblewski
Mobile
morville@semanticstudios.com
79Source: Mobile First (2011) by Luke Wroblewski
morville@semanticstudios.com
morville@semanticstudios.com
81
morville@semanticstudios.com
82
morville@semanticstudios.com
83
morville@semanticstudios.com
84
morville@semanticstudios.com
85
morville@semanticstudios.com
86
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
87
To make the right decisions about composition andconsistency, you need a cross-channel strategy.
morville@semanticstudios.com
88
Design for Connection
morville@semanticstudios.com
89
Over 50% of REI online business is picked up in a store.
morville@semanticstudios.com
90
morville@semanticstudios.com
91
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)
92
morville@semanticstudios.com
morville@semanticstudios.com
94
Price CheckProduct DetailEndless Aisle
morville@semanticstudios.com
95
Continuity
morville@semanticstudios.com
96
Conflict
morville@semanticstudios.com
97
Context
morville@semanticstudios.com
Marathon
98Triathlon
Cross-Channel
We must leave ourcomfort zones, cross-
train,and collaborate.
morville@semanticstudios.com
99
morville@semanticstudios.com
100
morville@semanticstudios.com
101
morville@semanticstudios.com
102
morville@semanticstudios.com
103
Source: delightability.com
morville@semanticstudios.com
104
Mental Models
http://www.rosenfeldmedia.com/books/mental-models/
Tasks
Features
morville@semanticstudios.com
105
morville@semanticstudios.com
106
morville@semanticstudios.com
107
http://www.adaptivepath.com/ideas/the-anatomy-of-an-experience-map
morville@semanticstudios.com
108
morville@semanticstudios.com
109
UX Swimlanes
morville@semanticstudios.com
110Urban Sensing by Dan Hill
morville@semanticstudios.com
111
Resources
morville@semanticstudios.com
112
IA Therefore I AmPeter Morvillemorville@semanticstudios.com
Understanding IA (Prezi)http://is.gd/iaprezi
Bloghttp://findability.org/
Twitter@morville
top related