Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams
description
Transcript of Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams
![Page 1: Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams](https://reader035.fdocuments.net/reader035/viewer/2022081403/5564b901d8b42a98268b54a1/html5/thumbnails/1.jpg)
Information Architecture & Product Diagrams
Art Center Interactive Design 4 | Week 3 | Joy Liu
![Page 2: Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams](https://reader035.fdocuments.net/reader035/viewer/2022081403/5564b901d8b42a98268b54a1/html5/thumbnails/2.jpg)
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
![Page 3: Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams](https://reader035.fdocuments.net/reader035/viewer/2022081403/5564b901d8b42a98268b54a1/html5/thumbnails/3.jpg)
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?
![Page 4: Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams](https://reader035.fdocuments.net/reader035/viewer/2022081403/5564b901d8b42a98268b54a1/html5/thumbnails/4.jpg)
Product DiagramsWe use diagrams and visual vocabulary to help externalize the actions and decisions that a user can do in the system.
![Page 5: Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams](https://reader035.fdocuments.net/reader035/viewer/2022081403/5564b901d8b42a98268b54a1/html5/thumbnails/5.jpg)
SitemapA 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.
![Page 6: Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams](https://reader035.fdocuments.net/reader035/viewer/2022081403/5564b901d8b42a98268b54a1/html5/thumbnails/6.jpg)
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.
E.g. the map of LA…
![Page 7: Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams](https://reader035.fdocuments.net/reader035/viewer/2022081403/5564b901d8b42a98268b54a1/html5/thumbnails/7.jpg)
Task FlowA 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”
![Page 8: Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams](https://reader035.fdocuments.net/reader035/viewer/2022081403/5564b901d8b42a98268b54a1/html5/thumbnails/8.jpg)
E.g. I need to go to Art Center from Fashion District by carFreeway or street? 2 or 110? Accidents or street closures? Shortest distance or quickest? Traffic? Rush hour?
![Page 9: Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams](https://reader035.fdocuments.net/reader035/viewer/2022081403/5564b901d8b42a98268b54a1/html5/thumbnails/9.jpg)
So what does it look like for a digital product?
![Page 11: Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams](https://reader035.fdocuments.net/reader035/viewer/2022081403/5564b901d8b42a98268b54a1/html5/thumbnails/11.jpg)
<?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
![Page 12: Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams](https://reader035.fdocuments.net/reader035/viewer/2022081403/5564b901d8b42a98268b54a1/html5/thumbnails/12.jpg)
UX Sitemap
![Page 13: Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams](https://reader035.fdocuments.net/reader035/viewer/2022081403/5564b901d8b42a98268b54a1/html5/thumbnails/13.jpg)
Where is the product headed to?
Stakeholder
v1v2
v3
![Page 14: Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams](https://reader035.fdocuments.net/reader035/viewer/2022081403/5564b901d8b42a98268b54a1/html5/thumbnails/14.jpg)
What’s the scope? How complex is it?
Developer
I see how many static pages and templates are needed!
![Page 15: Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams](https://reader035.fdocuments.net/reader035/viewer/2022081403/5564b901d8b42a98268b54a1/html5/thumbnails/15.jpg)
We need a simple item detail page layout that can accommodate different products!
Modular UI? Variations?
Visual Designer
![Page 16: Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams](https://reader035.fdocuments.net/reader035/viewer/2022081403/5564b901d8b42a98268b54a1/html5/thumbnails/16.jpg)
Primary, secondary, tertiary
navigations?
UX Designer
![Page 17: Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams](https://reader035.fdocuments.net/reader035/viewer/2022081403/5564b901d8b42a98268b54a1/html5/thumbnails/17.jpg)
Task Flow
![Page 18: Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams](https://reader035.fdocuments.net/reader035/viewer/2022081403/5564b901d8b42a98268b54a1/html5/thumbnails/18.jpg)
And this is how you read a flo-chart…
mojave_moon, Reddit https://imgur.com/QWAU8
![Page 20: Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams](https://reader035.fdocuments.net/reader035/viewer/2022081403/5564b901d8b42a98268b54a1/html5/thumbnails/20.jpg)
Basic ElementsExamplesTypes
![Page 21: Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams](https://reader035.fdocuments.net/reader035/viewer/2022081403/5564b901d8b42a98268b54a1/html5/thumbnails/21.jpg)
ConnectorsLines 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.
![Page 22: Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams](https://reader035.fdocuments.net/reader035/viewer/2022081403/5564b901d8b42a98268b54a1/html5/thumbnails/22.jpg)
ConnectorsOther 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.
![Page 23: Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams](https://reader035.fdocuments.net/reader035/viewer/2022081403/5564b901d8b42a98268b54a1/html5/thumbnails/23.jpg)
ConnectorsOther 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.
![Page 24: Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams](https://reader035.fdocuments.net/reader035/viewer/2022081403/5564b901d8b42a98268b54a1/html5/thumbnails/24.jpg)
Conditional ElementsDynamic 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.
![Page 25: Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams](https://reader035.fdocuments.net/reader035/viewer/2022081403/5564b901d8b42a98268b54a1/html5/thumbnails/25.jpg)
Conditional ElementsDynamic 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.
![Page 26: Art Center Interactive Design 4 - #3 Information Architecture & Product Diagrams](https://reader035.fdocuments.net/reader035/viewer/2022081403/5564b901d8b42a98268b54a1/html5/thumbnails/26.jpg)
‣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
Resources & Reading