The approach to design Firefox OS for Television is fundamentally different from phones or tablets. It requires repeated thinking of how experiences are structured and how to fulfill the needs of a wide range of users. This article will focus on the specifics of Firefox OS for Television's UI and motion design.
Animations are critical for Firefox OS on televisions. Televisions have a much larger screen that allows us to include fancier, more complex animations in our apps. However, larger the screen size, greater will be the challenge of keeping those animations smooth and maintaining the high performance . There are many ways to implement web animations, such as CSS transitions/animations , JavaScript-based animations (using requestAnimationFrame() , etc. You can find an analysis of the differences in performance between CSS- and JavaScript-based animations in CSS and JavaScript animation performance.
Firefox OS for Television was designed not only to simplify the UI, but also to optimize interaction and help users get the content they want immediately.
User interface design
First, let's discuss Firefox OS for Television's UI design.
Responsive
The controls are implemented using SVG and will scale to any screen size without the need of new bitmap graphics. The UI works across devices of all shapes and sizes, from small screen watches to giant screen TVs. The UI components are composed of simple flat circles. We minimized the use of gradients and reduced shadows as much as possible, but made sure that the controls can be identified distinctly.
Style
Why circles? We used the circular shape of the Firefox logo as a source of inspiration. Circles imply freedom of movement (they naturally roll). Shading and lines can enhance the circle's sense of movement. Circles are warm, humane, comforting and natural. They imply energy and power. Their unbroken completeness suggests infinity, unity, and harmony. You’ll see the circle used throughout the design of the components, especially in the animations.
Customizable
By changing the color, shape or style of an animation, the controls can be customized to suit any brand need. All controls are created as CSS components, allowing for effortless customization.
Design in Animations
Now let's have a look at the thought behind Firefox OS for TV mention design.
Groundwork
A great way to make your animations move in a more lively manner is to vary the rate of movement of the objects. Animation should imitate the world that we live in. So, it’s important to ensure that the pace of movement within your animations reflects the real world.
Motion easing will create a more natural look when applied to positions, rotations, deformations, or scale. This will add acceleration and deceleration to the motion, and can make the experience much more playful and delightful.
Responsive
Motion should be responsive and intuitive. A UI should react to a user's actions in a way that reassures them, rather than surprising or confusing them.
Personality
The most obvious principle is that any motion or animation should be of the highest standard possible. We animated and applied liquid motion to the main launchers (TV, Apps, Devices, and Dashboard), resulting in motion as the user selects each one of them. To users, this bespoke motion is truly delightful, allowing further engagement.
Orientation
Motion should help to ease the user through the experience. It should establish the “physical space” of the UI in a way ,like how objects appear on and off the screen, and establish the user’s focus. It should aid the flow of actions, giving clear guidance through the navigation model. Here, in our TV Home page design, we use scaled motion to guide users through selected objects, keeping the user orientated within the interaction path.
Less is more
Subtlety is key ,used vividly while designing UI motion — it should be used as an accent to the interaction design, helping the user stay focused, and not dominate the experience.
Note: For more information and guides about Firefox OS on TV, please refer to Firefox OS for TV.