Microinteractions3:42 with Hope Armstrong
Now we'll delve into microinteractions, which are tiny interactions that can make a big impact on the user experience.
- Microinteractions: contained product moments that revolve around a single use case
Parts of a microinteraction
- loops or modes
Let's explore Microinteractions. 0:00 As explained by Val Head, design advocate at Adobe and 0:04 author of Designing Interface Animation. 0:07 Microinteractions are contained product moments, but 0:11 revolve around a single use case. 0:15 Microinteractions can be used to immediately show 0:18 the outcome of a user's action. 0:21 This gives the user the feeling of full control, 0:23 as they can directly manipulate the UI and expect a response. 0:26 This tight feedback loop builds trust and empowers the user. 0:32 For example, when you upload a file, 0:36 the UI should immediately indicate the file upload is in progress. 0:39 And it's even better if it shows the upload status and 0:44 estimated time of completion. 0:47 Dan Safford, the author of the book, 0:50 Microinteractions, breaks them into four parts, 0:53 trigger, rules, feedback, and loops or modes. 0:58 The trigger is what activates the microinteraction, and 1:04 it can be user initiated or system initiated. 1:08 An example of a user initiated microinteraction 1:13 is this cute animation that appears in Yelp's iOS app. 1:17 As I pull to refresh the content, a cat launches off into space. 1:22 System initiated microinteractions trigger automatically under certain circumstances. 1:31 For instance, in Treehouse, 1:38 a notification appears to let you know about new courses and other news. 1:40 As for the rules, that's what happens after a trigger is initiated. 1:47 For instance, what happens if you watch Netflix for 1:52 a long time without interacting with the UI? 1:56 You get a prompt asking if you're still watching. 2:00 The feedback is what tells the user the system status. 2:04 It can be a visual treatment such as a hover effect or an animation. 2:08 Or it can be a message or vibration. 2:13 And then there are loops and modes. 2:16 This is what happens after the feedback is shown. 2:19 A loop is based on the link of the interaction. 2:22 Does the feedback automatically disappear after some time elapses, or 2:26 does the user need to dismiss it? 2:30 Is there an alarm sound that plays again if it's snoozed? 2:33 As for most, those are deviations from the standard interaction. 2:37 Think about how the notifications on your phone change 2:42 if it's in Do Not Disturb mode. 2:45 If you receive a call, your phone stays quiet and 2:47 the lock screen doesn't light up. 2:50 Another mode is based on time. 2:54 When you first start using a product, there may be more informational and 2:56 warning messages to help you onboard. 3:00 Once you interact more, perhaps those messages don't show anymore. 3:04 And maybe information about more advanced tips are triggered to show. 3:08 As a final note, microinteractions also are used to show brand personality and 3:14 spark the light even during typically mundane tasks. 3:20 When you like a tweet on Twitter, 3:25 the heart animates to show a joyous celebration. 3:27 This makes the act of liking feel extra rewarding. 3:31 That covers microinteractions. 3:35 Up next, we'll take a closer look at feedback. 3:38
You need to sign up for Treehouse in order to download course files.Sign up