ah teaches interface design (Protoflow lecture)


Lecture outline

How we go about prototyping testable interfaces and interactions. Lecture slides will be made available on the day of the lecture (July 13).

P3: Interface Proposal
A set of hand-rendered wireframes that show flow through the interface like a storyboard

Storyboarding interfaces can help explore the flow and states before moving to a higher fidelity

The Core

Not just a bad movie

When your user first opens your app, they will not have you there to pitch it to them. How can you help them understand the core idea without being there yourself?

The Core

Make sure that your core idea is:

  • Simple enough for them to agree or not with the purpose.
  • In plain language that they would understand.
  • Repeated as appropriate in the application.
  • Tied to an outcome or goal that they have.
The first panel when Excel opens up showing different types of documents we can create

Consider what the first screen we get says.

Remember: Users Have Types


  • No wants to be one.
  • Looking for a mental-model match.
  • Not dumb, likely busy.

Helping Users

Remember to consider:

  • What is the first thing they may do?
  • What do they need to figure out?
  • Are things discoverable?
An overlay explaining how the user is meant to move through the application

Will our users remember this?

A unit conversion application with the typical "three line" hamburger menu in the top left corner

What do we expect to find in the navigation?

A unit conversion application with the typical "three line" hamburger menu in the top left corner next to the same application with the menu open

Planning testing

While we have covered the pieces of testing your interface with others, we have not yet put them together. As part of P4 you will be testing your interface with someone outside the course.

Things to consider:

  • What are you testing
  • Stay neutral
  • Selecting participants
  • Feedback methods

What are you testing?

Consider what you want your testing to help you understand:

  • The interface's purpose
  • The interaction design
  • The structure and flow
  • A specific feature or functionality

Staying neutral

Your job as part of a user test session is to get feedback. Do not try to sell them on your product.

Selecting participants

Early in the prototyping process (low-fidelity), picking a more likely user is reasonable.

Once the prototype is higher fidelity picking more extreme users — people who would use the interface heavily or would be unlikely to use it all — can be useful.

Feedback methods

Depending on what you are testing your methods may differ. Regardless of what methods you use aim to keep tasks and questions grounded in 'real' scenarios as much as possible.

Feedback methods


For example, if building an embedded fridge interface and you want to understand how users ask it to purchase a product:

  • Do not ask them to 'buy milk' as a task.
  • Do tell them that they just realized they have run out of milk and they need to buy more to make a cake for a friend's birthday.
P4: Interface Design
Sketching exercise
Reading reflection

For lecture...

We will be critiquing sketches and take a couple of sample project submission for critique.

Next week's lecture

When We Fail

Dealing with the reality of when we fail... because we will at some point fail. Pre-recorded lectures and slides will typically become available the day of the lecture.