Information Architecture and UXD An intro to the role, process and purpose Karri Ojanen, Publicis Modem
About Me <ul><li>Background and experience </li></ul><ul><ul><li>Finland, United Arab Emirates </li></ul></ul><ul><ul><li>...
What is Information Architecture? <ul><li>IA Institute: </li></ul><ul><ul><li>The structural design of shared information ...
What is User Experience Design? <ul><li>All aspects of the user’s interaction with the product (website or online applicat...
The Value of User Experience <ul><li>The web has evolved from a library of interlinked hypertext pages to an  online appli...
The Value of User Experience <ul><li>The web has gone beyond being the support medium for campaigns and brand development ...
The Value of User Experience <ul><li>Micro-interactions </li></ul><ul><ul><li>Everyday exchanges with a product, brand and...
The Value of IA/UXD to Us <ul><li>“ Do you feel that something elusive has been overlooked when your team sketches an enti...
The Value of IA/UXD to Our Clients and Their Customers <ul><li>Helps the client to focus on the key priorities </li></ul><...
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 D...
The Role of IA/UXD: The Process IA: Discover and Research IA: Design IA: Validate … but  it belongs here: Discover Strateg...
The Role of IA/UXD: The Process DESIGN Insights become ideas DEVELOP Ideas become reality LAUNCH DISCOVER Analysis becomes...
The Role of IA/UXD <ul><li>IA/UXD is not a contained, “boxed” field of work </li></ul><ul><li>IA/UXD is not a one-man show...
The Role of IA/UXD <ul><li>Information architecture is not… </li></ul><ul><ul><li>Simply drawing up a sitemap </li></ul></...
IA and UXD Professionals <ul><li>This is an emerging discipline in an evolving medium </li></ul><ul><li>IAs and UXDs come ...
IA and UXD Professionals <ul><li>If I had asked my customers what they wanted, they would have said “a faster horse.” -Hen...
The Role of IA: The Deliverables <ul><li>Documents, surveys, research papers, content lists, workshops </li></ul><ul><li>F...
The Role of IA: The Tools <ul><li>Sketching: paper and pencil </li></ul><ul><ul><li>Initial wires, ideas, quick draft vers...
Examples
Examples
Examples
Examples
Examples
Examples
Examples
Examples
Resources <ul><li>Boxes and Arrows,  http://www.boxesandarrows.com/ </li></ul><ul><li>The Information Architecture Institu...
Summary
Thank You <ul><li>Karri Ojanen </li></ul><ul><li>Information Architect </li></ul><ul><li>Publicis Modem Toronto </li></ul>
Upcoming SlideShare
Loading in...5
×

Intro to IA/IxD/UXD in the agency world

4,164

Published on

General introduction to the process, purpose and value of information architecture, user experience and interaction design in the (advertising) agency world.

Published in: Business, Technology
0 Comments
22 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,164
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
188
Comments
0
Likes
22
Embeds 0
No embeds

No notes for slide
  • Intro to IA/IxD/UXD in the agency world

    1. 1. Information Architecture and UXD An intro to the role, process and purpose Karri Ojanen, Publicis Modem
    2. 2. About Me <ul><li>Background and experience </li></ul><ul><ul><li>Finland, United Arab Emirates </li></ul></ul><ul><ul><li>Graphic design, journalism, copywriting </li></ul></ul><ul><ul><li>Electronic music </li></ul></ul><ul><li>Past clients and projects </li></ul><ul><ul><li>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 </li></ul></ul><ul><ul><ul><li>Mobile telecom: Nokia, N-Gage, Elisa, TeliaSonera </li></ul></ul></ul><ul><ul><ul><li>Forestry: StoraEnso, UPM </li></ul></ul></ul><ul><ul><ul><li>Online banking: Nordea </li></ul></ul></ul><ul><ul><ul><li>Fundraising: VillageLife.fi </li></ul></ul></ul><ul><ul><ul><li>Fashion: Seppala.fi </li></ul></ul></ul>
    3. 3. What is Information Architecture? <ul><li>IA Institute: </li></ul><ul><ul><li>The structural design of shared information environments </li></ul></ul><ul><ul><li>The art and science of organizing and labeling web sites, intranets, online communities and software to support usability and findability </li></ul></ul><ul><ul><li>Practice focused on bringing principles of design and architecture to the digital landscape </li></ul></ul><ul><li>Information Architecture is the foundation for web design </li></ul><ul><li>The blueprint of the site upon which all other aspects are built: </li></ul><ul><ul><li>Form </li></ul></ul><ul><ul><li>Function </li></ul></ul><ul><ul><li>Metaphor </li></ul></ul><ul><ul><li>Navigation and interface </li></ul></ul><ul><ul><li>Interaction </li></ul></ul><ul><ul><li>Visual design </li></ul></ul><ul><li>Initiating the IA process is the first thing to do </li></ul>
    4. 4. What is User Experience Design? <ul><li>All aspects of the user’s interaction with the product (website or online application) : how it is perceived, learned, and used </li></ul><ul><li>“ 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 </li></ul><ul><li>IA means defining information structures to answer the question &quot;how does a user find the information they want? </li></ul><ul><li>UXD/IxD means defining system behaviors to answer the question &quot;how does a user take the action they want?”...” </li></ul>
    5. 5. The Value of User Experience <ul><li>The web has evolved from a library of interlinked hypertext pages to an online application platform </li></ul><ul><ul><li>Not just text, image, video and audio, but the glue in between </li></ul></ul><ul><li>Site centric -> Customer centric </li></ul><ul><li>Publishing to audiences -> Participation with audiences </li></ul><ul><li>Customer as observer -> Customer as driver </li></ul><ul><li>Content directories (taxonomy) -> Content tagging (folksonomy) </li></ul><ul><li>Clicks and page views as goal -> Interaction time as goal </li></ul>
    6. 6. The Value of User Experience <ul><li>The web has gone beyond being the support medium for campaigns and brand development </li></ul><ul><li>The web has become the lead </li></ul><ul><ul><li>From one-offs to the full 360 </li></ul></ul><ul><li>More and more brands are born, developed and maintained in the digital space </li></ul><ul><li>Case Google: from a technology company to one of the world’s most recognizable and successful brands </li></ul><ul><ul><li>Built not on “traditional” solid foundation of marketing, but on an ecosystem of experience and word of mouth referrals </li></ul></ul>
    7. 7. The Value of User Experience <ul><li>Micro-interactions </li></ul><ul><ul><li>Everyday exchanges with a product, brand and service </li></ul></ul><ul><ul><li>Individually they seem insignificant </li></ul></ul><ul><ul><li>Combined they define how the user feels about the product, brand and service at an emotional level </li></ul></ul><ul><li>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 </li></ul><ul><li>Create an emotional connection - deliver beyond the user’s expectations of great performance </li></ul>
    8. 8. The Value of IA/UXD to Us <ul><li>“ 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?” </li></ul><ul><li>IA/UXD lays the necessary groundwork for our work </li></ul><ul><ul><li>Requirements, scope and strategy </li></ul></ul><ul><ul><ul><li>What is the site for? Who is it for? </li></ul></ul></ul><ul><ul><li>Eases our site build/development process in the end, giving us more time to focus on the strategy first </li></ul></ul><ul><ul><li>Cost of developing, managing, maintaining and updating </li></ul></ul><ul><li>IA holds a unified vision together </li></ul>
    9. 9. The Value of IA/UXD to Our Clients and Their Customers <ul><li>Helps the client to focus on the key priorities </li></ul><ul><li>Helps everybody to see the forest from the trees </li></ul><ul><li>Good IA is incredibly effective </li></ul><ul><li>Good IA saves both time and money in the long run </li></ul><ul><li>Good information system makes sense to users </li></ul><ul><ul><li>Cost of finding (time, clicks, frustration, precision) </li></ul></ul><ul><ul><li>Cost of not finding (success, recall, frustration, alternatives) </li></ul></ul><ul><ul><li>Cost of development (time, budget, staff, frustration) </li></ul></ul><ul><ul><li>Value of learning (related products, services, projects, people) </li></ul></ul><ul><ul><li>Value of total experience (brand experience, cross-platform functionality) </li></ul></ul>
    10. 10. The Role of IA/UXD: The Process Discover Strategy and scoping Design Creative design Develop Building the site Launch
    11. 11. 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
    12. 12. 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
    13. 13. 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
    14. 14. The Role of IA/UXD <ul><li>IA/UXD is not a contained, “boxed” field of work </li></ul><ul><li>IA/UXD is not a one-man show </li></ul><ul><ul><li>Collaboration </li></ul></ul><ul><ul><li>Consistency, not one off answers </li></ul></ul>Art Director Designer Copywriter Developer IA/UXD IA/UXD IA/UXD Interaction & functionality Interaction & functionality Interaction & functionality <ul><li>IA/UXD is a strategic role </li></ul><ul><li>IA/UXD is part of planning, creative and technology </li></ul>Planning Creative Technology IA/UXD
    15. 15. The Role of IA/UXD <ul><li>Information architecture is not… </li></ul><ul><ul><li>Simply drawing up a sitemap </li></ul></ul><ul><ul><li>Simply pumping out masses of wireframes </li></ul></ul><ul><ul><li>Designing for ourselves </li></ul></ul><ul><ul><li>Just about navigation </li></ul></ul><ul><ul><li>A frivolous expense for “huge” projects only </li></ul></ul><ul><ul><li>A “nice to have” item on a checklist </li></ul></ul><ul><ul><li>Database design </li></ul></ul>
    16. 16. IA and UXD Professionals <ul><li>This is an emerging discipline in an evolving medium </li></ul><ul><li>IAs and UXDs come from several different backgrounds </li></ul><ul><ul><li>Graphic designers and art directors </li></ul></ul><ul><ul><li>Library technicians, Journalists and copywriters </li></ul></ul><ul><ul><li>Web admins, site content managers, content analysts </li></ul></ul><ul><li>Need to have developed a good general understanding of the digital space </li></ul><ul><ul><li>Curious: Asks a lot of questions, doesn’t accept the obvious, loves research </li></ul></ul><ul><ul><li>Empathetic: Listens carefully, takes notes </li></ul></ul><ul><ul><li>Generous: Shares information, collaborates well </li></ul></ul><ul><ul><li>Flexible: Delivers appropriately, understands constraints </li></ul></ul><ul><ul><li>Articulate: Verbally or visually (best if both) </li></ul></ul><ul><li>The industry needs people that are multi-skilled and versed in strategy, technology and creative </li></ul>
    17. 17. IA and UXD Professionals <ul><li>If I had asked my customers what they wanted, they would have said “a faster horse.” -Henry Ford </li></ul><ul><li>Clients don't envision the future, they inform the present </li></ul><ul><li>Build processes that promote an idea-generating culture </li></ul>
    18. 18. The Role of IA: The Deliverables <ul><li>Documents, surveys, research papers, content lists, workshops </li></ul><ul><li>Flowcharts and sitemaps </li></ul><ul><ul><li>Schematic representation of a process </li></ul></ul><ul><ul><ul><li>Sitemaps/flow maps the individual pages/views on a website and the links between them </li></ul></ul></ul><ul><ul><ul><li>Process flow maps the individual steps of a process, different options and alternatives and the outcomes </li></ul></ul></ul><ul><li>Wireframes </li></ul><ul><ul><li>Stripped-down visual representation of a single web page, devoid of graphic treatment </li></ul></ul><ul><ul><li>Framework made with wires, which define basic layout and placement of content and page elements such as navigation, header & footer, branding etc. </li></ul></ul>
    19. 19. The Role of IA: The Tools <ul><li>Sketching: paper and pencil </li></ul><ul><ul><li>Initial wires, ideas, quick draft versions of alternative functionality </li></ul></ul><ul><ul><li>”… 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 </li></ul></ul><ul><li>Software tools </li></ul><ul><ul><li>IA/UXD needs to be properly documented using software tools that allow for quick editing later on as the work develops </li></ul></ul><ul><ul><li>Common IA software: Microsoft Visio (Windows), Omni Graffle (Mac), ConceptDraw (Win&Mac), Axure (Windows) </li></ul></ul><ul><ul><li>Prototyping: Axure, Visio, Flash, HTML prototypes </li></ul></ul><ul><ul><li>Other: Word, Excel, Powerpoint/Keynote, etc. </li></ul></ul>
    20. 20. Examples
    21. 21. Examples
    22. 22. Examples
    23. 23. Examples
    24. 24. Examples
    25. 25. Examples
    26. 26. Examples
    27. 27. Examples
    28. 28. Resources <ul><li>Boxes and Arrows, http://www.boxesandarrows.com/ </li></ul><ul><li>The Information Architecture Institute, http://iainstitute.org/ </li></ul><ul><li>The Interaction Design Association, http://www.ixda.org/ </li></ul><ul><li>Experience Matters, http://experiencematters.criticalmass.com/ </li></ul><ul><li>WebMonkey Information Architecture Tutorial, http://www.webmonkey.com/tutorial/Information_Architecture_Tutorial </li></ul>
    29. 29. Summary
    30. 30. Thank You <ul><li>Karri Ojanen </li></ul><ul><li>Information Architect </li></ul><ul><li>Publicis Modem Toronto </li></ul>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×