Micro-Interactions in TV: The Details Are The Design

Shiyu Zhuang
Shiyu Zhuang
micro-interactions_thumbnail

Micro-interactions are not only details—they are the design.

When a user launches a streaming service on their device of choice, they’re looking to either unwind or get moving (e.g. Peloton). In both cases, it’s fundamental to create simple, clear, and highly entertaining interfaces to pique interest and keep engagement. That’s where micro-interactions come in.

WHAT ARE MICRO-INTERACTIONS?

Micro-interactions are “the functional, interactive details of a product”. They can be as obvious as a loading animation or as subtle as a 100ms page fade transition. Micro-interactions might seem insignificant, but they can be the reason why a user stays on or abandons an app.

“The best products do two things well: features and details. Features are what draw people to your product. Details are what keep them there. And details are what actually make our app stand out from our competition.”Nick Babich

For example, a splash screen triggers users’ curiosity to explore the app. Button animations make it obvious that their action is successful. Page transitions provide clear communications about state changes. And dynamic messages guide the eyes and inform with little to no text.

Micro-interactions keep people engaged, improve customer loyalty, and ultimately help services scale.

Imagine selecting a piece of content to watch only to be welcomed by a buffering wheel slowly turning away. Frustration would ensue. An animated loader, on the other hand, can entertain users during the page loading process to reduce their perception of wait time. As a result, users will be willing to wait for longer with more patience. This is what’s known as an “activity indicator”:

“Activity indicators reassure the user that the system has not crashed; indicate approximately how long the user can be expected to wait; and provide something for the user to look at, thus making the wait less painful.”Jakob Nielsen

micro-interactions_loader_1

micro-interactions_loader_2

In short, micro-interactions enrich the user viewing experience, enhance engagement, and improve usability.

HOW DO WE CREATE MICRO-INTERACTIONS WITH YOU.I ENGINE ONE?

You.i Engine One – After Effects Plugin

Motion designers who have access to You.i Engine One can use the SDK’s built-in Adobe After Effects (AE) plugin to create interactions.

With the AE plug-in, designers can create interface interactions with more autonomy.

  • They can use compositions, keyframes, markers, and curves that they are familiar with.
  • See the interaction designs immediately before the feature is complete.
  • Simulate behaviours on different devices, like Touch on tablets, Hover with a remote, and Focus on TVs.
  • Dynamically change text and images to see what the interface differences are.
  • Preview interfaces and resize the window to see the responsiveness of the design.
  • Debug margins, sizes and more using the debug panel in the preview tool.

And when developers take the AE file over, all they have to do is find the animation and hook it up with code. You.i Engine One boosts efficiency for both designers and developers.

If you want to know more about You.i Engine One, please check out the rest of our site for more information.

WHEN DO WE USE MICRO-INTERACTIONS?

A user-friendly interface should offer micro-interactions at the right time.

When is that right time? Jakob Nielsen’s article, 10 Usability Heuristics for User Interface Design, details the key principles of interface usability. Here is an in-depth review of the 7 most common circumstances in which we create micro-interactions with our engine.

1. To improve the visibility of system status

“The system should always keep users informed about what is going on, through appropriate feedback in a reasonable time.”

Good feedback can tie a certain personality to a design. This will lead to unique and pleasant user experiences. Take a toggle button for example. Without micro-interactions, toggling the parental control on and off seems jarring and abrupt. By adding a simple left-to-right animation and gradient transition, micro-interactions make the action obvious.

micro-interactions_toggle_1

No Transition

micro-interactions_toggle_2

With Transition

With You.i Engine One, designers can assign animations using keyframes under markers for toggle button containers. Markers include FocusIn, Press, Release, Toggle-On, Toggle-Off, FocusOut, Disabled and so on. Afterwards, designers can preview and interact with their animations directly in After Effects.

micro-interactions_after effects_markers

After Effects Markers for Buttons

micro-interactions_after effects_keyframes

Curves for Keyframes

2. To help match between system and the real world

An interface should be intuitive enough that a user can navigate it with real-world logic. In other words, the experience they gained from everyday life.

In the micro-interaction below, saving a piece of content to a watchlist draws parallels to inserting something valuable into a safe. The content is inserted into the video camera which has a secure, block shape. The gradient color change shows that the content is saved or “locked” for future use. The interaction works because users can draw a comparison from real-life.

micro-interactions_watchlist

Saved to Watchlist

3. To help streamline consistency and standards

Consistent design with micro-interactions is a significant contributor to corporate branding. It acts like a glue to stick together features across all other platforms; mobile devices, TVs, gaming consoles, desktops, etc. If the same service is deployed on multiple platforms, a button should have the same action animations (press, toggle, etc.) regardless of the device. This helps users connect the corporate brand to the animation.

micro-interactions_consistency_1

Default Button

micro-interactions_consistency_2

Icon Button

4. To help form recognition rather than recall

Micro-interactions can reduce users’ memory load by providing context information. For example, transition animations between pages give users context that they are navigating away from one page to another.

“it smoothly transports users between navigational contexts and explains changes on a screen by creating visual connections between transition states. Avoid a surprising transition by helping users comprehend the change that has just happened in the page’s layout.”Nick Babich

micro-interactions_page transition_1

No Transition

micro-interactions_page transition_2

With Transition

5. To help prevent errors

Micro-interactions can guide users and prevent errors from happening. A perfect time to implement interactions would be during onboarding when users are introduced to an app for the first time and hence more susceptible to making mistakes.

micro-interactions_error

6. To help improve aesthetic and achieve a minimalist design

Micro-interactions can delight users and convey branding. For example, users love the animations of the ‘Like’ carousel on Facebook so much, it has become a part of the company’s overall branding.

Proper interactions are intuitive. They can say a lot with minimal effort. The gif below shows how to achieve minimalist design when there is a new episode of a saved show available. The micro-interaction informs users about the update without having to include any text.

micro-interactions_new episode

New Episode Notification

7. To help users recognize, diagnose, and recover from errors

Micro-interactions can help users acknowledge what is wrong and how to fix it. The example below shows micro-interactions for an unsuccessful login attempt. It provides instant visual cues and text to inform and guide users to finish the validation process successfully.

micro-interactions_login

CONCLUSION

When discussing interface design, micro-interactions can be seen as an unnecessary expense yet they play a significant role in the success of a streaming app. Micro-interactions can bring user interfaces to life. They communicate state changes to users with clear and intuitive animations. They help improve usability by reducing errors and frustration. And they enrich brand experiences, which in turn increases adoption and retention.

With so many streaming apps in-market, great UX design is a vital differentiator for product owners. You.i Engine One empowers designers to create interactive interfaces with freedom and greater efficiency. If you’re looking to separate your service from the pack with unmatched user experiences, request a one-on-one demo with a You.i Engine One expert.

 

For Shiyu’s follow-up blog on best practices when designing micro-interactions, click here.

Here’s something similar we think you’ll enjoy.