ah teaches interface design (Teeny Tiny Actions and Patterns lecture)

Teeny Tiny Actions and Patterns

Lecture outline

Exploration of more interaction and interface patterns as well as the introduction of microinteractions. Lecture slides will be made available on the day of the lecture (June 12).

Critique prep

Please come and sign-up for a timeslot for critique. I will briefly cover alternative activities you can partake in during critique time at 9:45, after which we will reconvene for lecture at 11:45.

Please make sure to have materials ready for critique when your timeslot comes up.

Activities during critiques

Exploring final project ideas: Everyone is expected to explore the activity using the activity print-out.

P2: Heuristics

Design discovery

How do we uncover the problem we can tackle?

Problem statements

These should focus on the users and the challenges they face. Summarize this for a general audience.

Scope

How focused or broad what we are addressing is. In this course the requirements for the final project is that you are designing an interface that resolves a user need.

A sketch illustrating a problem in an interface
A sketch illustrating a problem in an interface
A sketch illustrating a problem in an interface
Sketching exercise
A green toggle

Teeny Tiny Actions and Patterns

Microinteractions

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 likely designed microinteractions before.

Sweating the details

A microinteraction is a single task. An easy way to think of it is as a sentence: "Khoi 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: "Khoi adjusts the brightness of his phone display using a slider."

"Khoi 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

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.

A prompt indicating that a song already exists in the playlist, and asking the user if they want to continue or cancel adding the song

Clear affordances are important for visual triggers

An advertisement for Google Home

A trigger does not have to be a visible control

An iPhone screen dimmming

From Cult of Mac, triple tap home to dim the screen

The microphone toggle in a audio chat application indicating to the user that they may be muted while trying to talk to the group

From Little Big Details

Text indicating to drag a link to the user's bookmarks getting bigger as the user clicks on the link instead of dragging it

From Little Big Details

Rules

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.

A button indicating that pressing the Esc key will open a new tab and redirect the current page to Google

From Little Big Details

A prompt inviting you to "just apply already" that has appeared on a job posting page after the user has visited it multiple times

From Little Big Details

The Mac OS file menu open with the save and duplicate options showing

From Betalogue

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:

Feedback

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.

The time on a small analogue clock icon changes as the user sets the delivery time for an email campaign

From Little Big Details

An email inbox with one email listed next to a fishing hook icon

From Little Big Details

The Yelp mobile app with a dinosaur dressed as a ninja indicating that the user's location cannot be found

From Little Big Details

The Microsoft Word assistant 'Clippy' asking the user if they need assistance

Clippy, a much maligned Office assistant

1/1