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

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

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

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

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

FRAN.ZABLOCKI@MSTONER.COM

mStonerFriday, September 26, 14