MIRUM AGENCY 2014
by Joan Lumanauw | May, 2015
Session5:
INFORMATION ARCHITECTURE
INFORMATION
ARCHITECTURE?
Commonly known as IA, it is the art and
science of developing structures and
organization to present data & information
What is
MIRUM AGENCY 2014
UX
Usability
IA
The difference between
User Experience
Usability
Information Architecture
MIRUM AGENCY 2014
UX
Usability
IA
The difference between
How did I live without this before?
Usability
Information Architecture
MIRUM AGENCY 2014
UX
Usability
IA
The difference between
This product is easy to use
Information Architecture
User Experience
MIRUM AGENCY 2014
UX
Usability
IA
The difference between
Everything’s right where I’d expect it to be
User Experience
Usability
MIRUM AGENCY 2014
If UX is
the terrain
MIRUM AGENCY 2014
Then IA is
the map
Navigation
& Labeling
Right
Left
Information Storage
& Retrieval
Content
Organisation
3 Focus of IA
http://www.slideshare.net/jrs76/what-is-information-architecture-and-how-can-it-help-my-website?related=1
MIRUM AGENCY 2014
THIS IS
YOUR WEBSITE
MIRUM AGENCY 2014
Navigation & Labeling
MIRUM AGENCY 2014
Navigation & Labeling
Living Room Kitchen
Dining Room
Bathroom
Playroom
1st floor
MIRUM AGENCY 2014
Navigation & Labeling
Parent’s Bedroom
Bathroom
Grandma’s Bedroom
2nd floor
Kid Bedroom #1
Kid Bedroom #2
MIRUM AGENCY 2014
Why did we put the living room in the middle?
Questions
Why is the kitchen near the dining room?
Why did we put the family bedrooms upstairs?
Why is the playroom downstairs?
MIRUM AGENCY 2014
But wait, grandma has a bad back, she can’t go up
and down the stairs all day along…
What are we to do?
MIRUM AGENCY 2014
Navigation & Labeling
Living Room Kitchen
Dining Room
Bathroom
1st floor
Grandma’s Room
MIRUM AGENCY 2014
Content Organisation
Living Room Kitchen
Dining Room
Bathroom
Grandma’s Room
Everything (now/future) has a place
•Sofa
•TV
•Coffee Table
•Shower
•Sink
•Toilet
•Bed
•Recliner
•Table
•Dining Table
•Chairs
•Napkins
•Stove
•Oven
•Cooking Utensils
•Spice Rack
MIRUM AGENCY 2014
Information Storage & Retrieval
Kitchen
Dining Room
•Dining Table
•Chairs
•Napkins
•Stove
•Oven
•Cooking Utensils
•Spice Rack
Where does eating utensils go?
MIRUM AGENCY 2014
How do we implement it?
Now that we understand the basic concept of IA
MIRUM AGENCY 2014
IA Output: Sitemap
MIRUM AGENCY 2014
IA Output: Sitemap
Navigation
Right
Left
Findability
Why do we need IA?
SEO
So users can find
your website
So users can find the
information they’re
looking for
So users know
where they are
http://www.slideshare.net/jrs76/what-is-information-architecture-and-how-can-it-help-my-website?related=1
MIRUM AGENCY 2014
Information Scent
Findability
Is an analogy that compares how humans
seek information with animals seeking food.
• Refers to the extent to which users can predict
what’s ahead (in a link or in an article)
• Information scents includes titles and links that
helps visitors find what they are looking for
• Users will feel duped if they don’t get sufficient
payoff from going down a path
http://www.slideshare.net/jrs76/what-is-information-architecture-and-how-can-it-help-my-website?related=1
MIRUM AGENCY 2014
It helps visitors know that your site is fertile hunting
grounds for the things they are looking for.
YOU’RE GETTING CLOSER
Information scent says to the user
Scientology
About
The Church
Book of
Scientology
Scientology
Beliefs
Church
History
Church
Hierarchy
Book of
Temptations
Book of
Prophets
Beliefs on
Marriage
Beliefs on
Paradise
http://www.slideshare.net/jrs76/what-is-information-architecture-and-how-can-it-help-my-website?related=1
MIRUM AGENCY 2014
• Search engines index (scan) your site hierarchically
• Pages higher in the hierarchy are given more weight
• SEO also make note of silos of info and relationships
• Well architected site makes information more findable
Scientology
About
The Church
Book of
Scientology
Scientology
Beliefs
Church
History
Church
Hierarchy
Book of
Temptations
Book of
Prophets
Beliefs on
Marriage
Beliefs on
Paradise
Most Weight
Least Weight
IA impacts heavily on search engine’s view of your site
http://www.slideshare.net/jrs76/what-is-information-architecture-and-how-can-it-help-my-website?related=1
MIRUM AGENCY 2014
• Help users know what’s available and find what they are looking for.
• Tell users where they are within the site
• Tell users how to use the site by quickly communicating features
• Give users a reference point
Sitemaps and Menus that reflect IA leads to greater findability
Use breadcrumbs let users
know where they are
Clear large title/heading
Active view on the menu item
VISUAL CUES
http://www.slideshare.net/jrs76/what-is-information-architecture-and-how-can-it-help-my-website?related=1
MIRUM AGENCY 2014
ANY QUESTIONS?
MIRUM AGENCY 2014
In pairs, use the Lifebuoy FGD Report and
design a sitemap for the mobile app.
Exercise 4.1
INFORMATION
ARCHITECTURE

UX Lesson 5: Information Architecture

  • 1.
    MIRUM AGENCY 2014 byJoan Lumanauw | May, 2015 Session5: INFORMATION ARCHITECTURE
  • 2.
    INFORMATION ARCHITECTURE? Commonly known asIA, it is the art and science of developing structures and organization to present data & information What is
  • 3.
    MIRUM AGENCY 2014 UX Usability IA Thedifference between User Experience Usability Information Architecture
  • 4.
    MIRUM AGENCY 2014 UX Usability IA Thedifference between How did I live without this before? Usability Information Architecture
  • 5.
    MIRUM AGENCY 2014 UX Usability IA Thedifference between This product is easy to use Information Architecture User Experience
  • 6.
    MIRUM AGENCY 2014 UX Usability IA Thedifference between Everything’s right where I’d expect it to be User Experience Usability
  • 7.
    MIRUM AGENCY 2014 IfUX is the terrain
  • 8.
  • 9.
    Navigation & Labeling Right Left Information Storage &Retrieval Content Organisation 3 Focus of IA http://www.slideshare.net/jrs76/what-is-information-architecture-and-how-can-it-help-my-website?related=1
  • 10.
    MIRUM AGENCY 2014 THISIS YOUR WEBSITE
  • 11.
  • 12.
    MIRUM AGENCY 2014 Navigation& Labeling Living Room Kitchen Dining Room Bathroom Playroom 1st floor
  • 13.
    MIRUM AGENCY 2014 Navigation& Labeling Parent’s Bedroom Bathroom Grandma’s Bedroom 2nd floor Kid Bedroom #1 Kid Bedroom #2
  • 14.
    MIRUM AGENCY 2014 Whydid we put the living room in the middle? Questions Why is the kitchen near the dining room? Why did we put the family bedrooms upstairs? Why is the playroom downstairs?
  • 15.
    MIRUM AGENCY 2014 Butwait, grandma has a bad back, she can’t go up and down the stairs all day along… What are we to do?
  • 16.
    MIRUM AGENCY 2014 Navigation& Labeling Living Room Kitchen Dining Room Bathroom 1st floor Grandma’s Room
  • 17.
    MIRUM AGENCY 2014 ContentOrganisation Living Room Kitchen Dining Room Bathroom Grandma’s Room Everything (now/future) has a place •Sofa •TV •Coffee Table •Shower •Sink •Toilet •Bed •Recliner •Table •Dining Table •Chairs •Napkins •Stove •Oven •Cooking Utensils •Spice Rack
  • 18.
    MIRUM AGENCY 2014 InformationStorage & Retrieval Kitchen Dining Room •Dining Table •Chairs •Napkins •Stove •Oven •Cooking Utensils •Spice Rack Where does eating utensils go?
  • 19.
    MIRUM AGENCY 2014 Howdo we implement it? Now that we understand the basic concept of IA
  • 20.
    MIRUM AGENCY 2014 IAOutput: Sitemap
  • 21.
    MIRUM AGENCY 2014 IAOutput: Sitemap
  • 22.
    Navigation Right Left Findability Why do weneed IA? SEO So users can find your website So users can find the information they’re looking for So users know where they are http://www.slideshare.net/jrs76/what-is-information-architecture-and-how-can-it-help-my-website?related=1
  • 23.
    MIRUM AGENCY 2014 InformationScent Findability Is an analogy that compares how humans seek information with animals seeking food. • Refers to the extent to which users can predict what’s ahead (in a link or in an article) • Information scents includes titles and links that helps visitors find what they are looking for • Users will feel duped if they don’t get sufficient payoff from going down a path http://www.slideshare.net/jrs76/what-is-information-architecture-and-how-can-it-help-my-website?related=1
  • 24.
    MIRUM AGENCY 2014 Ithelps visitors know that your site is fertile hunting grounds for the things they are looking for. YOU’RE GETTING CLOSER Information scent says to the user Scientology About The Church Book of Scientology Scientology Beliefs Church History Church Hierarchy Book of Temptations Book of Prophets Beliefs on Marriage Beliefs on Paradise http://www.slideshare.net/jrs76/what-is-information-architecture-and-how-can-it-help-my-website?related=1
  • 25.
    MIRUM AGENCY 2014 •Search engines index (scan) your site hierarchically • Pages higher in the hierarchy are given more weight • SEO also make note of silos of info and relationships • Well architected site makes information more findable Scientology About The Church Book of Scientology Scientology Beliefs Church History Church Hierarchy Book of Temptations Book of Prophets Beliefs on Marriage Beliefs on Paradise Most Weight Least Weight IA impacts heavily on search engine’s view of your site http://www.slideshare.net/jrs76/what-is-information-architecture-and-how-can-it-help-my-website?related=1
  • 26.
    MIRUM AGENCY 2014 •Help users know what’s available and find what they are looking for. • Tell users where they are within the site • Tell users how to use the site by quickly communicating features • Give users a reference point Sitemaps and Menus that reflect IA leads to greater findability Use breadcrumbs let users know where they are Clear large title/heading Active view on the menu item VISUAL CUES http://www.slideshare.net/jrs76/what-is-information-architecture-and-how-can-it-help-my-website?related=1
  • 27.
  • 28.
    MIRUM AGENCY 2014 Inpairs, use the Lifebuoy FGD Report and design a sitemap for the mobile app. Exercise 4.1 INFORMATION ARCHITECTURE