The Architecture of Understanding
-
Upload
peter-morville -
Category
Education
-
view
11.285 -
download
0
description
Transcript of The Architecture of Understanding
![Page 1: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/1.jpg)
1
The Architecture of Understanding
Peter Morville, UX Lisbon 2012
![Page 2: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/2.jpg)
2
![Page 3: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/3.jpg)
3
![Page 4: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/4.jpg)
4
![Page 5: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/5.jpg)
5
#dtdt
![Page 6: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/6.jpg)
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
![Page 7: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/7.jpg)
7
Framing
1. Classic Information Architecture (Polar Bear).
2. Web Strategy (Web, Mobile, Social).
3. Cross-Channel Strategy (Physical, Digital).
4. Ubiquitous IA (Intertwingularity)..
![Page 8: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/8.jpg)
8
The Library of Congress“To further the progress of knowledge and
creativity.”.
![Page 9: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/9.jpg)
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.
![Page 10: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/10.jpg)
10
1. One Library
2. Core Areas
3. Network Intelligence
Web Strategy
![Page 11: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/11.jpg)
11
Interfaces• Portal• Search• Object• Set• Page
Caveats• Visual Design• Starting Point
Wireframes
![Page 12: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/12.jpg)
12
![Page 13: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/13.jpg)
13Source: Search Patterns (2010)
Search is a Complex, Adaptive System
![Page 14: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/14.jpg)
14
![Page 15: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/15.jpg)
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
![Page 16: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/16.jpg)
16
![Page 17: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/17.jpg)
17“Desire Lines” Photo: Berkeley Path Gallery by Kevin Fox
![Page 18: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/18.jpg)
18
![Page 19: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/19.jpg)
19
![Page 20: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/20.jpg)
20
![Page 21: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/21.jpg)
Experiences Across Channels
![Page 22: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/22.jpg)
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
![Page 23: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/23.jpg)
23Source: Subject to Change (2008)
World’s Best Information
Architect
![Page 24: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/24.jpg)
![Page 25: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/25.jpg)
25
![Page 26: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/26.jpg)
26
Desktop
Kiosk
Mobile
![Page 27: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/27.jpg)
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
![Page 28: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/28.jpg)
28
![Page 29: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/29.jpg)
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.”
![Page 30: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/30.jpg)
30
![Page 31: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/31.jpg)
31
![Page 32: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/32.jpg)
32
![Page 33: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/33.jpg)
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.
![Page 34: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/34.jpg)
34
ProductPackagingPrint CatalogCall CenterWebsiteBlogFacebookTwitterYouTubeEmailDirect MailRadioTelevision
ChannelWebSocial MediaEmailMessagingTelephonePrint
PlatformWebiOSAndroidMac OS XMS Windows
DeviceDesktopLaptopMobileTabletTelevisionKiosk
ScaleCovertMobilePersonalEnvironmentalArchitecturalUrban
MediaBookNewspaperMagazineVideoAudioPosterBillboard
ContextHomeWorkWalkingDrivingShoppingPlanePartyPersonalSocialLocationTimeTask
Touchpoint Taxonomy
![Page 35: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/35.jpg)
35
Design PrinciplesDesign
Principles
![Page 36: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/36.jpg)
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
![Page 37: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/37.jpg)
37Adapted from Cross-Platform Service User Experience
portal.acm.org/citation.cfm?id=1851637
![Page 38: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/38.jpg)
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
![Page 39: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/39.jpg)
39
![Page 40: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/40.jpg)
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
![Page 41: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/41.jpg)
41
To make the right decisions about composition and
consistency, you need a cross-channel strategy.
![Page 42: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/42.jpg)
42
Design for
Connection
![Page 43: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/43.jpg)
43
Over 50% of REI online business is picked up in a store.
![Page 44: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/44.jpg)
44
![Page 45: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/45.jpg)
45
![Page 46: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/46.jpg)
46
BarcodeIdentifies a Product (e.g. Kellogg’s Frosted Flakes 14
oz.)
QR CodeInitiates a Response (e.g., URL, Message, Phone, SMS,
Email)
![Page 47: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/47.jpg)
![Page 48: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/48.jpg)
48
Price CheckProduct DetailEndless Aisle
![Page 49: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/49.jpg)
49
Continuity
![Page 50: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/50.jpg)
50
Conflict
![Page 51: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/51.jpg)
51
Context
![Page 52: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/52.jpg)
52
Marathon
Triathlon
Cross-Channel
We must leave ourcomfort zones, cross-
train,and collaborate.
![Page 53: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/53.jpg)
53
![Page 54: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/54.jpg)
54
![Page 55: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/55.jpg)
55
Source: delightability.com
![Page 56: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/56.jpg)
56
![Page 57: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/57.jpg)
57
![Page 61: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/61.jpg)
61
“There is nothing more basic than categorization to our thought, perception, action, and speech.”
![Page 62: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/62.jpg)
62
![Page 63: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/63.jpg)
What architects do for buildings, information architects do for…
![Page 64: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/64.jpg)
64
![Page 65: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/65.jpg)
“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 66: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/66.jpg)
"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 67: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/67.jpg)
“…mapping the customer journey, modeling the system dynamics, and analyzing impacts upon business processes, incentives, and the
org chart."
![Page 68: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/68.jpg)
68
![Page 69: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/69.jpg)
69
![Page 70: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/70.jpg)
Richard Saul Wurman’s Sandcastles (1971). Stolen from The Nature of IA by Dan Klyn (2010).
![Page 71: The Architecture of Understanding](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c750434a7959fc1f8b456e/html5/thumbnails/71.jpg)
71
IA Therefore I AmPeter [email protected]
Understanding IA (Prezi)http://is.gd/iaprezi
Bloghttp://findability.org/
Twitter@morville