ah teaches information design (Content Structures lecture)

Content Structures

Lecture outline

Considering not only the design of content, but the content itself as a part of our process. Lecture slides will be made available on the day of the lecture (Oct. 7).

Well-being and IAT-235

This course strives to be balanced, but may not always achieve that. Please be open with me when it does not.

Critique and self

Please take two minutes to write or sketch your general state of mind and where you find yourself — your headspace — in the class today.

This writing is only for you.

Today's critique

Our approach

We will be asking questions of the work. Please phrase every 'critique' as a question.

Today's critique context
A series of sketches exploring Gestalt continuity when designing presentation slides


A series of sketches exploring Gestalt similarity when designing presentation slides


P1 Grading

Grading of P1 is in progress. We will have your grades back to you by next Thursday's lecture time.

Should you have any questions or concerns with your grades once released, email Andrew. Pouria and Kimia will not be able to discuss grades.

A road sign saying to stop here to disengage 4-wheel drive

Content Structures

Considering content

Research from Google shows that 90 percent of people start a task using one device, then pick it up later on another device...
Windows on the Web (Karen McGrane)

Appropriate content

We want to make sure the content we provide is right for the user and/or their context.

An eyetracker heat-map exemplifying that we do not look at ads on the page

Banner Blindness (Jakob Nielson)

Useful content

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


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

Click hereMore >Find out more about foxes


When you are creating new titling and categories 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.

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...)

A phone support worker looking extremely happy

What does this photo evoke?

Pyle Audio
An animation of someone following directions to click arrows, but are clicking on the wrong ones

From the Bad UX Blog

Content should be user-centered

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

An image comparing the Ikea desktop and mobile sites which have different patterns for landing pages

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


Does my user understand the language used?

MenuNavigationThe links place

Hiding Content

A tension

Progressive Disclosure (UX Patterns)
An example of using progressive disclosure in an accordian menu
An example of using progressive disclosure in an accordian menu
P2: Research and Present

Presenting design

Make sure that we can clearly see your work as well as understand it.


Keep it concise

I start out by reading this slide and continue to put the entirety of my text on this slide then you are going to spend more time staring at the slide than at bacon ipsum dolor sit amet t-bone capicola porchetta turkey tri-tip biltong bresaola. Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Pig sausage meatball tri-tip ribeye doner. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Shoulder shankle jerky, venison brisket ham pork tail prosciutto leberkas biltong short ribs ribeye ham hock tenderloin. Celery quandong swiss chard chicory earthnut pea potato. Chuck frankfurter tenderloin jerky. Bacon sirloin tri-tip pastrami. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard. Shank shankle pork loin filet mignon pork belly prosciutto ball tip tenderloin. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Frankfurter boudin filet mignon turducken shoulder pig hamburger brisket pork. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach. Pastrami shoulder kielbasa swine, t-bone ground round pork belly venison jowl filet mignon capicola.

Give us only the necessary annotations.

Do not 'walk' us

Focus on summarizing the process and outcome of your work. A 'step-by-step' explanation of what you did is not useful.

One page of a magazine article on birds

Designs do not explain themselves

A sheep grazing on grass

Keep images relevant.


Like a cloud

Avoid fluffy phrases that do not help showcase your work and thinking:

  • "I looked into this design because it's cool"
  • "We did some stuff"
  • "The TA and Andrew said to do it"
  • "My [mother, father, cat...] liked it"


Just mashing together design terminology will not help communicate the effectiveness of your design. Use design terms as appropriate, and normal language otherwise.

A pair of design jargon laden statements: "Why hello there! We are obsessed with pixel perfect cross platform creations..." and "We blur the lines between core functionality and user-centric experiences..."
Sketch #4

Course questions

Any general questions about where we are in the course?

Next lecture

Bare Bones

An introduction to interaction design and wireframing. Lecture recordings will typically become available on Fridays or Saturdays.