information architecture: the journey, destination, and return trip

INFORMATION ARCHITECTURE

THE JOURNEY

THE DESTINATION

THE RETURN TRIP

Fran Zablocki • November 20, 2013 mStonerFriday, November 22, 13

INFORMATION ARCHITECTURE

INTRODUCTION

WHAT IS IA?

ELEMENTS OF IA

FUTURE OF IA

IA AS PRACTICE

Friday, November 22, 13

IA

INTRODUCTION

WHAT IS IA?

ELEMENTS OF IA

THE FUTURE OF IA

THE IA PRACTICE


INTRODUCTION

ABOUT ME

ABOUT THISPRESENTATION

WHAT IS IA?

ELEMENTS OF IAFriday, November 22, 13

ABOUT ME

Fran Zablocki

Strategist at mStoner

@Zablocki


ABOUT THIS PRESENTATION

@Zablocki

#mstonernow


WHAT IS IA?

ELEMENTS OF IA

THE FUTURE OF IA

INTRODUCTIONHISTORY

DEFINING IA

USER EXPERIENCE

ARE YOU ANINFORMATION ARCHITECT?


HISTORY

LIBRARY & INFORMATION SCIENCE

Source: http://www.flickr.com/photos/thomashawk/85441961/


http://www.flickr.com/photos/thomashawk/85441961/

http://www.flickr.com/photos/thomashawk/85441961/

• Pic of DDS

Source: http://1y4o79syc6g4difua2cvof9qco.wpengine.netdna-cdn.com/wp-content/uploads/2013/09/library-card-catalogs.jpg


http://1y4o79syc6g4difua2cvof9qco.wpengine.netdna-cdn.com/wp-content/uploads/2013/09/library-card-catalogs.jpg


HISTORY

• Organization | Classification

• Labeling | Taxonomy

• Browsing| Reference

• Navigation | Guidance

LIBRARY & INFORMATION SCIENCE


HISTORY• Styling? What’s Styling?

• Pure Information Architecture

THE EARLY WEB


Source: Internet Wayback Machine - www.harvard.edu, 1997




http://www.harvard.edu

http://www.harvard.edu

HISTORY

• Websites have come a long way

• They have become much, much more complex

• They have become much more interactive

• But IA is still the backbone

ALL GROWN UP


Parallax IA


http://www.nd.edu

http://www.nd.edu

Responsive IA

Mobile

Desktop


http://www.webster.edu




DEFINING IA

• The structured design of shared information environments

• The combination of organization, labeling, search, and navigation systems within web sites and intranets.

• The art and science of shaping information products and experiences to support usability and findability.

DEFINITION

Source: IA for the WWW, Morville & Rosenfeld, 2006


DEFINING IA

• Graphic Design

• Software Development

• Usability Engineering

• Information Design

• Interaction Design

WHAT IA ISN’T


DEFINING IA

• Ambiguous

• Mostly invisible

• Hard to define

WHAT IA IS


“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, 2006


DEFINING IA

• Planned Structure

• Form and Function

• Designated Pathways

• But the analogy only gets so far...

ANALOGY: PHYSICAL ARCHITECTURE


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




USER EXPERIENCE The Elements of User Experience

A VISUAL DEFINITION


USER EXPERIENCE

• Jesse James Garrett

• 2000

• A Visual Model to Make Sense of a Rapidly Evolving Field

THE ELEMENTS OF UX


Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf


http://www.jjg.net/elements/pdf/elements.pdf


Source: http://www.jjg.net/elements/pdf/elements.pdf




USER EXPERIENCE

• IA is right smack in the middle, on the structure plane with interaction design.

• IA is the structure of content, while interaction design is the structure of experience

• IA is the structure / order / heirarchy of labels, while information design is the hover state, slide out effect and behavior of that structure.

THE ELEMENTS OF UX

Source: http://www.jjg.net/elements/pdf/elements.pdf




ARE YOU AN INFORMATION ARCHITECT?

• You are all Information Architects

• IA draws from many disciplines

WHAT DOES AN INFORMATION ARCHITECT LOOK LIKE?



• Information & Library Science

• Journalism

• Marketing

• Graphic and Information Design




• Content Strategy

• Technical Writing

• Content Management



“Content management and information architecture are really two sides of the same coin. IA portrays a ‘snapshot’ or spatial view of an information system, chile CM describes a temporal view by showing how information should flow into, around, and out of that same system over time.”

— Peter Morville & Louis Rosenfeld, 2006


ELEMENTS OF IA

THE FUTURE OF IA

THE IA PRACTICE

WHAT IS IA? STRATEGY

USER BROWSINGBEHAVIOR

ORGANIZATIONALSCHEMES & STRUCTURES

LABELING

PROCESS


STRATEGY

• Your IA should reinforce the strategic goals of your site:

• Sell your institution to users

• Provide relevant, timely information to users

• Transact - apply, donate, contact

STRATEGY FIRST


STRATEGY

• Users - prospectives first, but many more

• Context - higher education, marketing and awareness-building

• Content - words and images

CORE ELEMENTS OF IA


USER BROWSING BEHAVIOR

• Home >

• Academics >

• Majors >

• English >

• Degree Requirements >

• Apply >

• PROFIT

WHAT WE THINK USERS DO



Session 1 (mobile phone):

• Google ‘English Degrees’ >

• Your English Dept. >

• English >

• English Major in your academics section >

• Information for Future Students >

• Contact Us > OH THE VOICE IS ON! > Bookmark.

WHAT USERS ACTUALLY DO



Session 2 (tablet):

• Use bookmarked degree page >

• Read everything you’ve ever written on the English major >

• Click Apply Now >

• OMG A CAT WITH BACON ON ITS HEAD




Session 3 (laptop):

• Google ‘Apply to Your English Program >

• Get lost browsing the admissions site full of student videos >

• Click Apply Now >

• Complete application process >

• (Choose another school anyway) or PROFIT




• Known-Item Seeking

• Searching for something you know is there

• This is why faculty and staff are terrible testers for sites dedicated to students

• “Just give me my quicklinks! NYAH!”

TYPES OF BEHAVIOR



• Exploratory Seeking

• Browsing for the unknown

• Most helped by topical and audience navigation

TYPES OF BEHAVIOR



• Exhaustive Research

• Finding everything there is to know

• Most helped by search

TYPES OF BEHAVIOR



• Re-Finding

• Finding again

• Done through bookmarking (if they are on the ball) or browsing history (if they are not so much) or trying a dozen searches before remembering the right term (if they are like most of us).

TYPES OF BEHAVIOR



• Move from one form of behavior to another, fluidly, over several sessions.

ONE JOURNEY,MANY PATHS



• The ‘Three Click Rule’

• One path to rule them all

• Projecting your behavior onto others

MYTHBUSTERS


“We think we can measure the experience of finding by how long it takes, or how many mouse clicks it takes, or how many viewed pages it takes to find the ‘right’ answer, when often there is no right answer.”

— Peter Morville & Louis Rosenfeld


ORGANIZATIONAL SCHEMES & STRUCTURES

• Alphabetical

• Chronological

EXACT ORGANIZATIONAL SCHEMES



• Topic Based

AMBIGUOUS ORGANIZATIONAL SCHEMES



• Audience Based

• Asks the user ‘Who are you?’, ‘How do you identify yourself?’




• Task Based

• Designed to allow someone to accomplish something

• Use action verbs in labels




• Global

• Local

• Hybrid (MegaMenu)

DEPTH OF SCHEME


GlobalNavigation


LocalNavigation


Mega-Menu Navigation



• Contextual

• Supplementary

• Convenience

• Site Map

BREADTH OF SCHEME


ContextualNavigation


SupplementalNavigation


Convenience Navigation


Site Map



• Hierarchical

• Topical

• Audience

• Global

• Local

• Site Map

TOP-DOWN: ORGANIZATIONAL STRUCTURE



• How you organize, label and sequence the information inside the WYSIWYG:

• Content Structure

• Contextual navigation

• Supplementary navigation

BOTTOM-UP: CONTENT STRUCTURE


Content Structure



• Standardized organizational schemes for particular content

• Consistency of content hierarchy from page to page

• For example, a standard Majors and Minors page applied across the site

BOTTOM-UP: CONTENT TEMPLATES


Content Templates


Content Templates

Source: http://www.wofford.edu/biology/


http://www.wofford.edu/biology/

http://www.wofford.edu/biology/


• How you organize and label the information about the information inside the WYSIWYG:

• Metadata

• Tagging

BOTTOM-UP: DATA STRUCTURE


Webster Program Finder


http://www.webster.edu/degrees/index.html%23

http://www.webster.edu/degrees/index.html%23

LABELING

• Know Your Audience

• Be Efficient

• Anticipate what the user will expect to see

LABELING TIPS


Source: http://theludlowgroup.com/advertising/inspired-packaging-design-furthers-successful-branding/


http://theludlowgroup.com/advertising/inspired-packaging-design-furthers-successful-branding/

http://theludlowgroup.com/advertising/inspired-packaging-design-furthers-successful-branding/

The label says research - where does it lead?


LABELING• Uniform method of describing things

• Provides quality and consistency

• Consistency means predictability

CONTROLLED VOCABULARY


LABELING

Because:

• Labeling is more of an art than a science

• Ask 10 people what they would call something, get 10 different answers.

• Having a standard makes it easier for everyone, so follow the standard!

CONTROLLED VOCABULARY


PROCESS

• Easy to read

• Easier to modify / maintain

• A good way to represent the depth of the site.

• Organized by numerical, legal structure

TOP - DOWN: IA LIST


PROCESS

• A way to visually represent the IA

• A good way to represent the breadth of the site.

• Good at showing tangential relationship (related sites, references)

• More work to maintain

TOP-DOWN: IA DIAGRAM / SITEMAP


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


PROCESS • Produced in parallel with Top-Down IA documents

• Define the content structure

BOTTOM-UP: CONTENT TEMPLATES


Content Templates


PROCESS

• IA + Content Hybrid Model

• Evolutionary, shared document

• Allows content creation to remain cohesive with the IA and content templates all in the same place

COMBINING TOP-DOWN AND BOTTOM-UP


IA serves as table of contents


https://docs.google.com/a/mstoner.com/document/d/1eOblCH-OhGJFhKRssnC3jgZFqGIrqKA_jTb-b6MpIwI/edit


Example of IA + Content




PROCESS

• Card Sorting for:

• Labeling

• Organization Schemes

• Tree Path Testing for:

• Hierarchy / Navigation paths

• Dead ends

TESTING


PROCESS• OptimalSort: Online card

sorting

• TreeJack: IA pathing

OPTIMAL WORKSHOP


THE FUTURE OF IA

THE IA PRACTICE

ELEMENTS OF IA EXTENDING GARRETT’SMODEL

DATA-BASED WEBSITES

RESPONSIVE DESIGN

MULTI-PLATFORMBROWSING

ADAPTIVE CONTENT


EXTENDING GARRETT’S MODEL

• Across multiple platforms

• Across multiple sessions

• With exponential information growth

MORE AND MORE COMPLEX


DATA-BASED WEBSITES

• Bottom-Up IA is going to become more and more important as data, not hierarchy, drives content.

DATA IS GETTING BIGGER


MULTI-PLATFORM BROWSING

• Mobile

• Tablet

• Laptop

• Desktop

• Television

ONE SESSION, MANY PLATFORMS


Source: http://www.apple.com/apps/remote/


http://www.apple.com/apps/remote/

http://www.apple.com/apps/remote/

RESPONSIVE DESIGN


ADAPTIVE CONTENT

• Karen McGrane

• NPR - COPE (Create Once, Publish Everywhere)

• Making content agnostic from style, layout, or device

• Uses metadata and XML heavily

• Watch the presentation: http://vimeo.com/45965788

CHUNKS NOT BLOBS


http://vimeo.com/45965788

http://vimeo.com/45965788

THE IA PRACTICE

THE FUTURE OF IAPERMANENT PRACTICE

STAFFING

PROFESSIONALDEVELOPMENT

EVANGELISM


PERMANENT PRACTICE

• 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


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?


EVANGELISM

• 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


PROFESSIONAL DEVELOPMENT

• IA for the WWW (Book):http://amzn.to/3RqL7y

• Elements of User Experience (Book) http://amzn.to/18Q4fA4

• Jesse James Garrett: http://www.jjg.net

• Karen McGranehttp://karenmcgrane.com

BOOKS & SITES


http://www.amazon.com/Information-Architecture-World-Wide-Web/dp/0596527349

http://www.amazon.com/Information-Architecture-World-Wide-Web/dp/0596527349

http://www.amazon.com/Elements-User-Experience-User-Centered-Design/dp/0321683684/ref=sr_1_1?s=books&ie=UTF8&qid=1384969736&sr=1-1&keywords=elements+of+user+experience

http://www.amazon.com/Elements-User-Experience-User-Centered-Design/dp/0321683684/ref=sr_1_1?s=books&ie=UTF8&qid=1384969736&sr=1-1&keywords=elements+of+user+experience

http://www.jjg.net/

http://www.jjg.net/

http://karenmcgrane.com/

http://karenmcgrane.com/

THANK YOU!QUESTIONS?

HELP US

HELP YOU

WITH IA

WWW .MSTONER.COM

[email protected]

mStoner


http://www.mstoner.com

http://www.mstoner.com

mailto:[email protected]

mailto:[email protected]

information architecture: the journey, destination, and return trip

Technology

interactivebut ia

ia isfriday

information products

elements of iafriday

elements of ux source

elements of uxfriday

elements of user experience

parallax iafriday