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.

In preparation for lecture...

Please close up any laptops, cellphones, Pippin's, Dreamcasts and other 'beep-boop' devices.

Welcome to IAT-235!

Your teaching team

Meet your neighbours

We are going to take a moment to meet your neighbours. Find someone sitting next to (or near to) you that you have not met before and:

1. Introduce yourself (Hello, my name is INSERT_NAME_HERE!)
2. Describe any previous experience with graphic design or web development (I built a website for my dog...)
3. Explain why you are interested in this course (I am in this course because I really want to learn about octopods...)
4. Share a fun summer anecdote (I didn't know it was possible to be attacked by so many mosquitoes...)

You have 5 minutes.

Announcements

Important announcements will be posted to Canvas. These will often clarify or remind of important upcoming items.

Contacting your instructors

A friendly how-to

Andrew and Mehru are available:

• Through email at
  • ac.ufs@h_werdna
  • ac.ufs@ajar_asin-nurhem
• On our Discord channel (sign-up on Canvas)
• During office hours

Email rules

Chat conduct

When chatting:

• Please treat our online interactions the same way you would in-person interactions.
• Please do not posting personally identifying information about yourself or others.
• Any questions about grades or feedback should be directed to Andrew via email.

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

Office hours

Please make sure to reach out to us in advance of office hours to let us know you are coming. It helps us with budgeting time and making sure we can see everyone.

Zoom etiquette

Most office hours will be available through Zoom. You will need to log in through sfu.zoom.us before being able to access the room.

• Links are provided on Canvas.
• Please use headphones.
• Bring any materials for critique ready as a web link that we can download/share screen from.

Illness policy

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

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.

Lectures

This term we are holding our class as a 'studio' lecture - a communal space we meet to cover theory, practice, critique and software for information design.

Waitlisted students

If you are waitlisted, please stick around. It is good if you keep up with the course material in case you are able to join the course.

Workload

A reminder that this course expects about 2-5 hours of work outside of class. You will be able to complete some of this work during lecture.

If you ever have concerns with workload please email Andrew.

Canvas

Our main course-site

Andrew opens up Canvas and briefly introduces it here.

Projects

1. Clarity — 10% (Individual)
2. Wireframes — 25% (Group)
3. HTML/CSS — 20% (Individual)
4. Design and Develop — 25% (Group)

80% of your grade.

Teamwork

All team projects will make use of mechanisms to ensure the team is supported by all team members. If you ever have concerns about teamwork or your teammates please email Andrew.

Readings

Fee-free!

Readings are available entirely digitally.

Activities

In-lecture individual and group activities will only be available in-person during lecture time.

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.

Use of AI

In this course you are welcome to make use of generative AI tools — unless specified — with the following condition: You must state how you generated the result you are working with in the comments on your Canvas submission.

This will include:

• the name of the tool;
• the parameters or prompt used; and,
• a copy of the generated material linked.

You may use the generated material as a starting point or assistant for your own work, but the AI result cannot be your final submission.

Code review

As part of P3: HTML/CSS you will be required to complete a code review. This will be a meeting between us to sit down and discuss your submitted code to ensure you understand how/why it is behaving the way it is.

Code check

If there are materials in your project submission that are not cited and seem beyond the scope of what we have covered in the course you may be required to complete a 'code check'.

A code check will require you answer specific questions of how the code is working and why it was built this way. If you are unable to effectively explain this the code grade for the project may become a zero, at the instructor's discretion.

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.

User experience

Maslow's hierarchy of needs

Walter's hierarchy of user needs (2020)

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.

Plentiful

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

'Similar' ideas:

Less 'similar' ideas:

Appropriate detail

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

Let's sketch

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

Let's sketch again

You have 10 minutes.

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 Mondays by 8:00am.

Context

The relationship between a user and all the parts of their environment, as they perceive it.

Mobile context

How would you describe the relationship between you, your mobile device, and your environment?

You have 2 minutes to chat with a neighbour.

Layers of information

1. Physical: A user's relationship to their environment.
2. Semantic: Messages or meaning established for others.
3. Digital: Encoded/computer-centric messaging.

Physical layer

Methods of interpreting information

• Visual
• Auditory
• Kinesthetic

Alternative layers

The physical, semantic, and digital layers are not the only ways to think about context:

1. Our perception and cognition
2. Spoken language
3. Written or visual language
4. Designed or organized information
5. Digital information

Connections and humans

We're lazy, er, or efficient

"...users have time to read [on average] 20% of words on a page."

Affordances

Affordances are the properties of an object that suggest a complementary action.

Affordances are learned.

Patterns and chunking

Giving us consistent and reasonable chunks of information makes it easier for us to use.

Patterns and chunking

A visual example

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

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

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

Questions?

Homework review

Things to work on this week:

• Submit your sketching exercise before 8am on Monday (Sept 15).
• Work on your project and bring your deliverables to class next week.

Next week: Thinking about layout and structure to direct movement through content