Vertical/Tree-Style Tabs
1Most web content is vertically oriented (especially since sites these days are formatted with phones in mind) and monitors are horizontally oriented. So where’s the best place to put browser tabs? On the side, right? So why are they all on the top?
Firefox version 57 finally killed addons that supported vertical tabs. So it looks like I’ll be staying with version 56 for the foreseeable future. (“Tabs” in a sidebar while keeping the top tabs just doesn’t cut it.)
I know I’m not the only one on this forum that employs numerous browser tabs. What do you do about it?
- 12 comments, 18 replies
- Comment
Which side?
The right side has historically been for scrolling. The left for additional site navigation.
but… my screen is horizontally oriented…
@Moose Right. And if it was vertical, with multiple rows of tabs, that might be alright. But you don’t get that – you get one scrolling row of useless tiny tabs. At best.
Which of these two layouts make the most sense?
@walarney neither. Too many meh tabs.
@RiotDemon
Too few tabs.
(For tab aficionados)
I usually make my browser window smaller horizontally so I can use screen space for other stuff next to it.
@Pantheist Exactly. Because there’s space on the sides (and browser content accommodates narrow windows better than short ones).
@walarney Also because I’m used to comparing papers that are next to each other so it’s comes more naturally for me to look left and right rather than up and down.
I leave them up top where they belong. As a web designer I cringe at the idea that some browser might decide some day to shift browser chrome elements from the top where they’ve lived since the start of web browsers to the side. As far as vertically oriented content goes (your term not anything I’ve ever heard used like that in the industry) if the designers of sites aren’t leveraging the wonderful tools we have now that enable a site to present content responsively to best suit the device the reader is viewing it on, shame on them. They’re just plain lazy. I can promise you that for the foreseeable future any site I’m involved in developing will offer an optimized viewing experience for whatever resolution device you happen to be reading it on.
@jbartus I’m just a humble end user, but I’d say that your sites are exceptional. Very rarely do a I find a site that takes full advantage of the width of a monitor. After some width, there’s just white space on the sides. Scrolling vertically is more natural than horizontal. To maximize visible content, you want to utilize all of your vertical resolution, while there’s extra space on the sides that could be used for tabs.
@jbartus The teepee farm is what makes me cringe. This can’t seriously be considered good UX design?
@walarney Yeesh! Stuff like this is why i abandoned Chrome. It’s just not designed to handle the number of tabs I use.
@walarney Given that all major browsers arrange them as such and many applications that tab interfaces follow suit I’m inclined to believe that user experience studies have largely found that this layout is preferable.
Your use of a mass volume of tabs is a personal choice that reflects the usage of, in my experience as an IT professional, an extremely small subset of users. The average individual I come across in my work uses a handful of tabs at any given time and that doesn’t even cover the significantly larger (than use mass volume of tabs) subset of users who don’t even understand tabs and don’t use them unless they click a link that opens one for them (and often leaves them lost as to how to get back from whence they came.
In general I agree with you that the tight stacking as pictured there is poorly designed I’m not entirely sure there’s a better option short of a scrolling list ( either horizontal or vertical) which, while it would achieve superior readability of tab titles, would defeat the main purpose of tabs as a means of quickly switching between open content. If not for this utility, tabs are practically no better than the many widowed approach that preceded them, and having to scroll through a list of tabs would severely reduce that utility.
Regarding sites the reduced width content areas are largely designed to improve readability on wide screen monitors as have become the norm. Having to pan your eyes back and forth across the entire width of a monitor all day long would almost certainly lead to rapid and increased bouts of eye fatigue. While your argument has some merit as this leaves the gutters open for other things the space is important for things like providing navigation menus, placing ads outside of the flow of the main content (hopefully, some sites use the space to supplement inline ads obviously), extra room for design elements, etc. Narrowing the browser viewport to accommodate relocated chrome (term for the GUI elements of a browser not specific to Google Chrome) elements would also have a deleterious impact on the ability of the site to present HD content without resorting to full fledged fullscreen.
@jbartus I don’t think you’ve ever used dozens of tabs in a tree style layout. What you’re saying about placement might make sense in the abstract, but if you’ve tried it, you can manage several times as many tabs to a window comfortably, without losing track of any of them.
Depending on the implementation, that can also free up precious vertical space. I’ll do just about anything for an extra 20 pixels in that up-down dimension. For me, the web is mostly text, that I am mostly reading. I (almost) never run browser windows fullscreen, anyways. They’ve always got a taller shape — so moving the tabs to the side just means I have a wider browser window, probably with a slightly taller viewport of the same width.
@InnocuousFarmer you use the word “I” an awful lot there. What I’m seeing in response to my detailed and thoughtful post is basically “This is what I like and I just know you’d like it too if you just gave it a chance.”
Here’s the thing though, it is an extreme situation that would see me with more than about 20 tabs open at a given time and I feel very comfortable stating without hesitation that I am a power user, not the norm, an outlier. If I’m an outlier where do you suppose you fit into things? An outlier of an outlier?
Furthermore, in the event that I have that many tabs open I’m probably grouping them together in multiple windows logically as suggested by a few people here so that once done with a topic I can terminate that specific window without having to worry about closing something else I cared about keeping open. I can imagine how a tree would achieve the same effect in practice but again, if you have dozens of tabs open eventually such a list would require scrolling and scrolling adds an extra action every time you need something that isn’t in the current viewport of the tab tree. The tabs are meant to provide ready access to what are essentially no different from individual browser windows except that they don’t list individually in Windows’ interface and have a handy and convenient GUI for accessing them so you don’t have to ALT-TAB to hell and back looking for the one you need. I don’t have hard research data to back it up but I’d be shocked if there weren’t some somewhere demonstrating that scrolling through a long list of items that exceed the viewport height is harder to use them having them at hand. This all in aside to my earlier point about the practices of your average user and being an outlier and all that.
As an outlier I know and understand that the world isn’t going to design a product based upon my needs and wants unless they happen to align with the majority of users. In the case up for discussion here and based upon a variety of things, a fair number of which I touched upon in my prior post, I wouldn’t recommend holding my breath for browser developers to suddenly start worrying about redesigning an interface that has the benefit of ease of use for the average user just to cater to a subset of a subset.
@jbartus I wasn’t looking to have an argument, or write out an exhaustive thesis, just expressing a small portion of a different point of view. We’re mostly talking past each other, here.
I can’t afford the time right now to respond to your lengthy posts point by point. I don’t want you to think I’m being disingenuous though, so here’s a couple replies.
Your point about scrolling – it applies to horizontal tabs more quickly than vertical tabs if they don’t compress down to slivers, the way that Chrome’s do. (Safari’s tabs, for example, don’t compress that much, so you do wind up scrolling a lot faster than you would if they were vertical.) In Chrome’s case, scrolling would be preferable to having impossible-to-differentiate triangles. Tree-style tabs also have child tabs in a collapsible hierarchy underneath a parent tab. The end result tends to be that, in a pile of a few dozen, you can avoid scrolling while also easily seeing which tabs are which. Even if you do have so many tabs open that you wind up scrolling, you will then have less scrolling to do. Vertical scrolling is cheap and easy.
Your point about looking left and right (to see the web page on the right, and then see your tabs on the left) doesn’t jive with your point about having very wide web pages – surely having the content of a web page, where you’re interacting with the entire thing at one time, is more likely to produce a scenario where you have to look left and right quickly and repeatedly enough to feel discomfort. You tend to only look at tabs at relatively infrequent intervals, to switch tabs, or to manage one or more of them.
My point is not that tree style tabs are more popular than horizontal tabs, nor that I think Apple, Google, or Microsoft are likely to change the UI convention, or even that they should, for the average user, who wouldn’t even use tabs. I’m just saying that, for a power user, tree style tabs are better. There’s no accounting for taste, of course, and vertically-oriented tabs could represent wasted visual space if you don’t have enough tabs open to make use of them.
@InnocuousFarmer I think you misunderstood something, I never said (or at least meant to?) anything about looking back and forth between side tabs and content.
I guess maybe it bothers me more than it should.
Just open in New Windows instead of New Tabs. Then you can have your OS do the vertical tabs.
This is a genuine irritant for me when I use laptops and desktops.
I do want browsers that include extensibility to offer the option of extensions that move trans to a verticle list on the side.
Alternative:
Multiple rows of tabs, tabs having user-settings to control minimum tab widths.
Only one or a few rows (user-controlled # of rows) should be visible when user is viewing a page (in order not to eat up screen space).
User can click something somewhere on the visible tab row to open/close all the (thousands of, if need be) rows of tabs.
Click the tab the user wants, and either that tab migrates to the top row, or that row becomes one of visible row of tabs. (User setting again)
Or something like that.
An extension that disables scripting and activity on any tab or most tabs not recently viewed (say 15 min) is important here.
Caveat
I haven’t coded in more than 30 years.
Clueless am I.
@f00l If you want multiple rows of tabs you can do what I do- just open multiple windows, each with their own set of tabs.
@Pantheist
that’s not what I want tho.
Multiple windows are a PITA to me.
Tho I do use them. Since portions of the universe do kinda suck.
My solution is to use Pale Moon, instead, which will never abandon useful UI or extensions to same:
https://addons.palemoon.org/addon/treestyletabforpm/
@TPS It’s been a while since I’ve looked at “alternative” browsers. I probably can’t use it at work, but I’ll give it a try at home.
I found tree style tabs very useful when I was doing customer support. Keep everything grouped together and then easily close all the related tabs in one or two clicks. Firefox 57 has been noticeably faster, but I have been disappointed with things not working. Mouse gestures aren’t working well on Mac and Linux because the context menu from the right mouse click comes on button down, not button up, and there’s no support for changing that yet, even though it’s apparently been discussed for months.
Mobile Safari ate my reply. That hasn’t happened before. Web browsers, ugh.
To summarize: Tree-style tabs glorious, Firefox didn’t render images properly in my monitor’s wide gamut color space anyways, Opera might be ok, especially with cvim, but not Vivaldi, which lost my session (tabs and windows) after a computer crash; w/o vertical tabs, windows proliferate, tabs breed like rabbits.
When the company last moved the boss finally threw away the old Rolodex and the flip-top metal directory thing that you slid a lever down to the first letter of the name you’re looking for then pop it open. Vertical tabbing!
And now they’re back! All you need to do is alphabetize those vertical tabs! Everything old is new again.
@duodec