Antle teaches information design (Structuring Content lecture)

Structuring Content

Lecture outline

Thinking about layout and structure to direct movement through content. Lecture slides will be made available on the day of the lecture (September 17).

In preparation for lecture...

Please close up any laptops, cellphones, PlayStations, Nokia Communicators and other 'beep-boop' devices.

A series of three sketches of a page. One with a question mark and two with content positioned

Structuring content

Critique

Critique is a communication skill. Effective critique requires reading/listening, responding, and practice.

Effective critique is...

Critique context

Before giving critique, it is always important that you understand what the project is, and where it is at. This helps ensure your feedback will be timely and purposeful.

Today's critique

Our approach

We will be taking the 'I like/I wish' approach for today's critique: Please start each critique with either 'I like' or 'I wish'.

Today's critique context
A series of sketches exploring using space to create hierarchy in mobile layouts

Using space to create hierarchy

A series of sketches exploring hierarchy using scale

Hierarchy using scale

Good content structure

Good content structure helps direct and guide a viewer through the content actively. We are going to recap a number of design fundamentals that help us build better structures.

Gestalt

Next in our order of cognition

A psychological theory that our minds self-organize disparate elements into a unified whole. Gestalt theory offers us tools for building meaningful visual relationships.

A series of sketched frames with birds in them. The second and third frames contain a dark and light fill to help demonstrate contrast

Proximity

Gestalt theory

Things that are closer are more related.

A sketch with a mouse next to the word 'cat', and a cat next to the word 'dog'

Similarity

Gestalt theory

Things that are similar are more related.

A sketch illustrating a collection of different elements on two separate pages, some similar, some not

Continuance

Gestalt theory

We will build relationships between things that track along an expected line.

A sketch of a spread with the illustrated boxes following an expected pattern

Space

Design practice

Helps to clarify relationships and direct attention.

A sketch of a spread with one page filled with content and the other with only one element in the center of it
An animation illustrating the differences between responsive and adaptive web design
An animation illustrating how breakpoints work
ah.link/rv

Let's sketch

You have 10 minutes.

P1 content:

Device information

  • Assistive Pencil Grip (name)
  • If you find holding a pencil difficult, the Assistive Pencil Grip provides a larger grip so you can write comfortably. (description)
  • $0-10 (estimated cost)

Maker information

  • Medium level 3D printing skill (skill level)
  • 1 hour (print time)
  • 0.25 hour (assembly time)
  • 3D printer, Common hand tools (tool required)

Please sketch a desktop and mobile layout where the hierarchy of information is consistent between the two sizes.

Sketching exercise #2

Order of cognition continued

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

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

Labels

Consider in what context the buttons below make sense (or not).

>Click hereMore >Find out more about foxes

Useful content

Our content should fulfill a clear and specific purpose for the user.

Images, video, and audio are content too

Just like we think about text user experience, we can also think about photo experience (or video, audio...)

Pyle

Content should be user-centered

We want our content to focused on what the user needs or understands.

Keep content concise

Users are going to scan through content to find what they want or need. Provide them with concise and well-structured content to help them.

Interfaces are type

"It is the typographer's task to divide up and organize and interpret this mass of printed matter in such a way that the reader will have a good chance of finding what is of interest to [them]."
Emil Ruder

To Figma!

Let's get you ready for continuing working on P1 with a tutorial covering:

P1: Clarity

Homework review

Things to work on this week:

Next week: Week for providing feedback on P1

Critique time

During this time you can:

Once done the in-class activity and critique you are free to go for the day.

1/1