Micro-Interactions in TV: Best Practices
In an earlier post, I discussed what micro-interactions are, how we create them with You.i Engine One, and when to use them. Now, I want to discuss what are the best practices when designing them. There are several factors and principles that you can follow.
Factors to Consider
To design a micro-interaction, designers need to take 4 factors into consideration. They are triggers, rules, feedback, and loops and modes.
“These four parts—the trigger that initiates the micro-interaction, the rules that determine how the micro-interaction works, the feedback that illuminates the rules, and loops and modes, the meta-rules that affect the micro-interaction—are a way to design and dissect micro-interactions.” – Dan Saffer
Triggers initiate micro-interactions. There are two types of triggers:
- User-initiated: Users have to take actions to trigger it, like tapping a screen or scrolling a page. Take a button, for example, there are a lot of triggers involved: Focus, Hover, Press, Toggle, Release, etc.
- System-initiated: Apps trigger micro-interactions automatically for users when certain qualifications are met. Notifications that pop up when there is a new software update available is an example of a system-initiated trigger.
Rules are the conditions micro-interactions have to follow. For example, if a user is on the Hulu homepage and they want to navigate to the “movies” page, the page transition should only play when he/she clicks the “movies” tab.
After users interact with a certain item, there needs to be visual feedback. This is to inform users that their action is successful. For instance, scaling the shape of a button down and darkening its base color can indicate it is being pressed.
4. Loops and Modes
Some micro-interactions play in loops. For example, loaders need to keep playing until the loading is over. A button press animation only needs to work once when pressed, and again on release.
Principles to Remember
Simple, Purposeful, Consistent: Micro-interactions are best when they are simple and quick. They need to have a purpose. Micro-interactions are supposed to delight users, not annoy them. Don’t over do or overuse micro-interactions. Pay extra attention to their consistency across different pages and platforms.
Different Interaction Models: It is important to keep in mind that the use of micro-interactions (type, timing, transform value, etc.) needs to change across platforms. Micro-interactions for TV apps need to be more simple and smooth because the screen is larger. Imagine a user darting their eyes across a large piece of real estate. The simple act of interacting with a UI would become exhausting. Micro-interactions for mobile need to be faster because of the small screen sizes. Designers also need to take micro-interactions for gestures (e.g. swipe) into account.
Steps to get buy-in from all parties
Product owners need to understand the value of micro-interactions in order to invest in their development. It is important that designers have a seat at the table when charting the future of a product. Designers need to talk to all stakeholders to reach consensus through four steps:
1. Concept Designs
Motion designers need to learn user behaviours and understand information architecture. Then, they need to come up with some micro-interaction ideas to improve user experience. Select 2-3 micro-interactions to start and go from there.
2. Communication between designers and developers
Design teams need to talk with developers to learn technical capabilities and constraints. With that information, they can make adjustments to the micro-interaction concepts and ensure the best possible end product.
3. Communication with all stakeholders
It’s imperative every product organization has a design lead that acts as the voice for UX. Design leads must organize meetings with primary stakeholders, during which they need to agree on micro-interactions and which concepts to use.
Once designers iterate and finish a selected design, they need to collaborate with developers to create, review, and iterate on the chosen solution.
Steps to create micro-interactions using You.i Engine One
Visual and interaction designers use prototyping tools to create low- and high-fidelity mockups for all screens. Areas that require state changes need to be highlighted.
Motion designers need to go through the mockups to understand how the app will flow. Then, design micro-interactions for indicating status changes.
Motion designers will use You.i Engine One’s Adobe After Effects Plugin to bring the screens to life. Layouts will be merged with micro-interactions to replicate what the end-user will experience. You.i Engine One enables designers to preview all micro-interactions in After Effects. For example, they can test how responsive the interface is by dragging the preview window to match different form factors.
Note: Although You.i Engine One is a robust design tool for OTT development, it still requires designers and developers to communicate in certain scenarios to achieve best practices. Take Apple TV and Roku for instance. Both platforms share the same aspect ratio yet performance on Roku is significantly lower because of its hardware. The experience on Apple TV will not be identical to that of Roku. It’s just a reality within our industry.
For more information, check out our Key Considerations When Developing for Multiscreen.
Once the interface(s) are where they need to be, they can be exported from design to code using You.i Engine One’s built-in exporter. Developers will then integrate the animations into business logic using either C++ or React Native.
Proper micro-interaction design can engage users to stay in an app or push them away. The devil is in the detail. So design with great care. Make sure to consider all the factors and different interaction models, and talk to all primary stakeholders and ensure buy-in from all parties. And always create simple and consistent micro-interactions with purpose.