Information Design

Information Design

Lecture outline

Covered in this lecture:

  1. Context in design
  2. Content as information
  3. Designing information

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

Information Design

Please close all laptops. The back row is the only laptop-permitted zone.

Drivers of Change

"The topics and data referenced below provide a starting point to think about potential drivers of change."

Sharing Your Projects

Your projects will not be shared with the city staff outside of our classroom without your explicit permission.

What is the End?

Where are we going with this

The final result for this project is intended as an information piece that should invite individuals to consider drivers of change.

We are not trying to convince them of a particular stance.

P1 Support Materials

Where is the Why?

Any lingering questions?


The relationship between a user and all the parts of their environment, as they perceive it.

Layers of Information

  1. Physical: A user's relationship to their environment.
  2. Semantic: Messages or meaning established for others.
  3. Digital: Encoded/computer-centric messaging.

Physical Layer

Methods of interpreting information

  • Visual
  • Auditory
  • Kinesthetic
A fluorescent orange pylon on a stoney background
Comparing readability and legibility in typography
Readability vs. legibility

Order of cognition

  1. Basics: form, colour, depth
  2. Grouping: Gestalt
  3. More to come shortly...

Gestalt Clarifies

Association through ________

How we as humans tend to associate things visually, and, or, create a sense of closure.

  • Figure/ground
  • Proximity
  • Similarity
  • Closure
  • Continuity
  • Connected
Example of Gestalt principles in action
What might be some Gestalt concerns here?
Example of Gestalt principles in action
What might be some other concerns here?
Different typefaces for testing legibility
A very large and excessively detailed chart

Order of cognition

I think I forgot something...

  1. Basics: colour, depth, form
  2. Grouping: Gestalt
  3. Memory: connections
  4. More to come shortly...

Connections and Humans

We're lazy, er, or efficient

"...users have time to read [on average] 20% of words on a page."
Nielson-Norman Group
A sign stating 'If you hit this sign, you will hit that bridge'

Patterns and Chunking

Giving us consistent and reasonable chunks of information makes it easier for us to use.

A white sign on a snowy backdrop
An issue with contrast in context
A subway-system illustration of the human body
From Cool Infographics

Order of cognition

The final step

  1. Basics: colour, depth, form
  2. Grouping: Gestalt
  3. Memory: connections
  4. Recognition: connections applied and understood
Defibrillator instructions
Defibrillator instructions


"[Our] perspectives are coloured by our habits, beliefs, and attitudes."
Erika Hall


Potentially devious content


  • Definitely not true
  • Vitally important to avoid


  • Deliberately not true
  • Use vengefully or tactically to mislead

Goals of Content

  1. We should be clear with our content.
  2. Users should be able to understand everything they need.
  3. The content should be accessible to users.
  4. There should be no obscuring the content.
P1: Information Design
Redesigned information pill bottles for Target
What were some points shared about process that you found interesting in the Infographic Designer's Sketchbook reading? and why?
Various examples of information design in a traditional and non-traditional sense (i.e. wearable performance display for athletes)
What were some examples of how your idea of information design was stretched in this reading? and why?

Next in P1

Over the next week, you will:

  • Generate a mockup of a new design
  • Prepare an argument of why your design is effective

Sketches vs. Mockups

"What happens in the real world is that when you skip sketching and go straight into preparing mock-ups (not even wireframes, eek!), I come along and give reasons why the design doesn't work... yet they've already spent their time (and project costs) putting together the mock-up. Sketching is low cost and easy to throw away. Plus, they're not married to their design and can easily iterate and refine. Please, please don't give half-*** sketches to clearly scream, 'I hate doing this and am not giving it much thought but doing it because you're telling me to do this'."
— Local Team Lead

This week's labs

On the docket:

  • Group discussion
  • Crits

Next Week's Reading

Please bring pages 36-40 of Selections from Everday Information Architecture (Martin, 2019) printed to lecture next week.

Next week's lecture will involve architecting. Just no buildings though.

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Tuesdays from 2:30-3:20pm and Thursdays from 9:30-10:20am at the Surrey campus mezzanine.
  • ac.ufs@h_werdna