This article explores the topic of UX design for Firefox OS on TVs, including details of general insights into how the UX needs to differ compared to other platforms (e.g. smartphones), the card metaphor that used on the UI, and other UI aspects such as the home screen and apps.
Introduction
The user experience of Firefox OS on the television platform comes from Mozilla's vision of the Connected Home. This requires a departure from our smart phone interface, with main focuses including ease of access, simplicity, and scalability across a variety of different sized displays.
The television’s display comes with its challenges and specific use cases; it will always be found in a fixed location like a living room or meeting space. Due to the large display size, content will also be displayed at a distance, impacting legibility. As with all technology, the television has evolved beyond just entertainment to include powerful communication tools — the user now demands the television to act more like an information hub.
Through our research we have discovered further insights into user usage:
- A television can be used to display content from various input sources (HDMI, DLNA, cable, SAMBA, etc.), however each user’s input source priority is different.
- A user wants to spend time on the content, not within the UI, so quick global navigation trumps complexity or added functions.
- The importance of applications on smart televisions is growing rapidly, so it's vital to give equal (or balanced) weight to television channels, apps, and input devices in the UI hierarchy.
Card metaphor
From our research insights we realized that a flat and single pathed UI would satisfy our users’ needs — this requirement lent itself well to a card metaphor. Shown in the diagram below, the cards are aligned in a single file. Each card represents an entry point to content or service. The default cards equate to the four basic functions of a smart television:
- TV: your live television feed.
- Apps
- Devices: anything connected to the television.
- Dashboard: an overview of all your content.
Many of the basic functions are actually aggregators of numerous sub-items, for example in the case of the Live TV card there could be more than 200 channels. To differentiate from regular cards, we called these special aggregator cards decks.
A user can easily pick a sub-item card and pin it outside of a deck, allowing quick, easy access to favourites. In the diagrams below, we see a user pinning various cards outside of their decks to the Home page. This could be any card from a TV channel to an input source — as soon as they are pinned to the Home page they will inherit the same interaction hierarchy as the decks they were pinned from.
First, a live TV card (channel 32) being pinned outside of a the TV deck:
Next, an input source (HDMI 3) being pinned outside of the Devices deck:
Home
The main page of the television UI is called Home. The user can easily access it by pressing the Home button on their remote control.
The following image shows a user customized version of Home: note that we have also added a foldering method to better organize pinned cards:
Dashboard
The Dashboard is a specially designed app, which comes as one of the default cards on the Home page. The function of the Dashboard is to gather all the information the user needs and display it in one central place.
The UI has been optimized for a remote directional pad where tapping:
- Right takes you to Notification
- Left takes you to upcoming TV shows
- Up displays music playback and controls
- Down displays the world clock
Apps and Devices
When a user downloads or installs an application it will appear in the Apps deck initially. The user can then choose to pin it to the Home page if desired. The Devices deck functions in the same way where any new device will remain within this deck until the user explicitly pins it to the Home page.
The Apps desk looks like so:
And the Devices deck:
