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!

27 comments

  1. I like the design style (I hope the basicness is the actual design, not just for making mockups easier). The new tab concept is really smart in my view, although there seems to be little thought about the bookmarks toolbar and bookmarks in general?
    As for the home tab, why doesn’t it contain a location bar? It is what you expect when starting a browser, especially the very first time, since all the other content will actually not be ‘personal’ yet.

  2. This has to be some of the best work I’ve seen from the UX team! This is why Firefox is so brilliant! :D

  3. Paul [sabret00the]

    I’m curious as to how closely the desktop UX team is working with the mobile UX team? For example, there’s no mention of tabs from other computers are anything else talking about a unified experience across platforms by a single user. Will the mobile team be implementing the same new tab features? or even the same home tab? As a user of both, I would like to have a consistent Firefox experience across platforms (both desktop and mobile) and yet I feel as though the experiences are starting to diverge more and more.

  4. It’s great! But why don’t you focus on redesigning a little bit. For instance, to see my history, I don’t want to go to home -> History and then see it load. By the way, Firefox hogs a lot of memory when it displays history.

    So the point is, lesser number of clicks = satisfied user.

  5. Pino, the bookmarks toolbar is no longer a primary UI feature. It was recently removed from the default configuration and these features, Home Tab and New Tab are hopefully going to give most users all the recall capabilities that the bookmark toolbar offered but in a more functional way.

    Paul, the mobile and desktop teams work quite closely with each other. Don’t worry too much about that.

    Siddharth, the Home Tab and the New Tab are both heavily informed by your history. History plays an important role here, just as it does in the Awesomebar. Ideally you rarely have to dig through your history manually.

  6. It’s really promising!

    What is the gray star dropdown near the top right?

    The tooltip for the new tab needs to have the Ctrl(Cmd)-T short-cut to hint at the keyboard approach.

    It is confusing to have a search box that will work identically (?) to the location field, but I guess showing a location field that on the home page only always starts a new tab is confusing.

    Renaming the menu button in the titlebar to “Firefox – Alex” hints that clicking its dropdown will bring up a user chooser. Maybe “Firefox for Alex”. (Is there a post explaining how the user naming will work, is it based on Sync or Firefox profiles or introspecting the current OS user?)

    When the home page boxes get additional content will they auto-expand, pop-up bigger, have magic scrollbars, … or will they be limited to a certain size (that the user can resize)? News and Notifications are two different things, and if they auto scroll they need to be separate.

  7. Please don’t merge Location and Search à la Chromium, I still happen to know that I want to go somewhere.net and our Google overlords don’t need to know my every move on the world wide web…

  8. This looks promising if it can be setup to interface with existing environments properly. The reason I do not use the current FF homepage is that I make too much use of Google, so it is better for me to have my default page be google.com so I have easy access to gmail, google maps, calendar, etc. Someone who uses Yahoo a lot likewise finds it inconvenient not to have the things they use on the home page. If these usage patterns can be integrated into the home tab properly, then it could be useful. If you are always stuck opening another tab in order to get things done, then it becomes an annoyance that takes up space.

  9. I agree that the location bar still needs to be in the home page. If I want to paste a URL from somewhere else when I start my browser, for example, I should not have to press new tab first. It should focus on the location bar at the start of my firefox launch.

    I also think I’ll be missing the recently closed tab in my new tab page a lot. I really like how Chrome implements recently closed tab that way and I think this is often overlooked (people only want to implement speed dial, not recently closed). If there is not enough demand for it by default, at least have an option?

    Lastly, I don’t like how you have to click outside of the location bar first to go back to the colored speed dial if you press control T. That is one extra click. Perhaps you should consider that?

  10. This looks good.

    Will the search engine options be drawn from the custom search box or will Mozilla define those (for me)?

    If I create/customize the list of search engines, what is the limit of what will be displayed and how will that be managed when exceeded?

  11. Not that I wish to dissuade Firefox’ UI team from future endeavors but how about finishing the existing features fist (e.g. converting the rest of the old notification bars to doorhanger panels or more non-modal dialogs)? One of the most infuriating things about Mozilla has been that things are left in a half-finished state before everybody moves to new shiny things.

  12. Wow, your explanation matches my experience with Chrome’s new tab exactly: I downloaded Chrome to see how well this Angry Birds app they’ve been advertising to death felt. Since then, every time I open a window or tab I have indeed felt this brief firing of neural activity to the effect of “face! its looking at me! i recognize that face! its angry birds! do i want to play angry bids? what was going to do? is it important i still do that? ok, no angry birds”. Its like you’re reading my mind!

    One other Home Tab / New Tab dichotomy: personal life / professional life. If I’m at work (perhaps giving a presentation with my laptop’s screen projected), I would much rather have the New Tab flashing in front of everyone than my Home Tab.

  13. Why not keep things simple so they can be implemented in time for Firefox 7? Something like the New Tab King extension is a great 1st implementation of this feature; you can build upon the implementation in subsequent releases based on usage and feedback. Not having a Home Screen because mockups are too complex is worse than having something that users can start playing around with.

  14. >Paul, the mobile and desktop teams work quite closely with each other.

    yeah, but he has a point that we don’t currently have the level of integration and consistency to show for it. We’re working on make sure both desktop and mobile have the same feature set, and everything gets carried over with sync. But we still have some work to do.

  15. Looks great! Is this coming to Firefox 5 or later?

  16. The UI concept looks like a mashup for Google Chrome’s existing new tab layout of webapps / bookmark and Opera’s speeddial’s search and speeddial extensions.
    As the saying goes, imitation is the greatest form of flattery. It’s be nice to see these features coming to Firefox.

  17. I echo Pino’s question about the missing location bar in the home tab.
    I (and others I think) will open Firefox in order to go somewhere new. It would be rather annoying to open the browser or a new window and be forced to open a new tab just to go to a website.
    Many users won’t know what to do except search for their website.

  18. based in this reflection, a suggestion to improve the interaction with the menus of Firefox

    http://www.flickr.com/photos/ftosete/5852564236/sizes/o/in/photostream/

  19. Can you do this instead:

    1. Put all the tabs in the titlebar.
    2. Get rid of the close button on each tab. Make the window’s close button close the current tab. Right clicking on the close button can close the current window.
    3. Merge the Firefox button, the home button, and the new tab button into a single button on the very top-left corner obeying Fitt’s law.
    4. Make right clicking on this button open up the Firefox menu.
    5. Make middle clicking on this button open up a new tab.
    6. Make left clicking on this button open up the home tab page.

  20. @ asdf
    That would be interesting if implemented as an opinion, *never* as the default behavior. First off, the default behavior of any software should be aimed at the users who won’t be able to or won’t want to go into the options screen and change the behavior of the software. Also, never forget that the browser needs to support touch screens and systems without maximized state or with taskbars on the top edge of the screen, instead of or as well as at the bottom.

    @ Mark
    That’s something I brought up too at bugzilla and at the discussion groups, but I don’t think it “they” really care about that. At least they didn’t care after I went through all the trouble of making mockups and usability examples and arguing and whatnot.

    @ Erunno
    While I completely agree with you, you have to remember Firefox has entered a speedy release cycle now: nothing will ever be properly implemented again. If it ever was… I’m thinking Firefox will forever become the half-assed browser. Everything is half-assed, and the original visions, no matter how brilliant they are, and how game changing, will take 3 times more to come to life and not only will that allow other browser to copy Firefox before it even implements the stuff it’s supposed to implement, but it will also mean people won’t like the new features as much because they aren’t as good as they’re supposed to be. Door-hangers all around? Give it at least another year. More important stuff like Papercuts will probably never come to life at all…

    @ skierpage
    The Firefox – Alex thing was never meant to be, and, frankly, it’s less than optimal. The original mockup of the profile manager had the “Alex” part at the right side of the title bar. This was before Firefox murdered the title bar and dropped support for operating systems with taskbars at the top edge of the screen. They fraked up, I have no doubt of this, and now they are fixing issues that arose because of their frak up. Can’t say they weren’t warned either, so it’s well deserved, ahah. Having a separate button for the profile manager is basically a must if you want to have your name constantly displayed on screen, which itself is a must if you want the profile manager to be discoverable. Or maybe it isn’t, if they implement the home tab properly… Which means it’s a must, ahah (x2).

  21. based in this reflection, a suggestion to improve the interaction with the menus of Firefox

  22. Whatever, it looks ugly to me, and it’s a shame that you’re copying all the worst things about Chrome, but i don’t care as long as you give me the options to fix the UI to work the way i want.

    Make sure there’s a way to re-enable a real title bar, with the boxy blue color and everything (i’m always clicking on the wrong window when i try to use Chrome, it doesn’t have a title bar and every other window does. It’s a huge problem.)

    Likewise let me re-enable the status bar. And the menu bar. And let me move both the menu bar and the URL/button bar above the tab bar.

    And let me set a home page rather than using a stupid home tab.

    This is all stuff we can already do in 5.0, either directly or with add-ons, so just don’t intentionally break it for us! There’s a reason i keep using Firefox and haven’t switched to Chrome yet, and that’s because i can still make it look like a real Windows window instead of some Apple-wanna-be window.

  23. This is insane. I’m sticking with Fx 3. Probably later would move to IE.

    I understand that Facebook/G+ users need little of the UI, but I use browser for work and simply do not want to waste my time on all the distractions you put into the UI – nor am I huge fan spending hours/days installing piles of extensions to bring back the vital to me functionality.

    I would be happy if FireFox would allow for some sort of multi-UI, e.g. allowing UI to be plugged like an extension. Otherwise after 1.5 decade with Mozilla, I would really have to upgrade to IE…

  24. I’ve using my tabs orderer at the left side of the window (using the TreeStyleTab add on), and I’m not going back to use the tabs as an horizontal line never ever.

    I can have all my 30 tabs at view at any time, order them as a hiearchy, etc. It’s the most comfortable way of using tabs IMHO. This is the first addon to install every time I need to install Firefox in a new machine.

    Just my 5c

  25. I have been wanting igoogle/Netvibes type abilities built into a web broswer for a long LONG time! The main benefit is privacy – I wouldn’t have to worry about everything I do being tracked with a Firefox product like I do with the above mentioned sources.

    So PLEASE make the Firefox Home tab as close to igoogle/Netvibes as possible. i.e. The ability to have multiple tabs (either on the Home tab itself or multiple home tabs in the browser) so you can organize different widgets/RSS feeds. A Firefox widgets store would also be interesting to see.

  26. Pwlhsh xrusou kai kosmhmatwn. Dwrean ektimhseis . http://www.enexyra-athina.gr/

  27. That is one extra click. Perhaps you should consider that?