UX Prototyping:
Microinteractions,
Pair designing

Mick McQuaid

2024-03-19

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.

Source for this definition and the following slides https://www.nngroup.com/articles/microinteractions/

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

Source for this and the following slides is https://www.oreilly.com/content/pair-design/

Related practice: feedback relationship

part time, checking in with each other on work that’s been accomplished separately

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)

For the upcoming exercise, you’re going to spend the first stage deciding what to do. So think of research as talking about your project and what would make a good candidate for microinteraction.

Spend the second stage deciding how to do it. You’ve found a candidate for microinteraction, so now you have to make decisions about it concerning design elements like color and transition timing.

Spend the third stage and the fourth stage actually doing it. Initially sketch it, then accomplish it in Figma or whatever app.

Exercise: pair design your microinteraction

• Break into pairs (not your project teammate)
• Choose some aspect of either project during the research stage
• 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?

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

Colophon

This slideshow was produced using quarto

Fonts are League Gothic and Lato