ah teaches information design (Developing Process lecture)

Developing Process

Lecture outline

An introduction to the course and thinking about an information and user experience design process. Lecture slides will be made available on the day of the lecture.

The Vignelli New York Subway map

Developing Process

Welcome to IAT-235!

Your teaching team

Lecturer:

Andrew Hawryshkewich

TAs:

Pouria Delfanazari, TA for D101/D102

Kimia Aghaei, TA for D103/D104

Announcements

There will be a weekly announcement posted to Canvas and to the announcements page. These will serve as a 'what is coming up' notification.

Contacting your instructors

A friendly how-to

Andrew, Pouria and Kimia are available via:

Email rules

Please allow up to 2 business days for responses.

We do not provide design critique via email or chat. Please arrange a meeting or attend office hours for design critique.

To make our responses faster, please include the following in your email:

  • Your full name.
  • The course number (IAT-235).
  • Your lab number.
  • A clear question.

Chat conduct

Please treat our online interactions the same way you would in-person interactions.

If you have concerns about anyone's conduct at any point, please direct message or email Andrew.

Mask etiquette

Unless you have an approved exemption, you are required to wear a mask in all indoor common and learning spaces, including classrooms.

Please come to campus prepared with a non-medical mask.

If you need a mask exemption

If you require a mask exemption in the classroom for medical reasons, please contact the Centre for Accessible Learning at cal_admin@sfu.ca for assistance.

If you are requesting mask exemptions on other protected grounds, such as religion, you can contact the Office of Student Support, Rights and Responsibilities at student_support@sfu.ca.

If you have an approved exemption

Please remember that masks are just one layer of protection, if you have an exemption please maintain social distancing with your classmates.

Please be kind

If someone is not wearing a mask, do not make assumptions or judgements as that person may be exempt.

If someone asks you to give them a bit more space, please do. Not all of us may be as comfortable in the classroom.

Illness policy

If you are ill, stay home. You are able to attend the lecture remotely or watch the recording later, and follow-up with Andrew or your TA to arrange an alternative time for critique. I

If you will be ill for a prolonged period of time (more than a week) please email Andrew to arrange accommodations.

If one of the teaching team is ill, we will notify you via Canvas and course chat before 8:30am on the day of the lecture or lab.

Zoom etiquette

Lectures will be streamed and recorded on zoom. You will need to log in through sfu.zoom.us before being able to access the room.

We have some etiquette requests:

  • Use headphones
  • Keep your audio and video muted
  • For online office hours bring any materials for critique ready as a web link

Lectures

What to expect

Our lectures will involve a fair bit of talking, but not always by your instructor. Lectures include:

  • Explanation of theory and practice
  • Sketching/in-lecture activities
  • Critiquing sketching exercises

Labs

What to expect

Labs will be some activities but a lot of critique. It is your opportunity to get project feedback.

Labs will not be available remotely. If you will be unable to attend please arrange an alternative time to receive feedback on your projects.

Workload

A reminder that this course expects about 6-9 hours of work outside of class. Because we have flipped portions of the class, you will be able to complete some of this work during lecture or labs.

If you ever have concerns with workload please email Andrew.

Canvas

Our main course-site

Andrew opens up Canvas and briefly introduces it here.

https://235.ah1.ca

Projects

  1. Layout — 15% (Individual)
  2. Research and Present — 15% (Individual)
  3. Wireframes — 25% (Group)
  4. Design and Develop — 25% (Group)

80% of your grade.

Teamwork

All team projects will require team contracts. If you ever have concerns about teamwork or your teammates please email Andrew.

Readings

Fee-free!

Readings are available entirely digitally.

Please read these before the lecture.

Quizzes

Those terrifying things

Reading reflections will be taking place for reading quizzes.

There are nine reflections available, and you are only required to complete two. Reflections are due before the following lecture.

You may complete up to three reflections and have the lowest grade dropped.

10% of your final grade.

Sketching and coding exercises

Sketching and coding exercises are to help further explore your projects and practice your sketching. We will typically discuss some of the prior week's sketches at the start of lecture.

10% of your final grade.

Plagiarism

This course has a zero tolerance policy for plagiarism on projects. If you are found presenting work that is not your own or resubmitting old work without notice, you will receive a failing grade on that project. No exceptions.

Late or problematic submissions

Late submissions receive 10% per day late.

Problematic submissions — i.e. we can't open the URL or the wrong files were submitted — receive an immediate 20% off plus late penalties on the resubmission.

Concerns with grades

Please notify Andrew of any grading concerns within 10 days of the grades being released. This can include just getting some further feedback and/or wanting to have something regraded.

Course overview questions?

If you have any questions that linger about the course overview, please feel free to email Andrew or ask during our lecture time.

An illustration of where to put paddles for an automated defibrillator on an adult

Information design

User experience

Maslow's hierarchy of needs starting with physiological, safety, love/belonging, esteem, and then self-actualization

Maslow's hierarchy of needs

Maslow's hierarchy of needs mapped onto web design, starting from functional, moving up through reliable, usable, and pleasurable

Walter's hierarchy of user needs (2020)

An individual using their breath to interact with a smartphone through a sip-and-puff device

From LipSync

Too many weird buttons
An animation demonstrating the differences in how we may design a website mobile first versus desktop first

From Froont

A wireframe for a bird finding app showing the main screen and the map next to it

Generating ideas

We are looking to suggest and explore, not to confirm our ideas. Our sketches should be:

  • Quick
  • Plentiful
  • Appropriately detailed
  • Disposable

Quick sketching

Quick sketching can be achieved through making appropriate sized sketches and not committing too much time to each sketch.

One three centimeter tall sketch next to the same sketch at eight centimeters tall

Work small and fast for ideation

Plentiful

We want to be generating lots of different ideas when we sketch.

'Similar' ideas:

A series of sketches of a page with small variations in the positioning of elements on the page

Less 'similar' ideas:

A series of sketches of a page with larger variations in the positioning of elements on the page

Appropriate detail

When generating ideas our sketches should be low fidelity; rough with enough detail to talk about.

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

Let's sketch

Let's recap a bit of 'sketching language' before we move forward.

Sketching exercise #1

Let's sketch again

You have four minutes.

P1 constraints:

  • 1080 pixels (wide) by 1920 pixels (tall).
  • Only white, black, and 70% gray
  • Only the following text:
    • Sundar Kumar (author)
    • Learning through travel (title)
    • An exercise (subtitle)
  • Only a sans-serif font (provided)

Please sketch:

  • Sketch a symmetrical layout.
  • Sketch an asymmetrical layout.
  • Sketch a symmetrical layout without centering everything.
  • Sketch an asymmetrical layout that uses empty space to focus attention.

Sketches for critique

Each week I will select some of the sketches for us to discuss during this time. We will use them to practice critique as well as to pull apart our process.

Please note that sketches are due on Sundays by 23:59 (PST).

Reading reflection #1
P1: Layout

Labs today

Drop-in to say hello to Pouria and Kimia plus get some feedback on the sketching exercise.

Next lecture

Structuring Content

Thinking about layout and structure to direct movement through content.

Pre-recorded lectures and slides will typically become available the day of or day after the lecture.

1/1