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 (Jun 14).

alt

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.

Labels

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

Click hereMore >Find out more about foxes

Labelling

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

Language

Does my user understand the language used?

MenuNavigationThe links place

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

Presenting design

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

Text

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.

Fluffiness

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"

Jargonism

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
P3: Research and Present

For lecture...

Come prepared for more critique!

We will use the second half of lecture as a replacement for in-lab critiques for those who are interested. Please email or contact Andrew via the course chat to grab a slot.

Next lecture

Bare Bones

An introduction to interaction design and wireframing. Pre-recorded lectures and slides will typically become available on Wednesdays.

1/1