June, 2011

Jun 11

The Playing Field

As an interface designer I can’t help but be a bit of an information visualization geek.  So on this lovely Friday please enjoy a treemap of the world’s platforms, circa May 2011:

View the full size

The data shown here is from Net Applications.  This is proportional to Web usage on each platform, and not individual users.  So for instance if iOS users browse the Web more than Android users, their box becomes proportionally larger.

Also I should add the caveat that Net Applications usually reports lower numbers for Firefox market share compared to the other public data sources (and our own internal metrics), but nonetheless, this treemap sure has a lot of orange in it.

Jun 11

Home Tab and New Tab Conceptual Mockups

In my last post I introduced a few different reasons why we are exploring the concept of a Home Tab, including:

-Creating an interface that is unique to Firefox in a browser market headed towards commoditization (back+ forward+fast!)
-Ambient application-level notification
-Introducing the concept of tab browsing to users of the home button
-Building up the user’s mental model of the features that will also be available on other platforms, like the iOS application Firefox Home

Check out that post for more details on all of those aspects.   The one big thing that my last post left out was an actual conceptual mockup of the Home Tab itself.  Here’s some ideas that we are currently working with.

Home Tab

View the full mockup

The Home Tab is framed as an information dense dashboard to the user’s online life.  This isn’t a revolutionary idea, the interface proposed here is sort of iGoogle-ish in layout.  However, the key aspect of your browser providing this dashboard is that unlike any site on the Web, it has local access to the information that is most important to you, things like your bookmarks, history, online accounts, and Web apps.  The browser can locally leverage this information to provide zero configuration interfaces, like automatically aggregating news feeds from your favorite sites.  Because this content is local to Firefox, your privacy remains fully intact.  And because this is Firefox, the content and layout would of course be highly customizable.

The Home Tab is meant to be an interface where you start your day.  Cup of coffee in hand, you can scan news feeds coming in from your favorite sites, and check information coming in from widgets you’ve added.  Unlike other popular Web portals (Yahoo!, MSN), the Home Tab is all about you.  Unlike the tabloid experience of checking out at a grocery store, the Home Tab won’t (necessarily) round down to the lowest common denominator of entertainment.  It will only contain celebrity news if you actively follow celebrity news.

So that’s my take on the Home Tab.  But what about New Tab?  In a marketplace where every other browser has adopted speed dial, why does Firefox still have a blank (but nonetheless very zen) new tab experience?

New Tab

In my previous post I argued that under this model new tab should focus primarily on search, on a flashing cursor in the awesome bar awaiting input from the user.  I still largely believe that, but there’s a pretty serious caveat, what if the user invoked new tab using their mouse?  Odds are they would like to click on a target to go somewhere.  Recognition always beats recall, right?

There are three things that I think a lot about with adding targets to the new tab:

1) Increased time on task? This may sound counter intuitive, but one of the downsides of recognition is that you look at each of the targets, and contemplate their existence, and this can slow you down.  If you already know where you want to go, introducing alternative options to where you can go will slow you down as you consider them as well.  This effect comes into play more significantly if the user’s navigational target isn’t present in the set of available options.  If it is in the set, they might be faster because they know what target they are headed towards (both it’s general location and color).  Also, if their hand starts on the mouse, they can keep it there and click on their target, so that makes them faster as well.  But what are the odds that their target is going to be in the set of available options?  This leads us to the second thing that I think about a lot.

2) Reducing the breadth of sites that users visit on the Web? We often talk about how one of the best attributes of the Web is that it is about the long tail instead of the fat head.  The Web isn’t a broadcast medium with a very limited number of channels.  It isn’t like television.  But presenting the user with only 9 options starts to take the Web back in the direction of broadcast TV.  Now admittedly each user will have a different 9 channels, but there are so many other interesting places you can go, it seems odd to visually limit the user’s options down to 9.  There is something beautiful about the fact that you have to type a thought into the search field at google.com before you get anything back.  If you leave the field blank and hit search it doesn’t do anything.  Unlike MSN and Yahoo!, Google is about curiosity, and not about boredom.  You can’t channel surf google.  It might be elitist, but I want users to be curious, I want them to explore the breadth of the Web.

3) Redirecting users away from the target that they planned to go to? Of all the things that can go wrong with introducing targets to the new tab page, this one concerns me the most, the reason being that there isn’t any reasonable way for us to detect what is going on inside of the user’s head.  We can study the fact that the user ended up at Twitter or Farmville, but is that where they were intending to go there when they opened the new tab page?  Is the user driving the browser, or is the browser now driving the user?

Possible Solution: Adapt the Interface Based on Mouse versus Keyboard Input

Is it possible to get the best of both worlds?  Can we build an interface that is recognition over recall and fast for mouse users, but at the same time doesn’t reduce the amount of time that users spend contemplating the options, and reducing the range of sites they go to?  I sure hope so, because that would be awesome.  Also, we can monitor all of those things in the wild with Test Pilot metrics to see if it is working.

Here’s the solution I’m currently thinking about, where the interface is initially a bit different depending on how you invoked the new tab.

View the full mockup

If the user clicks on new tab with the mouse, they are given a range of mouse driven targets.

If the user creates a new tab with the keyboard (accel-t), the same set of targets appear, but they are impossible to parse with your low resolution peripheral vision (since they don’t contain any color), and the auto-complete box of the location bar literally overlays them.  But nonetheless they are still there, so if you click outside of the autocomplete box to move the UI focus, you get back to an interface identical to what it would have looked like if you had clicked the new tab button with the mouse.

In this model the small distracting pieces of sweet information candy (twitter, reddit, etc.) won’t spike your interest as much because the visual focus is given to different search engines.  And the search engines aren’t likely to pull you away from your actual task, because you have to combine them with one of your own thoughts.  In isolation, they don’t provide as compelling of a target.

This design is all about the low resolution peripheral perception of color: both when we want it to happen, and also when we don’t.  For instance, let’s assume that the user has their high resolution fovea directed at the flashing cursor in the location bar:

We’re of course going to be testing out all of these designs to see how they feel in actual usage.  Hopefully this posts provides everyone with some background information on all of the metrics we are trying to balance, and our ongoing quest for the optimal solution.

Side note: our intrepid Firefox developer Margaret has already implemented a dominant color detection algorithm to get the favicon up-scaling and hover effects working.  Read more about it at her post, and awesome work Margaret!