Embed Size (px)
DESCRIPTION
Art Center Interactive Design 4 Lecture Slides #3 (week 3) Introduction to Information Architecture and Deep-dive into sitemaps and task flows.
Citation preview
Information Architecture & Product Diagrams
Art Center Interactive Design 4 | Week 3 | Joy Liu
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
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?
Product DiagramsWe use diagrams and visual vocabulary to help externalize the actions and decisions that a user can do in the system.
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.
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…
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”
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?
So what does it look like for a digital product?
<?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
UX Sitemap
Where is the product headed to?
Stakeholder
v1v2
v3
What’s the scope? How complex is it?
Developer
I see how many static pages and templates are needed!
We need a simple item detail page layout that can accommodate different products!
Modular UI? Variations?
Visual Designer
Primary, secondary, tertiary
navigations?
UX Designer
Task Flow
And this is how you read a flo-chart…
mojave_moon, Reddit https://imgur.com/QWAU8
Basic ElementsExamplesTypes
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.
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.
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.
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.
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.
‣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
