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 (February 5).

PSA: SIAT Undergraduate Town Hall

SIAT will very likely have new concentrations in Fall 2024. Hear from faculty, ask questions and provide feedback at 2:30pm on Wednesday, February 14 (2024) in SRYC 5140. Free food and beverages will be provided.

Please RSVP at siats.ca/townhall2024

Any questions about the event can be directed to Andrew Hawryshkewich (UCC Chair) at andrew_h@sfu.ca

Office hours

A reminder that in-person office hours today (February 5) will be moved to 6:30-7:30pm.

Apologies for any inconveience.

P1 Grading

Grading of P1 is in progress. We will have your grades back to you by end-of-day Wednesday.

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

Course questions

Any general questions about where we are in the course?

Today's critique

Our approach

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

Today's critique is social

Please feel free to chat with your neighbour to assist in generating questions.

Today's critique context
A series of sketches exploring Gestalt principles when designing presentation slides
A series of sketches exploring Gestalt principles when designing presentation slides
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.

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:

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

Language

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

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

Art and design

Assumption: Art ≠ Design.

Is there anything that distinguishes art from design? If so, what?

Presenting design

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

A sheep grazing on grass

Appropriate content?

Useful content?

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

Do we understand this?

Do we understand this?

Fluffiness

Do we understand this?

Jargonism

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/P4 Preview

Next week we will have a presentation by Embark Sustainability on the 'challenge' we will be taking on for P3/P4.

A very complicated flowchart showing the relationship between individual preferences and potential environmental community involvement

P3 Teams

We will be forming teams for P3 next week. Please make sure to be in-lab on time to sign-up with your teammates.

Next lecture

Bare Bones

An introduction to interaction design and wireframing. Lecture recordings will typically become available the day

1/1