Firefox OS TV User Interface & Animation Design

sgao

0

Introduction

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

User Interface Design

Responsive

The controls are designed in codes and should scale to any screen size without need for new graphics. Also, it works across devices of all sizes and shapes, from small screen watches to giant screen TVs. The UI components are created in codes by using simple flat circle shapes. We minimized the use of gradients and reduced shadows as much as possible, but made sure that the controls can be identified distinctly.

02_design_responsive

Style

Why a circle? We choose to use the circular shape of our Firefox logo as a source of inspiration. We also think circles have free movement. They can roll, shading and lines can enhance this sense of movement in circle. Circles are warm, humane, comforting and give a sense of sensuality and love. Their movement suggest energy and power. Their  completeness suggest infinity, unity, and harmony. You’ll see the circle used throughout the designs of the components, especially in the animations.

03_design_style

Customizable

By changing a color, shape or style of an animation, the controls can be customized to suit any brands needs. All controls are all well designed and create as CSS components, and they are all easy to customize.

04_design_customize

Design in Animations

Groundwork

A great way to make your animations move in a more life-like manner is to vary the rate at which object moves. Animation should imitate the world that we live in. So, it’s important to ensure that the pace of the movements within your animations move by the pace of actual objects in the real world.

Positioning  /  Scaling /  Rotating

Positioning / Scaling / Rotating

Motion easing will create a more natural look when applied to positions, rotations, deformations, or scales, etc. This will add acceleration and deceleration to 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, such as TV, All apps, Devices, and Dashboard apps. When users select one of each app launcher, the inside liquids of launcher will start floating. To users, this bespoke motion is truly delightful and intriguing and keep them engaged in such an unique experience.

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 come on and off the screen or into focus. It should aid the flow of actions, giving clear guidance before, during and after. Here in our TV home design, we used scaled motion to guide the users which object they are selecting, and keep them orientated, preventing them from feeling lost.

08_Select_cards

Less is more

Subtlety is key when designing the motion to UI. We need to remind ourselves this design won’t distract or even confuse our users with too much animation. Motion should be used to help them stay focused, rather than distracting them. Also, motion should give context to the content on screen by detailing the physical state of those assets and the environment they reside in.

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

0

Introduction

Firefox OS for TV is a new direction that base on the vision of Connected Home from Mozilla. Compare with the UI on smart phone, the UI of home smart devices need to be more focused and simple. Furthermore, it will be scaled to many different sizes when it comes to difference devices. The UI also needs to be flexible enough to fulfill the scalability.

Back to the form factor of TV as a home smart device. It will be used in a fixed location. It may be the living room, the bedroom, kitchen or the meeting in the office. Because of the relatively large size of the display, user will see the content in a distance, won’t be too close. In the spatial meaning of a TV in a room, this device will be used to play a serial animated picture or static image. To achieve the function of entertainment, communication and interaction. User will also use this device as a shared information board in one space.

Here are some insights we found base on the usage of TV:

  • TV can be the display of many different input sources. (HDMI, DLNA, TV channel, SAMBA… etc) But the priority of the importance to different input sources is different from user.
  • User wants to spend time on the contents, not on the operations of how to access to a right content. So to provide a way to quickly access what they want is more important than an powerful UI but has endless layers of functions.
  • The usage of applications on smart TV is getting huge, and it needs an re-framing of the UI structure to make the application as important as TV channels, and as input sources.

Card Metaphor

From the insight we get, we realize that the UI structure needs to be a very flat and very single logic for TV, or home smart kind of devices. We choose the card metaphor in the end. As Picture 1, the cars are aligned in a single line. Every cards represent an entrance of a content or a service. The default set of cards, as shown in the picture, are the basic functions of a TV: The channels(Live TV), the Applications(Apps), the devices connected to the TV (Devices) and an information overview about this TV (Dashboard). Most of the basic functions are the aggregators of many sub-items. For example, there are 200+ TV channels in the TV card. So we give those aggregators of cards a name: “a deck”.

Picture 1

Picture 1

User can easily pick up a sub-item in a deck and pin it out as a stand alone card on the main page. And this card can be easily and quickly accessed next time. As Picture 2 shows if user pin a specific channel, channel 32 to the main page. And Picture 3 shows the user pin a specific input source, the HDMI 3, to the main page. After these actions, we treated the cards and decks item in the same way, and this main page just become the importance priority from this specific user’s need.

Picture 2

Picture 2

Picture 3

Picture 3

Home

Picture 4 shows the main page for the TV UI design. We call it HOME. User can access this UI by pressing the HOME button on the remote control. Picture 5 shows the HOME items being customized after user use this device for a while. There a folder design to provide user the ability of organize their pinned cards.

Picture 4

Picture 4

Picture 5

Picture 5

Dashboard

Dashboard is a specially designed  app as one of a default card on the HOME page. As Picture  6. The function of dashboard is to gather all the information that user in need to know in the same place. The design here is user 4 different directions mapping with arrow keys on the remote control.  The default set of functions on dashboard are: Notification (right), Up coming TV shows (left), Music play and control (Up), and the world clock as a widget (down).

Picture 6

Picture 6

Apps and Devices

Picture 7 shows the UI of Apps deck. All the applications user downloaded and installed will show out here first, won’t be on the Home page directly. User can always choose what to pin as a quick access any time.

Picture 8 is the UI of Device deck. Simply the group of anything this TV connected are here. And also any item here could be pin to Home page.

Picture 7

Picture 7

Picture 8

Picture 8

 

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

0

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!