Architecting It

Architecting It

Lecture outline

Covered in this lecture:

  1. Organizing and navigating through information
  2. Information architecture

Full lecture slides will be available the day of the lecture.

Architecting it

Information architecture (IA)

Humans and IA

Where our challenge lies

Being able to understand how other humans might think, interpret, and act on 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

Please write down each item on our 'list' on a separate post-it note.

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

Broad Hierarchy Pattern

Organize Meaningfully

In a broad hierarchy

Working with the post-its, organize them meaningfully in a broad hierarchy.

You have eight minutes.

Deep Hierarchy Pattern

Organize Meaningfully

In a deep hierarchy

Reorganize the post-its meaningfully into a deep hierarchy.

You have eight minutes.

Poly Hierarchy Pattern

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

Reading & Markup

Please read through pages 36-40 of Selections from Everyday Information Architecture (Martin, 2019) and highlight the following:

  • Portions of the text that evoke a strong response from you.
  • The pieces of their claims: What are they claiming? How do they support it?

Do not stop to note down why, just highlight and move on.

You have 10 minutes.

Reading Reflection

What are portions of the text that evoke a strong response in you? Why?

Reading Reflection

What is the author claiming? How do they support it?

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:

  • Be clear: Use straight-forward unambiguous language.
  • Be specific: Make sure categories are specific and not 'catch-alls'.
  • Be inclusive: The terms used sould be accessible and welcoming of all.
  • Be consistent: Use similar syntax and terminology.

Meaningful Labelling

Add post-its to label categories or re-label items to make them more understandable as needed.

You have eight minutes.

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 a linear structure

Try reorganizing the post-its into a linear structure.

You have eight minutes.

Submit Your IA

Please individually snap a photo of your IA 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.

A mindmap of different London coffee shop names
What kind of organization of information is this? (By David McCandless)
Timeline illustrating the evolution of Lego
What kind of organization of information is this?
A flowchart illustrating how to read flowcharts
What kind of organization of information is this?
VanSort Recycling Game

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?

P1: Information Design

This week's labs will be final crits for P1

Make sure to be there on-time with your materials read-to-go.

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

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

1/1