Why Tabs are on Top in Firefox 4

http://blog.mozilla.com/faaborg/2010/06/24/why-tabs-are-on-top-in-firefox-4/

by mbrubeck • 16 years ago

97 67 16 years ago

blog.mozilla.com

frossie3• 16 years ago

Good on them for coming out and explaining their reasoning.

Personally I use the totally fabulous Tree Style Tab extension and have the tabs on the left. Given the prevalence of widescreen displays, it makes a lot more sense to have them on the side and use up the wider screen real estate, even if you are not using the Tree Style Tab functionality (which is essentially a collapsible hierarchical tab structure).

po2• 16 years ago

Another reason for choosing sidebar like functionality is that the number of tabs is effectively unlimited. I never understand why developers chose to use tabs for grouping lists of things that can grow unbounded. Eventually you get to a point where you are forced to:

    - shrink the tabs ever smaller
    - implement scrolling of tabs(!)
    - limit creation of new tabs
    - auto close them

Sidebars have none of these problems. Tabs should only be used when the number of items you have is known, limited, and ideally a small number.

nooneelse5• 16 years ago

Well, even in the sidebar, with enough things, you can still have to scroll. It just looks nicer when you do.

thorax2• 16 years ago

When I saw the title of the blog I misread and was so excited-- thinking they finally came to their senses and were building in something like Tree-Style Tabs. It makes me so much more productive and able to coordinate so many different tabs.

I have 47 tabs open in Firefox currently, with trees of different research. That may seem like a lot, but it's really quite natural to manage that many with that extension. With tabs at the top, when you start getting to 15 tabs , you can't read titles and it becomes so much messier. You close stuff down just to make the current tasks simpler.

That extension is the primary reason I don't use Chrome for anything but a few Google services. It's so much more natural to coordinate them in FF until some other browser catches on and adds support.

seltzered2• 16 years ago

good lord thanks for telling me about tree-style tabs, it seems great for researching a bunch of code frameworks

mbrubeck4• 16 years ago

Yes, the Firefox UX team is working on more radical solutions for dealing with lots of tabs, too.

One such experiment is http://azarask.in/projects/tabcandy/ - but be warned, this is a rough sketch. It's not clear what shape it will ultimately take, or when it will be ready for production. (That's why we haven't been publicizing it.) The current concept/demo isn't something we are planning to ship yet, but I wanted to point it out anyway because it's so relevant to your comment. Hopefully with this disclaimer Aza won't be too mad at me for linking to his work before it's ready. :)

Jach2• 16 years ago

Add my thanks too for mentioning the tree style tab extension. I've been using tabmix plus and arranging all my tabs in rows, but a tree view makes so much more sense.

frossie3• 16 years ago

Add my thanks too for mentioning the tree style tab extension. I've been using tabmix plus and arranging all my tabs in rows, but a tree view makes so much more sense.

Hey, you're welcome - somebody pointed it out to me, so I am just paying it forward :-) Anyway, if you use Tree Style Tab, you might want to disable Tabmix Plus. They don't seem to play well together - it seems to interfere with the Tree Style tab drag and drop. It's not like you'll need it, anyway.

nooneelse5• 16 years ago

Looks like Chrome has someone trying to do something perhaps similar... "Tabs Manager by malexan".

mcobrien• 16 years ago

https://chrome.google.com/extensions/detail/ioigddmjfpphkbam...

msg• 16 years ago

I do the same thing with Tabkit and Ctrl-Tab. They're indispensable.

Groxx• 16 years ago

Sweet. This is one thing I really missed from the Safari betas, and really like about Chrome.

Will watch the video some time, but the two "conceptual model" images hit my reasoning too. It seems to be how non-geeks think about browsing too, as many I've seen have trouble with the address bar + tabs in anything but Chrome.

ashishb4u• 16 years ago

Because they copied Chrome...

younata• 16 years ago

I don't use firefox (uses up too much memory for my liking), however, it's good to know that it's a preference that's easily changed.

Of course, the people who download FF4, don't know about the change, and don't know how to change the preference (I.E. most older folks) will complain about how their firefox has changed. On the other hand, most of these people who would react this way are using IE6, and not firefox.

xtacy• 16 years ago

There are more downsides. Given their example of how new webapps will seamlessly integrate into the browser by having their own toolbars and such (the google maps part), it would be very easy to craft a picture-in-picture phishing attack.

seltzered2• 16 years ago

they're aware of this problem, and they're supposedly addressing that with Firefox Account Manager (linking to aza's blogpost about it): http://www.azarask.in/blog/post/a-new-type-of-phishing-attac...

Hell, I'm using a free version of AVG antivirus and it just detected bgattack.js as a threat!

lotharbot• 16 years ago

tl;dw summary:

0) this is the new default, but it's configurable 1) visually separates controls that affect the current tab (back, forward) from controls that affect the whole browser (close, minimize) 2) saves space and reduces clutter in tabs that don't need certain controls 3) FF is moving certain sidebars (like the bookmarks sidebar) inside of tabs, and tabs on top will look/feel more consistent with this 4) allows notification pop-ups to be attached directly to the address bar without covering up the tab area

downsides: 1) mouse distance increases

edanm2• 16 years ago

Another point I found important is the "App tabs" feature. They'll be letting you designate certain tabs as Apps, which will keep them permanently on the left of all the tabs, turn them into small icons (instead of normal sized tabs), and make them permanent (can't close or navigate away from them).

I love this, since I already do this with a lot of applications (I have Gmail, Google Calendar, Wave and Facebook always open).

nooneelse5• 16 years ago

Chrome lets you throw such pages out into their own window with no browser navigation controls, and it helpfully puts a shortcut to that experience in your choice of locations. ("Create application shortcuts...")

I think I recall some talk that this might be going away in future versions. But I certainly hope not, as it helps cloudify the desktop rather nicely when you stop seeing such web applications as only existing in browser-like windows.

brianwillis2• 16 years ago

Google Chrome already allows you to do this by right-clicking a tab and clicking "pin tab". It's kind of pointless in its current form, like a awkward hybrid of bookmarks and tabs.

I'd like to see some sort of notification system added to the icons of pinned tabs (like icon badges in Mac OS X) so you could see how many unread items you have in Gmail, Google Reader, etc.

No idea how you'd go about implementing such an idea though.

pvg4• 16 years ago

tl;dw

Thanks for the summary, tl;dw is right. It's preposterous and sad that the Principal Designer on Firefox values the time of his users so little that he thinks a 7 minute unskimmable, unlinkable, unindexable, unexcerptable, bandwidth-heavy video (best viewed full-screen, lest you miss a pixel of detail or are tempted to look at some thing of lesser import) is a better way to communicate this change than some text and a few screenshots.

ugh• 16 years ago

Watching videos feels a lot more comfortable to me than reading text. If I have the time I would always prefer it to reading. As such I think it’s quite over the top of you to use words like “preposterous” and “sad”.

There are downsides to it, sure, you described them quite well. It would certainly be best to have both but detesting videos on principle seems a bit preposterous and sad to me.

tomlin4• 16 years ago

- How will we show them the tab placement?

- How will will show how App Tabs work and how they will look?

- How can we explain to the user that the tab display preferences are not locked?

- Show users how App Tabs will work and look with UI overloading.

- Why we choose to use internal UI over platform.

All of these can be displayed with some JPGs/PNGs and a bit of sultry text, but it probably made more sense to compile a video since some of these elements are best shown, rather than described.

rflrob• 16 years ago

The mouse distance issue doesn't really bother me. Something well over 90% of the time, I switch tabs using keyboard shortcuts (actually, most of what I do in the browser is now keyboard based, thanks to Vimperator http://code.google.com/p/vimperator-labs/ ).

One thing I'm curious about for the mac is whether full titles on the very top will still be displayed if the tabs are on top. In Chrome, if I go to a page that has a long title (including this comment page), I have to hover over the tab to get the full title. Otherwise, it just shows up as "Hacker News | Why Tabs a...".

mbrubeck4• 16 years ago

Mouse targeting / Fitt's law is even improved with tabs-on-top in certain situations. Run Chrome or Firefox 4 maximized on Windows (or in a tiling window manager like XMonad on X11, with no border) and you can just run the mouse along the top of the screen to reach your tabs. They have "infinite" vertical target size, just like the Mac menubar.

msmith• 16 years ago

In the mockups shown, the tab doesn't extend fully to the edge of the window, which unfortunately means you don't get the "infinite pixels" advantage. The same is true for Chrome on OSX and Windows.

nooneelse5• 16 years ago

I'm similarly curious about where the bookmark toolbar is going to end up. Chrome puts it inside the tab, which kinda breaks the idea of conceptual encapsulation if one uses it to open new tabs as much as to control the current one. I dislike Chome's placement so much I barely even use bookmarks there, whereas in Firefox the bookmark toolbar is my most used bookmark interface with a dozen nameless favicons for the most used sites and just as many folders to organize the rest. It long ago pushed the menu bar off the screen entirely, taking its place above the navigation bar.

mhd• 16 years ago

It's a nice video, with good mockups and sound reasoning. But alas, it's not exactly an innovation. So it kinda looks like an ex post facto justification why they're doing it like Chrome and Opera…

Let's see whether they keep their lead regarding extensions. There are some nice goodies for Firefox that I haven't yet seen in Chrome, Opera or Safari. Some of them even pertaining to tabs (forgot what that color-coded, collapsing mega-tab add-on is called). But the other browsers are catching up quickly, mostly because they make it easier to write extensions. For Chrome and Safari it's basically HTML5 and JavaScript, nobody's royally rogered by XUL.

A a slight tangent: For the last couple of months, I've been using Safari at home without tabs. Expose is great, and it forces me to single-task a bit more. I tend to factor out the "read that later" pages to Instapaper, Evernote and Delicious anyway. Jamie Zawinski ain't that wrong. (On dual screens or without Expose it doesn't work as well, which is why my Linux setup at work is Chrome.)

edanm2• 16 years ago

A lot of the video was great and very insightful. But it was pretty funny hearing him talk about the possible problems with putting tabs on top, like your mouse having to travel more, etc. It kinda sounded like they're ignoring the fact that it's been a feature of other browsers for a few years now, and people seem to enjoy it (I do at least).

mbrubeck4• 16 years ago

In my opinion Chrome did Firefox a big favor here.

[Note: I work for Mozilla but I am not on the Firefox UX team and was not involved in this change; these are just my own thoughts.]

If Mozilla 1.0 or even Firefox 1.0 had tabs above the address bar from the beginning, we wouldn't have this problem. But we've spent the last eight years training half a billion people (literally) to use tabs below the address bar. Now most of them have internalized that model and think of as natural, or (much more likely) don't think about it at all but are used to it anyways and will be annoyed if it changes.

(Remember the story about Stuart Feldman in the 1970s when someone asked him to fix annoyances with Makefile parsing? He said it was too late to change the syntax, because Make already had more than a dozen users!)

Mozilla has been debating this for so long because there are good reasons not to change an existing product. Upgrading is more hassle for users when more has changed. Changes to the main UI are the worst.

But users are much more forgiving when adopting a new product like Chrome (not least because the change is less likely to be forced on them). And now that Chrome is so popular, we can point to it as strong evidence that tabs-on-top is a reasonable default that people will be happy to use.

Of course, Firefox still couldn't get away with it without the option to switch back to the old style...

boredguy82• 16 years ago

I'm just happy tabs use the title space in Chrome on Win7. I never ever understood why all that space was wasted by title bars. (It still wastes a lot of space in OS X, though not as bad)

fortybillion• 16 years ago

Unless you want to move the window, in which case trying to click on those 15 remaining pixels above the tab bar is very difficult (at least on OS X, not sure if it's different on Windows).

boredguy82• 16 years ago

You can click anywhere on the 'dark grey' to move the bar, including to the right of any tabs or beneath the stoplights. Personally, I think those 15 pixels above the tabs need to go away, too.

d0m2• 16 years ago

ok when I click PLAY, it goes to the END of the video. I try to place the cursor in the middle, i click PLAY, it goes to the END. I repeated this a few time, then came back here to rage comment on this.

d0m2• 16 years ago

Ok, there was an actual youtube version, I listened the video and it was instructing (even if not really innovating).

Jach2• 16 years ago

I like their reasoning, even though I don't personally like tabs on top, and I really appreciate an explanation. Yes, I'm pointing at you Ubuntu...

brianwillis2• 16 years ago

Ah yes, the "lets put window close button on the left" debacle. That old chestnut.

rameshnid• 16 years ago

I think he missed one other pro for having the tabs on top-

It makes it easy if the tabs are on top for a user using touch tablets.

vl• 16 years ago

Interestingly, bookmarks toolbar is completely missing from the discussion. Are they implying users should not use it anymore?

Right now my bookmarks in one line with buttons, address bar and search bar to reduce vertical space. With tabs on top it would definitely feel quite strange (I usually middle-click bookmarks to open them in new tabs, so action is not tab-local).

DaveChild• 16 years ago

The primary action of that button is tab-local. It's the secondary (or even tertiary) that isn't tab-local.

jasonkester2• 16 years ago

Did you notice the part where they go out of their way to tell you that tabs-on-top is a preference that can be set by the user?

That right there is the reason that Firefox is headed downhill.

That's the reason Firefox takes 30 seconds to open where Chrome takes 3. Every time you fire it up, it pulls in extra bloat so that it can perform all these little user customizations that don't really matter (or that in this case have a "right way" that can be defended for a full seven minute video), but that are needed to keep 10,000 nerds from writing angry blog posts.

Google, on the other hand, made some decisions about what they wanted the browser to look like and do, and implemented them. Want something different? Get a different browser. Want to check your gmail in the next few seconds? Chrome can do that.

My advice to the FF team is to remove that little check box they're so proud of that lets you rearrange the way tabs work. Then strip out the 100k lines of code supporting it. Then ship a noticeably better browser.

pbiggar• 16 years ago

Don't be ridiculous. The idea that you should force your users to adopt your (well intentioned, well thought-out) preferences with no options is a very recent idea, and its only adherents are coders and designers. While users don't necessarily like hunting for options, they don't like when they are taken away (ask the Pidgin people, for a well documented fork which happened because of this idea).

The suggestion that this causes the 30 second delay is crap. An empty firefox takes about 2 seconds to load for me; a new window takes seconds. My experience (and a cursory chat with firefox devs) is that it is really memory usage which slows firefox down, and I believe this is being helped in the new version.

100k lines is total exaggeration. I'd suggest that checking for the flag is one line, and implementing it the other way is less than 1000 lines (I would think less than 100, but I'll leave myself some breathing room). It's not like they can remove the whole about:config thing just because this one button is gone.

And if you think that removing a checkbox that nobody uses will make a "noticeably better browser", then you are dreaming.

jasonkester2• 16 years ago

This comes up pretty often, and there's plenty of literature available that explains better than I can why adding choices actually makes users less happy. Here's one:

http://www.joelonsoftware.com/items/2006/11/21.html

As to the level of effort to get that feature in and maintained, there's plenty of literature out there too documenting the perils of the "you can add this in 5 minutes" feature. For this one, you'll need:

- changes to the settings page

- logic to store the setting

- two parallel rendering paths for the window chrome

- checks everywhere that tabs are touched and special case logic for things that work differently when tabs are in their old location

- special case handling for all future features going forward (such as their new popups) to deal with two possible tab placements.

- unit tests for all the above

- bug fixing for all the above

- maintenance for all the above

- support for all the above

- documentation for all the above

It's a lot of stuff, measured in man years of effort over the lifetime of a software project as big as Firefox. And they can eliminate it all with a simple executive decision.

Tabs are moving to the top of the browser. They've done the research themselves and come to that conclusion. By both moving and not moving them in their next release, they're only making things hard for themselves.

statictype• 16 years ago

Firefox's large ecosystem of extensions would seem to indicate that their users like having choices and being able to customize their browser to their needs.

Lets just say that Firefox is Emacs and Chrome is vi and move on.

hellweaver666• 16 years ago

Then why not just ship with a default setting and let users use plugins to change it to their preference if they aren't happy? Hell, Mozilla could even write their own official "tabs on bottom" plugin if they chose to.

Kilimanjaro• 16 years ago

Tabs on top is as retarded as moving the stop button to the right of the address bar: just travel more distance to do common tasks.

Bad UI design.

At least we will have the option to change it back, with the stop button we are fucked. And every day of my life I damn the "genius" who moved the stop button.

ck2• 16 years ago

As long as I can change it back they can hypothesize what's best for everyone else as much as they like.

I still use a plugin to make Firefox 3.6 look like 2.0

Why Tabs are on Top in Firefox 4

Related Stories