Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams

Art Center Interactive Design 4 Lecture Slides #3 (week 3)
Introduction to Information Architecture and Deep-dive into sitemaps and task flows.

  • Be the first to comment

Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams

  1. 1. Information Architecture & Product Diagrams Art Center Interactive Design 4 | Week 3 | Joy Liu
  2. 2. The art and science of organizing and labeling web sites, intranets, online communities and software to support usability and findability. “Information Architecture” defined by The Information Architecture Institute
  3. 3. Why is it important? How are items organized and grouped? How does a user navigate and move around in the system? How does a user search for what he/she is looking for? How are entities named? How does a user know where he/she is in the system? How is content presented to different types of users? How do things communicate with each other within the system?
  4. 4. Product Diagrams We use diagrams and visual vocabulary to help externalize the actions and decisions that a user can do in the system.
  5. 5. Sitemap A list of pages(screens) of a product organized in hierarchical fashion. A visual presentation of a product’s organization and how different sections are linked together.
  6. 6. E.g. the map of LA… Map shows where things are in relation to each other and how they are connected. Name labels and routes have different thickness to differentiate between major freeway & small streets; neighborhood name & street name.
  7. 7. Task Flow A diagram that indicates the path a user must follow in order to complete a task in a product. A visual presentation of how one interacts with a system, which may span across multiple products and end users. Some may refer to it as “flowchart” or “workflow”
  8. 8. E.g. I need to go to Art Center from Fashion District by car Freeway or street? 2 or 110? Accidents or street closures? Shortest distance or quickest? Traffic? Rush hour?
  9. 9. So what does it look like for a digital product?
  10. 10. HTML sitemap
  11. 11. <?xml version="1.0" encoding="UTF-8"?> <urlset xmlns=""> <url> <loc></loc> <lastmod>2005-01-01</lastmod> <changefreq>monthly</changefreq> <priority>0.8</priority> </url> <url> <loc>;desc=vacation_hawaii</loc> <changefreq>weekly</changefreq> </url> <url> <loc>;desc=vacation_new_zealand</loc> <lastmod>2004-12-23</lastmod> <changefreq>weekly</changefreq> </url> <url> <loc>;desc=vacation_newfoundland</loc> <lastmod>2004-12-23T18:00:15+00:00</lastmod> <priority>0.3</priority> </url> XML sitemap
  12. 12. UX Sitemap
  13. 13. Where is the product headed to? Stakeholder v1 v2 v3
  14. 14. What’s the scope? How complex is it? Developer I see how many static pages and templates are needed!
  15. 15. We need a simple item detail page layout that can accommodate different products! Modular UI? Variations? Visual Designer
  16. 16. Primary, secondary, tertiary navigations? UX Designer
  17. 17. Task Flow
  18. 18. And this is how you read a flo-chart… mojave_moon, Reddit
  19. 19. Garrett IA
  20. 20. Basic Elements Types Examples
  21. 21. Connectors Lines establishing relationships between elements Regular Path connects upstream to downstream. User is allowed to move in either directions. Arrow is optional, it indicates which way User is likely to go. Irreversible Crossbar means that User is prohibited to move upstream. Complex Paths can be joined and/or labeled to clarify User action.
  22. 22. Connectors Other types of connectors Concurrent Set A single user action generates multiple, simultaneous results. Area A group of elements that share one or more common attributes. Iterative Area A repeated structure that is applied to a number of functionally identical elements in a system.
  23. 23. Connectors Other types of connectors Flow Reference A placeholder indicating a flow. Continuation Point Separate diagrams into easily digestible sections Flow Area A reusable sequence of steps that appear repeatedly throughout the design.
  24. 24. Conditional Elements Dynamic system drawing Conditional Area When one or more conditions applies to a group of pages Conditional Connector Path is available only if the condition is met.
  25. 25. Conditional Elements Dynamic system drawing Decision Point The system selects a downstream path based on User action/input. Conditional Branch The system selects one path among a number of mutually exclusive paths, not based on User action. Conditional Selector The system selects any number of paths that fulfill the condition, the downstream paths are not mutually exclusive.
  26. 26. Resources & Reading ‣ ‣ ‣ ‣ ‣