SlideShare a Scribd company logo

The Architecture of Understanding

•Download as PPTX, PDF•
•
Peter Morville
Peter Morville

The document discusses the concepts of information architecture and the role of information architects. It provides definitions of information architecture as the structural design of shared information environments and the combination of organization, labeling, search, and navigation systems. It also describes information architecture as the art and science of shaping information products and experiences to support usability and findability. Additionally, it frames information architecture as an emerging discipline focused on bringing principles of design and architecture to the digital landscape.

1 of 71
The Architecture of Understanding Peter Morville, UX Lisbon 2012 1
2
3
4
#dtdt 5
Polar Bear IA in•for•ma•tion ar•chi•tec•turen. • 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. 6
The Architecture of Understanding
The Architecture of Understanding
Fragmentation Fragmentation 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.
Web Strategy 1. One Library 2. Core Areas 3. Network Intelligence 10
The Architecture of Understanding
12
Search is a Complex, Adaptive System Source: Search Patterns (2010) 13
14
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 15
16
“Desire Lines” 17 Photo: Berkeley Path Gallery by Kevin Fox
18
19
20
Experiences Across Channels
The Architecture of Understanding
World’s Best Information Architect Source: Subject to Change (2008) 23
The Architecture of Understanding
25
Desktop Mobile Kiosk 26
Sensors • 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) 27
28
“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.” 29
30
31
32
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. 33
Touchpoint Taxonomy Media Book Channel Platform Newspaper Web Web Magazine Product Social Media iOS Video Packaging Email Android Audio Print Catalog Messaging Poster Mac OS X Billboard Telephone Call Center Print MS Windows Website Blog Context Facebook Home Twitter Work Walking YouTube Device Driving Email Desktop Shopping Direct Mail Laptop Scale Plane Radio Mobile Party Covert Tablet Personal Television Television Mobile Social Personal Kiosk Location Environmental Time Architectural Task Urban 34
Design Principles 35
Cross-Channel Strategy http://findability.org/archives/000652.php 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 36 identify/resolve, org chart, free-riding
Adapted from Cross-Platform Service User Experience portal.acm.org/citation.cfm?id=1851637 37
Craft beautiful designs that deliver a quality experience to your users no matter how large (or small) their display. 1. Fluid Grids 2. Flexible Images 3. Media Queries 38
39
Why Separate Mobile & Desktop Web Pages at Bagcheck? With a dual template system, we were able to optimize: 1. Source Order 2. Media (Speed, Quality, Interaction) 3. URL Structure Navigation 4. Application Design at Top Navigation at Bottom 40
To make the right decisions about composition and consistency, you need a cross-channel strategy. 41
Design for Connection 42
Over 50% of REI online business is picked up in a store. 43
44
45
Barcode Identifies a Product (e.g. Kellogg’s Frosted Flakes 14 oz.) QR Code Initiates a Response (e.g., URL, Message, Phone, SMS, Email) 46
The Architecture of Understanding
Price Check Product Detail Endless Aisle 48
Continuity 49
Conflict 50
Context 51
Cross-Channel We must leave our Marathon comfort zones, cross-train, and collaborate. Triathlon 52
53
54
Source:delightability.com 55
56
57
morville@semanticstudios.com 58
morville@semanticstudios.com 59
morville@semanticstudios.com UX Swimlanes 60
morville@semanticstudios.com “There is nothing more basic than categorization to our thought, perception, action, and speech.” 61
62
What architects do for buildings, information architects do for…
64
“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.”
"In an era of cross-channel experiences and product-service systems, it makes less and less sense to design sitemaps and wireframes without also..."
“…mapping the customer journey, modeling the system dynamics, and analyzing impacts upon business processes, incentives, and the org chart."
68
69
morville@semanticstudios.com Richard Saul Wurman’s Sandcastles (1971). Stolen from The Nature of IA by Dan Klyn (2010).
IA Therefore I Am Peter Morville morville@semanticstudios.com Understanding IA (Prezi) http://is.gd/iaprezi Blog http://findability.org/ Twitter @morville 71

More Related Content

The Architecture of Understanding

  • 1. The Architecture of Understanding Peter Morville, UX Lisbon 2012 1
  • 2. 2
  • 3. 3
  • 4. 4
  • 5. #dtdt 5
  • 6. Polar Bear IA in•for•ma•tion ar•chi•tec•turen. • 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. 6
  • 9. Fragmentation Fragmentation 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.
  • 10. Web Strategy 1. One Library 2. Core Areas 3. Network Intelligence 10
  • 12. 12
  • 13. Search is a Complex, Adaptive System Source: Search Patterns (2010) 13
  • 14. 14
  • 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 15
  • 16. 16
  • 17. “Desire Lines” 17 Photo: Berkeley Path Gallery by Kevin Fox
  • 18. 18
  • 19. 19
  • 20. 20
  • 23. World’s Best Information Architect Source: Subject to Change (2008) 23
  • 25. 25
  • 26. Desktop Mobile Kiosk 26
  • 27. Sensors • 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) 27
  • 28. 28
  • 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.” 29
  • 30. 30
  • 31. 31
  • 32. 32
  • 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. 33
  • 34. Touchpoint Taxonomy Media Book Channel Platform Newspaper Web Web Magazine Product Social Media iOS Video Packaging Email Android Audio Print Catalog Messaging Poster Mac OS X Billboard Telephone Call Center Print MS Windows Website Blog Context Facebook Home Twitter Work Walking YouTube Device Driving Email Desktop Shopping Direct Mail Laptop Scale Plane Radio Mobile Party Covert Tablet Personal Television Television Mobile Social Personal Kiosk Location Environmental Time Architectural Task Urban 34
  • 36. Cross-Channel Strategy http://findability.org/archives/000652.php 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 36 identify/resolve, org chart, free-riding
  • 37. Adapted from Cross-Platform Service User Experience portal.acm.org/citation.cfm?id=1851637 37
  • 38. Craft beautiful designs that deliver a quality experience to your users no matter how large (or small) their display. 1. Fluid Grids 2. Flexible Images 3. Media Queries 38
  • 39. 39
  • 40. Why Separate Mobile & Desktop Web Pages at Bagcheck? With a dual template system, we were able to optimize: 1. Source Order 2. Media (Speed, Quality, Interaction) 3. URL Structure Navigation 4. Application Design at Top Navigation at Bottom 40
  • 41. To make the right decisions about composition and consistency, you need a cross-channel strategy. 41
  • 43. Over 50% of REI online business is picked up in a store. 43
  • 44. 44
  • 45. 45
  • 46. Barcode Identifies a Product (e.g. Kellogg’s Frosted Flakes 14 oz.) QR Code Initiates a Response (e.g., URL, Message, Phone, SMS, Email) 46
  • 50. Conflict 50
  • 51. Context 51
  • 52. Cross-Channel We must leave our Marathon comfort zones, cross-train, and collaborate. Triathlon 52
  • 53. 53
  • 54. 54
  • 56. 56
  • 57. 57
  • 61. morville@semanticstudios.com “There is nothing more basic than categorization to our thought, perception, action, and speech.” 61
  • 62. 62
  • 63. What architects do for buildings, information architects do for…
  • 64. 64
  • 65. “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.”
  • 66. "In an era of cross-channel experiences and product-service systems, it makes less and less sense to design sitemaps and wireframes without also..."
  • 67. “…mapping the customer journey, modeling the system dynamics, and analyzing impacts upon business processes, incentives, and the org chart."
  • 68. 68
  • 69. 69
  • 70. morville@semanticstudios.com Richard Saul Wurman’s Sandcastles (1971). Stolen from The Nature of IA by Dan Klyn (2010).
  • 71. IA Therefore I Am Peter Morville morville@semanticstudios.com Understanding IA (Prezi) http://is.gd/iaprezi Blog http://findability.org/ Twitter @morville 71