UX designers often think in broad strokes, but it's important not to lose sight of the small units that make up the user experience, the microinteraction. The tiniest misstep can result in major user frustration. Discover ways to make our software feel less arbitrary and more predictable with deliberate attention to microinteractions.

1. MICROINTERACTIONS
September 27, 2017
Justin Stollsteimer
jstollsteimer@fusionbox.com

2. HERE’S HOW THIS
IS GONNA GO
• What is a microinteraction, and where does it fit in?
• Microinteractions in alarmingly vivid detail.
• Making microinteractions more kick-ass.
• UX and microinteractions (and you!)
• Some microinteractions we’re proud of.
• Q-and-hopefully-some-A

3. WHAT IS A MICROINTERACTION?

4. AT A GLANCE
• UX is often high-level, macro-thinking
• Microinteractions are the counterpart
• From “Oh” to “Whoa!”
• Intuitive, natural, obvious
• Smaller in size and scope than features

5. USE A MICROINTERACTION
WHEN YOU WANT TO:
• Accomplish a single task only
• Interact with a single piece of data
• Control an ongoing process
• Adjust a setting
• View or create a small piece of content
• Enable or disable a feature or function

6. MICROINTERACTIONS
SHOULD ALSO:
• Provide timely messaging
• Clarify an outcome
• Provide real-time feedback to tactile adjustments
• Offer user guidance
• Reinforce a brand's personality or values

7. COMPONENTS
Trigger Rules Feedback
Loops &
Modes

8. TRIGGERS
RULES
FEEDBACK
LOOPS & MODES

9. MANUAL TRIGGERS
Controls + Labels: Control States:

10. SYSTEM TRIGGERS
Incoming messages, application
errors, and location-based events
are all system triggers

11. WHAT A TRIGGER DOES
• Initiate the same action every time
Do: Twitter’s “tweet” buttons always open a
compose panel (or a mode to log in/signup
first)
Don’t: Android’s older “back” button

12. WHICH TRIGGERS ARE
THE MOST IMPORTANT?
• Match need to discoverability
Moving
Affordance
+ Label
Object +
Label
Icon Only Label Only Invisible
More Discoverable Less Discoverable

13. WHEN TO SURFACE
THE TRIGGER
• Adjust discoverability based on the next anticipated action
Image Credit: http://bit.ly/2xlLpoR
Do: Hide the header navigation
while scrolling down, show it
when scrolling up.
Do: Replace empty dropdown
with actions to populate them.
Do: Scrolling to the top of a list
of emails engages “pull to
refresh”.

14. TRIGGERS
RULES
FEEDBACK
LOOPS & MODES

15. RULES
• Think of your microinteraction as a sentence
• Mapping microinteraction rules should be simple
Arrive at Login Form
Is this a returning user?
Is this a first-time visitor?
Auto-fill username, change button
text to “Log back in”
Display username & password fields,
change button text to “log in”,
emphasize “create new account”.
Microinteraction: “Log In”

16. STATES ARE BETTER THAN
SCREENS (USUALLY)
• States convey progression through the microinteraction’s rules
A simple credit card entry
doesn’t need separate pages to
select a card type, enter the card
number, and add the CVV -
states can indicate progression
through this microinteraction.

17. CONSTRAINTS HELP
ENFORCE THE RULES
• Guide your users without relying on lengthy explanations
• Use microcopy, smart defaults, and best-practice UI patterns
Do: Use input and range constraints to
prevent invalid inputs.
Don’t: Make preventable user errors possible.

18. COMPLEXITY IS BAD
• Help remove complexity (Timezone in a date picker)
• Reduce controls to minimum (“I feel lucky.”)
• Highlight anticipated actions (OK vs. Cancel)

19. TRIGGERS
RULES
FEEDBACK
LOOPS & MODES

20. Do: Reveal feedback in a timely, natural fashion.
(Animation Credit: http://bit.ly/2ff98yM)
Don’t: Disconnect feedback from the action
that created it (i.e. after form submission)
ILLUMINATE THE RULES
• Make it visible, but don’t overburden the user
• Connect the feedback to the event that causes it in a natural way

21. Initial > Hover > In Progress > Complete
USE THE LITTLE DETAILS
• Convey the most with the least
• Use the small, often overlooked components to provide information
• Tasteful animation
Animation: https://dribbble.com/shots/1426764-Submit-Button

22. BE FUNNY
(OR AT LEAST HUMAN)
• Humor is less likely to be overbearing or annoying
• Puts user at ease in the event of an error
Do: Utilize feedback to inject
your brand’s tone.
Don’t: Be robotic, or worse, put
the user at fault.

23. TRIGGERS
RULES
FEEDBACK
LOOPS & MODES

24. LOOPS
• How does this microinteraction change over time, or when used
repeatedly? How about if it hasn’t been used in a long time?
Closed: Google Translate plays the
translated text more slowly the
second time.
Open: While connected and
logged in, the application listens
for changes to active tickets.
Behavior (Long Loop): Extend ‘add
to cart’ with a reminder email if
the cart was abandoned.

25. MODES
• What if the microinteraction becomes too cluttered or complex?
New Screen: Resetting a password
forks the user from the “Log In”
micro interaction and returns
them to it after the “Forgot
Password” mode is complete.
Spring-Loaded: Shift/Command
keys enable an alternate mode
only while pressed.
One-off: The user initiates a mode
for a single action (style the
selected text).

26. DESIGN PRINCIPLES

27. DON’T START FROM ZERO
• What do we know about the user’s goals?
• What do we know about the user’s environment?
Device Day or Night LocationTime Since… Browser

28. BRING THE DATA FORWARD
• What piece(s) of information
are most crucial to this
microinteraction?
• What do we know about the
application state?
Photo Credit: http://bit.ly/2flOaSF
Do: Think creatively about what information the system
can provide the microinteraction.

29. MICROINTERACTIONS SHOULD
BE CONVERSATIONAL
• What message needs to be conveyed?
• What’s the best way to deliver the
message?
• Does it sound like someone would say this?
Do: Communicate clearly with personality.

30. KEEP ERRORS AT BAY
• It should be (nearly) impossible for the user to encounter an error
• Use microcopy, smart defaults, and best-practice UI patterns to guide
the user quickly and efficiently
The system can prevent errors or empty
result sets by detecting low battery or
expanding search results.
Microcopy (30 mins) helps
prevent selecting the wrong
start/end times.
Airbnb helps users select
sensible price ranges by
showing available properties.

31. MICROINTERACTIONS AS
PART OF THE PROCESS
• Leverage existing patterns
• Prototype your microsolutions
• Design in the browser
• Test with real users to validate your assumptions

32. IN PRACTICE:
THE PATERSON CENTER

33. TAKEAWAYS
1. Practice good UX. Knowing about your users’ goals and context
informs good design decisions—even the little ones.
2. Use the overlooked. Standard UI elements are opportunities to create
meaningful, informative, and delightful microinteractions.
3. Don’t overdo it. Make sure your microinteractions blend into your
application fluidly and simplify your users’ decision-making process.

34. RESOURCES
“Microinteractions: Designing with Details” by
Dan Saffer (O’Reilly)