ah teaches interface design (Aesthetic Affordances lecture)

Aesthetic Affordances

Lecture outline

Considering guidelines and affordances in designing interactions. Lecture slides will be made available on the day of the lecture (May 25).

Behaviours & Interactions

Interfaces are dynamic. They are the means by which a user controls and interacts with a complex tool. As a result it is important that we understand the capabilities and behaviours of the product and the user.

What is an 'intuitive' interface?

User and System Behaviours

As interface designers we have to reconcile user expectations and system functions. Note that our job is not to map them directly.

Interactive System Models

ImplementationA screen displaying a complex set of code

RepresentationalA wireframe of a login screen

MentalA user trying to remember their password


The use of physical, visual, and conceptual represetations that resemble or mimic older, typically physical, elements in order to make them more easily understood, recognized and adopted by a user.

The iBook application user interface with many three dimensional looking elements

A book organizing application that looks like a bookcase

The Candy Crush game user interface presenting a skeuomorphic design approach

Candies that look like candies might sitting out on a (very organized) table

Don't Hate, Consider-it!

While skeuomorphism may not currently be considered 'trendy', the benefits in usability from using real-world cues should not be mocked!

The Windows XP interface

Note: Do not connect to the internet

The Windows 10 interface
The iOS interface's evolution from more skueomorphic to flat aesthetic over time

Design Languages

Visual languages such as Google's Material Design, Apple's Human Interface Guidelines, Microsoft's Fluent Design System are just a couple examples of pattern libraries of visual and interaction elements. These standardize interactions within a given platform, allowing for branding an extendability.

Google's Material Design

User Goals

Our design should be driven by our user's goals — a desired outcome or intended experience. The challenge is that a user's goals can span from well-defined to unintelligible.

Example: Find the nearest whisky jack.

A grey jay (also called a whisky jack) looking out from a tree
Four quadrants indicating known knowns, known unknowns, unknown knowns, and unknown unknowns

This is confusing, but important

P1 and features

This is where defining a feature comes into play. With a 'feature' we are typically trying to answer some (or all) of:

  • What goal the feature accomplishes for the user.
  • What task(s) the feature is enabling the user to complete.
  • What challenge the feature lessens for the user.
  • What benefit the feature will provide the user.

Tasks and goals

While our design is driven by the goals of our user, we will need to break up the goal(s) into a series of tasks to help us build the representational model needed.

Designing Interactions

Don't design in a vacuum. Look at existing systems and try to understand why they work the way they do. And how you can use that to make your own system function "intuitively."

Guiding Through Interaction


  • How do you focus the attention of the user?
  • How do you ensure your users don't get lost?
  • How is the logic of the action conveyed/represented?

P1 scenarios

Suggested steps

  1. Write out a narrative and map out how it fits together in a flow-chart.
  2. Sketch out the wireframes necessary to illustrate the flowchart.
  3. Add comments or elements to the sketches to help us understand the entire scenario.

A sample feature narrative

Andrew wants to find the nearest whisky jack to snap some photos of. He opens up the Berdfinder social media app and decides how he might want to find them. Wanting to find the nearest one he chooses the map option. There he is able to put in his address and look around the map for the closest whisky jack sighting.

A short narrative for using your UI.

Andrew wants to find the nearest whisky jack (goal) to snap some photos of. He opens up the Berdfinder social media app and decides how he might want to find them (options). Wanting to find the nearest one he chooses the map option (decision). There he is able to put in his address (options/decision) and look around the map for the closest whisky jack sighting.

A flowchart illustrating the interaction options for BerdFinder
Wireframes illustrating the BirdFinder app opening page, and then the map open thereafter
Sketching exercise
P1: Features

For lecture...

For the next lecture time, please make sure to come ready to critique!


Critique is a communication skill. Effective critique requires reading/listening, responding, and practice.

Effective critique is...

  • Purposeful: Has a clear statement or goal.
  • Specific: Identifies a particular strength/weakness (not speaking in generalities).
  • Language appropriate: Uses language understood by the audience.
  • Practical/action-oriented: There is something to do or think about.
  • Timely: The type of feedback given makes sense for the stage of work.

Why critique matters

Effective critique can:

  • Motivate and inspire
  • Reinforce existing strengths
  • Keep goal-oriented behaviour on track
  • Modify and/or improve skills
  • Remedy errors
  • Help reflection and learning

Ineffective critique is...

  • Absolute: Providing no potential direction for solving the problem.
  • Not contextualized: Speaking your own opinion without stating so.
  • Not clarified: Talks to work without understanding what it is about.
  • Uninvited: Given without being requested or expected.
  • Needlessly vulgar: Swearing unnecessarily.

Critique context

Before giving critique, it is always important that you understand what the project is, and where it is at. This helps ensure your feedback will be timely and purposeful.

Next labs

We will be setting up pre-scheduled times for you to meet with Ladan. Please check the announcement for your time.

Next lecture

Aesthetic Assessment

More on affordances and heuristic assessment of interfaces. Pre-recorded lectures and slides will typically become available the day after the lecture.