Bringing Micro-Interaction & UI Animation to Life Through Developer–Designer Collaborations

We can create a delightful experience for users through micro-interaction and UI animation!

Hi, my name is Kyo Kim and I have been working as a product designer at Capital One for about two years. I’ve been using micro-interactions and animation throughout my work here, including on some mobile projects you might have used yourself. Before I began working in tech, my background was in film. In film, the focus is all about storytelling and editing to create a story that engages the audience; and much of that is accomplished through the use of transitions. I find those skills useful today as I create experiences and stories for digital tools.

When I’m designing, I think about factors that would give users a great, delightful experience with transitions and storytelling.

For a product to offer its users a delightful experience, it must offer more than aesthetically-pleasing design and impressive animation effects.

Regardless of whether the product is app-based, web-based, or any other form of digital product, it must draw the users in, be enjoyable for them to use, and give them the opportunity to engage with it in a direct and meaningful way.

Micro-interactions have the power to make the user experience delightful and satisfying in a way that many design elements cannot. Before we get into micro-interactions in the context of product design, let’s start with the fundamentals.

What are they? Why it is good for the user experience? Why should designers and developers incorporate them into their work? How can product design teams work together to improve them?

What are Micro-Interactions and Why Should We Care About Them?

What are micro-interactions or UI animations? People often refer to them as pretty animations, motion graphics, or moving image design. However, they are much more than that.

Unlike other forms of animation that exist solely to create the illusion of movement, micro-interactions directly engage the user, enabling him/her to accomplish a variety of tasks and interact with the product in an intuitive and effective way.

If we were to tie this back to principles of good systems design, this enhances and enables system feedback for the user. If done correctly, users will take micro-interactions as a message from the user that it (the system) is doing what it should be doing in response to what the user needs.

Even if you don’t know what micro-interactions are, you engage with them on a regular basis. Each time you use an app or web-based product to accomplish a particular task — whether it be reading the news, making a purchase, playing a game, creating a profile, or adjusting your settings and notification preferences — every individual action you make constitutes a micro-interaction. Micro-interactions are seamlessly woven into a product’s platform, making their functions transparent and accessible, effectively improving the user’s overall experience.

Although these “actions” take a number of different forms, some common examples include:

• When we “move” an item to a virtual shopping cart.
• When we select between two options on a CTA–like toggle button.
• When we “pull down” to refresh a news feed and see the latest update.
• When we “scroll up & down” in long feed or page.

When we design a micro-interaction, we need to examine whether it is truly necessary and vital to the user’s experience. Otherwise, it has the potential to distract the user form using your product effectively or become visual noise.

Principles of Micro-Interactions

There are three principles that I always consider when designing micro-interactions.

1. Continuity (and Subtlety)

Micro-interaction elements should be subtle so that when a user makes an action, there is a continuous flow in his/her experience. For example, if we are creating a scrolling animation in a long feed, the user should be able to focus on the contents of the page rather than the scrolling animation itself.

2. Predictability

Quality micro-interactions have an element of predictability that enables the user to navigate a product effectively and efficiently. The user can accurately predict the effects of their actions, feel comfortable reversing them, and confident in their ability to perform as expected.

3. Transformability

Fluid transitions between multiple screens and well-defined transformations of the various objects within them are key aspects of quality micro-interactions. They enable the user to develop an intuitive understanding of the relationships between screens and the elements within them.

When designed following these principles, micro-interactions provide context for a design by helping users know how to interact with it. A micro-interaction is a momentary event that completes a single task. Arguably the smallest interactive elements of a website or app design, micro-interactions are some of the most vital since they serve a variety of core functions.

Triggers (tap, swipe, drag, etc) initiate every one of the actions listed in the section above (continuity, predictability and transformability). The user performs an action on a website or app to start the process (even if it continues after the initial step). This follows a pattern of call-to-action from a user, rules for engagement as determined by the interface (what will happen and how), feedback from the user (did it work or not), and patterns or loops (does the action happen once or repeat on a schedule).

-How Developers and Designers Can Work Together to Bring Micro-Interactions to Life

As you can see, micro-interactions have a critical role in shaping user experience. Because of this, they’ve become an increasingly important part of my work as a product designer. Having worked on various projects across multiple platforms and uses, I have noticed that not everyone recognizes the value of these elements or how to create them effectively. More importantly, often team members don’t know how to express their ideas to one another regarding designing transitions and micro-interactions.

I realized it all boiled down to communication — something was lost in translation when I explained my design ideas to my developers. You may have heard this quote from Confucius before, “Tell me, and I will forget. Show me, and I may remember. Involve me, and I will understand.” And it is through involvement where we, as a team of designers and developers, create great experiences.

First, let’s run through a quick description of the design process…

In an ideal situation, when a designer comes up with an idea for a micro-interaction, the traditional workflow proceeds in the following order:

1. The designer develops the visual elements and animation effects necessary to actualize his/her idea.
2. The designer presents the final model and its underlying concepts to the other team members.

But what if the design process doesn’t play out in practice like it does in theory? What if we’re presenting a storyboard or an incomplete model? Or someone else on the team is designing the model?

When this happens, problems are likely to arise in presentation or development. These problems typically fall into one of three categories:

1. The animation idea is not communicated clearly enough.

If you’re trying to describe an animation concept with words or still images, you may see grimaces on the faces of your audience. This means they are trying their best to understand your idea, but they’re not really getting it. Even if they understand the basic concept, the picture they’ve conjured in their minds is probably inconsistent with what you’re envisioning. Because people tend to perceive moving images, still images, and verbal descriptions in different ways, relying on words or images to convey animation idea creates room for miscommunication, and often unnecessary tension among the members of your team.

2. The designer doesn’t know if the animation is working well until they check and test the developer’s prototype.

When designers don’t have prototyping skills, they’re limited to pitching their ideas to developers via a storyboard. Even if a designer strongly believes in a micro-interaction model, he or she cannot say whether it is working to its full potential until the developer completes the prototype. This is problematic for a number of reasons, the primary one being the high likelihood of miscommunication that such an approach introduces into the process. In addition, it opens the door to doubt from members of the team, and leads to questions about the feasibility of the idea. This can be costly in terms of time from a development perspective.

3. The designer and developer are not on the same page

When designers make UI animations or micro-interactions they try to include complex design details like custom eases, scripts, expressions, and other effects. When presenting these ideas to developers, they might hear, “It’s not possible to make this in our timeline,” or “We can’t make it exactly the same but we’ll try.” At this point, they might attempt to hash out the various details and technical issues with the developers. However, these discussions can end up being fruitless if the designer does not have a working knowledge of the tools or languages developers use. These factors should be take into consideration when formulating and discussing ideas so the micro-interactions are compatible with the developers’ default settings, increasing the likelihood that the final product will meet the designer’s (and everyone else’s) standards.

What Are Some Solutions to These Issues?

While all designers and developers have their own way of communicating about their animation concepts, I want to share one of the methods my team is using. This method has been quite successful and has resulted in fewer meetings and has drastically improved our team’s communication.

Now, we’re no longer arguing about whether or not to include micro-interactions, we’re exploring ways to make them even better!

Skeleton Interaction Concept & Interaction Guide

“The skeleton interaction concept and interaction guide leaves no room for interpretation which enables me to start work immediately and be confident in matching the designer’s vision.” –Jesse M Majcher / Lead IOS engineer

The standard process we use to communicate about UX designs doesn’t translate well for UI animations. First off, UX designs and flows are still designed screen by screen and are static. UI animations are flows in themselves, they are fluid, and based on timing. When we create a static design, we make a rough wireframe so we can understand the idea and discuss the flow. This allows us to easily revise and fine-tune the design before we create the final version. Once every team member agrees that the design is ready to hand off to the developers, the designer provides the developer with a style-guide and a red-line containing details, specs, and other important information about the design.

If we used a similar process for animations, our process might be much faster and better.

1. Skeleton Interaction Concept(Motion study)

A skeleton interaction concept is similar to the wireframe you would create when designing flow, the main difference is that this a playable/clickable prototype demo. If we bring this to a meeting, our team members won’t have to use their imaginations to understand the concept. The designer can use the playable/clickable demo or static story board to directly reference the visual and animation elements of the design. This will give everyone a clear and accurate sense of his/her idea. In turn, the partners can deliver feedback that is highly specific and, thus, highly valuable to the designer. At the same time, the product management and development teams will gain information that will enable them to improve their internal communications and time estimations for the project.

2. Interaction Guide

Once the team agrees on the concept, the designer creates the interaction guide. This is similar to a style guide in that it outlines the position, rotation, scale, and timing of the elements. We can add every detail about the animations, which will help our partners understand it clearly. When the designer shows the interaction guide to their partners, he or she can be even clearer about the movement and measurement of the animation concept. This is very helpful for finalizing the work through collaboration. It also helps the designers be more thoughtful in their animation/micro-interaction design.

3. Prototyping Skills for Designers

In my experience, to set yourself up for a successful design collaboration, the product designer should be the driver of the animation, and the developer should provide the support. This means that the product designer bears the bulk of the responsibility in the partnership. Not only are they responsible for explaining their ideas very clearly, they must show that they are feasible by providing proof of concept. It also means that product designers need to be capable of making their own animation prototypes. If a product designer can create a prototype and present it during a meeting, the discussion that follows will be more clear and less time-consuming, leading to a more effective communication process overall.

So, what kinds of prototyping tools should designers familiarize themselves with? There are many tools out there but not everyone knows what works best for specific micro-interaction tasks. Here are my recommendations based on my personal experience designing these elements.

If you’re familiar with coding:

• Mobile: Xcode, Android studio
• Mobile or Web: Framer
• Web: CSS animation

If you want to design an interaction between a screen-like push and a module:

• Invision and Marbel

If you want to create more detailed interactions:

• Principle, Adobe CC, origami Studio and Pixate

If you want to create detailed interactions + animation:

• After Effects

Currently, I’m a fan of using After Effect for my prototyping. Even if it’s not interactive (i.e. clickable), it’s the perfect way to present an animation concept. Also, there is no limitation of effect and you are able to control detail movement. It’s even possible to use it to make an interaction in 3D space, like for AR and VR.

Delightful Team Interactions Make for Delightful Products

Micro-interactions have become an increasingly important — if not critical — element of web, mobile design, and more. Even if both designers and developers recognize the value of UI animations and are motivated to create them, they often struggle to collaborate in an efficient, effective way. It takes a strong team to ship great micro-interactions on time; such teams require clear delineation of roles, effective communication skills, and the right prototyping tools for the tasks at hand.

To set your micro-interactions up for success, make sure your team possesses these characteristics and engages with these processes. And good luck with your own micro-interaction journey!

DISCLOSURE STATEMENT: These opinions are those of the author. Unless noted otherwise in this post, Capital One is not affiliated with, nor is it endorsed by, any of the companies mentioned. All trademarks and other intellectual property used or displayed are the ownership of their respective owners. This article is © 2017 Capital One.

For more on APIs, open source, community events, and developer culture at Capital One, visit DevExchange, our one-stop developer portal: developer.capitalone.com.