Firefox for Windows 10

Philipp Sackl

With the release of Firefox 40, all users of Windows 10 are in for a treat. Over the past months, a small team at Mozilla has been working on optimizing Firefox for the new operating system – both visually and functionally.

Firefox on Windows 10

A familiar experience dressed in a new way

Charles Eames famously said: »The details are not the details. They make the design«. Rarely is that more true than when adapting an existing product to a new environment.

The direction of the visual design of Windows 10 was clearly to finish what Windows 8 started. We see more flatness, more bold colors and generally more visual consistency throughout the OS. As a result, the huge differences in look and feel between classic and modern apps, that was extremely pronounced (and almost universally disliked) in Windows 8, is vanishing. With version 40, Firefox is embracing the clean appearance of modern apps: it reduces lines and borders and uses flatter surfaces while preserving the friendliness of the previous Firefox interface. It’s the good parts of Windows 10 design paired with the Firefox you know and love!

At the same time, we set out to improve the compatibility of Firefox with touch-operated tablets and hybrid devices. Visually this manifests in a larger address bar and more tapable close buttons on the tabs. And we’re continuing to investigate ways to make Firefox play nicely with the new tablet mode that Windows 10 introduces.

Your Search. Your Choice.

One of the most visible new features of Windows 10 is the system wide search field in the task bar. You can use it to search your files, ask questions to the digital assistant Cortana and also to search the web. It is great to have such a global entry point to finding things on the internet, but it comes with a trade-off: by default, the Windows search field only shows results from Microsoft’s search engine Bing.

Since one of our guiding principles is to put you in control of your experience, we’ve set out to find a way of providing more choice here. When you search the web from the Windows search box, Firefox will automatically use the search engine you’ve selected in the browser, as long as Firefox is set as your default browser (you can set it as the default in the Windows system settings). That means you can have the convenience of searching the web right from the Windows task bar, and at the same time still use your favorite search engine.

More to come!

Since Windows 10 has been under active development with new changes landing every couple of weeks up until recently, we have been designing for a moving target. Now that the operating system stabilized, you can expect more Windows-specific improvements coming to Firefox over the next months.

User Study of Tracking Protection in Firefox Nightly

Bill Selman

1 response

Background

A recently landed feature in the experimental Firefox Nightly build integrates proactive tracking protection for Firefox Nightly users coupled with Do Not Track (DNT). With tracking protection active, ads and tracking technology are blocked before they reach the user’s browser. Subsequently, tracking ads and tracking pixels are not loaded by the browser and are not visible to the user. Further, by not loading the ads, tracking protection speeds up page load times.

Untitled

NYTimes with Tracking Protection Off and Tracking Protection On.

In January 2015, the Firefox user research team conducted a three-day diary study with twelve demographically-diverse Firefox users in the US to understand their experience with Firefox Nightly’s implementation of Polaris tracking protection. For the diary study, participants were asked to download and install Firefox Nightly. Participants were instructed to turn on Tracking Protection in Firefox Nightly use it as their primary browser for the duration of the study. Participants responded to cues and direct questions while keeping notes of their daily online activities. After the diary study was completed, we conducted hour-long follow-up interviews with four of the participants via Vidyo.

We wanted to answer the following questions:

  • What does “tracking protection” mean to participants? How do they define it? How do they believe it works?
  • How does the implementation of tracking protection in Firefox Nightly match participants’ mental models of what tracker blocking means?
  • Does tracking protection disrupt participants’ current experience of browsing the web?

Findings and Observations

Definitions of Tracking and Tracking Protection

Most participants understood that tracking involved a third party using a tool or technology to identify unique browser users and to collect data about those unique users’ activity online. Participants provided different descriptions of how they believe tracking works and what information being tracked. Most participants used more general vocabulary to describe the more tangible aspects of tracking, such as tracking technologies track “my likes based on my website visits” (P15) or “what I might be interested in.” (P10) A small number of participants described the technical details of how online tracking works with a high level of accuracy.

Who Do Participants Believe is Tracking Them?

Overall, the majority of participants were able to describe at least one or many employers of tracking technology. While most participants did not describe the ecosystems of tracking and the relationships among companies involved in tracking, they did mention the piece of tracking technology that is most visible to them: targeted ads.

We also asked all the participants: “who do you believe is tracking you online?” Most participants mentioned Google, Facebook, or “marketing companies.” Two participants said the US government was engaged in tracking online activities

Benefits about Tracking Protection

Feeling more secure and private. The most commonly cited benefit among participants was the feeling of greater security and greater privacy. Although some participants who said this did not articulate specifically how tracking protection worked or made them feel more private and secure. Some participants clearly believe the tracking protection feature’s labeling and/or its visible effects (e.g., blocking the display of some ads).

Fewer ads, less clutter. Among the participants who noted the absence of targeted ads with tracking protection on generally viewed the absence of targeted ads as positive benefit. Most of these participants viewed ads as “clutter” (P2) on a site or as a “distraction” (P4) from their intended browsing activities. A few of these participants said that they have sometimes found targeted ads helpful, but also said they did not miss the ads when they were absent.

Faster page loading. Some participants believed tracking protection speeded up their browsing experience by blocking tracking technologies that took extra time to load on a page. This extra speed was seen as a benefit.
In our follow-up interviews, two participants believed that tracking protection slowed down their browsing because “the browser has to do extra work.” (P2). The other two participants described how tracking protection improved the speed of page loading.

Brings attention to the issue of tracking ads. A few participants noted how their relationship to and understanding of tracking changed over the course of the study. As P2 wrote, “It was very thought provoking because even though I did not use the internet much on my phone or computer I started to think about what a difference tracking can make…”

Relevant for mobile. Further, when asked about tracking protection on mobile, many participants said they hadn’t considered online tracking on mobile before. As P10 wrote, “None of my other devices give me the option of turning tracking on and off. And Firefox Nightly has definitely changed my perception of tracking because being that it gives me the option to turn it on and off it also makes me curious what the other browsers are using…It’s led me to various questions.”

Frustrations with Tracking Protection

Confusion when targeted ads disappeared. Some participants found the blank areas of missing content where targeted ads were blocked as visually jarring and confusing. As P8 said, “I did notice unusual behavior with page loading or missing content. My reaction to the missing content were usually were Ads would appear…I eventually closed the page because it was odd.” Eventually, participants who mentioned the blank content grew to like having targeted ads blocked.

Options/Preferences Labels unclear. Some participants did not understand the functionality of the opt-in selections in the Options/Preferences menu. The two options sound very similar: “Do Not Track” is a technical framework to send a signal to ad servers requesting to opt out of tracking and “Prevent sites from tracking me” refers to the Firefox Nightly tracking protection feature. For these users, these two selections are a distinction without a difference.

Preferences page for Privacy in Firefox Nightly with Tracking Protection activated.

Preferences page for Privacy in Firefox Nightly with Tracking Protection activated.

Limited discoverability of interface and alerts. Participants were only alerted to the presence of the shield icon in day two of the study. Only one participant (P15) said he noticed the icon before it was pointed out in the instructions. Once they discovered it, participants did express an accurate understanding of the shield’s functionality to turn tracking protection on and off for the site.

Perceived video playback issues. Video playback, page loading issues, and crashing were issues participants attributed to tracking protection. In our subsequent tests, we  demonstrated it is unlikely that tracking protection was the actual cause of instability or video playback issues. Regardless, likely because their attention was focused on the tracking protection feature as the subject of the study, tracking protection was perceived by some participants as the cause of these problems.

Additional Observations

A feature for more than a privacy-centric niche. We sometimes think that privacy protection tools are valuable to only a small portion of privacy-centric users (3-8% depending on the study) or general users at specific moments (for example, using the private browsing window). It is noteworthy how many of the participants found value in tracking protection.

Most participants in this study were not already focused on tracking and privacy-related issues. Tracking protection in Firefox Nightly exposed them to a tool that offered them a good deal more privacy than they were accustomed. Some participants responded positively and wanted to continue to have tracking protection as an option. A few other participants said they would like to use tracking protection after they perceived it becoming more stable. As P2 said, “I do plan to use tracking protection beyond this study because I liked the way things loaded better and I feel safer for some reason. I will not seek out additional tools because I don’t think I use the internet enough that I would need something like that.”

Invisible and visible. Participants focused almost exclusively on the visible manifestations of privacy such as targeted ads. During the follow-up interviews, we asked participants about the aspects of trackers that they could not see. P4 and P12 described ad networks and Google but did not fully convey the complex web of relationships among advertisers and tracking technology. Instead, participants only described the targeted ads they saw or did not see with tracking protection active. This more limited understanding makes a good deal of sense given the abstract nature of privacy concerns and the behind-the-scenes nature of tracking tools.

In order to improve the user experience of the tracking protection feature, we recommended at the time a few changes to the design:

  • Better labeling in the interface, using more common language to distinguish between “Do Not Track,” “Tracking,” and “Privacy.”
  • Show the invisible aspects of tracking to users to demonstrate visually (via a counter and a list of blocked trackers) to users what is being block on the sites they visit. Making the invisible elements more visible would allow us to show more fully the impact of tracking protection. As some participants indicated in their diary study, these details are valuable to them and enlightening about tracking in general.
  • Many participants did not mind targeted ads disappearing, but some did find the missing ads affected the design of sites they visited. Whether users support ads or not, many sites are designed with space for ads. In order to retain the intended design of a site, we recommended filing in these empty spaces with wireframes of the ads being removed. Wireframes would also benefit new tracking protection users who were uncomfortable with sites appearing empty. [This proposal may be technically challenging to implement with accuracy.]
  • Tracking and privacy are complex and sometimes abstract issues. Introducing the tool with on-boarding and a visual tutorial is essential for adoption and education.

More information about tracking protection.

Firefox OS TV User Interface & Animation Design

Shiqi Gao

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

Shiqi Gao

2 responses

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: