Divining the Future of New Tab

What’s next on New Tab for Firefox Desktop users?

New Tab has come a long way since earlier last year.

It started with rounded corners and a few tweaked buttons. Then, Directory Sites landed for new users shortly thereafter, seeding their Firefox experience with content from Mozilla and a sponsored partner. Soon, Firefox 40 Beta users will begin noticing Suggested Sites related to their browsing history, along with a restyled interface and updated page controls.

But there’s so much more to the story.

The following are some of the experiments we’ve been thinking about for New Tab later this year. All of them are focused on user control, feedback, and discovery. We hope to land many of these features; others may get tossed entirely. Ultimately, aggressive user research will help us determine which ones are worth shipping.

+++++

Experiment #1: More Control.

View the full presentation: Enhanced User Controls for New Tab on Firefox (PDF – 5.9 MB)

Deeper insights.

Transparency + control = trust. These days, everything I design is based on this formula. When it comes to Suggested Sites, users should understand why they’re seeing a particular suggestion, and have the ability to manipulate their preferences.

Interest category flyout menu

All suggestions include a corresponding interest category. Clicking the category (ex: “automotive”) reveals more controls.

Part of the solution is obvious: include appropriate labels, or explanation, where and when appropriate. Naturally, any Suggested Site will include a label. However, and more importantly, the interest category a suggestion relates to should allow for more control as well.

Interest category layover, with options

Clicking “View all categories” launches a control panel with any options available – including the option to turn off suggestions altogether.

Combined, these functions would provide users both the context and transparency we’ve been promising. (OK, it’s a start. We still have so much more to learn about this.)

Add a site of your own.

Users have been able to delete sites since New Tab’s introduction; but it was never evident how to add a site of their own. After deleting an unwanted site, it should instead be super-easy to choose a new one. Additionally, users should have the ability to see a logo, the homepage, or last page they visited.

Deleting a Suggested Site

Don’t like a suggestion? Select “Not interested” from the menu (available on rollover). Boom. Gone forever.

Add a site - default

After deleting a site, a user can add one of their own by clicking the giant “+” button. Doing so launches a new control panel.

Adding a site - defined

Once the user enters a URL in the Website field, they can then determine how the site should display on New Tab.

Top Sites get some love.

Logo or thumbnail images of destination pages may help users identify each Top Site, but what if they want to know more about their activity related to a particular site? The History feature on Firefox has always been difficult to navigate, and requires the user to engage with multiple functions of the browser.

See more information about any site on New Tab via the controls menu (available on rollover).

By selecting “About this site” from the tile control menu, a user could perhaps see information regarding the site’s purpose, the interest it relates to, and the user’s most recent browsing history – all in one view.

After clicking “About this site”, an overlay reveals the related interest category, a brief description, and all recent browsing history.

Which got me thinking: why not just put all of their history right on New Tab? Those looking for a certain, recently visited page could search via a simple dropdown, which would then list their most visited sites and corresponding browsing history.

By clicking on the clock icon, a user can view their recent browsing activity, sorted by their top destinations. Clicking on a site will reveal its full history.

Finally, no more digging! Just click and scroll.

Experiment #2: More Value.

View the full presentation: Feeds, Groups & User Feedback for New Tab on Firefox (PDF – 8.5 MB)

Feed that need.

When a new user downloads Firefox and tries New Tab, they see a bunch of Mozilla stuff. When current users view New Tab, they can see their recent sites… but not their “stuff” contained therein. If anything, they might see a single content page headline.

Not for long. One day soon, users may be able to add feeds from their favorite destinations on the Web.

Directory Sites - default view for new Firefox users

New Firefox users will see sites from Mozilla, a partner, and an empty tile. Rollover and click the “+” to “Add a site”…

The “Add a site” control panel displays. Once the user starts typing an address in the Website field, URLs are automatically suggested…

Selecting a URL populates the “tile” shown on the left. In this case, a content feed is available, and is selected by default.

Content feed added

Clicking “Save” adds the new content feed from the user’s preferred site on New Tab. Rollover the site to scroll through recent headlines.

People who want to keep a tidy New Tab, could do so. Those who prefer frequent updates from their favorite sites could find them all in one place. In this way, the user decides entirely how much – or how little – they want to see.

Interesting Groups.

If New Tab is all about getting user’s onto their next task online efficiently, then there is currently no way to organize New Tab around common tasks. Personally, I visit about 25+ different sites on any given day, but they’re all related to only a handful of core interests (car blogs, news sites, technology research, etc.).

To fix this, I imagine offering users the ability to create a “meta-group”, based on a core interest. Unlike “folders”, the group contents would become accessible “buttons” that link to their preferred sites in that category.

Click on hold a site to grab

Grouping made easy: Click and grab any tile…

Drag and drop one site onto another

Drag one site onto another to automatically create a new group.

Editing a group

After creating a new group, a control panel will display. Build the rest of the group in a single view…

Group added

Click “Save” to add the group New Tab. Done.

Essentially, this makes room for hundreds of possible destinations one could see on New Tab (not that anyone would want to). And if creating interest groups were easy, it could transform the way people use Firefox altogether.

“How did that content make you feel?”

Say a user sees a Suggested Site on New Tab. It looks interesting, so they click on it. They’re taken to a content page on a site they have never see before.

Click a suggested to see the destination page

A user sees a Suggested Site (lower left) that looks interesting. Clicking the site takes them to a destination page.

From the publisher’s perspective, the user clicked. Success!

From a user’s perspective, they’ve donated their time. Was there a payoff?

Now, after they’ve viewed that content – and after they’ve returned once again to New Tab – the user may be thinking one of two things: 1.) “Worth it!” or 2.) “Totally not worth it.”

Rating a Suggested Site

When the user opens a New Tab again, they will have the option to rate the Suggested Site they viewed.

Feedback received

If the rating is a positive, then the Suggested Site automatically becomes a History Site. In this case, a content feed is available.

Just by adding a bare-bones rating system for all Suggested Content, users would instantly have the ability to communicate something beyond their click: their actual reaction.

Creators of outstanding content experiences would be rewarded. Content which fails to meet the standards of everyday users would be flagged and purged. The ecosystem could have a real incentive to make content truly better – just by harnessing real user feedback (for FREE!).

Experiment #3: More Discovery.

View the full presentation: Combating Pervasive Boredom on Firefox New Tab (PDF – 2.1 MB)

Bursting bubbles. Finding new ones.

When you’re home, you’re comfortable. Everything is familiar. Everything is in it’s place.

That sounds terribly boring to me. I suspect others feel the same way.

The same could be said about New Tab.

New Tab - default view

Default view of New Tab. Boring.

What if New Tab could offer a break from the normal? What if it wasn’t so dang task-oriented?

What if a user wanted to experience entirely new things that were only about his or her top interests?

What if-

CATS!

New Tab - CATS!

New Tab Cat takeover. Not boring.


That’s all for now. As New Tab evolves, so will the creative thinking.

Mobile Minded

Imagining the future of New Tab for Firefox Android.

View full presentation: Updated New Tab Controls on Firefox for Android (PDF – 15.3 MB)

For over a year, the Content Services team has been busy evolving New Tab beyond a simple directory of recent, frequently visited sites. Once Firefox 39 lands on desktops later this summer, New Tab will include an updated interface, better page controls, and suggested content from our partners. With any luck, these and future products releases for the desktop browser will facilitate more direct, deeper relationships between brands and users. Most importantly (to me, anyway), richer controls on New Tab will also offer users more customization and better utility.

While this ongoing project work has certainly kept me busy, I can’t help but think about “the next big thing” whenever I have the chance. Lately, my mind has been preoccupied with a question that’s easy to ask, but much more difficult to answer:

How could Suggested Sites and more advanced controls work on mobile?

Providing Firefox Desktop users with more control over the sites they see on New Tab is relatively straightforward. The user is likely seated, focused entirely on the large screen in front of them, and is using a mouse pointer to activate hover states. These conditions are appropriate for linear, deliberate interactions. Therefore, New Tab on desktop can take advantage of the inherent screen real estate and mouse precision to support advanced actions like editing or adding sites. And since New Tab is literally one page, users can’t get really get “lost”.

Mobile is altogether different. The user may be standing, sitting, or on the move. Their attention is divided. Screens are physically smaller, yet still support resolutions comparable to larger desktop displays. More importantly, there aren’t any hover states, and mobile interactions are imprecise (which is maybe why we call them “gestures”). Because of this imprecision on handheld screens, a tap often launches another view or state that may the user to another destination – and after a few taps, the user may find themselves down a navigational rabbit hole that’s cumbersome to climb out of. Combined, these factors sometimes make it hard to perform complex actions on a mobile device. Likewise, any action made by the user should be minimal, simple to perform, and always contextual.

Taking all of the above into consideration, the following is an early peek at my vision for the New Tab experience on Firefox Android, with user control in mind.

+++++

New layout

New Tab on Android: DefaultNew Tab on either desktop or mobile devices has always been about one thing: Helping users navigate the Web more efficiently.

Today, New Tab shows a two-column grid of rectangles depicting Websites they recently visited. While it may make the destination page easier to see, this is an inefficient use of space.

By shrinking the rectangles, more of them can fit onto the page; and by showing a logo instead of a Web page (when possible), identifying individual sites becomes easier too. These smaller “tiles” could even be grouped, just as the user would group apps on their device home screen.

Some folks may also be interested in discovering something entirely new on the Web. The future New Tab could serve suggested content for these users, based on their browsing history (and with permission, of course). But instead of commandeering a tile, suggestions could be delivered natively, and in line with the user’s history list.

Quick and painless suggestions

New Tab on Android: Suggested contentViewing suggested content in other applications typically launches a new app or another tab in the user’s browser. Yet it only takes a second or two for the user to decide if the content is actually interesting to them. Personally, I think it would be better to give users a preview of the content, and then give them the option of dismissing it or continuing on without leaving the page they’re on.

Shown above, I image that after tapping a suggested item, New Tab could slide away to the left, revealing a preview of the suggested content beneath. If the user scrolls to view more content, a button then slides into view at the bottom of the screen, taking them the destination page suggested on-tap. If they aren’t interested in reading further, they would simply tap the navigation bar (below the search bar) to return to New Tab. Meanwhile, they never actually “left” the original screen.

Drag-and-drop Web addresses

New Tab on Android: Drag a site onto pageHowever, if the user does find the suggested content interesting, then they should be able to add the destination site directly to New Tab. One solution may be allowing users to drag-and-drop a Web address from the search bar and into New Tab. Perhaps by dragging the address onto another tile, users could even create a new group of related sites.

New Tab on Android: Adding a group

If a user doesn’t care for a particular suggestion, however, then deleting it – or any item on New Tab, for that matter – should be as easy as dragging it off either edge of the screen. Borrowing from another popular email application, swiping an item would reveal the word “delete” beneath, further reinforcing the action being performed. Naturally, this may sometimes happen by accident. As such, a temporary button could appear that allows the user to retrieve the item previously listed, then disappear after a few seconds.

DIY tiles

New Tab for Android: Edit site appearanceAlternatively, a user could add a new site directly from New Tab. Tapping the “+” button would launch a native keyboard and other controls, allowing them to search for a URL, define the tile’s appearance, or opt-out of related content suggestions. For extra clarification – and a little fun – the user would literally “build” their tile in real-time. Selecting any URL from the search bar dropdown would update the example tile shown, displaying a logo by default. Or, the user may choose instead to show an image of the destination homepage, or the last page they visited.

Next steps?

What I’ve proposed should be taken with a few grains of salt. For one, I believe that limiting the need for new, fancy gestures encourages adoption and usage. Likewise, many of these interactions aren’t especially novel. In fact, most of them are intended to mimic native functions a user may find elsewhere on his or her Android device. My ultimate goal here was to introduce new features available on Firefox that won’t require a steep learning curve.

For another, the possibilities for New Tab on mobile devices are numerous, and exciting to think about – but any big changes are a long ways away. By the time a new big update for Firefox on Android lands, this post will probably to totally irrelevant. But in the meantime, I hope to plant a few seeds that will take root and develop further as my team, and many others at Mozilla, contemplate the future of Firefox for the mobile Web.

Control Issues

What does “user control” actually mean? This is my quest for a definition.

The Product Manager I work with on Content Services, Kevin Ghim, recently asked me to explore ways in which we could experiment on New Tab with “more user control in mind.” Kevin wasn’t asking me to design cool buttons or fancy interactions. He was asking me apply a broad idea to the overall experience.

Naturally, I couldn’t flesh out the finer details of a User Interface before understanding the larger story; and I couldn’t craft a credible story without a proper definition of the basic idea it was intended to support. And since no such common definition can be found (other than in the traditional sense of manipulable controls), I did what any reasonable designer with marketing experience would do. I made one up.

What sounded like a simple exercise has turned into a real mind-melter. This is the journey I took before arriving at my own conclusion.

1: Controls ≠ Control

We talk about control a great deal at Mozilla. In theory, any new feature or functionality we want to introduce on Firefox should allow for greater control, whether over the browser itself or the content within it. Sometimes this means more menus and buttons. Other times it means clearer choices over intended outcomes. It all depends on the task at hand, and a particular user in a particular scenario. But as a UX designer, I fully recognize that controls don’t necessarily add up to control. They are in fact, distinct things.

Broadly defined, “control” could be a synonym for “interaction.” This is to say that for as long as a user can manipulate (i.e. interact with) something, then they have control over it. While this may be technically true, taking this argument at face value fails to consider the larger experience. By this definition, a user would have “control” over how a service provider collects and shares their data with third-party advertisers by clicking an “I agree” button on the Terms of Agreement modal. Not only is this misleading, it completely devalues the role of a user while obscuring the role of the content or service provider.

Certainly, controls are integral to any successful experience. But it’s not enough that a user simply understands what each feature or interaction is supposed to do. Even the best designed, most well intentioned, and considerately placed controls will prove insufficient if they don’t allow for self determination. This is why I felt it necessary to go further, because I want the New Tab experience to anticipate a user’s wants – not to coerce them into supporting our own interests, or to choose a particular path on their behalf.

To explore the idea of control further, I had to look more critically at another idea…

2: Control is Contextual

Since control is meaningful only in context and in regards to a single individual, identifying a user’s wants or needs especially tricky.

For example, a new or novice user will often find a simple interface more approachable because they understand it more quickly. More specifically, they recognize their relationship to it. And a user who “gets it” will be more likely to use it. Their goals are more immediate and general. Likewise, limited interactions tend to help facilitate a basic sense of control over the experience by eliminating distractions.

At first, that is. Once the user wants to do more than the interface will allow, then simplicity and limitations soon become barriers. As to be expected, wherever there is a barrier, confidence diminishes, and, along with it, the user’s perceived level of personal control over their experience. Users who consistently want more control will leave, and those who feel overwhelmed by controls either quit outright, or move on to something “more intuitive.”

So, if user control is largely about supporting individual goals, then any interface or experience I create should anticipate the fact that different users will have different goals at different times. Finding the balance between control and ease-of-use can be an art in itself, requiring constant reevaluation.

While this may seem impossible at first, it helps me to consider another key point…

3: Control is Personal

Control may be relative, but it’s also very real in that it can be perceived and demonstrated in everyday life.

Users are people, not abstractions. While our roles as individual may be small on a cosmic scale, here on earth, at this very moment, we do understand and feel varying degrees of control in all aspects of our lives. Work, romance, friendships, and family are each stages where we exert real influence over the final production.

When it comes to relationships, in particular, many equate control with authority (the right to exert influence). While there will always be those who seek outright domination, folks mostly strive to maintain equanimity within their relationships by playing an active and substantive role in achieving a shared goal. As long as everyone is on the same page, so to speak, then there’s little need for one to dominate another. The same could be said about technology.

By default, a user may assume that technology – which is made by people, for people – is subservient to them. They are the ultimate authority figure. But after playing around with a few toggles and buttons, it becomes clear that any technology has its own prerogatives. A user can’t do any-or-everything they want, only certain things. Furthermore, human flaws in logic or production can render an otherwise powerful utility into something utterly useless; which, in turn, renders the operator impotent. In similar fashion, a user’s relationship to the technology depends largely on their ability to gain mastery over it. This is further exacerbated on the Web, where there are no physical machines to manipulate, and only pixels on a screen.

Accordingly, the best Web experiences respect the user’s authority, and allow them to define the value for themselves, as it applies to their individual circumstances (which may change over time.) Basically, the user should always feel that they have genuine control. It doesn’t get any more personal than that.

Beyond this, it’s crucial to remember that…

4: Control is Specific

Typically, something is personal because it’s specific. Like the ratty sweatshirt kept long after graduating college, or the picture taken while on an exotic journey. They are things we can touch and see that invoke a memory or represent a larger idea we deeply care about. Take away those connections, and those things become entirely ordinary.

People can think of Web products in the same way. It depends on how strong – and clear – the connections are between a product, a particular user, and the role it serves in their life.

As the designer for New Tab on Firefox, I try to connect those dots in a coherent, meaningful way. Giving a user total control over absolutely every feature and function would most likely confuse or frustrate them, not build confidence. Instead, I’d rather identify what they care about, personally, specifically, and design for that.

For instance, the majority of users fall into one of two camps: those who don’t mind advertising, and those who hate it. This involves very personal feelings about something very specific. Likewise, New Tab must allow users to exercise personal choice over these promotional experiences. Those whose aren’t bothered by ads should still have the ability to decide when or what kinds of ads they want to see so that they’re more relevant and timely. Those who want nothing to do with them should be allowed to opt out of any advertising altogether. These are simple things, but they would demonstrate true user control in action.

5: Conclusion

Having considered the ideas above for some time, I’ve finally come closer to understanding what user control really means – to me, at least. My definition is by no means perfect. If nothing else, the following is how I choose to approach this complex issue whenever designing for Content Services products on Firefox:

User Control is the measure by which an individual user may influence, direct, or master a digital interface, in a particular context, and in order to support a specific goal.

++++++

Now, I genuinely want to know what you, dear reader, think user control means. Regardless of your role, either as a contributor to the Mozilla Project, or as a regular user of Firefox, I invite you to share your comments below.

I’m just one guy with an opinion. Maybe together we can spark some much-needed debate within the Mozilla community.

Self Iteration

How the ultimate insider/outsider found his home at Mozilla.

Change can be either scary or inspiring. It’s scary when it’s all happening to “you”; when you’re on the inside. Every new inundation of the unexpected can feel like an outright, personal attack. But when you’re an outsider, it’s much easier to see the stage, the actors, and your part in the overall story.

The difference is perspective.

1.0

I joined Mozilla in the summer of this year mostly as an outsider. Professionally, my career was birthed, built and cultivated within the “agency” world. In other words, I worked for clients who paid me sell their stuff to other people. Sometimes business were trying to sell services to other businesses. Other times, they were trying to sell things to consumers. Either way, I was the designer responsible for creating the tools that would help them do so. With few exceptions, all this worked happened within a team of other agency people, all held accountable to the same bottom line. And while we may have fought and argued over “user value” or the integrity of the “experience”, each of us were paid to further our client’s goals – not our personal ones. This is the very definition of an insider.

Yet even though I worked on the agency side, I was also very much an outsider. For one thing, agencies are never cause-driven, they’re revenue-driven. Being the kind of guy who asks “why” too much, the blind pursuit of profit isn’t exactly enticing. Up until I joined The Project, the best I could do was defend the interests of users to clients who wanted to make their bosses happy. Their bosses would all want to know if they would profit. And, to be perfectly honest, I just didn’t care much about making yet another nameless executive even MORE money. Eventually, the entire agency/advertising world had totally gutted my sense of purpose in life.

But what else was I supposed to do that still allowed me to practice the craft I loved so dearly?

2.0

Like most other folks, I joined Mozilla because I believed in the mission, the values, and the products. The fact that I now have a real opportunity to do good — for the sake of doing good — absolutely helps with the “purpose” part. Of course, this motivation alone doesn’t qualify me to be an official “Mozillian”. Why? Because like at any other office, I’m wasn’t on the inside just because I showed up to work. Perhaps a few had overheard that I was the guy working with the Content Services (CS) Team to design ad tiles. Otherwise, I was utterly unknown; an outsider.

So, when the CS Team asked me to explore how advertising could work on New Tab, I immediately thought of two things. First were the hundreds of millions of Firefox users it would effect. Second, was my swift death if I screwed it up. Naturally, therefore, the proposition sounded like Mission Impossible. It’s one thing to make big decisions that fundamentally changes a popular product; it’s another thing entirely to implement something that truly makes users happier than they were before. And when you start talking about advertising, corporate partnerships, and revenue generation, people tend to react strongly to very idea of change.

3.0

I had a lot of time to think since those first conversations. I also learned a lot more about the industry. In short, advertising on the Web is generally a terrible experience, and yet it pays for the majority of the free content and services we all enjoy. It’s a game rigged to reward those with the deepest pockets and access to troves of user data, and yet it’s all completely invisible to the users themselves. It’s not a system everyone particularly likes (or agrees with), but it’s the one we’ve currently got, and it’s not going anywhere anytime soon.

To change the game, however, you have to get into it. Mozilla can’t just sit on the sidelines and say “you’re doing it wrong.” From the beginning, we all knew that advertising on New Tab would stir emotions and invite criticism. But the more I thought about things, the more I saw it all as an extraordinary opportunity, and less of a problem to solve.

After all, the organization does have a mission to fulfill and users around the world who count on Mozilla to make meaningful change on the Web. It takes time, people, and a lot of money to achieve any measurable success. Although money itself is never our bottom line, the more of it Mozilla can generate, then the more we can invest directly in our Firefox products and the Web community as a whole. More importantly, if we can do that through an advertising model that respects user’s privacy, allows for more user control, and rewards content providers for the actual value they provide… then why not try? In doing so, we might even be able to make the Web a more equal place for everybody – ordinary users, content providers, and business or technology partners alike.

4.0

I understood enough about the organization and what it stood for to plant a flag, but that’s about it. It was very unclear, especially in the beginning, how this experiment would be received by Firefox users, my peers, or the community. As it turned out, my fears were unfounded. Nobody at Mozilla kicked me out of the clubhouse. Members of the community filed a few bugs. Most crucially, users seemed to be okay with the first release of Enhanced Tiles on New Tab. While there was certainly some blood left on the mat, nobody lost anything important… like an eye, or our values.

In fact, it’s a shared obsession for a Web that’s open to all – one that respects user control and sovereignty – that binds so many different people together at Mozilla. Six months ago, I felt like an awkward middle-schooler trying to blend into the wallpaper. Today, I’m actually a part of something much, much bigger than “me”. Now it’s “us”. And when everyone is in the game for the same reasons, big challenges quickly become new opportunities.

Of course I want to win. I want Firefox, Mozilla, and the mission to succeed. The competitive instinct in me will never die. Only now, there’s so much more at stake, and there’s so much more to be done. The path forward is going to be a serious battle (our competitors and the ad industry writ large aren’t exactly rooting for us), and anyone with skin in the game is going to bleed a little more. Personally, I might even get my ass kicked and my teeth knocked out trying to create a New Tab experience that redefines the relationship users have with advertisers. But that’s okay. I finally have a purpose worthy of the scars.

5.0 – Release

The real test is yet to come. As more of the experiences we design make their way onto the New Tab page in Firefox, hundreds of millions of users around the world will judge for themselves whether or not Mozilla has real vision, or has their back. With the power of their fingertips, ordinary people we’ll never meet will determine what’s valuable to them – not a client.

Honestly, I wouldn’t want it any other way. Because that’s what being a Mozillian is all about: Ensuring the Web is an open platform for opportunity and choice.

More change is coming. Only this time, users will have a more direct role in shaping the future of Firefox, and perhaps even how the Web itself works.

For once, it feels good to be on the inside.