IAT-235: 03 Architecting it

IAT-235: 03 Architecting it — A slide deck

Architecting It

Lecture outline

Covered in this lecture:

  1. Organizing and navigating through information
  2. Information architecture

CityStudio

Insert introduction by Ileana here.

The Sustainability Office

To help provide a bit further context on the term, we have Wendy Avis from the City of Vancouver Sustainability Office speaking.

Questions?

Any questions for Wendy or Ileana?

Break-time

Feel free to come up and ask questions of our guests if you would like, otherwise we will see you 10 minutes.

Architecting it

Information architecture (IA)

Stanza and Foursquare mobile app screenshots
From your reading this week what does IA describe?

Humans and IA

Where our challenge lies

Being able to empathize with how other humans might think and interpret information is key in our ability to build effective information structures.

Steps to Generating an IA

  1. Generate a list of all of the items that need a structure

Generate a List

Commercial vehicles, Buildings footprint, Dairy products, Roads, Residential buildings, Fruits and Vegetables, Commercial buildings, Institutional buildings, Air travel, Transportation footprint, Ecological footprint, Food footprint, Grains, Public transit

Steps to Generating an IA

  1. Generate a list of all of the items that need a structure
  2. Organize those items into a meaningful structure

IA Patterns

IA patterns give you an easy place to start with organizing information. It is important to know what kind of information you will be dealing with.

Types of patterns:

  • Hierarchy
  • Database
  • Hypertext
  • Linear

Hierarchy Pattern

Types of hierarchies:

  • Broad: Lots of top level items
  • Deep: Lots of depth, little at top
  • Strict: Items occur in one place only
  • Poly: Items can be in more than one place

Organize Meaningfully (in a Broad Hierarchy)

Commercial vehicles, Buildings footprint, Dairy products, Roads, Residential buildings, Fruits and Vegetables, Commercial buildings, Institutional buildings, Air travel, Transportation footprint, Ecological footprint, Food footprint, Grains, Public transit

You have...

Organize Meaningfully (in a Deep Hierarchy)

Commercial vehicles, Buildings footprint, Dairy products, Roads, Residential buildings, Fruits and Vegetables, Commercial buildings, Institutional buildings, Air travel, Transportation footprint, Ecological footprint, Food footprint, Grains, Public transit

You have...

Steps to Generating an IA

  1. Generate a list of all of the items that need a structure
  2. Organize those items into a meaningful structure
  3. Reorganize and relabel categories to create a coherent structure

Labelling Content

When you are working with your data, you are creating new titling and categories. As a result, remember the considerations of good labelling:

  • Use appropriate names
  • Use the audience's terms
  • Be consistent
  • Be clear

Database Pattern

This pattern focuses much more on places where content will be consistent. This allows us to create a planned structure that people may access and understand the content with.

Metadata

Information about information

The markup that we use in HTML — such as <p> for paragraphs — is a form of metadata, helping define what the information is for a computer. It helps us use the computer to build relationships.

In this category we have two other IA patterns:

  • Linear: One thing follows another
  • Hypertext: Emergent structure

Organize Meaningfully (in Linear structure)

Commercial vehicles, Buildings footprint, Dairy products, Roads, Residential buildings, Fruits and Vegetables, Commercial buildings, Institutional buildings, Air travel, Transportation footprint, Ecological footprint, Food footprint, Grains, Public transit

You have...

Timeline illustrating the evolution of Lego
What kind of organization of information is this?
A mindmap of different London coffee shop names
What kind of organization of information is this? (By David McCandless)

Submit Your IA

Please snap a photo of your IA individually and submit to ah1.ca/ia

If you have trouble submitting, please drop by the front of class and I will note down your name.

Sitemaps

Sitemaps are just one potential use for IAs.

Should help us understand:

  • Describing the hierarchy
  • Showing connections + interconnectivity
  • Scale of the site
  • Potential flow through the site

Cartographic Challenges

Potential challenges with sitemaps

Be careful, as since the web is a generally fluid space, sitemaps trap something that changes frequently into a fixed form.

Sitemap "Must Haves"

The bear necessities

The basics

  • Pages (titles)
  • Links between them
  • Consistent visual language
  • Clearly indicated hierarchy
Example of a web sitemap

Elaborating

Advancing your maps

Expanding on the basics:

  • Include further details on pages
  • Group similar pages
  • Show further connections/relationships
Example of a web sitemap

Contextualizing the Map

Taking the map into the work-plan

Ways to make it a planning tool:

  • Annotate pages
  • Prioritize groupings
  • Identify user needs
Example of a web sitemap

Questions?

This week's labs will be final crits for P01

Make sure to be there on-time with all your materials printed.

Wireframing example
Next week's reading: Selections from Communicating Design (Brown)

Next week's lecture will be on the wonders of wireframing.

1/1