Presentation by Matt Curtin & Joseph Carter-Brown at the ASAE Tech Conference 2017

1. Human Centering Your
Association and the Rise of
Microinteractions
Matt Curtin & Joseph Carter-Brown
Unleashed Technologies
@UnleashTech #Tech17

2. Matt Curtin • @matthewjcurtin
Senior Designer & Front-End Developer
Unleashed Technologies
Joseph Carter-Brown • @abrowncreates
Branding / UX Designer & Front-End Developer
Unleashed Technologies
@UnleashTech #Tech17

3. Today We’ll Be
Covering
• The Basic Concepts of Human Centered Design
• Human Centered Design Practices & Exercises
• How Microinteractions fit in Human Centered Design?
@UnleashTech #Tech17

4. Ground Rules of Human Centered
Brainstorming
• Stay focused
• Suspend judgment
• Embrace ambiguity
• Be visual (write it down)
• One idea per post-it
• Be ready to share ideas
• Don’t hoard post-its (if you write it, place it)
• Encourage “wild” ideas
• Less talking, more listening
• Be Active, Be Present
• Build on ideas | “yes and”
Key to Remember: Everything is a Prototype
@UnleashTech #Tech17

5. User Empathy Map
Who is your user & how do they feel?
@UnleashTech #Tech17

6. What We’ll Create
@UnleashTech #Tech17

7. Difference between Human & User Centered
Design
Users:
• Are perfect for us & need us
• Exist in one condition
• Are often made up
• Usually vast generalizations
Humans:
• Are imperfect, and don’t care about us
• Conditions and circumstances vary
• Are real, and can be validated
• Has needs outside of us
User Krista
Loves us, cuz they love
buying nuts & bolts
Wants more nuts & bolts
for the nuts & bolts party
From Hogwarts
Mechanical School
Mechanic: probably likes
dirt & working w/tools
Bike lost a wheel bearing, needs new
oneMeetings all day, not sure when she’ll
have time to make it to the store
Lives in Seattle, talk to her recently, never
knew you could order nuts & bolts online
Needs to: Make a dish for office pot luck
& coordinate, with husband, who takes
kids to soccer
@UnleashTech #Tech17

8. User Journey
Meet Chris J.
@UnleashTech #Tech17

9. Who is Chris J?
• Age: 38
• College: University of Maryland, College Park
• Career: Director of Marketing (Technology Firm)
• Professional Experience: 16 years
• Hobbies & Interests: Activities with family, Maryland football
and basketball games
@UnleashTech #Tech17

10. Chris J’s Conference Interests
• Keep up with latest technology trends
• Network with peers
• New ideas for 2018
• Holiday Season Timing
• No website/app location to document ideas for later
• Connections from conference lost
after long Holiday break
Chris J’s Conference Pain Points
@UnleashTech #Tech17

11. Finalizing Your User Journey
How they got there?
What were some pain points?
How could their experience have been improved along the way?
@UnleashTech #Tech17

12. Microinteractions
What are they and how do they relate?
@UnleashTech #Tech17

13. What Are Microinteractions?
• All the little bits of functionality that make
up the entirety of an user experience.
• Individual interactions or cells that make up
a user interface.
• Make up the “feel” part of look and feel.
“Microinteractions are
contained product moments
that revolve around a single
use case—they have one
main task.”
Dan Saffer, Author of Microinteractions:
Designing with Details

14. What Do Microinteractions Do?
• Communicate feedback
• Accomplish or Isolate an individual task
• Manipulate a setting
• Prevent user error
@UnleashTech #Tech17

15. Why Do Microinteractions Work?
• Provides the sense of more control with immediate feedback
• Instructions - microinteractions guide the user through a system
• Visual rewards from microinteractions can facilitate a habit loop
• A site or application can be bland or appear broken without these
subtle animations and elements
@UnleashTech #Tech17

16. Microinteraction Elements
• Trigger (Manual Human Action or System Trigger)
• Rules
• Feedback
• Loops & Modes
@UnleashTech #Tech17

17. Trigger
• Physical or digital control/condition that begins a
microinteraction
• Manual and System Triggers
• NYC Metro Card Example
• Creating metro card touchscreen design
• One screen per action (each screen a microinteraction)
• Make the trigger something the user will recognize as the trigger
(start button)
• Principles of Triggers
• Have the trigger be positioned where the user will need it
• Have the trigger perform a consistent task/action
• Understand the microinteraction in detail – What will prompt the user to
trigger it? How often is the microinteraction used?
Pandora Music Controls
NYC Metro Card Machine Default State
@UnleashTech #Tech17

18. Rules
• At the heart of every microinteraction, there are a set of
rules
• Important to understand the goal (end state)
• Determine the following:
• How the microinteraction responds to the trigger
• What control the user has
• The sequence of events
• What data is being used? Weather? Time of day? Location?
• Feedback delivered
• Does it repeat? And how often? Does it completely end?
• Removal of choice limits edge cases
• Rules prevent errors
Diagram for Add to Cart button rules

19. Feedback
• Verification for the user about the result of the
microinteraction
• Illuminates the rules – brief look at how it all works
• Provides Human Feel, Personality or Character
• We respond better to human response – not machine
• Serves to relieve tension
• Slot Machine Case Study
• The amount of feedback is disproportionate to the amount
of winning (flashing lights and sounds)
Examples of submit and download button
feedback from “
Micro Interaction; great experience for user e
by Sneha Munot

20. Loops & Modes
• A mode is a special part of an application that
operates differently then usual.
• A loop is a series of commands that is
repeated for a set duration.
• Modes should rarely be used and should have
their own screen (to reduce clutter)
• Loops can be used to recognize behavior and
offer help during a microinteraction

21. Revisiting Chris J.
A closer look into technology and user preferences
@UnleashTech #Tech17

22. Experience with Technology
• Advanced with computers and devices (daily)
• Navigates the web daily
• Applications: Google Chrome, Microsoft Suite, Web Applications (HubSpot, Google
Analytics, etc.)
Website & Application Expectations
• Responsive design (on all devices)
• Site Speed (quick load times – busy schedule)
@UnleashTech #Tech17

23. Microinteractions Made by Chris
• Woke up for the conference – turned off his iPhone alarm
• Used his toaster to make breakfast toast. Hit the “A little bit more button”
because the toast popped up too early and wasn’t quite ready
• Used Waze to navigate to the conference
• Found his desired sessions on the conference mobile site
• Tweeted the photo of this session
@UnleashTech #Tech17

24. Develop a Vignette
Establish a Microinteraction Prioritization Grid
@UnleashTech #Tech17

25. The Final Prioritization Grid
@UnleashTech #Tech17

26. Bring It All Together
• What were the outcomes of our exercises?
• Can the other group’s users validate the findings?
• How did we use Human Centered Design to get to this point?
• Priority Microinteractions: Are there common ones among the groups?
@UnleashTech #Tech17

27. Microinteractions: The Value of Simplicity
• Small components – opportunities for them are endless
• Users can become overwhelmed
• Be mindful of repetition – will this annoy the user over time?
• Use what is there – don’t add too much
• Unified Theme – must work together within the interface
• Cognitive Load – total amount of mental effort being used in the working memory
• Don’t overload the user with tasks
• Consistency with interface
• What microinteractions can be used to make the interface more predictable and easier on the
memory?
@UnleashTech #Tech17

28. Rules of Animation
• Follow the rules – 12 principles of animation
• Introduced by Disney in a 1981 book
• Defines rules for realistic and humorous effects
• Movement can make or break interface
• Provides sense of weight or importance
• Use common sense
• Does this slow down the process too much?
• Interfere with the general usability or experience?
• Do more harm than good?
• Animation should be: Fast, Smooth, Natural, Simple &
Purposeful
@UnleashTech #Tech17

29. Functional Animation
Used to simplify the interaction with gesture-driven animation
iPhone X Prototype Examples by Jae-seong, Jeong
@UnleashTech #Tech17

30. Real World Applications
What are some industry examples of microinteractions?
@UnleashTech #Tech17

31. Google App Voice Activation
• Saying “Ok Google” when the app is open is an
example of an invisible trigger (always listening)
• The trigger begins the microinteraction that also
involves a voice, noise and microphone
animation within most Google applications
• The app user can begin making any request
• Similar Examples: Xbox One/Kinect Voice
Activation, Comcast X1 Remote

32. Harvest Application: Personal Messaging
• The web application triggers a microinteraction when a timer is started
(either left running or started on a previous/future day)
• The alert messaging serves a
valuable purpose and the message
has a human feel.
@UnleashTech #Tech17

33. Gmail Attachment Alert
• If an attachment is mentioned
in an email without anything
actually attached. Gmail will
ask you if you still want to send
the email.
• Great example of a rule
preventing a mistake.
@UnleashTech #Tech17

34. Waze Navigation App
• Based on the time of day and
location, the app asks if you
are driving to work of home
• Provides quick trip details and
alternate routes
@UnleashTech #Tech17

35. Getting Started with Microinteractions
• Many online resources and tutorials (links on next slides)
• CSS3 transitions & JavaScript (React, Angular)
• Prototyping Tools (InVision, Atomic, Framer, Figma)
• Begin the process with messaging & planning
• How can your existing site leverage microinteractions?
@UnleashTech #Tech17

36. Learn More About Microinteractions
• Read: Microinteractions: Designing with Details
by Dan Saffer (Forword by Don Norman)
• Podcasts
• Dan Saffer – Big Considerations from Microinteractions
• Microinteractions: Design with Details
• Microinteractions: An interview with Dan Saffer
@UnleashTech #Tech17

37. Free HCD Book
• The Field Guide to Human-Centered Design by
IDEO.org
• A step-by-step guide that will get you solving
problems like a designer.
• Download the PDF here
@UnleashTech #Tech17

38. Additional Resources & Links
• IBM Design Thinking
• IDEO Design Thinking
• Design Thinking with SAP
• DesignKit.org
• 15 deeply pleasing examples of mobile micro
UX
• UX Design Best Practices: Refined
Microinteractions
• 12 Basic Principles of Animation in Motion
Design
• Best Practices for Microinteractions
• Micro Interaction; great experience for user
engagement
• Microinteractions: The Secret of Great App
Design
• The State of UX for 2018
• AWWWARDS UI Animation and
Microinteractions
• How to build animated microinteractions in
React
• UXinMotion Microinteraction Tutorials
@UnleashTech #Tech17

39. Q&A Session
@UnleashTech #Tech17