Is this a good idea?

Mozilla takes user privacy seriously, and follows a set of Data Privacy Principles to respect and protect user’s personal information. In that same vein, we developed our CFR program to preserve user privacy.

We also wanted to make sure that if we were going to interrupt a user with a message, that the recommendation was useful, timely, and dismissible. The CFR is an effective form of context-based communication but can easily become an annoyance and ineffective when overused. With this in mind, we set a recipe that would show the Pin Tab recommendation to users who frequently visited the same websites.

We felt this interruption was worthwhile and useful because the recommendation was shown to users who visit the same sites frequently and could save time with Pin Tab; it was timely because it appeared when the user was in the act of visiting the same site repeatedly; and we would ensure the design itself was dismissable.

Considerations

Working with content strategist, Meridel Walkington, and user researcher, Kamyar Ardekani, we ran unmoderated user testing early on to get feedback on users’ understanding of the CFR for Pin Tab. That feedback informed the content and design work that followed.

Content

Meridel drafted several versions of the UX copy. She experimented with the clearest way to explain what Pin Tab is (do people even know what a ‘tab strip’ or ‘tab bar’ refers to?), why the feature is useful, and how to use it. Copy was refined over the course of user testing.

Animation

We also user tested an animated graphic versus a static one in the CFR panel. There was a noticeable difference in comprehension between the two options, with animation greatly improving understanding of the “Pin Tab” feature by providing more context of what happens to a tab after it’s pinned (tab condenses and moves to the left of the tab strip).

While we had anticipated that an animation would improve comprehension, the research results made the case for including it in the MVP (minimal viable product). This helped us communicate to engineering that animation was more than just a “nice to have.”

Accessibility

We reviewed the Web Content Accessibility Guidelines (WCAG) to ensure the design and animation met accessibility standards. One of the modifications we made was adding a play/pause button in the panel for users with motion sensitivity so they could pause the animation.

Localization

Another aspect that came up was localization, in particular the difficulty of supporting multiple languages in the animation. Since this was an animated graphic, we could not show text in the graphic portion of the panel unless we created an animation for each language.

User Testing

We were ready to put these design and content considerations to the test. Through testing we wanted to find out if users understood:

What a pinned tab is and how is it different than a regular tab

The benefit of pinning a tab versus other forms of saving a website such as bookmarking

How to pin a tab (both from the CFR panel and from the browser context menu)

Testing included two versions of the animation: one without text and one with text. We discovered that text did not impact comprehension.

Text version (left), non-text version (right) of the CFR for Pin Tab.

We tested several content variations…