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


mStoner

INTRODUCTION

DEFINITION

ELEMENTS

PROCESS

IA PRACTICE ON CAMPUS

Friday, September 26, 14

mStoner

INTRODUCTION

DEFINITION

ELEMENTS

PROCESS




INTRODUCTION

ABOUT ME

ABOUT THISPRESENTATION

DEFINITION

DEFINITION mStonerFriday, September 26, 14

m

Fran Zablocki

Strategist at mStonerABOUT ME


m

Twitter: @Zablocki

Hashtag: #CSUC14ABOUT THIS PRESENTATION


mStoner


INTRODUCTION

DEFINITION

ELEMENTS

PROCESS



DEFINITION

ELEMENTS

PROCESS

INTRODUCTION

CONTEXT

USER EXPERIENCE

DISCIPLINES


m

CONTEXT The structured design of shared information environments.

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

INFORMATION ARCHITECTURE IS:


m

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




m

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




“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


m

How do we make sense of all of this?CONTEXT


m

Planned Structure

Form & Function

Designated Pathways

But the analogy only gets so far...

INFORMATION VS. PHYSICAL ARCHITECTURE

CONTEXT


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




DEFINITION

ELEMENTS

PROCESS

HISTORY

CONTEXT

USER EXPERIENCE

DISCIPLINES


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


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








m

StrategyUSER EXPERIENCE


m

What do your visitors need to do?

Research

Compare

Apply

Donate

Contact

USER EXPERIENCE

STRATEGY: USER NEEDS


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


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


m

What business objective does the site meet?

Increase applications.

Increase donations.

Decrease time spent on information requests.

STRATEGY: SITE OBJECTIVES

USER EXPERIENCE



http://www.suny.edu/

http://www.suny.edu/


http://system.suny.edu/











































































































































m

ScopeUSER EXPERIENCE










m

What features will the site need to include?

Search

Social Media

Video

Forms

Logins

USER EXPERIENCE

SCOPE: FUNCTIONAL SPECIFICATIONS


m

What content will the site need to include?

Notifications

Events

News

Testimonials

Reference

SCOPE: CONTENT SPECIFICATIONS

USER EXPERIENCE



http://www.aup.edu/

http://www.aup.edu/

m

StructureUSER EXPERIENCE










m

Information architecture is the structure of content. It is the structure, order, and hierarchy of content labels and categories.

STRUCTURE: INFORMATION ARCHITECTURE


USER EXPERIENCE




m

Interaction design is the structure of experience. It’s the hover state, slide out effect and behavior of that structure.

STRUCTURE: INTERACTION DESIGN


USER EXPERIENCE





http://www.as.miami.edu/



































































































































m

SkeletonUSER EXPERIENCE










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


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


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



http://250.brown.edu/


m

SurfaceUSER EXPERIENCE










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


Visual Design

Everything Else





mStoner

INTRODUCTION

DEFINITION

INFORMATION ARCHITECTURE ELEMENTS

PROCESS



ELEMENTS

PROCESS

DEFINITION

SCHEMES & STRUCTURES

TAXONOMY &VOCABULARY


m


Alphabetical

Chronological

Procedural

EXACT ORGANIZATIONAL SCHEMES





m

Topical

Tells the visitor what the most important categories of information are.

AMBIGUOUS ORGANIZATIONAL SCHEMES




m

Audience

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





m

Task

Designed to allow someone to accomplish something.

Uses action verbs in labels.





m

Global

Local

Hybrid (MegaMenu)

DEPTH OF STRUCTURE



GlobalNavigation


LocalNavigation


Hybrid Mega-Menu Navigation


m

Contextual

Supplementary

Convenience

Site Map

BREADTH OF STRUCTURE



ContextualNavigation


SupplementalNavigation


Convenience Navigation


Site Map


ELEMENTS

PROCESS

DEFINITION


TAXONOMY &VOCABULARY


m

Know Your Audience

Be Efficient

Anticipate what the user will expect to see

TAXONOMY TIPS

TAXONOMY & VOCABULARY


The label says research - where does it lead?



m

Uniform method of describing things

Provides quality and consistency

Consistency means predictability

‘About’ or ‘About Us’?

‘Admission’ or ‘Admissions’

CONTROLLED VOCABULARY

TAXONOMY & VOCABULARY


mStoner


INTRODUCTION

DEFINITION

ELEMENTS

PROCESS



PROCESS

ELEMENTS

DOCUMENTATION

TOOLS


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



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


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

ELEMENTS

DOCUMENTATION

TOOLS


m

OmniOutliner

Google Docs

UXPin

Any Word Processor or Spreadsheet

TOOLS


http://clients.mstoner.com/miami-ohio/ia/saf/career_services.html/

http://clients.mstoner.com/miami-ohio/ia/saf/career_services.html/

https://docs.google.com/a/mstoner.com/spreadsheet/ccc?key=0AmyD7G2mx8qtdE93M1BxdmViWFF0LXZJZjZUZmY1LVE&usp=drive_web#gid=0

https://docs.google.com/a/mstoner.com/spreadsheet/ccc?key=0AmyD7G2mx8qtdE93M1BxdmViWFF0LXZJZjZUZmY1LVE&usp=drive_web#gid=0

http://app.uxpin.com/dms/Desktop/Default/205395#?id_page=3381488

http://app.uxpin.com/dms/Desktop/Default/205395#?id_page=3381488




mStoner


INTRODUCTION

DEFINITION

ELEMENTS

PROCESS



IA PRACTICEON CAMPUS

PROCESS

STAFFING

EVANGELISM

PROFESSIONAL DEVELOPMENT


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?


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



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


slideshare.net/secret/mdAGhSvqBweY8Q

PW: Cascade2014

THIS PRESENTATION



https://www.slideshare.net/secret/mdAGhSvqBweY8Q




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



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/

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



http://smashingmagazine.com

http://smashingmagazine.com

http://alistapart.com/topics/user-experience




http://www.mstoner.com/team/fran-zablocki/

http://www.mstoner.com/team/fran-zablocki/

THANK YOU!QUESTIONS?

HELP US

HELP YOU

WITH IA

WWW.MSTONER.COM

[email protected]

mStonerFriday, September 26, 14

http://www.mstoner.com

http://www.mstoner.com

mailto:[email protected]

mailto:[email protected]