Tabs position: the toilet paper roll of UI design
There’s an age-old debate about which way the toilet paper roll should face — paper comes over the top or around from under the bottom? I’m an over the top kind of guy myself. And it turns out I feel the same way about tabs in my browser as I do about paper in the bathroom.
Here’s Alex Faaborg, Firefox UI designer and all around nice guy, explaining why the default preference for Firefox 4 will be tabs on top:
Alex breaks down four reasons for the switch (and one negative):
- Conceptual model: this is the biggie for me. The dislocation of controls from the tabs they affect has bugged me ever since I worked on the theme for Firefox 2 way back in the day. The world has changed a lot since then — the real birth of the mobile web had yet to happen — and the number of Firefox users has skyrocketed from about 30 million to somewhere near 270 million. I don’t know that the new model is better for people who are used to browsers, but it will certainly improve the experience for everyone coming into this world and will establish a better precedent for browsers on mobile and other platforms.
- App tabs: I really like idea of app tabs — a series of icon-width tabs fixed to the left edge of the browser for the web apps you keep open all the time. I love that it fixes them in your mental map (Gmail is always one tab from the left). I’ve been using Site Specific Browsers (SSBs) made in Fluid (Mac OS X only) or Mozilla’s own Prism (Mac OS X, Windows, Linux) to achieve somewhat the same effect, although broken free from the browser and running as a native app. These days it’s for Hootsuite and Rypple, and I’m not sure that I’d give up the command-tab app switching ease for the reduction in memory overhead.
- Tab-based Firefox UI: This was the weakest of the three reasons for me. I don’t have the background on the topic to really judge, but I’m not convinced that moving the Firefox UI for things like managing bookmarks into a tab on the desktop makes sense because it will be like that on other platforms. I’m a big fan of consistency, so that’s always a compelling argument for me, but that cuts both ways. We battled this particular battle during the work on the theme: should Firefox behave the same way across all of its platforms or should it behave as a native app on each one? Moving what would be a windowed UI in any other native Mac/Windows/Linux app into a browser tab breaks the OS-level consistency in favor of the app being consistent. Call it broad vs. deep — and I’m not even sure which one is which — but let’s say it’s broad Firefox behavior across platforms vs. deep integration into each platform. I don’t know that there’s a clear winner, but if you’re going for broad then the argument for tabs on top makes sense.
- Notifications: I’ve never been a huge fan of the ‘banner’ style notifications in the current Firefox. Too easy to not notice for all the reasons Alex cites. I really like Larry, the Firefox Passport Officer, so I’m glad to see Johanth’s great work will be applied in other places too. Seeing the tab-modal version inside of the tabs makes for happy face — that’s where it belongs. All is right in the world.
- Mouse distance: Oh, Fitt’s Law. No debate on UI will ever be complete without you. You’re the Godwin’s Law of UX. There is certainly merit to this discussion, and I’m glad to see it will be resolved through empirical testing using Test Pilot, but I get the feeling it was thrown in here to appease those who would use it as stop energy rather than out of real consideration for it. Yes, the mouse distance will be further, but the target size doesn’t change. If you recall your Shannon formulation (and I certainly didn’t), time to complete the movement is calculated from two constants, target size, and distance to center of the target. Only one of those changes in this case, and it’s the numerator, so the impact shouldn’t be too significant.
Great video by Alex — really glad to see him adopting this format as a way to share works in progress. Maybe something we’ll experiment with at Rypple as we start to build a bigger following of people with the same passionate interest.
Likely-related posts:
- Firefox Tab Candy is a delicious ZUI topping I really love the return of the browser wars. It...








