IAT-334: 01 UI Thinking

UI Thinking

Lecture outline

In this week's lecture we will be giving you an overview of the course, some of the fundamentals of thinking about user interfaces, and you will practice some design and prototyping for interfaces.

Access Makeathon (formerly siatjam.ca)

UI Thinking

Welcome to IAT-334

Close All Laptops Please!

In 'lecture-mode' I would request only the back row use laptops.

Contacting Andrew

A friendly how-to

In person

  • Tuesdays from 9-10am, Fridays from 9-10am (mezzanine)
  • Drop by Room 2816, Podium 2, SFU Surrey
  • By appointment (arranged via email)

Quasi-virtually

Mia Cole

Your TA!

Contact via:

Email rules

Emails must include:

  1. "IAT-334" in the subject line
  2. Your full name and lab number in the message
  3. A clear question

Please allow up to two business days for replies.

Warning: No email crits

It is unfair for both us and yourself if we begin to offer the option of providing critiques via email. If you are looking for feedback on some work, please arrange a meeting to do so.

Lectures

What to expect

Labs

What to expect

  1. Crits, crits and more crits
  2. Group crits
  3. Presentations

Canvas

Our course-site

Andrew opens up Canvas and briefly introduces it here.

iat334.andrewh.ca

Readings

Itsa party!

Readings are available entirely digitally.

Read these before the lecture, as we will be discussing ideas in them. If I sense that the reading has not been sufficiently completed, a quiz may be called.

Participation

There will be random unannounced checks for participation through the term. It is your responsibility to make sure you are in attendance and participating.

Worth 5% of your final grade.

Quizzes

Those terrifying things

There will be three quizzes in this course.

Two will cover the readings, and will either be announced or unannounced, pending how many of you do the readings. One will be on critiquing interfaces, and will be announced beforehand.

15% of your final grade.

UI Sketchbook

Each week in the course there will be an interface sketch prompt posted that will require you to sketch and submit a response before Sundays at midnight. Your top ten will count towards the sketchbook grade for the term.

10% of your final grade.

Projects

We have three projects:

Group Work

There will be no peer review or evaluation performed in this course, but you will be allowed to select your groups for any teamwork in this course and team contracts are used to ensure that team members who are not supported have an option to remove themselves or others from the team.

Course Topics

What we'll be doing (loosely)

  1. Course intro + UI process
  2. Aesthetics & Affordances
  3. Goal-driven UI
  4. User Experience
  5. Scenarios/Experience Maps
  6. Pattern Libraries
  1. Interviewing
  2. Research-driven UI
  3. Microinteractions
  4. Prototypes and Flow
  5. Dealing with Error
  6. Presentations + wrap-up

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 25% off plus late penalties on the resubmission.

What is an A?

An A is exceeding expectations. Our 'exceeded' expectations are set out in project rubrics.

When Serious Issues Arise

Get in touch with Andrew

I am amenable to coming up with agreements, but I have to know that a problem has arisen first. Come and see me if an issue comes up that may seriously impede your ability to work on the course.

This Course is Software Agnostic

While we will be covering Axure in the first couple weeks to help you with your first project, you are welcome to use whatever tools for wireframing or generating prototypes that you see fit. Just remember that your design must be your own work.

Any questions?

A terminal window editing a file
Why do we need interfaces?
A screenshot of Google Chrome
What role do designers play in making interfaces?

What Makes for Good or Bad Interfaces?

Pull out your phones — yes, for "reals" — and open up an app of your choosing. Please chat with a neighbour and identify one or two things that you would identify as good or bad in that app.

What Makes for Good or Bad Interfaces?

Please individually sketch out either the good or bad component. Indicate which it is (through text), and why you believe it to be good or bad (briefly).

You have five minutes.

What Makes for Good or Bad Interfaces?

Please take a photo of your sketch and submit it to ah1.ca/ui

Break time!

Please return within ten minutes. Otherwise things will happen.

One Size Fits All

There is no such thing as an objectively good user interface — quality depends on the context: who the user is, what she is doing, and what her motivations are. Applying a set of one-size-fits-all principles makes user interface creation easier, but it doesn’t necessarily make the end result better.
About Face — Cooper et al (2007)

In Industry

The reality is that there is usually an entire team working on an interface, this could involve:

Interaction vs Experience Design

What's the diff?

User experience designers are concerned with the big picture of a product; what a user needs and why they would use it.

Interaction designers are concerned with how users interact with the product; the layout, flows, and responses of the system to the user.

The CUBI model demonstrating the relationship between Content, User Goals, Business Goals, and Interaction
CUBI by Corey Stern

Visual to Interactive

You will have spent time in SIAT dealing with image, type, and space up until this point. Now we will be introducing you to behaviour and interaction.

P01: Mockups (IAT-334)

Establish Elements

The first step is to define the elements and interactions necessary of a particular goal.

What elements might we need for a social media app for lovers of fine unicorn-related goods?

A unicorn stating that 'Your existence is pointless'

Establish Elements

The first step is to define the elements and interactions necessary of a particular goal.

What elements might we need for a social media app for lovers of fine unicorn-related goods?

Sketch

Yes, with pen and paper.

Start to assemble and explore different ways of working with the image, type, and space you have dealt with previously, and start to explore how the user is meant to interact.

Remember sketches should start rough and become more refined and clearer as your ideas do.

A very rough sketch of a UI
Fguillen (2010)

You Sketch

Based on the list of elements and interactions we came up with, sketch out five different UIs for a profile page. You have five minutes.

Sketch

Yes, with pen and paper.

Start to assemble and explore different ways of working with the image, type, and space you have dealt with previously, and start to explore how the user is meant to interact.

Remember sketches should start rough and become more refined and clearer as your ideas do.

A more refined sketch of a UI with annotations
Fguillen (2010)

You Sketch

Pick one of the sketches you came up with and create a more refined version, with annotations as necessary. You have five minutes.

Prototype

Choose your best design ideas and render it in high fidelity but still as a wireframe.

Prototypes are still meant as a testing space for interactions and ideas.

A wireframe for a mobile UI
Lau (2014)

Mockup

Create a full visual design of your layout. This should be high fidelity and demonstrate how the final design would appear to those involved in the project.

A full mockup for a mobile UI
Lau (2014)

Any questions?

UI Sketchbooks Are Public

Please note that we will discuss some sketches in lecture next week. As a result please avoid putting identifying information on your sketch.

Sketches are due Sundays before midnight.

UI Sketchbook

Sketch #1

Sketch out twenty different login screens for a social media app. The screen sketches should:

In This Week's Labs...

You will be awkwardly introduced, be further briefed on P01, and will complete an introduction (or recap) to Axure.

In Next Week's Lecture...

We will talk about design affordances, aesthetics, and how to begin approaching the design of interactions.

Contacting Andrew

Options: