MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Firefox OS TV User Interface & Animation Design

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.

Positioning / Scaling / Rotating

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.

Document Tags and Contributors

Tags: 
 Contributors to this page: chrisdavidmills, PushpitaPikuDey, ZZQ1994, MashKao
 Last updated by: chrisdavidmills,