IAT-334: 08 Teeny Tiny Actions

Teeny Tiny Actions

Lecture outline

This week's lecture covers the tiny world of microinteractions.

Teeny Tiny Actions

Close all laptops please! (Back row is excluded)

P03 In-the-labs

This week you will be presenting your initial application ideas. It is a good opportunity to explain why the application matters and makes sense.

P03 Schedule

Feb 20: Research week exploring domains, context, and humans.

Feb 27: Ideation week generating potential design directions.

Mar 6: Proposal week presenting your UI proposal. (Worth 15%)

Mar 13: Prototyping week for generating high-fidelity, interactive prototypes of your application.

Mar 20: Testing week for finding flaws and improving your prototype.

Mar 27: Refinement and final presentation development week. (Worth 20%)

Any questions?


Whereas feature design is macro (big), microinteractions focus on the micro (small). One feature will be a series of microinteractions, and as a result, you have designed microinteractions before.

Sweating the Details

A microinteraction is a single task. An easy way to think of it is as a sentence: "George adjusts the brightness on his phone display using a slider."

Sweating the Details

A microinteraction is a single task. An easy way to think of it is as a sentence: "George adjusts the brightness of his phone display using a slider."

"George adjusts the brightness of his phone display..." is the task being completed.

"...using a slider." is the object enabling completion of the task.

The Details

Microinteractions are comprised of a couple of pieces:


Triggers for microinteractions can either be user or system initiated. In either case, the user needs to be able to understand and learn the trigger to make effective use of the interaction.

Clear affordances are important for visual triggers.
A trigger doesn't have to be a visible control.
From Cult of Mac
From Little Big Details
From Little Big Details


Rules are the often invisible control or response being solicited by a trigger. It is important to keep in mind the user's mental models, as well as how you help the user understand the rule.

From Little Big Details
From Little Big Details
As discussed on Betalogue, violating a user's mental models can be problematic.

Machines Are Better At

Microinteractions can be useful as they can help us with tasks that we (humans) are typically bad at. For example, machines are usually better at:

You Have Data

Depending on the device your interface lives in, you have access to further information on your user and the context of use. This data may offer you an ability to define better rules. Consider:


This is the visual, aural, and/or haptic response your user receives. Your goal here is to give only what is necessary to help them understand the rules and understand the states.

From Little Big Details
From Little Big Details
From Little Big Details
Clippy, a much maligned Office assistant.

Making Microinteractions

To practice some of the future consideration your final project will require, you will be developing a microinteraction (as practice), within today's lecture. Please start off by selecting a single task for which you want to develop a microinteraction.

You have...

Define a Trigger

Given your user's task, brainstorm and define a logical trigger for the task. Sketch out the trigger within the context it would appear.

You have...

Define Rule(s)

Given your user's task and mental models, define a rule (or set of rules) for the task that helps the user complete the given task. Make notes on what the rule(s) do, or change.

You have...

Define Feedback

Given what the user has just triggered, define what feedback should occur that can help the user understand the action they have just performed. Sketch out the resulting feedback (as appropriate).

You have...

Paper Prototype

Build a quick and simple paper prototype to illustrate your microinteraction.

You have...

Get Feedback

Trade two group members with another group to provide and receive feedback with. Give them the task, have them step through it, and note any points of confusion or questions that arise.

The visiting group members should answer:

You have...

Any questions?

UI Sketchbook

Sketch #8

Based on your work for P03 for this week, your sketching task is to come up with 10 different microinteractions for your interactive system. Each microinteraction should clearly define the task, trigger, rules, and feedback. A reminder that unless the trigger and feedback are non-visual, there should be a visual component to the sketch.

In This Week's Labs...

You will be presenting your application ideas. Remember that you need to be able to explain to us why your idea matters.

In Next Week's Lecture...

An in-class opportunity for feedback on the current state of your proposals, in addition to a recap on prototyping, thinking about user flows, and otherwise actioning your user interfaces.

Please bring in your proposal pitch to next week's lecture.

Contacting Andrew