IAT-334: 05 Patterns of Patterns

Patterns of Patterns

Lecture outline

In this week's lecture we will be pulling apart pattern libraries, introducing thinking about animation, and design patterns in interface design.

Quiz Rules

  1. You will have only thirty minutes to complete the quiz. Keep an eye on the time due, as late submissions receive a zero.
  2. This quiz is open book, meaning you can draw on online resources as much as you would like. Please remember that if you cannot access a reading because everyone else did so before you, there is nothing we can do. Please refer to your notes.
  3. Any words that are not your own must be cited using a proper format — for example (Author, 2000). Any plagiarism will result in a grade of zero. No exceptions.
  4. Any talking, texting, messaging, paging, or secret-tiny bluetooth resulting in communications with friends or classmates will result in a grade of zero. No exceptions. Facebook can wait.
  5. Please answer any questions in full sentences.

Quiz time

The secret password is . You have 30 minutes.

Patterns of Patterns

Close all laptops please! (Back row is excluded)

Why would this animation — or would it not — successfully focus a user's attention on the interface?
What kinds of different states does this sketch suggest? How does it do that?

Heuristics and Design Patterns

Design principles, patterns, and heuristics come from a similar place: Common patterns and 'best practices' discovered over years of trial and error or from research.

Patterns and Principles

Let's take a look at some common design patterns and principles that they may support, frustrate, or violate.

“NUIs (natural user interfaces) exploit skills that we have acquired through a lifetime of living in the World.”
Bill Buxton


Connect user actions to reactions.

A brief screen capture illustrating how the UI hints at the next section as the user drags over the display
A user trying to flag a selected email but being provided with no visual feedback of the interaction
The Mac OS spinning beachball


To be able to anticipate what the user needs, and when they need it in the interface.

A user selected a text area on a mobile application and the keyboard pops up
A user being presented with new document options when first opening the Word application


The interface belongs to the user; let them control it.

A short animation of a user manipulating a map in a mapping application
A short animation of a user manipulating filtering options within an application
A short animation of a user manipulating the interface in a video game


Clarifying for the user the order of importance.

A short animation of a mobile device receiving at text notification


A pattern that purposefully works (or not) with the expectations of the user, within the application, their device, and their reality.

The different colour pickers that appear in Photoshop
Image care of Lars Höög


Help support the user in moving efficiently through their task.

The Mac OS spinning beachball
An image demonstrating an opportunity to remove an interface

Design Patterns

Design practices that are used sufficiently create patterns. Libraries such as UI Patterns offer us a collection of pattern summaries, as well as when to use, and when not to use them.

Let's take a look at the "expandable input" pattern for discussion.

UI Pattern: Natural Language Form
P02: Feature Design

Any questions?

P01 Grades Coming Back

Your P01 grades will be coming back to you later today/early tomorrow. If you have any questions or concerns about your grades please do not hesitate to contact me directly.

UI Sketchbook

Sketch #5

In preparation for the idea generation that will be necessary of the next project, this sketch exercise has you dreaming up possibilities.

Please sketch out one main task for three different user interfaces for non-existing applications. Each task being sketched should include at minimum five sketches, totalling fifteen sketches across three different applications. Please ensure that your sketches:

In This Week's Labs...

We will talking about your feature options. Please make sure to have your feature options ready to go when you arrive, as you will get six minutes to talk through them, and then we will give you feedback.


...but in two week's time we will be talking about interviewing users and your next and final project.

Contacting Andrew