ah teaches information design: 02 Information Design

ah teaches information design: 02 Information Design — A slide deck

Information Design

Lecture outline

Covered in this lecture:

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

Information Design

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

P1 More Materials

More materials are now available for review and use as part of P1. Ethan and Omid will review them with you at the beginning of this week's labs.

Sustainability Office

Today we have Pegah Djamzad from the Sustainability Office here to present more on our context this term.

Questions for Pegah?

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?


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?
Guerrilla Public Service

Semantic meaning



Official Update

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


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

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

Notes on Mockups

The size of your P1 deliverable is up to you, but make sure to bring it to scale for next week's labs.

This week's labs

On the docket:

  • Group discussion
  • Crits
Stanza nad Foursquare mobile app screenshots
Pages 3-50 from A Practical Guide to Information Architecture (Spencer)

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

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Wednesdays from 11:00-11:50am and Fridays from 8:30-9:20am at the Surrey campus mezzanine.
  • ac.ufs@h_werdna