Firefox OS TV User Interface & Animation Design

sgao

Introduction

The approach to designing Firefox OS for Television is fundamentally different from phones or tablets. It requires rethinking of how experiences are structured and how to fulfill the needs of a wide range of uses. Firefox OS for Television was designed not only to simplify the UI, but also to optimize interaction, and to help users get the content they want immediately. Below is the detailed information about the concept of our visual and motion designs.

01_Home

User Interface Design

Responsive

The controls are designed in code (SVG) and will scale to any screen size without the need for new bitmap graphics. The UI is responsive, it works across devices of all shapes and sizes, from small screen watches to giant screen TVs. The UI components are created in SVG by using 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 a circle? We chose to use the circular shape of our Firefox logo as a source of inspiration. Circles have free movement (they naturally roll), shading and lines can enhance this sense of movement within the circle. Circles are warm, humane, comforting and natural. Their movement suggest energy and power. Their completeness suggests infinity, unity, and harmony. You’ll see the circle used throughout the designs of the components, especially in the animations.

Customizable

By changing a color, shape or style of an animation, the controls can be customized to suit any brand need. All controls are all well designed and created as CSS components allowing for effortless customization.

Design in Animations

Groundwork

A great way to make your animations move in a more lifelike manner is to vary the rate at which the object moves. Animation should imitate the world that we live in. So, it’s important to ensure that the pace of movements within your animations, making sure they reflect the real world.

Positioning / Scaling / Rotating

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. It should react in a way that reassures the user, rather than surprises or confuses them. The reaction of the UI, to a users actions, should be corresponding and comprehensible.

06_Delete_card

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 for further engagement.

07_Intro_cards

Orientation

Motion should help ease the user through the experience. It should establish the “physical space” of the UI by the way objects appear on and off the screen, or establish the user’s focus. It should aid the flow of actions, giving clear guidance through the navigation model. Here in our TV home design, we used scaled motion to guide the users through which objects are selected, and keep the user orientated within the interaction path.

08_Select_cards

Less is more

Subtlety is key when designing the motion to UI. Motion should be used to help the user stay focused, therefore restraint is needed as the design is used as an accent to the interaction design and should not dominate the experience.

For more information and guides about Firefox OS TV, please refer to the session TVs and connected devices and find other links for relevant articles below.

I hope you enjoyed this post about how we designed Firefox OS TV. If you have any feedback or ideas to help Firefox OS Design Team improve ourselves, please leave a comment.

─ By Scott Wu, Firefox OS UX designer

 

Firefox OS for TV UX Overview

sgao

2

Introduction

The user experience of Firefox OS on the television platform comes from Mozilla’s vision of the Connected Home. This departure from our smart phone interface focuses on ease of access, simplicity but most of all scalability across a variety of 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 its large size content will also displayed at a distance which impacts legibility of the content.  As with all technology, the television has evolved beyond just entertainment to now include powerful communication tools, the user now demands the television to act more like an information hub. Through our research we have discovered even more 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 its vital to frame the UI hierarchy giving equal (or balanced) weight to television channels, apps and input devices.

 

Card Metaphor

From our research insights we realized that a flat and single pathed UI will satisfy our users’ needs, this requirement translated well with the use of 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 set of cards are comprised of 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, as 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.

Default set of cards

A user can easily pick a sub-item card and pin it outside of a deck, this card can then be easily and quickly accessed. 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.

A live TV card (channel 32) is being pinned outside of a the TV deck

An input source (HDMI 3) is being pinned out of a 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.

HOME

A user customized version of HOME, we have also added a foldering method to better organize pinned cards.

 

Dashboard

The DASHBOARD is a specially designed app and comes as one of the default cards on the HOME page. The function of DASHBOARD is to gather all the information that user is in need of and to 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

DASHBOARD

 

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 deck

Devices deck

For more information and guides about Firefox OS TV, please refer to the session TVs and connected devices and find links for relevant articles below.

Hope you enjoyed this post about how we designed Firefox OS TV. If you have any feedback or ideas to help Firefox OS Design Team improve ourselves, please leave a comment.

─ By Hunter Luo, Firefox OS UX designer

 

Task Continuity

Gemma Petrie

Research and blog post by Gemma Petrie & Bill Selman

Task Continuity ResearchFor many consumers, software and hardware choices are increasingly becoming choices between incompatible brand ecosystems. In today’s marketplace, a consumer’s smartphone choice is likely to have a far-reaching influence on options for everything from file storage to wearable technology. With each app purchase or third-party service sign-up, consumers become further invested in a closed brand ecosystem. As start-ups are acquired or privacy standards change, consumers may become trapped in an ecosystem that no longer meets their needs.

Mozilla strives to create competitive products and services built with open source technologies, that protect users from vendor lock-in, and that address user needs. We believe supporting these values is not only good for consumers, but is also good for our industry. In February, we conducted a contextual user research study on multi-device task continuity. This user research will help Mozilla design current and future products and services to support users’ behaviors and mental models. This research builds on our our Save, Share, Revisit study conducted earlier this year.

TC Overview

Research Questions

  • Tasks: What tasks require task continuity?
  • Patterns: What are common task continuity strategies, patterns, and work-arounds? Why do they occur?
  • Behaviors: What are current and emergent behaviors related to task continuity activities?
  • Devices: What constitutes a unified experience across devices? Do some devices perform specialized tasks?
  • Context: Given that previous research has focused primarily on work and productivity environments, what do home and work boundaries look like for task continuity? 1
  • Mental Models: What are the expectations, metaphors, and vocabularies in use for task continuity?
  • Tools: How effectively do current features and tools meet continuity needs? Why do challenges occur?

Methodology

The Mozilla User Research team conducted three weeks of fieldwork in four cities: Columbus, OH; Las Vegas, NV; Nashville, TN; Rochester, NY. We recruited a demographically diverse group of 16 participants. Each participant invited members of their household to participate in the research, giving us 43 total participants between the ages of 7 and 52. All 16 interviews took place in the participants’ homes. In addition to our primary research questions, the semi-structured interviews explored daily life, devices, and integration points. Further, participants provided home tours and engaged in multi-device workflow future thinking exercises.

Device Ecosystems

If you are reading this blog post, there is probably a good chance that you work in the tech or design industry. You likely have fairly advanced technology usage compared to the average person in the United States. Your personal device and service ecosystem might look something like this:

The device and service ecosystem for the average person in the United States includes fewer elements and fewer connection points. For example, here is the ecosystem map of one of the 16 participant groups in our study:

As you can see in these diagrams, the average user has single points of connection between his primary device (MacBook Pro) and all the other devices and services he uses. The advanced user, on the other hand, is utilizing various tools to move content between multiple devices, contexts, and services.

The Task Continuity Model

TC Model

Based on our research, we developed a general model of what the task continuity process looks like for our participants. Task continuity is a behavior cycle with three distinct stages: Discover, Hold/Push, and Recover.

The Discover stage of the task continuity cycle includes tasks or content in an evaluative state. At this stage, the user decides whether or not to (actively or passively) do something with the content.

The Hold/Push stage of the cycle describes the task continuity-enabling action taken by the user. In this stage, users may:

  • Passively hold tasks/content (e.g. By leaving a tab open)
  • Actively hold tasks/content (e.g. By emailing it to themselves)
  • Push tasks/content to others by sharing it (e.g. Posting it on Facebook)

The user may also set a reminder to return to the task/content at this stage (e.g. Set an alarm to call the salon when they open). It is possible for a single action to bridge more than one Hold/Push state (e.g. Re-pinning content on Pinterest shares it with followers and saves it to a board). It is also possible that a user will take multiple actions on the same task/content (e.g. Emailing a news article to myself and a friend).

In the Recover stage of the task continuity cycle, the user is reminded of the task/content (e.g. By seeing an open tab) or recalls the task/content (e.g. Through contextual cues). Relying on memory was one of the most common recovery methods we observed. In order to fully recover the task/content, the user may need to perform additional actions like following a link or reconstructing an activity path.

Once the task/content is recovered, the user is able to continue the task in the Resume stage. Here, the user is able to complete the task or postpone it by re-entering the task continuity cycle.

TC Example

The Task Continuity Model allows us to clearly map the steps involved in a specific task continuity activity. To illustrate, one of our participants discovered a video that he wanted to watch at a different time and on a different device. Here are the actions he performed to achieve this:

    1. Discover: Finds URL for video he wants to watch later.
    2. Push/Hold: Copies URL to email. Sends email reminder to himself.
    3. Recover: That evening, while browsing on his iPad, recalls that he wanted to watch a video from earlier in the day.
    4. Resume: Scans email for reminder message, locates it. Copies URL to iMessage.
    5. Push/Hold: Sends iMessage from tablet.
    6. Recover: On MacMini-connected TV, receives iMessage, copies URL from iMessage to browser.

Research Findings

A selection of our research findings that we believe are the most relevant to UX professionals and engineers:

  • Ad Hoc Workflows: Participants used small, immediate tools such as text messages and screenshots to string together larger tasks.
  • Satisficed: Participants were generally satisfied with their current task continuity workflows, even when they knew they weren’t efficient.
  • Task Continuity Tools: Text messages, screenshots, and email were the primary task continuity strategies.
  • Screenshots: Participants tended to use screenshots rather than texting links. People were performing complex tasks using screenshots (like managing employee schedules).
  • Re-Searching: People tend to re-initiate a search to pull up content on a different device rather than pass it through email, text, or some other method.
  • Third-Party Services: While tools like Evernote may be popular in technology circles, they are essentially unknown outside them.
  • Cloud Storage: Most participants had been exposed to cloud storage services, often through work, but their personal use was usually limited to free accounts.
  • Organization is Work: Most participants avoid task continuity actions that require organization. Instead, participants relied on recovery techniques such as memory, scanning lists, and searching to recover tasks.
  • Barriers: Participants choose a path of least resistance to complete a task. When confronted by a barrier, most participants will detour; sometimes those detours become a journey away from a product or service. Barriers we observed included authentication, forced organization, and overzealous privacy and security measures.

Further Research

This research provided a valuable foundation and framework for our understanding of task continuity, but it is important to acknowledge that it was conducted only in the United States. We were particularly surprised by the reliance on texting and screenshots and believe it is important to explore this behavior in areas where carrier-based SMS programs are less popular. We plan to build upon these findings by expanding this research program to Asia in May 2015.

References:

Save, Share, Revisit

Gemma Petrie

Save Share RevisitIn early January, we conducted user research to refresh our understanding of how people save, share, and revisit content with the goal of building our knowledge base for a larger contextual research project on multi-device task continuity that is currently being conducted. (More on that in a future blog post.)

Methodology

We recruited eight participants to engage in a three-day diary study to document their save, share, and revisiting behavior. Instructions were emailed to participants each morning based on daily themes: Saving, Sharing, Retrieving. Each evening, the participants were prompted to submit their diary entries and answer a few additional questions. Based on these responses, half of the participants were selected to participate in an additional 60-minute video interview with the researcher to explore these themes in greater detail.

Primary Findings

  1. Most people are using low-tech systems to save, share, and manage their content. There is a tendency in tech circles to overestimate the popularity of services like Pocket and Evernote, when in fact the most competitive task continuity resources are basic services like email, local storage, text messages, and screenshots.
  2. Most people are aware that their personal system isn’t perfect, and in fact often cumbersome to maintain, but other solutions are perceived as some combination of absent, confusing, or limited by storage/price.

SavePeople tend to save content to their devices, rather than to third-party systems. Some of the participants had tried services like Dropbox or iCloud, but abandoned them when they ran out of free storage space. Utilizing free local storage means people always know where to find things. If saving locally isn’t possible, people will often take a screenshot of the content or send it to their own email account in order to save it.

“If there’s a way I can physically save the article I would save it to my device or SIM card. If I can’t do that, I will take a screenshot of the articles and later go back and view them” – P6

“I found a picture of a toy I want to buy my daughter. I took a screenshot on my phone and I will go to the link in the pic using my computer later to show my mom.” -P2

For most participants, alternate device access was not a big concern when saving content. In fact, most of the time, people intended to revisit on the same device. When saving content, most people intended to revisit it within a short time frame – usually the same day or within a few days. This was due to the fact that people believed they would “forget” to return to the content if too much time passed.

ShareFor many participants, the line between sharing and saving was blurred. The primary methods for sharing content – Facebook, email, and text messages – where valued not only because they made it easy to share, but because they also made it easy to revisit.

“Social media and email services make it easy to revisit content because they log and save everything.” – P3

“I found Crockpot recipes on Facebook that I wanted to try, so I re-posted it to my Facebook wall.” – P7

RevisitParticipants used a variety of low-tech methods to revisit content. The primary methods included relying on the URL bar to autocomplete URLs based on browser history, following links in emails, and leaving browser windows open.

Further Research

The Firefox UX research team is currently conducting a contextual user research project in multiple cities to learn more about multi-device task continuity strategies. These findings will add depth to our current understanding and help us design experiences that will support and expand on these user patterns. Stay tuned for more information on this work.

Find it Faster: The New Search Interface in Firefox

Philipp Sackl

76

The new search Interface in FirefoxHow often have you done a web search, already knowing that you would click the first result that looked like a Wikipedia page?

Quite often? Then Firefox is about to make your life easier. With the new one click searches, you can instantly find what you are looking for across the web.

Find anything quickly on any page

When typing a search term into the Firefox search box, you will notice two new things: first, we improved the design of search suggestions to make them look a lot more organized. And second: there is an array of buttons below your search suggestions. These buttons allow you to find your search term directly on a specific site quickly and easily.

We are shipping Firefox with a set of pre-installed search engines that are tailored to your language. You can easily show and hide them in your search preferences.

Configuring search preferences
But you shouldn’t be limited to any default set we provide. That’s why adding additional search engines is easy. Are you a web developer? Then how about adding MDN and Stack Overflow to your one click searches? Writing a paper and looking up synonyms every day? Add a dictionary site! Just click on the magnifying glass in the search field while on the site and select the search engine you’d like to add.

Adding new search engines

Firefox is all about choice, and with the new UI, searching is now more flexible and powerful than ever. Coming soon to a Firefox near you!