Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
INFORMATION
ARCHITECTURE
THE JOURNEY
THE DESTINATION
THE RETURN TRIP
Fran Zablocki • April 23, 2014 mStoner
Friday, Septem...
INFORMATION
ARCHITECTURE
mStoner
INTRODUCTION
DEFINITION
ELEMENTS
PROCESS
IA PRACTICE ON CAMPUS
Friday, September 26, 14
mStoner
INTRODUCTION
DEFINITION
ELEMENTS
PROCESS
IA PRACTICE ON CAMPUS
INFORMATION
ARCHITECTURE
Friday, September 26, 14
INTRODUCTION
ABOUT ME
ABOUT THIS
PRESENTATION
DEFINITION
DEFINITION mStoner
Friday, September 26, 14
m
Fran Zablocki
Strategist at mStoner
ABOUT ME
Friday, September 26, 14
m
Twitter: 		 	 	 @Zablocki
Hashtag: 	 	 	 #CSUC14
ABOUT THIS
PRESENTATION
Friday, September 26, 14
mStoner
INFORMATION
ARCHITECTURE
INTRODUCTION
DEFINITION
ELEMENTS
PROCESS
IA PRACTICE ON CAMPUS
Friday, September 26, 14
DEFINITION
ELEMENTS
PROCESS
INTRODUCTION
CONTEXT
USER EXPERIENCE
DISCIPLINES
Friday, September 26, 14
m
CONTEXT The structured design of shared
information environments.
Source: IA for the WWW,
Morville & Rosenfeld, 2006
INF...
m
CONTEXT
The combination of organization,
labeling, search, and navigation
systems within web sites and
intranets.
Source...
m
CONTEXT
The art and science of shaping
information products and
experiences to support usability and
findability.
Source:...
“The work we do involves high levels
of abstraction, ambiguity, and
occasionally !absurdity, and to some
degree we’re all ...
m
How do we make sense of all of this?CONTEXT
Friday, September 26, 14
m
Planned Structure
Form & Function
Designated Pathways
But the analogy only gets so far...
INFORMATION VS. PHYSICAL
ARCHI...
Most buildings aren’t designed to be entered via:
• The window
• The ceiling
• The plumbing
But most websites have to be.
...
DEFINITION
ELEMENTS
PROCESS
HISTORY
CONTEXT
USER EXPERIENCE
DISCIPLINES
Friday, September 26, 14
m
The Elements of User Experience
Jesse James Garrett
A Visual Model to Make Sense of a
Rapidly Evolving Field
Because IA ...
Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf
Friday, September 26, 14
Source: http://www.jjg.net/elements/pdf/elements.pdf
Friday, September 26, 14
Source: http://www.jjg.net/elements/pdf/elements.pdf
Friday, September 26, 14
m
Strategy
USER
EXPERIENCE
Friday, September 26, 14
m
What do your visitors need to do?
	 Research
	 Compare
	 Apply
	 Donate
	 Contact
USER
EXPERIENCE
STRATEGY: USER NEEDS
F...
m
What do your visitors need to know?
Why is your school is a good fit for
me?
Who teaches and learns at your
school?
How c...
m
What purpose does this site serve?
To sell your institution to prospective
students.
To encourage alumni engagement.
To ...
m
What business objective does the
site meet?
Increase applications.
Increase donations.
Decrease time spent on informatio...
Friday, September 26, 14
Friday, September 26, 14
m
Scope
USER
EXPERIENCE
Friday, September 26, 14
Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf
Friday, September 26, 14
Source: http://www.jjg.net/elements/pdf/elements.pdf
Friday, September 26, 14
m
What features will the site need
to include?
	 Search
	 Social Media
	 Video
	 Forms
	 Logins
USER
EXPERIENCE
SCOPE: FUN...
m
What content will the site need to
include?
	 Notifications
	 Events
	 News
	 Testimonials
	 Reference
SCOPE: CONTENT
SPE...
Friday, September 26, 14
m
Structure
USER
EXPERIENCE
Friday, September 26, 14
Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf
Friday, September 26, 14
Source: http://www.jjg.net/elements/pdf/elements.pdf
Friday, September 26, 14
m
Information architecture is
the structure of content. It is
the structure, order, and
hierarchy of content labels
and ca...
m
Interaction design is the
structure of experience. It’s
the hover state, slide out
effect and behavior of that
structure...
Friday, September 26, 14
m
Skeleton
USER
EXPERIENCE
Friday, September 26, 14
Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf
Friday, September 26, 14
Source: http://www.jjg.net/elements/pdf/elements.pdf
Friday, September 26, 14
m
Decisions:
What font will we use for the
navigation?
How much space (kerning) between
the navigation items?
How will dif...
m
Decisions:
Carets or Bullets or Arrows to
represent child links?
Bold or Underline to represent what
page people are on?...
m
Decisions:
Does the navigation expand on hover
or click?
Does the navigation slide out
sideways, or down?
How many level...
Friday, September 26, 14
m
Surface
USER
EXPERIENCE
Friday, September 26, 14
Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf
Friday, September 26, 14
Source: http://www.jjg.net/elements/pdf/elements.pdf
Friday, September 26, 14
m
Every layer below contributes to
visual design.
Each layer is invisible to the visitor -
they just see ‘the design’.
Eve...
Visual Design
Everything Else
Friday, September 26, 14
Friday, September 26, 14
mStoner
INTRODUCTION
DEFINITION
INFORMATION
ARCHITECTURE
ELEMENTS
PROCESS
IA PRACTICE ON CAMPUS
Friday, September 26, 14
ELEMENTS
PROCESS
DEFINITION
SCHEMES &
STRUCTURES
TAXONOMY &
VOCABULARY
Friday, September 26, 14
m
SCHEMES &
STRUCTURES
Alphabetical
Chronological
Procedural
EXACT ORGANIZATIONAL
SCHEMES
Friday, September 26, 14
Friday, September 26, 14
Friday, September 26, 14
Friday, September 26, 14
m
Topical
Tells the visitor what the most
important categories of information
are.
AMBIGUOUS ORGANIZATIONAL
SCHEMES
SCHEME...
Friday, September 26, 14
m
Audience
Asks the user ‘Who are you?’, ‘How
do you identify yourself?’
AMBIGUOUS ORGANIZATIONAL
SCHEMES
SCHEMES &
STRUCT...
Friday, September 26, 14
m
Task
Designed to allow someone to
accomplish something.
Uses action verbs in labels.
AMBIGUOUS ORGANIZATIONAL
SCHEMES
SC...
Friday, September 26, 14
m
Global
Local
Hybrid (MegaMenu)
DEPTH OF STRUCTURE
SCHEMES &
STRUCTURES
Friday, September 26, 14
Global
Navigation
Friday, September 26, 14
Local
Navigation
Friday, September 26, 14
Hybrid Mega-Menu
Navigation
Friday, September 26, 14
m
Contextual
Supplementary
Convenience
Site Map
BREADTH OF STRUCTURE
SCHEMES &
STRUCTURES
Friday, September 26, 14
Contextual
Navigation
Friday, September 26, 14
Supplemental
Navigation
Friday, September 26, 14
Convenience
Navigation
Friday, September 26, 14
Site Map
Friday, September 26, 14
ELEMENTS
PROCESS
DEFINITION
SCHEMES &
STRUCTURES
TAXONOMY &
VOCABULARY
Friday, September 26, 14
m
Know Your Audience
Be Efficient
Anticipate what the user will expect
to see
TAXONOMY TIPS
TAXONOMY &
VOCABULARY
Friday, S...
The label says
research -
where does it
lead?
Friday, September 26, 14
Friday, September 26, 14
m
Uniform method of describing things
Provides quality and consistency
Consistency means predictability
‘About’ or ‘About ...
mStoner
INFORMATION
ARCHITECTURE
INTRODUCTION
DEFINITION
ELEMENTS
PROCESS
IA PRACTICE ON CAMPUS
Friday, September 26, 14
PROCESS
ELEMENTS
DOCUMENTATION
TOOLS
Friday, September 26, 14
m
Easy to read
Easier to modify / maintain
A good for representing the depth of the
site.
Organized by numerical, legal st...
Friday, September 26, 14
m
A way to visually represent the IA.
A good way to represent the breadth of
the site.
Good at showing peer relationships ...
Admissions
Why Attend
University of Idaho?
Undergraduate Admissions
Graduate Admissions
Law School Admissions
Contact Us
V...
PROCESS
ELEMENTS
DOCUMENTATION
TOOLS
Friday, September 26, 14
m
OmniOutliner
Google Docs
UXPin
Any Word Processor or Spreadsheet
TOOLS
Friday, September 26, 14
Friday, September 26, 14
Friday, September 26, 14
Friday, September 26, 14
mStoner
INFORMATION
ARCHITECTURE
INTRODUCTION
DEFINITION
ELEMENTS
PROCESS
IA PRACTICE ON CAMPUS
Friday, September 26, 14
IA PRACTICE
ON CAMPUS
PROCESS
STAFFING
EVANGELISM
PROFESSIONAL
DEVELOPMENT
Friday, September 26, 14
STAFFING
Ideal: Dedicated Information
Architect on staff
Reality: Key point person for IA
Goal: All staff associated with ...
Demand that IA be taken seriously
Use the tools at your disposal
Read, watch, listen, learn - there is
an entire IA commun...
PROFESSIONAL
DEVELOPMENT
Establish IA as a real thing, just like
design, development, and content
Use case studies from in...
slideshare.net/secret/
mdAGhSvqBweY8Q
PW: Cascade2014
THIS PRESENTATION
PROFESSIONAL
DEVELOPMENT
Friday, September 26, 14
Information Architecture for the
World Wide Web (Book):
http://amzn.to/3RqL7y
Elements of User Experience
(Book) http://am...
Adaptive Path 
 
adaptivepath.com/events-training
Smashing Magazine
smashingmagazine.com
A List Apart’s UX section
alistap...
THANK YOU!
QUESTIONS?
HELP US
HELP YOU
WITH IA
WWW.MSTONER.COM
FRAN.ZABLOCKI@MSTONER.COM
mStoner
Friday, September 26, 14
Upcoming SlideShare
Loading in …5
×

Information Architecture and User Experience: The Journey, The Destination, The Return Trip

1,019 views

Published on

#CSUC14

Published in: Social Media
  • Be the first to comment

Information Architecture and User Experience: The Journey, The Destination, The Return Trip

  1. 1. INFORMATION ARCHITECTURE THE JOURNEY THE DESTINATION THE RETURN TRIP Fran Zablocki • April 23, 2014 mStoner Friday, September 26, 14
  2. 2. INFORMATION ARCHITECTURE mStoner INTRODUCTION DEFINITION ELEMENTS PROCESS IA PRACTICE ON CAMPUS Friday, September 26, 14
  3. 3. mStoner INTRODUCTION DEFINITION ELEMENTS PROCESS IA PRACTICE ON CAMPUS INFORMATION ARCHITECTURE Friday, September 26, 14
  4. 4. INTRODUCTION ABOUT ME ABOUT THIS PRESENTATION DEFINITION DEFINITION mStoner Friday, September 26, 14
  5. 5. m Fran Zablocki Strategist at mStoner ABOUT ME Friday, September 26, 14
  6. 6. m Twitter: @Zablocki Hashtag: #CSUC14 ABOUT THIS PRESENTATION Friday, September 26, 14
  7. 7. mStoner INFORMATION ARCHITECTURE INTRODUCTION DEFINITION ELEMENTS PROCESS IA PRACTICE ON CAMPUS Friday, September 26, 14
  8. 8. DEFINITION ELEMENTS PROCESS INTRODUCTION CONTEXT USER EXPERIENCE DISCIPLINES Friday, September 26, 14
  9. 9. m CONTEXT The structured design of shared information environments. Source: IA for the WWW, Morville & Rosenfeld, 2006 INFORMATION ARCHITECTURE IS: Friday, September 26, 14
  10. 10. m CONTEXT The combination of organization, labeling, search, and navigation systems within web sites and intranets. Source: IA for the WWW, Morville & Rosenfeld, 2006 INFORMATION ARCHITECTURE IS: Friday, September 26, 14
  11. 11. m CONTEXT The art and science of shaping information products and experiences to support usability and findability. Source: IA for the WWW, Morville & Rosenfeld, 2006 INFORMATION ARCHITECTURE IS: Friday, September 26, 14
  12. 12. “The work we do involves high levels of abstraction, ambiguity, and occasionally !absurdity, and to some degree we’re all still making it up as we go along.” — Peter Morville & Louis Rosenfeld, Information Architecture for the World Wide Web, 2006 Friday, September 26, 14
  13. 13. m How do we make sense of all of this?CONTEXT Friday, September 26, 14
  14. 14. m Planned Structure Form & Function Designated Pathways But the analogy only gets so far... INFORMATION VS. PHYSICAL ARCHITECTURE CONTEXT Friday, September 26, 14
  15. 15. Most buildings aren’t designed to be entered via: • The window • The ceiling • The plumbing But most websites have to be. http://farm5.staticflickr.com/4019/4684666416_1750a85773.jpg Friday, September 26, 14
  16. 16. DEFINITION ELEMENTS PROCESS HISTORY CONTEXT USER EXPERIENCE DISCIPLINES Friday, September 26, 14
  17. 17. m The Elements of User Experience Jesse James Garrett A Visual Model to Make Sense of a Rapidly Evolving Field Because IA is a piece of a much bigger puzzle, we need to understand how all the pieces fit together. USER EXPERIENCE OUR MODEL Friday, September 26, 14
  18. 18. Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf Friday, September 26, 14
  19. 19. Source: http://www.jjg.net/elements/pdf/elements.pdf Friday, September 26, 14
  20. 20. Source: http://www.jjg.net/elements/pdf/elements.pdf Friday, September 26, 14
  21. 21. m Strategy USER EXPERIENCE Friday, September 26, 14
  22. 22. m What do your visitors need to do? Research Compare Apply Donate Contact USER EXPERIENCE STRATEGY: USER NEEDS Friday, September 26, 14
  23. 23. m What do your visitors need to know? Why is your school is a good fit for me? Who teaches and learns at your school? How can I apply? When should I apply? What’s the latest news? Where are you located? USER EXPERIENCE STRATEGY: USER NEEDS Friday, September 26, 14
  24. 24. m What purpose does this site serve? To sell your institution to prospective students. To encourage alumni engagement. To provide employees with resources. USER EXPERIENCE STRATEGY: SITE OBJECTIVES Friday, September 26, 14
  25. 25. m What business objective does the site meet? Increase applications. Increase donations. Decrease time spent on information requests. STRATEGY: SITE OBJECTIVES USER EXPERIENCE Friday, September 26, 14
  26. 26. Friday, September 26, 14
  27. 27. Friday, September 26, 14
  28. 28. m Scope USER EXPERIENCE Friday, September 26, 14
  29. 29. Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf Friday, September 26, 14
  30. 30. Source: http://www.jjg.net/elements/pdf/elements.pdf Friday, September 26, 14
  31. 31. m What features will the site need to include? Search Social Media Video Forms Logins USER EXPERIENCE SCOPE: FUNCTIONAL SPECIFICATIONS Friday, September 26, 14
  32. 32. m What content will the site need to include? Notifications Events News Testimonials Reference SCOPE: CONTENT SPECIFICATIONS USER EXPERIENCE Friday, September 26, 14
  33. 33. Friday, September 26, 14
  34. 34. m Structure USER EXPERIENCE Friday, September 26, 14
  35. 35. Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf Friday, September 26, 14
  36. 36. Source: http://www.jjg.net/elements/pdf/elements.pdf Friday, September 26, 14
  37. 37. m Information architecture is the structure of content. It is the structure, order, and hierarchy of content labels and categories. STRUCTURE: INFORMATION ARCHITECTURE Source: http://www.jjg.net/elements/pdf/elements.pdf USER EXPERIENCE Friday, September 26, 14
  38. 38. m Interaction design is the structure of experience. It’s the hover state, slide out effect and behavior of that structure. STRUCTURE: INTERACTION DESIGN Source: http://www.jjg.net/elements/pdf/elements.pdf USER EXPERIENCE Friday, September 26, 14
  39. 39. Friday, September 26, 14
  40. 40. m Skeleton USER EXPERIENCE Friday, September 26, 14
  41. 41. Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf Friday, September 26, 14
  42. 42. Source: http://www.jjg.net/elements/pdf/elements.pdf Friday, September 26, 14
  43. 43. m Decisions: What font will we use for the navigation? How much space (kerning) between the navigation items? How will different navigation elements be placed in relation to one another (alignment)? SKELETON: INFORMATION DESIGN USER EXPERIENCE Friday, September 26, 14
  44. 44. m Decisions: Carets or Bullets or Arrows to represent child links? Bold or Underline to represent what page people are on? SKELETON: NAVIGATION DESIGN USER EXPERIENCE Friday, September 26, 14
  45. 45. m Decisions: Does the navigation expand on hover or click? Does the navigation slide out sideways, or down? How many levels are shown at once? SKELETON: INTERFACE DESIGN USER EXPERIENCE Friday, September 26, 14
  46. 46. Friday, September 26, 14
  47. 47. m Surface USER EXPERIENCE Friday, September 26, 14
  48. 48. Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf Friday, September 26, 14
  49. 49. Source: http://www.jjg.net/elements/pdf/elements.pdf Friday, September 26, 14
  50. 50. m Every layer below contributes to visual design. Each layer is invisible to the visitor - they just see ‘the design’. Even as site creators, we don’t typically think of each of these components in isolation. SURFACE: VISUAL DESIGN USER EXPERIENCE Friday, September 26, 14
  51. 51. Visual Design Everything Else Friday, September 26, 14
  52. 52. Friday, September 26, 14
  53. 53. mStoner INTRODUCTION DEFINITION INFORMATION ARCHITECTURE ELEMENTS PROCESS IA PRACTICE ON CAMPUS Friday, September 26, 14
  54. 54. ELEMENTS PROCESS DEFINITION SCHEMES & STRUCTURES TAXONOMY & VOCABULARY Friday, September 26, 14
  55. 55. m SCHEMES & STRUCTURES Alphabetical Chronological Procedural EXACT ORGANIZATIONAL SCHEMES Friday, September 26, 14
  56. 56. Friday, September 26, 14
  57. 57. Friday, September 26, 14
  58. 58. Friday, September 26, 14
  59. 59. m Topical Tells the visitor what the most important categories of information are. AMBIGUOUS ORGANIZATIONAL SCHEMES SCHEMES & STRUCTURES Friday, September 26, 14
  60. 60. Friday, September 26, 14
  61. 61. m Audience Asks the user ‘Who are you?’, ‘How do you identify yourself?’ AMBIGUOUS ORGANIZATIONAL SCHEMES SCHEMES & STRUCTURES Friday, September 26, 14
  62. 62. Friday, September 26, 14
  63. 63. m Task Designed to allow someone to accomplish something. Uses action verbs in labels. AMBIGUOUS ORGANIZATIONAL SCHEMES SCHEMES & STRUCTURES Friday, September 26, 14
  64. 64. Friday, September 26, 14
  65. 65. m Global Local Hybrid (MegaMenu) DEPTH OF STRUCTURE SCHEMES & STRUCTURES Friday, September 26, 14
  66. 66. Global Navigation Friday, September 26, 14
  67. 67. Local Navigation Friday, September 26, 14
  68. 68. Hybrid Mega-Menu Navigation Friday, September 26, 14
  69. 69. m Contextual Supplementary Convenience Site Map BREADTH OF STRUCTURE SCHEMES & STRUCTURES Friday, September 26, 14
  70. 70. Contextual Navigation Friday, September 26, 14
  71. 71. Supplemental Navigation Friday, September 26, 14
  72. 72. Convenience Navigation Friday, September 26, 14
  73. 73. Site Map Friday, September 26, 14
  74. 74. ELEMENTS PROCESS DEFINITION SCHEMES & STRUCTURES TAXONOMY & VOCABULARY Friday, September 26, 14
  75. 75. m Know Your Audience Be Efficient Anticipate what the user will expect to see TAXONOMY TIPS TAXONOMY & VOCABULARY Friday, September 26, 14
  76. 76. The label says research - where does it lead? Friday, September 26, 14
  77. 77. Friday, September 26, 14
  78. 78. m Uniform method of describing things Provides quality and consistency Consistency means predictability ‘About’ or ‘About Us’? ‘Admission’ or ‘Admissions’ CONTROLLED VOCABULARY TAXONOMY & VOCABULARY Friday, September 26, 14
  79. 79. mStoner INFORMATION ARCHITECTURE INTRODUCTION DEFINITION ELEMENTS PROCESS IA PRACTICE ON CAMPUS Friday, September 26, 14
  80. 80. PROCESS ELEMENTS DOCUMENTATION TOOLS Friday, September 26, 14
  81. 81. m Easy to read Easier to modify / maintain A good for representing the depth of the site. Organized by numerical, legal structure IA LISTING DOCUMENTATION Friday, September 26, 14
  82. 82. Friday, September 26, 14
  83. 83. m A way to visually represent the IA. A good way to represent the breadth of the site. Good at showing peer relationships such as related pages. More work to maintain. IA DIAGRAM / SITEMAP DOCUMENTATION Friday, September 26, 14
  84. 84. Admissions Why Attend University of Idaho? Undergraduate Admissions Graduate Admissions Law School Admissions Contact Us Visit Us Transfer Admissions How to Apply Dates & Deadlines Admission Requirements Cost & Financial Aid Majors & Minors Frequently Asked Questions Visit Us Information for: > Accepted Students > First Year Students > Transfer Students > International Students > Non-degree Students Non-degree Admissions Friday, September 26, 14
  85. 85. PROCESS ELEMENTS DOCUMENTATION TOOLS Friday, September 26, 14
  86. 86. m OmniOutliner Google Docs UXPin Any Word Processor or Spreadsheet TOOLS Friday, September 26, 14
  87. 87. Friday, September 26, 14
  88. 88. Friday, September 26, 14
  89. 89. Friday, September 26, 14
  90. 90. mStoner INFORMATION ARCHITECTURE INTRODUCTION DEFINITION ELEMENTS PROCESS IA PRACTICE ON CAMPUS Friday, September 26, 14
  91. 91. IA PRACTICE ON CAMPUS PROCESS STAFFING EVANGELISM PROFESSIONAL DEVELOPMENT Friday, September 26, 14
  92. 92. STAFFING Ideal: Dedicated Information Architect on staff Reality: Key point person for IA Goal: All staff associated with the web need to be versed WHO SHOULD DO IT? Friday, September 26, 14
  93. 93. Demand that IA be taken seriously Use the tools at your disposal Read, watch, listen, learn - there is an entire IA community out there BE A CHAMPION EVANGELISM Friday, September 26, 14
  94. 94. PROFESSIONAL DEVELOPMENT Establish IA as a real thing, just like design, development, and content Use case studies from industry Insert IA into your training regimen Build up expertise among staff who work in the UX family (hint: that’s everybody) IA AT YOUR SCHOOL Friday, September 26, 14
  95. 95. slideshare.net/secret/ mdAGhSvqBweY8Q PW: Cascade2014 THIS PRESENTATION PROFESSIONAL DEVELOPMENT Friday, September 26, 14
  96. 96. Information Architecture for the World Wide Web (Book): http://amzn.to/3RqL7y Elements of User Experience (Book) http://amzn.to/18Q4fA4 Jesse James Garrett http://www.jjg.net Karen McGrane http://karenmcgrane.com RESOURCES PROFESSIONAL DEVELOPMENT Friday, September 26, 14
  97. 97. Adaptive Path adaptivepath.com/events-training Smashing Magazine smashingmagazine.com A List Apart’s UX section alistapart.com/topics/user- experience mStoner Blog mstoner.com/team/fran-zablocki/ RESOURCES PROFESSIONAL DEVELOPMENT Friday, September 26, 14
  98. 98. THANK YOU! QUESTIONS? HELP US HELP YOU WITH IA WWW.MSTONER.COM FRAN.ZABLOCKI@MSTONER.COM mStoner Friday, September 26, 14

×