Microinteractions; Pair Designing

UX Prototyping

Mick McQuaid
mcq@utexas.edu

University of Texas at Austin

22 Oct 2025

Week NINE

Microinteractions

Definition from NNgroup: Microinteractions are trigger-feedback pairs in which (1) the trigger can be a user action or an alteration in the system’s state; (2) the feedback is a narrowly targeted response to the trigger and is communicated through small, highly contextual (usually visual) changes in the user interface.

Microinteraction flow

Some are, some aren’t

Digital element Is it a microinteraction?
Scrollbar Yes: User triggered; visual feedback to user changing location within a page
Digital alarm Yes: System triggered; auditory (and visual) feedback to time condition being met
Button It depends: If there is no feedback when a user clicks the button, there is no microinteraction
Pull-to-refresh animation Yes: User triggered; visual feedback to a user action
GIFs No: Not triggered by the system or a user
Video player No: It’s a feature, not a microinteraction; volume control would be a microinteraction

Why?

Microinteractions can improve a product’s user experience by:

  • Encouraging engagement
  • Displaying system status
  • Providing error prevention
  • Communicating brand

Encouraging engagement

Displaying system status

Providing error prevention

Communicating brand

Error prevention

Prevent rework

Communicate brand

Encouraging engagement

Auditory microinteraction

Exercise

Design and share a microinteraction for your individual course project.

For more info

Read Saffer (2013)!

Pair designing

… getting more and better UX design done by putting two designers together as thought partners to solve design problems

Pair designing differs from feedback relationship

being in the same room, working on the same problem, with both brains focused on the problem simultaneously for the duration of the project

Roles

  • One designer is the generator (or gen)
  • One designer is the synthesizer (or synth)

Gen

  • Conveys an idea clearly and quickly
  • Usually at the whiteboard or tablet
  • Comfortable drawing in front of their partner
  • Leaves ego out of it
  • Has sophisticated understanding of contemporary design

Synth

  • Tests ideas as they are generated
  • Keeps bigger picture in mind
  • Writes design choices and rationales after debate
  • Is detail-oriented and has strong memory
  • Has sophisticated understanding of first principles and psychology

Role swaps

  • Gen gives the “pen” to the synth
  • Usually gen has run out of ideas or swap is timed

Why divide the work?

  • Confirmation bias is part of gen’s role
  • Easier for another person (synth) to overcome confirmation bias on a given idea

Why not remote collaboration?

  • Distractions
  • Network problems
  • Lack of body language

Stages

  • Research (synth transcribes) (what to do)
  • Sensemaking (synth builds big picture, takes the lead) (how to do it)
  • Wireframing / sketching (gen takes the lead in drawing)
  • Detailed design (synth produces narrative, gen produces visuals)

Exercise: pair design your microinteraction

  • Break into pairs (someone you haven’t worked with before)
  • Choose any project of interest—it could be a passion project or the iOS project
  • Spend the allocated time in gen and synth roles, swapping at each stage for four stages

Did this work? If so, why?

  • Pairing forces constant iteration: idea testing and course correction
  • It brings to bear two brains and two stances
  • Designers are happier
  • Each partner can focus on their core aptitudes
  • Who felt more natural as a gen? As a synth? Which stage felt most comfortable?

Other reasons

  • Partners learn from each other
  • Materialize ideas early
  • Vocalize rationale
  • Constant course correction

Bad UX

It’s everywhere! Time now for you to share your examples!

(I can start with an example of an LMS)

References

Saffer, Dan. 2013. Microinteractions. Sebastopol, CA: O’Reilly Media.

END

References

Saffer, Dan. 2013. Microinteractions. Sebastopol, CA: O’Reilly Media.

Colophon

This slideshow was produced using quarto

Fonts are Roboto, Roboto Light, and Victor Mono Nerd Font