Firefox New Tab Page: Cognitive Shield

We’ve been iterating quickly over the last couple of weeks to define a potential new tab screen for Firefox.

The feedback for the last major iteration was largely positive, and it seems like we are on the right track. But we ran into a paradox.

We believe that the new tab screen should have two main functions: (A) To show you the sites you are most likely to be interested in going to, and (B) to not distract you. That’s the paradox: by design success is when the pages we show are maximally interesting/distracting, but an explicit goal is to not interrupt your flow.

This iteration focuses on solving that paradox by proposing a solution that we’ve dubbed “the cognitive shield”.

The Cognitive Shield

No matter where we put the links to your most visited sites (and their latest news), it always seemed to be a distraction, based upon our own perception and the feedback from thousands of testers. Given that the bulk of those testers are multi-tasking-adept early adopters, we’d expect that feedback to be even stronger from more mainstream users. Our original thought was to place the links along the bottom of the page — outside your foveal vision. In practice, the peripheral vision proved too strong, and the links still drew your eye and interrupted your cognitive flow.

The cognitive shield hides the distractions until you move the mouse. Then the links fade in quickly.

Here’s the thinking:

If you are typing a destination into the navigation bar, then your locus of attention is on the place you are trying to go — so we should stay politely out of your cognitive way. On the other hand, if you are using the mouse than you will probably benefit from the mouse-based navigation aid, so show it.

Whether you are using the mouse is a good indicator of whether you are in a cognitive flow or not. That realization resolves the paradox: the links are there when you need then, and not when you don’t.

The Design

The design of the cognitive shield is a ring of 8 circles, each containing one of your top-visited sites. We think of it as a personal watermark.

We went through a number of metaphors for the cognitive shield.

Instead of a metaphor which always strains — what symbol represents frequently used sites? — we went for an abstract glyph.

Known Bugs

There are a couple more features we’re in the process of adding. In particular: The ability to manually add a site is entirely broken. There’s no way to change the total number of frequently visited sites shown. There may still be encoding problems for non-roman scripts. Middle-clicks may be broken. The visual style needs a refresh. And the sites don’t remember their new positions post restart.

Testing the Prototype of New Tab

Step 1. Download and install the latest development build of Firefox 3.1.
Step 2. Download and install the latest version of the New Tab prototype.
Step 3. Let us know what you think, including what works, what doesn’t and how we can improve the design.

– Aza Raskin, for the “New Tab” team

Tags: ,

66 Responses to “Firefox New Tab Page: Cognitive Shield”

  1. Craig says:

    I followed the instructions to try out the cognitive shield but it does not work. Anything that I can try to fix it?

  2. Tyler says:

    This has to do with the addon in general, not the cognitive shield: after using this for a while, I have felt it could improve a few small things. First, I always long to have the choice of reopening more recently closed tabs than just the last one. Maybe show the past 3, since I often close clusters of tabs at a time and might want to bring one of the others back easily.

    Also, I think it is a bad design to have the page load a bunch of your Frequently visited sites while it is loading the RSS feeds, and then remove some of them to have more space once the RSS feeds are loaded. I think the page should remember which sites have feeds, and make blank space for them ahead of time that the RSS feed will load into half a second later or so.

    The last thing I wanted to suggest is to make the links be “bigger targets”, so to speak. It is okay that you got rid of the thumbnails, but what was nice that they did was give the user a bigger target, and a reason to click those rather than the small bookmarks on the bookmark toolbar. Right now, it feels like there is no benefit of ease to clicking these links rather than those in the toolbar. I suggest that you highlight them on mouseover (such as icons are highlighted in Windows Vista when you mouse over them) to make it feel like you don’t need to have as much precision and click on the link precisely.

  3. Kevin Richardson says:

    LOVE the fact that you can reorder the FVS and also like the suggested links to open. The cognative ring doesn’t really do it for me. A list with screenshots (similar to what Chrome provides). Do that with the addition of the ability to reorder them (drag & drop) plus suggestions…then you’ve got something cool

  4. Morac says:

    I can’t figure out how about:tab is supposed to work. It seems the new tab page changes randomly each time it’s opened.

    First off I never saw the shield when running version 0.0.35. I see the Frequently Visited Sites on the left every time I open a new tab, unless I click the wrench at the bottom which appears to turn off the new tab functionality.

    Every now and then I’ll see an “Re-Open” link for a tab, but I don’t know what triggers that to show up or how it determines what closed tab to show.

    Likewise every now and then I’ll see a “Search” link which seems to be linked to what is currently in the clip board, but it’s not always accurate.

    Personally I think the new tab page is way too complicated.

    If I were doing this I’d set up a separate div area for each “Frequently Visited Sites”, “Closed Tabs”, “Feeds”, etc, with only the text displaying.

    If the user wants to go to one of those area he/she can click the text which will open the actual list.

    There should also be an options screen where the user can permanently hide/show a category.

  5. I hate the opening page that gets me onto Gooble but not onto my firefox opening page (news). Why can’t you just leave my computer alone when it was adjusted so I could understand it? I use the mouse, I want the opening the way it was, and I want to see my e-mail. I am a senior citizen and don’t like to have to figure out what mania you are practicing on me.

  6. Chisophugis says:

    I would like to see something in the large bottom-right white space. Some suggestions are:

    It could display a list of “tags” or “terms” that FF draws automatically from webpages, so, say, I would have access to all my recent “Social Networking” links one click away, or all my “Torrent Sites” one click away.

    You could also consider a simple, but not really quite in the vein of what this project precisely means to accomplish, space filler like being able to throw a couple google gadgets into the blank space, so you could get an update on your gReader feeds every new tab, or an update on your email.

    Similar to the last idea, you could have the New Tab page be a sort of hub for all your web activities, with a highly extensible set of panes that could be resized at will and contain everything from a slice of your Facebook to a simple task list. I actually would find a task list that synchronizes with the one in Gmail Labs (or maybe Remember the Milk would be easier) would be one of the most useful features that could be added to my browsing.

    Keep up the good work Aza

  7. Denny says:

    It would be great if it was possible to edit the name of the site; for example, Passpack (https://www.passpack.com/) is one of my top sites and the title displayed in about:tab is simply “/beta”.

  8. Ryan says:

    I would remove the circular shield and just show a list of slightly desaturated (and perhaps scaled up) fav icons in the places where they will appear in the list once it fades in. Mouse targets stay the same, but less info/clutter on the screen.

  9. Dusan says:

    I think that when I click remove on some site, that site should be removed permanently, moved to some black list, because I except that behaviour, no matter that I’ll visit it later, when I click remove, it means that I don’t want it to appear on new tab

  10. Josh W says:

    I think this might be a good idea. One prob though: Power users know that they don’t need to move the mouse, infrequent users don’t: A safe assumption when the UI is unknown is to click the input box you want, or in extreme cases, to follow your pointer around with a very narrow cone searching out the screen.

    Now for the extreme case, they will be more confused than in the old situation, as the change they did not originate will attract their attention more than inert stuff appearing.

    For the intermediate/inexperienced the problem of origination remains. They don’t know that you are making that assumption of their behaviour, so they will be at a loss to explain why you did that.

    Solution? Hover select grayed out boxes that say what they “would” contain (+ icon), and then fill in the contents.

    This way both English and visuals are used to distinguish frames, that have consistent information in them (IE they can be zoned out) and have constant spacial orientations, so no worry of hitting them by accident.

    Problem? It constrains the geometry of your link list. Fixed sized frames are so 1997, but in terms of reducing confusion they may be the way to go. You could also have them extend downwards when focused on, leaving the bizarre UI of half a page of blank and then say two long parallel lists scrolling off the bottom.

    I love ring menus, but I don’t think this is the place. To recap, the principle is monotony until interest is given, in framing and content. It’s like a closed mail-box; always the same until you want to open it.

  11. shelly says:

    I personally find the simple yet elegant neew tab extension from NewTabKing to be the most effective in the new tab navigation flow

  12. quodlibetor says:

    You mention (somewhere) that the cognitive shield doesn’t work because people keep trying to click on it, but by the time their mouse gets there the icons have faded:

    have you considered moving the favicons of the CS to their final locations, so that the background is gray and teh icons are washed out, but when you move the mouse the icons colorize (instead of disappearing) and the text fills in? It seems like this could have all the benefits of the CS without the drawbacks of horribly frustrating users.

  13. bussiere says:

    will it be possible to personnalize customise this page ?

    regards
    Bussiere

  14. raja says:

    Chrome’s homepage has a bookmarks bar which I find really neat. It shows up when a new tab is opened and gets out of the way once a page is opened. It would be really great if this feature can be added to the new tab page of firefox

  15. How can I get rid of the new Mozilla blog icon that shows up when I start Firefox. If I can’t get rid of it I will go back to Internet Explorer or Safari.

  16. leandro says:

    I agree with raja (#14), the spontaneously bookmarks bar in new tab is awesome, simplistic and get the job done flawlessly. Anyone who wants the permanent BTF, can right-click and tick “always show”.
    This approach is very good for us using small resolutions monitors (notebooks and netbooks).

Join Mozilla!

About Mozilla Labs

Laboratories are where science and creativity meet to develop, research, and explore new ideas. Mozilla Labs embraces this great tradition - a virtual lab where people come together to create, experiment, and play with new Web innovations and technologies.

Newsletter

Enter your email address here to subscribe to our mailing list for announcements: