Practical Session 4 Computer Architecture and Assembly Language.
A Practical Introduction to Information Architecture
description
Transcript of A Practical Introduction to Information Architecture
![Page 1: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/1.jpg)
A Practical Introduction to Information Architecture
Presented by Stephen P. Anderson
![Page 2: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/2.jpg)
2
Instructions1. In groups of 4, SORT your pile of
business cards into groups/ categories.
2. No further instructions will be given.
(Ok, one more instruction…)
3. Label your categories
![Page 3: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/3.jpg)
3
IA in a Nutshell…
“Who are we sorting for?”
Might also ask… ”What do they want to accomplish?” “What is the ideal scenario for them to
accomplish their task?”
![Page 4: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/4.jpg)
4
Before we go too far…
User Experience Design:Focuses on: How users interact with a site How users move through the site to find
information and perform transactions How the site fulfills user goals and
expectations How users rate their level of satisfaction
![Page 5: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/5.jpg)
5
How IA fits into the User Experience/Web Design Process
From Jesse James Garrett’s“The Elements of User Experience”www.jjg.net/ia/elements.pdf
![Page 6: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/6.jpg)
6
Information Architecture – an “Official” Definition
“Information architecture is creating consistent and functional systems for navigation, graphics, page layout and title languages so that the user knows where to go, what to do, and encourages them to return.”
-Web Review, Peter Morville
![Page 7: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/7.jpg)
7
An IA performs the following: Clarifies the mission and vision
for the site, balancing the needs of its sponsor organization and the needs of its audiences
Determines what content and functionality the site will contain
Specifies how users will find information in the site by defining its organization, navigation, labeling and searching systems
Maps out how the site will accommodate change and growth over time
![Page 8: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/8.jpg)
8
Why Information Architecture…? Abandoned shopping carts Ineffective searches Users who can’t find content Bad experiences Complaints to call centers Interactions that don’t work! Billions in lost business Need we ask?
![Page 9: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/9.jpg)
9
The Process:
1. Understand the Problem2. Understand your Users3. Understand the Content4. Create a Navigational
Framework
![Page 10: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/10.jpg)
10
Understand the Problem:
Goals/ObjectivesMission/VisionConcept Models
![Page 11: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/11.jpg)
11
Understand the Problem:
Sample Concept Models…
![Page 12: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/12.jpg)
12
Understand the Problem:
Sample Concept Models…
![Page 13: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/13.jpg)
13
Understand the Problem:
Sample Concept Models…
![Page 14: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/14.jpg)
14
The Process:
1. Understand the Problem2. Understand your Users3. Understand the Content4. Create a Navigational
Framework
![Page 15: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/15.jpg)
15
Understand your users
We do this through… Contextual Inquiry Task Analysis Interviews/Questionnaires Field Research Reviewing server logs Search log analysis Role Playing Etc.
![Page 16: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/16.jpg)
16
Understand your users User Profiles Personas User Scenarios Mental models Process Flow Task Analysis
![Page 17: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/17.jpg)
17
Understand your users User Profiles Personas User Scenarios Mental models Process Flow Task Analysis
![Page 18: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/18.jpg)
18
Understand your users User Profiles Personas User Scenarios Mental models Process Flow Task Analysis
![Page 19: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/19.jpg)
19
Understand your users User Profiles Personas User Scenarios Mental models Process Flow Task Analysis
![Page 20: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/20.jpg)
20
Understand your users User Profiles Personas User Scenarios Mental models Process Flow Task Analysis
![Page 21: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/21.jpg)
21
Understand your users User Profiles Personas User Scenarios Mental models Process Flow Task Analysis
(A simplified example)
Imagine Wily Coyote trying to buy an anvil for one of his nefarious schemes from the web:
(A.)Buy An Anvil (1.)Find The Anvil (a.)Search For Anvil (i.)Type in "anvil" in Search box (ii.)Read results (b.)Browse the Store (2.)View anvil (B.)Purchase The Anvil
![Page 22: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/22.jpg)
22
The Process:
1. Understand the Problem2. Understand your Users3. Understand the Content4. Create a Navigational
Framework
![Page 23: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/23.jpg)
23
Understand the Content:
Content Inventory – A complete list of all the content that that information space holds and will hold
Card Sorting – activity
![Page 24: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/24.jpg)
24
Understand the Content:
Content Inventory – A complete list of all the content that that information space holds and will hold
Card Sorting – activity
![Page 25: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/25.jpg)
25
The Process:
1. Understand the Problem2. Understand your Users3. Understand the Content4. Create a Navigational
Framework
![Page 26: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/26.jpg)
26
Creating A Navigation Framework:
Answers 3 Questions:
Where am I?
Where have I been?
Where can I go?
![Page 27: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/27.jpg)
27
Creating A Navigation Framework:Ways to organize content: By Hierarchy (most common!)
Global Navigation Local Navigation
By Tasks (frontmedia.com) Contextually (related content) Alphabetically (yellow pages, good / dcc, bad) Chronologically (timeline, archived content) Based on Popularity (amazon.com) By Facets (gettyimages.com, wine.com) By Searchable Keywords (any)
![Page 28: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/28.jpg)
28
Creating A Navigation Framework:
![Page 29: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/29.jpg)
29
Creating A Navigation Framework:Schema should be consistent!
Books | Movies | Toys | Electronics | About Us
(which one doesn’t belong? Why?)
![Page 30: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/30.jpg)
30
Creating A Navigation Framework:REAL WORLD EXAMPLE:
In-Stock Made to Order
Jewelry Watches Jewelry Watches
In-Stock Made to Order
Jewelry Watches
In-Stock Made to Order
Products
ProductsOR
![Page 31: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/31.jpg)
31
The Process:
1. Understand the Problem2. Understand your Users3. Understand the Content4. Create a Navigational
Framework… and Labeling
![Page 32: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/32.jpg)
32
Labeling
What is familiar?
Services? Capabilities? Expertise?
About Us? Our Team? Company?
Coke? Pop? Cola?
![Page 33: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/33.jpg)
33
Labeling
What is accurate?
Designs? Products?
![Page 34: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/34.jpg)
34
Labeling Language of audience (not internal jargon) What is familiar/common? (evolving
conventions) Audit different user segments (Hoagie?
Subway? Gyro/Hero? Po’ Boy? Submarine Sandwich)
Needs to be grammatically consistent Needs to not change within the site!
(“Products” changing to “Product & Services” on another page)
Can be influenced by brand (“Shopping Cart” vs “Shopping Bag”
![Page 35: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/35.jpg)
35
Labeling
REAL WORLD EXAMPLE:
“Find a Doctor” OR “Locate a Provider” ?
![Page 36: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/36.jpg)
36
Create a Navigational Framework
From this work, we deliver... Site Maps Wireframes
![Page 37: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/37.jpg)
37
Create a Navigational Framework
From this work, we deliver...
Site Maps Wireframes
![Page 38: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/38.jpg)
38
Create a Navigational Framework
![Page 39: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/39.jpg)
39
Create a Navigational Framework
![Page 40: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/40.jpg)
40
Create a Navigational Framework
![Page 41: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/41.jpg)
41
Create a Navigational Framework
![Page 42: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/42.jpg)
42
![Page 43: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/43.jpg)
43
What type of person makes a good IA?
![Page 44: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/44.jpg)
44
Related Fields… Usability/ Interaction Design Information Design Information Technology / System Design
![Page 45: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/45.jpg)
45
Another Definition of IA…
Who is using the information?
What is the information?
Where is the information being used?
![Page 46: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/46.jpg)
46
A broader view of IA… Menus Grocery Stores MP3s Bills/Mail Collections (Records!) Any ‘data’ we try to understand by forcing
an order or deducing a pattern (everything!)
![Page 47: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/47.jpg)
47
A Restaurant Menu
cheesesteaks
logo
sides
kids menu
special combo
cheesesteaktoppings
cheesesteak sauces
everything else
chips
drinks
(Example from Jesse James Garrett)
![Page 48: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/48.jpg)
48
Resources
For more information: www.iawiki.net www.boxesandarrows.com www.adaptivepath.com www.aifia.org
![Page 49: A Practical Introduction to Information Architecture](https://reader035.fdocuments.in/reader035/viewer/2022062305/56815999550346895dc6e00b/html5/thumbnails/49.jpg)
49
Questions?