Information Architecture and UXD An intro to the role, process and purpose Karri Ojanen, Publicis Modem

About Me Background and experience Finland, United Arab Emirates Graphic design, journalism, copywriting Electronic music Past clients and projects Diverse 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, TeliaSonera Forestry: StoraEnso, UPM Online banking: Nordea Fundraising: VillageLife.fi Fashion: Seppala.fi

Background and experience

Finland, United Arab Emirates

Graphic design, journalism, copywriting

Electronic music

Past clients and projects

Diverse 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, TeliaSonera

Forestry: StoraEnso, UPM

Online banking: Nordea

Fundraising: VillageLife.fi

Fashion: 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: Form Function Metaphor Navigation and interface Interaction Visual design Initiating the IA process is the first thing to do

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:

Form

Function

Metaphor

Navigation and interface

Interaction

Visual 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?”...”

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 platform Not 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 web has evolved from a library of interlinked hypertext pages to an online application platform

Not 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 lead From 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 brands Built not on “traditional” solid foundation of marketing, but on an ecosystem of experience and word of mouth referrals

The web has gone beyond being the support medium for campaigns and brand development

The web has become the lead

From 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 brands

Built not on “traditional” solid foundation of marketing, but on an ecosystem of experience and word of mouth referrals

The Value of User Experience Micro-interactions Everyday 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

Micro-interactions

Everyday 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 work Requirements, 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

“ 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 work

Requirements, 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 users Cost 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)

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 users

Cost 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 site Launch

The Role of IA/UXD: The Process Now our IA appears here… … or here. Discover Strategy and scoping Design Creative design Develop Building the site Launch

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 site Launch

The Role of IA/UXD: The Process DESIGN Insights become ideas DEVELOP Ideas become reality LAUNCH DISCOVER Analysis 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 show Collaboration Consistency, 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/UXD

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

IA/UXD is not a one-man show

Collaboration

Consistency, not one off answers

IA/UXD is a strategic role

IA/UXD is part of planning, creative and technology

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

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 backgrounds Graphic designers and art directors Library technicians, Journalists and copywriters Web 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 research Empathetic: Listens carefully, takes notes Generous: Shares information, collaborates well Flexible: Delivers appropriately, understands constraints Articulate: Verbally or visually (best if both) The industry needs people that are multi-skilled and versed in strategy, technology and creative

This is an emerging discipline in an evolving medium

IAs and UXDs come from several different backgrounds

Graphic designers and art directors

Library technicians, Journalists and copywriters

Web 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 research

Empathetic: Listens carefully, takes notes

Generous: Shares information, collaborates well

Flexible: Delivers appropriately, understands constraints

Articulate: 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

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 sitemaps Schematic representation of a process Sitemaps/flow maps the individual pages/views on a website and the links between them Process flow maps the individual steps of a process, different options and alternatives and the outcomes Wireframes Stripped-down visual representation of a single web page, devoid of graphic treatment Framework made with wires, which define basic layout and placement of content and page elements such as navigation, header & footer, branding etc.

Documents, surveys, research papers, content lists, workshops

Flowcharts and sitemaps

Schematic representation of a process

Sitemaps/flow maps the individual pages/views on a website and the links between them

Process flow maps the individual steps of a process, different options and alternatives and the outcomes

Wireframes

Stripped-down visual representation of a single web page, devoid of graphic treatment

Framework 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 pencil Initial 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 tools IA/UXD needs to be properly documented using software tools that allow for quick editing later on as the work develops Common IA software: Microsoft Visio (Windows), Omni Graffle (Mac), ConceptDraw (Win&Mac), Axure (Windows) Prototyping: Axure, Visio, Flash, HTML prototypes Other: Word, Excel, Powerpoint/Keynote, etc.

Sketching: paper and pencil

Initial 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 tools

IA/UXD needs to be properly documented using software tools that allow for quick editing later on as the work develops

Common IA software: Microsoft Visio (Windows), Omni Graffle (Mac), ConceptDraw (Win&Mac), Axure (Windows)

Prototyping: Axure, Visio, Flash, HTML prototypes

Other: Word, Excel, Powerpoint/Keynote, etc.

Examples

Examples

Examples

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

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

Karri Ojanen

Information Architect

Publicis Modem Toronto