As UI elements of websites and apps become more unified, it’s the attention to detail that differentiates the best from the rest. One of the best places to see this in action is microinteractions, which make user actions more rewarding, and user experience A+.
What are microinteractions?
Microinteractions are small animations usually taking place on one specific UI element, such as a button or input field. Their purpose is not just to please users, but also to add a meaning and immediate feedback from UI. Take this microinteraction by HoYun Son as an example:
We can break it down into some stages crucial for this kind of animations:
- Trigger that initiates the action. In this case, the user clicks a button.
- Immediate feedback, a pleasant way to communicating the loading state.
- Result, giving a clear signal that the action is being performed as expected, and providing instant gratification for the user.
Moreover, it encourages the user to interact with the other UI elements, and is intended to lead to more shares, comments, and other valuable actions.
Want to learn more about how to use Studio? Check out these walkthroughs and videos.
Below are a few tips for creating microinteractions, as well as an introductory video guide for animations in InVision Studio.
The key to totally streamlined animation between shapes in InVision Studio is designating them as linked layers in the Timeline editor. To do this:
- Duplicate the artboard with the shape and change its size
- Then, create the Motion transition. If you keep layer naming consistent, they should be automatically linked. If not, shift-click to select layers,, and then click on the Link Layers button.
Note that the ability to morph shapes is limited to simple properties like color and size.
Using the in-between screens
Keep in mind that all animations in Studio take place between two or more artboards. If you want to create a transition that has three stages, you’ll use three artboards:
In this case, I want the middle artboard to transition automatically into the third one after a short period of time. To accomplish that, let’s use the Timer interaction with the following settings:
The Timer lets you set the Timeout, which is the time of inactivity for that artboard. Bear in mind that you don’t have to include animation time in this delay; it will start right after the animation has been played. In this particular case, the animation will play for 0.5 sec, after which the artboard will pause for another 0.6 sec.
To create some more sophisticated microinteractions, you can use masks. For example, you can mask out the vertical text field with numbers ranging 0-9 and change the Y position across the artboards to create the effect like this:
— Dann ? (@DannPetty) January 30, 2018
Easing and timing
In order for your animations to look best, it’s important to set the timing just right. For most of my microinteractions, I use timing ranging from .3 to .5 seconds; quick microinteractions like button and icon animations seem to feel right at .3, while larger blocks of the layout looks awesome at around the .5 mark.
In Studio, the default setting for animations is “ease-in-out.” The great thing, though, is you can set variable easing for not only single animations, but also to specific animation properties such as X, Y or Height. by clicking on the little arrows next to the layer name in Timeline Editor.
Preview in slow motion
In InVision Studio, you can easily preview the animations in slow motion as well as loop the playback. You’ll find the playback controls above the Timeline while editing animations. Another way I often use to playback in faux slo-mo is scrubbing the playhead over the timeline.
My advice is to preview animations in slow motion only after you set the correct timing. We tend to tweak animations too much while in slow motion, even thoughit’s difficult to see the results in the actual microinteraction. As you’ll find out, trying to be perfect doesn’t always give you the best result!
I hope these tips will help you create better microinteractions using InVision Studio! Want to learn more? Check out a 20-minute video I’ve recorded with step-by-step instructions.
If you want to learn InVision Studio from scratch, check out the three-hour video course I’ve created for learnux.io.
Want to learn more about Studio?
by Greg Rog
Greg’s work is all about design, coding and education. For over 10 years he’s been a professional designer, design lead and UX consultant for companies such as Microsoft or Google. He works closely with Adobe as Community Professional. He created biggest local website with video tutorials on code, design and more with over 100.000 clients. He also runs a software house and a training facility, speaks on design conferences and more. He’s curious, passionate and loves sharing knowledge.