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.

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?

10. HTML sitemap
apple.com

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&amp;desc=vacation_hawaii</loc>
<changefreq>weekly</changefreq>
</url>
<url>
<loc>http://www.example.com/catalog?item=73&amp;desc=vacation_new_zealand</loc>
<lastmod>2004-12-23</lastmod>
<changefreq>weekly</changefreq>
</url>
<url>
<loc>http://www.example.com/catalog?item=74&amp;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

19. Garrett IA
http://jjg.net/ia/visvocab/

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