Information Architectureand UXD

An intro to the role, process and purpose

Karri Ojanen, Publicis Modem

About Me

Background and experienceFinland, United Arab EmiratesGraphic design, journalism, copywritingElectronic music

Past clients and projectsDiverse experience from online service concepts and processes to mobile applications to e-learning solutions to digital/IPTV to digital marketing from microsites to games and social media

Mobile telecom: Nokia, N-Gage, Elisa, TeliaSoneraForestry: StoraEnso, UPMOnline banking: NordeaFundraising: VillageLife.fiFashion: Seppala.fi

What is Information Architecture?

IA Institute:The structural design of shared information environments The art and science of organizing and labeling web sites, intranets, online communities and software to support usability and findability Practice focused on bringing principles of design and architecture to the digital landscape

Information Architecture is the foundation for web design

The blueprint of the site upon which all other aspects are built:FormFunctionMetaphorNavigation and interfaceInteractionVisual design

Initiating the IA process is the first thing to do

What is User Experience Design?

All aspects of the user’s interaction with the product (website or online application): how it is perceived, learned, and used

“User experience is not about how a product works on the inside. User experience is about how it works on the outside, where a person comes into contact with it and has to work with it” - J. J. Garrett, The Elements of User Experience

IA means defining information structures to answer the question "how does a user find the information they want?

UXD/IxD means defining system behaviors to answer the question "how does a user take the action they want?”...”

The Value of User Experience

The web has evolved from a library of interlinked hypertext

pages to an online application platformNot just text, image, video and audio, but the glue in between

Site centric -> Customer centric

Publishing to audiences -> Participation with audiences

Customer as observer -> Customer as driver

Content directories (taxonomy) -> Content tagging

(folksonomy)

Clicks and page views as goal -> Interaction time as goal

The Value of User Experience

The web has gone beyond being the support medium for

campaigns and brand development

The web has become the leadFrom one-offs to the full 360

More and more brands are born, developed and maintained in

the digital space

Case Google: from a technology company to one of the world’s

most recognizable and successful brandsBuilt not on “traditional” solid foundation of marketing, but on an ecosystem of experience and word of mouth referrals

The Value of User Experience

Micro-interactionsEveryday exchanges with a product, brand and service

Individually they seem insignificant

Combined they define how the user feels about the product, brand and service at an emotional level

Each time Google helps the user to find something, view a map

or connect with a friend, it sends a positive impression of the

brand and service in the user’s memory bank

Create an emotional connection - deliver beyond the user’s

expectations of great performance

The Value of IA/UXD to Us

“Do you feel that something elusive has been overlooked when

your team sketches an entire website on a white board in a

one-hour meeting and then promptly leaves to go and build it?”

IA/UXD lays the necessary groundwork for our workRequirements, scope and strategy

What is the site for? Who is it for?

Eases our site build/development process in the end, giving us more time to focus on the strategy first

Cost of developing, managing, maintaining and updating

IA holds a unified vision together

The Value of IA/UXD to Our Clients and Their Customers

Helps the client to focus on the key priorities

Helps everybody to see the forest from the trees

Good IA is incredibly effective

Good IA saves both time and money in the long run

Good information system makes sense to usersCost of finding (time, clicks, frustration, precision)Cost of not finding (success, recall, frustration, alternatives)Cost of development (time, budget, staff, frustration)Value of learning (related products, services, projects, people)Value of total experience (brand experience, cross-platform functionality)

The Role of IA/UXD: The Process

Discover

Strategy and scoping

Design

Creative design

Develop

Building the siteLaunch

The Role of IA/UXD: The Process

Now our IA appears here… …or here.

Discover

Strategy and scoping

Design

Creative design

Develop

Building the siteLaunch

The Role of IA/UXD: The Process

IA:

Discover and Research

IA:

Design

IA:

Validate

…but it belongs here:

Discover

Strategy and scoping

Design

Creative design

Develop

Building the siteLaunch

The Role of IA/UXD: The Process

DESIGNInsights become ideas

DEVELOPIdeas become reality

LAUNCHDISCOVERAnalysis becomes insight

Competitive Analysis

Heuristic Evaluation

Concept Model

PITCH

Audience Research

Content Audit/Inventory

Domain Research

Requirements/Road Map

Metrics/KPIs/Analytics

Strategic Tactical

Personas

User Journeys

LOW-FI

Flowchart

Site Map

Wireframes

HI-FI

Flowchart

Site Map

Wireframes

Nomenclature &

Labeling

Functional Specs

Usability Testing

The Role of IA/UXD

IA/UXD is not a contained, “boxed” field of work

IA/UXD is not a one-man showCollaborationConsistency, not one off answers

Art Director

Designer

Copywriter Developer

IA/UXD

IA/UXD IA/UXD

Interaction & functionality

Interaction & functionality

Interaction & functionality

IA/UXD is a strategic role

IA/UXD is part of planning, creative and technology

Planning

Creative

Technology

IA/UXDIA/UXD

The Role of IA/UXD

Information architecture is not…Simply drawing up a sitemap

Simply pumping out masses of wireframes

Designing for ourselves

Just about navigation

A frivolous expense for “huge” projects only

A “nice to have” item on a checklist

Database design

IA and UXD Professionals

This is an emerging discipline in an evolving medium

IAs and UXDs come from several different backgroundsGraphic designers and art directorsLibrary technicians, Journalists and copywritersWeb admins, site content managers, content analysts

Need to have developed a good general understanding of the digital space

Curious: Asks a lot of questions, doesn’t accept the obvious, loves researchEmpathetic: Listens carefully, takes notesGenerous: Shares information, collaborates wellFlexible: Delivers appropriately, understands constraintsArticulate: Verbally or visually (best if both)

The industry needs people that are multi-skilled and versed in strategy, technology and creative

IA and UXD Professionals

If I had asked my customers what they wanted, they would

have said “a faster horse.” -Henry Ford

Clients don't envision the future, they inform the present

Build processes that promote an idea-generating culture

The Role of IA: The Deliverables

Documents, surveys, research papers, content lists, workshops

Flowcharts and sitemapsSchematic representation of a process

Sitemaps/flow maps the individual pages/views on a website and the links between themProcess flow maps the individual steps of a process, different options and alternatives and the outcomes

WireframesStripped-down visual representation of a single web page, devoid of graphic treatmentFramework made with wires, which define basic layout and placement of content and page elements such as navigation, header & footer, branding etc.

The Role of IA: The Tools

Sketching: paper and pencilInitial wires, ideas, quick draft versions of alternative functionality”…using the sketch to conceive design direction not only sets a cognitive foundation of good design, but also demonstrates to the client that real, non-superficial design work is taking place.” - T. Scott Stromberg

Software toolsIA/UXD needs to be properly documented using software tools that allow for quick editing later on as the work developsCommon IA software: Microsoft Visio (Windows), Omni Graffle (Mac), ConceptDraw (Win&Mac), Axure (Windows)Prototyping: Axure, Visio, Flash, HTML prototypesOther: Word, Excel, Powerpoint/Keynote, etc.

Examples

Examples

Examples

QuickTime™ and a decompressor

are needed to see this picture.

Examples

Examples

Examples

Examples

Examples

Resources

Boxes and Arrows, http://www.boxesandarrows.com/

The Information Architecture Institute, http://iainstitute.org/

The Interaction Design Association, http://www.ixda.org/

Experience Matters, http://experiencematters.criticalmass.com/

WebMonkey Information Architecture Tutorial,

http://www.webmonkey.com/tutorial/Information_Architecture_Tutorial

Summary

Thank You

Karri Ojanen

Information Architect

Publicis Modem Toronto