Upload
karri-ojanen
View
4.027
Download
0
Embed Size (px)
DESCRIPTION
General introduction to the process, purpose and value of information architecture, user experience and interaction design in the (advertising) agency world.
Citation preview
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