Information Architecture and User Experience: The Journey, The Destination, The Return Trip
-
Upload
hannonhill -
Category
Social Media
-
view
105 -
download
0
description
Transcript of Information Architecture and User Experience: The Journey, The Destination, The Return Trip
INFORMATION ARCHITECTURE
THE JOURNEY
THE DESTINATION
THE RETURN TRIP
Fran Zablocki • April 23, 2014 mStonerFriday, September 26, 14
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 THISPRESENTATION
DEFINITION
DEFINITION mStonerFriday, September 26, 14
m
Fran Zablocki
Strategist at mStonerABOUT ME
Friday, September 26, 14
m
Twitter: @Zablocki
Hashtag: #CSUC14ABOUT 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
INFORMATION ARCHITECTURE IS:
Friday, September 26, 14
m
CONTEXTThe 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
m
CONTEXTThe 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
“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
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 ARCHITECTURE
CONTEXT
Friday, September 26, 14
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
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 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
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
StrategyUSER EXPERIENCE
Friday, September 26, 14
m
What do your visitors need to do?
Research
Compare
Apply
Donate
Contact
USER EXPERIENCE
STRATEGY: USER NEEDS
Friday, September 26, 14
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
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
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
Friday, September 26, 14
m
ScopeUSER 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: FUNCTIONAL SPECIFICATIONS
Friday, September 26, 14
m
What content will the site need to include?
Notifications
Events
News
Testimonials
Reference
SCOPE: CONTENT SPECIFICATIONS
USER EXPERIENCE
Friday, September 26, 14
m
StructureUSER 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 categories.
STRUCTURE: INFORMATION ARCHITECTURE
Source: http://www.jjg.net/elements/pdf/elements.pdf
USER EXPERIENCE
Friday, September 26, 14
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
Friday, September 26, 14
m
SkeletonUSER 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 different navigation elements be placed in relation to one another (alignment)?
SKELETON: INFORMATION DESIGN
USER EXPERIENCE
Friday, September 26, 14
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
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
m
SurfaceUSER 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’.
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
Visual Design
Everything Else
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
SCHEMES & STRUCTURES
Friday, September 26, 14
Friday, September 26, 14
m
Audience
Asks the user ‘Who are you?’, ‘How do you identify yourself?’
AMBIGUOUS ORGANIZATIONAL SCHEMES
SCHEMES & STRUCTURES
Friday, September 26, 14
Friday, September 26, 14
m
Task
Designed to allow someone to accomplish something.
Uses action verbs in labels.
AMBIGUOUS ORGANIZATIONAL SCHEMES
SCHEMES & STRUCTURES
Friday, September 26, 14
Friday, September 26, 14
m
Global
Local
Hybrid (MegaMenu)
DEPTH OF STRUCTURE
SCHEMES & STRUCTURES
Friday, September 26, 14
GlobalNavigation
Friday, September 26, 14
LocalNavigation
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
ContextualNavigation
Friday, September 26, 14
SupplementalNavigation
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, September 26, 14
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 Us’?
‘Admission’ or ‘Admissions’
CONTROLLED VOCABULARY
TAXONOMY & VOCABULARY
Friday, September 26, 14
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 structure
IA LISTING
DOCUMENTATION
Friday, September 26, 14
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 such as related pages.
More work to maintain.
IA DIAGRAM / SITEMAP
DOCUMENTATION
Friday, September 26, 14
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
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 PRACTICEON 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 the web need to be versed
WHO SHOULD DO IT?
Friday, September 26, 14
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
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
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://amzn.to/18Q4fA4
Jesse James Garretthttp://www.jjg.net
Karen McGranehttp://karenmcgrane.com
RESOURCES
PROFESSIONAL DEVELOPMENT
Friday, September 26, 14
Adaptive Path adaptivepath.com/events-training
Smashing Magazinesmashingmagazine.com
A List Apart’s UX sectionalistapart.com/topics/user-experience
mStoner Blogmstoner.com/team/fran-zablocki/
RESOURCES
PROFESSIONAL DEVELOPMENT
Friday, September 26, 14
THANK YOU!QUESTIONS?
HELP US
HELP YOU
WITH IA
WWW.MSTONER.COM
mStonerFriday, September 26, 14