Design

5 tips for better microinteractions in InVision Studio

by

on

View all posts

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.

Shape morphing

The key to totally streamlined animation between shapes in InVision Studio is designating them as linked layers in the Timeline editor. To do this:

  1. Duplicate the artboard with the shape and change its size
  2. 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.
InVision Studio microinteractions

Note that the ability to morph shapes is limited to simple properties like color and size.

InVision Studio microinteractions

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:

InVision Studio microinteractions

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:

InVision Studio microinteractions

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.

InVision Studio microinteractions

Using masks

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:


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?

Author

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.

Join over 3 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 3 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 3 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 3 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 3 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.

Follow us