Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams
3 likes1,739 views
The document discusses information architecture, highlighting its importance in organizing and labeling digital products for improved usability and navigation. It introduces various diagrams, such as sitemaps and task flows, that visually outline the structure and user interactions within systems. Additionally, it covers different connector types used in flowcharts and how they represent user paths and conditions in a digital product context.
Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams
- 1. Information Architecture & Product Diagrams Art Center Interactive Design 4 | Week 3 | Joy Liu
- 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. 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. Product Diagrams We use diagrams and visual vocabulary to help externalize the actions and decisions that a user can do in the system.
- 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. 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. 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. 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. So what does it look like for a digital product?
- 11. <?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>http://www.example.com/</loc> <lastmod>2005-01-01</lastmod> <changefreq>monthly</changefreq> <priority>0.8</priority> </url> <url> <loc>http://www.example.com/catalog?item=12&desc=vacation_hawaii</loc> <changefreq>weekly</changefreq> </url> <url> <loc>http://www.example.com/catalog?item=73&desc=vacation_new_zealand</loc> <lastmod>2004-12-23</lastmod> <changefreq>weekly</changefreq> </url> <url> <loc>http://www.example.com/catalog?item=74&desc=vacation_newfoundland</loc> <lastmod>2004-12-23T18:00:15+00:00</lastmod> <priority>0.3</priority> </url> XML sitemap sitemaps.org
- 12. UX Sitemap
- 13. Where is the product headed to? Stakeholder v1 v2 v3
- 14. What’s the scope? How complex is it? Developer I see how many static pages and templates are needed!
- 15. We need a simple item detail page layout that can accommodate different products! Modular UI? Variations? Visual Designer
- 16. Primary, secondary, tertiary navigations? UX Designer
- 17. Task Flow
- 18. And this is how you read a flo-chart… mojave_moon, Reddit https://imgur.com/QWAU8
- 20. Basic Elements Types Examples
- 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. 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. 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. 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. 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. Resources & Reading ‣http://www.uxbooth.com/articles/the-difference-between-ia-and-ux-design/ ‣http://theuxreview.co.uk/sitemaps-the-beginners-guide/ ‣http://www.jjg.net/ia/visvocab/ ‣http://www.jjg.net/ia/visvocab/files/garrett_ia_quickref.pdf ‣http://www.jjg.net/ia/visvocab/files/garrett_ia_cheatsheet.pdf