Hacker News new | ask | show | jobs
by bloopernova 846 days ago
Better browser UX, in my strongly-held opinion, starts with vertical tabs. With horizontal tabs, you can have maybe 6 to 8 tabs open before things tabs get difficult to manage or track.

With vertical, nested tabs; links that open in a new tab are automatically made a child tab. From that you can infer structure and context more easily than horizontal tabs. Then you add colours to indicate different sites and now you see tab groups more easily. On top of that you can bookmark tab trees, thus saving progress of your research, documentation, etc etc.

My CSS file and a couple of screenshots are here: https://gist.github.com/aclarknexient/88673880d373864eee1927...

(I need to add a screenshot with nested and coloured tabs, will add that once I submit this comment)

9 comments

Fan of vertical tabs here, it’s a major boon for how I browse, which tends to involve a number of long-running tasks. Tabs work better than this than bookmarks, because cleaning out bookmarks sucks with how undeveloped all browser bookmark managers somehow still are in 2024.

I’m not too partial to nested tabs, but I think “panes” (Firefox extension Sidebery nomenclature) or “spaces” (what Arc calls them) where you can swap what group of tabs (including pinned tabs) is represented by the tab sidebar with a click is powerful, particularly combined with association of a pane/space with a browser profile.

So for example, a single browser window can switch between being dedicated to general browsing, shopping, online university courses, or software development, and if I want to split a pane/space into a new window temporarily, this is possible too.

I've been using Arc and I've become a fan of folders + vertical tabs also. But I also want bookmarks with tags. I don't want to keep 'pinouts for xyz motherboard' open somewhere all the time. I want to tag it with 'dell', 'motherboard', and 'pinout' and then search when I need it instead of having to remember what 'Space' I put it in. I prefer bookmarks to web search when possible because often enough I spend stupid amounts of time searching for a little tidbit and may want to come back to it later.

Rather than cleaning out bookmarks, I would keep a few main bookmarks and folders on the toolbar, and file away everything else under one few big folders with tags.

I use Firefox for tagging and it seems to be a fantastic way to keep track of thousands of sites with small cognitive load. Am I missing some workflow that's 'better'?

Yeah, not having bookmarks is probably Arc’s biggest weakness. I find bookmarks useful too, but only add them when I know I’m going to keep them around for a while.

Tags might work well but the friction involved is likely too high for me to consistently use them. It’s easier to just keep anything remotely short term in tab form.

To each their own, but: I strongly believe the opposite.

Of course having more than 6 or 8 tabs open in a horizontal tab bar makes tabs difficult to manage and track. I've used Arc for the past 6 months. Having 6 or 8 tabs open in a vertical tab bar is also difficult to manage or track. I end up just spam-closing all of them and starting fresh pretty much every 4 hours anyway.

Here's the two arguments I've heard that I resonate more with, one in either direction.

(1) Count the number of pixels dedicated to the tab bar space when it is horizontal versus vertical. I've never seen a functional vertical tab bar that used the same or fewer pixels than a horizontal one.

(2) But: Monitors almost always have more horizontal pixels than vertical pixels. So, actually, a vertical tab bar better-leverages the aspect ratio your monitor is built at. This feels true at 16:9 and greater aspect ratios; it feels untrue, to me, at the 16:10 aspect ratio; and unfortunately, this is an extremely common aspect ratio as its ~the aspect ratio Macbooks are made at.

It bewilders me that any rational UI designer would be so arrogant as to make the unilateral unchangeable decision for all their users that they should only have tabs on one side, be it the top, bottom, left or right of the window. Why restrict users to using tabs on only one side and one side only? What's so special about that side, and bad about the other sides? What if the user is left handed, or has a tall monitor, or a wide monitor, or lots of windows, or only a few?

While you're at it, why not just remove all the arrow keys from the keyboard except one? Then users can argue over whether the left-arrow key is better than the up-arrow key, and users who don't like having only an up-arrow key can buy a keyboard with only a left-arrow key.

But all keyboards have all four arrow keys, so there are no arguments about which arrow is better: you just use whichever arrow you want, whenever you want.

Most people prefer to use all four arrows at different times for different purposes, and put their tabs along all four edges, too!

I agree that it is odd, even from an "efficient market hypothesis" angle. There are people who use Arc literally only because of the very well-integrated and implemented vertical tab bar (versus, oftentimes jank & ugly addons in Firefox/Chrome). In other words, we (humanity) have to create and maintain an entire new browser just to solve this one problem for users that could, very easily, be a checkbox in a settings menu.

Same with Windows 11; I know one person who refuses to upgrade literally only because the Windows 11 taskbar is bottom-of-monitor only; they don't support moving it to the left or right-hand side of the monitor.

Its actually unhinged. Our industry was filled with years, decades even, where we were so excited and proud to build things to be as powerful as possible, to do as much as possible. Nowadays, companies want to build the least they can possibly get away with. Its sad what we've lost.

I, too, remember when GUIs (not UXs!) respected the user's desires, workflow and general agency. That's not entirely gone yet, but it's going. Heck, Office 365 updated lately and now I have this ongoing little contest of displaying the tiniest number of coworker Teams comments in the hugest amount of white space. The results beggar belief.

Edit:

Teams (it's a Chrome browser window, but that's not really relevant to my rant) is taking up like two square feet on a 4K monitor, and 3-6 messages plus links to a couple attachments are all it will show me - along with enough white space for another 300 channel names (but only channel names, nothing else), headings the size of movie trailers, just oceans of space and garbage I don't need and can't use.

In an ideal world, there'd be some way to adjust the layout a bit, and in fact when we used Slack before Teams, that was pretty easy: you move the divider between channel names and messages to the left, thus giving less space to channel names, more space to message content. Done.

But that's too much power to allow a user to have, in these modern, enlightened times. So while Teams has such a divider, there's no provision to adjust it. Want to see more than a handful of messages at the same time? Gonna need a bigger monitor. Probably 55" would be a good size.

Of course, that's one example out of a billion. It's not that software won't cater to my particular workflow... it's is that software no longer allows me to make reasonable adjustments to support a workflow that works for me, and in fact removes still-remaining means to do so on a regular basis.

Really it's the whole "you're holding it wrong" mindset that I get so tired of. We all labor under our own constraints and just a little leeway on basic customization goes a very long way to making software more usable. Just let me view more than six messages at once, ok? Please?

I was less than satisfied about they layout of the buttons in xcalc, so I built a version of the window manager that let me specify the root window containing the windows to manage, and gave it the window id of the xcalc window, so it put window frames around each calculator button so I could move them around, resize them, even close them into icons (bigger than the button) if I didn't want to use them. Not what the xcalc or window manager designers had in mind, probably.
Software maintenance is not the primary cost of a configuration option. The biggest cost is the customer support load [1]. This is especially a problem if the customer manages to get the application into a "busted" state.

Your complaint, where the software is less convenient than it could be because the sidebar is too big, will never result in a Priority 1 Customer Support Ticket. Adding the ability to resize a sidebar can actually cause that to happen.

Someone accidentally resizing the sidebar to become unusably small or large and calling support because they don't know what they did or how to fix it will describe it as an emergency. This is not a lie, since the thing they need to get at to complete their work is impossible to get to without resizing the sidebar, and they don't know how it happened or how to do that. They resized the sidebar while trying to drag and drop something else, and since they weren't using it at the time they went some twenty minutes without even realizing anything was wrong, and now they've forgotten what they did.

Hopefully, it escalates up the support chain until someone finally manages to figure out what happened, or it escalates high enough and the customer is willing to give remote desktop access to a support tech [2]. If you're not lucky, they just give up and switch to a program that, hopefully, doesn't break on them.

Source: I used to work the support line for customer-facing software. I don't any more, but I still work directly with customer success agents, so I still regularly see this exact kind of problem.

[1]: Or, if you won't take it from me, take it from Joel Spolsky: https://www.joelonsoftware.com/2000/04/12/choices/

[2]: Some companies just don't do remote desktop control support. This is so that they can directly tell their customers "we never ask for control of your computer, so if someone claiming to be us asks for it, they're a scammer." Remote desktop access is a dangerous way to do tech support because, if you accidentally wind up talking to a scammer instead of a real support tech, they can wreak havoc with that level of access. OTOH, the company I work for sells software that works with barcode scanners and printers, and I really don't feel keen on trying to talk people through setting them up so they work properly...

> Someone accidentally resizing the sidebar to become unusably small or large and calling support because they don't know what they did or how to fix it will describe it as an emergency.

And that's why you have an in-house support departments whose job is to solve these issues. It's like buying a tractor, then relying on the company several towns away to provide repairs.

Customizability is good. Because when I settled in a workflow, I don't want to see things I don't want occupying space or distracting me. It's like not using part of the desk because you're supposed to have piles of books in this place.

I'm not advocating to have trillion of options a la VIM. But anything except the core purpose of the software should be customizable in some way, including the options to hide it.

> And that's why you have an in-house support departments whose job is to solve these issues.

There's a market for software that doesn't require that.

Small companies don't have in-house support departments. They contract with an IT provider. Big companies do, but theirs isn't materially different than the contracted one (a typical "big company" is really just three small companies standing on each others' shoulders wearing a trenchcoat). Their purchasing decisions are going to be based on what they think will reduce the amount of support calls they have to deal with.

> It's like buying a tractor, then relying on the company several towns away to provide repairs.

John Deere software locks their parts. They haven't gone out of business, so a lot of farms must be doing just that.

Edit: This is not an argument against RTR. Anyone who's willing to break a warranty seal and tinker with the inside of the computer or tractor they own should be allowed to do so. Being able to customize is good. Being able to accidentally customize is bad.

For me, Pidgin with the MS Teams plugin solves this problem. Now I can chat with others on Teams, using a program designed for chat.
If you say "Teams" the rest is just redundant. It is the worst piece of UI ever created.
> But all keyboards have all four arrow keys,

Please don't tell that to UX experts. They will replace all four with a hamburgher menu. /s

If you squish vertical tabs so as to have as few characters shown as horizontal tabs you'll have plenty of horizontal space for an apples to apples comparison.
When chrome first started getting popular many Firefox users were on vertical tabs, and it was not lost on me that chrome was made for small screen laptop users. A smart design decision even if it feels gimped for vertical tab users.
> chrome was made for small screen laptop users

Makes sense if one considers how many 13” Macbooks and original MacBook Airs were likely being toted around the Google campus in the late 2000s, with Macs being the predominant development platform there at the time.

Further down the road in 2011, Chromebooks appeared, most of which are on the smaller side which also acts as incentive to keep Chrome usable on smaller screens.

Desktop Safari and MS Edge are also decent in this regard, likely a result of their parent companies being makers of popular small-screen computers.

> (2) But: Monitors almost always have more horizontal pixels than vertical pixels. So, actually, a vertical tab bar better-leverages the aspect ratio your monitor is built at. This feels true at 16:9 and greater aspect ratios

This is true, and as a vertical tab bar user, it's important to me. However, when every app follows this logic and decides it gets to have a sidebar (or two!), all of a sudden I'm looking at a lot of apps that are barely usable unless they're maximized.

I often find myself thinking 'hey, fuck you, $APP! those pixels are for my vertical tab bar!!'

Plus looking at the screenshots of the "controversial" FF89 one of the biggest changes seems to be redesigning the tabs w/ more padding.

I didn't even notice that change because I have the top tab bar hidden and use Tree Style Tab that has a design which blends nicely with FF.

I don't like FF in particular but the tab tree is 100% enough of a UX gain vs all the small details chrome/safari does slightly better that I don't think twice (besides dev panel, I use chrome for frontend work).

I use FF primarily, but sometimes Chrome for debugging, on macOS.

I literally cannot tell them apart.

Replying to my own comment: HN faux pas, or good information organization? :)

In the Tree Style Tab options page, there's an Advanced section that has a live-reloading user style sheet section. Very cool for testing out font choices without restarting the browser.

I've changed mine to use Apple's really nice SF Pro font, condensed. Somehow the Iosevka Mono that I use everywhere didn't look quite right on the tab titles.

The CSS:

  :root.sidebar tab-item.unread .label-content {
    font-style: italic !important;
  }

  :root.sidebar tab-item {
    font-family: "SF Pro" !important;
    font-stretch: condensed !important;
    font-weight: 300 !important;
  }

  :root.sidebar tab-item.active .label-content {
    font-weight: 500 !important;
  }
Same link as my previous comment now has a screenshot of the result of that CSS: https://gist.github.com/aclarknexient/88673880d373864eee1927...
Vertical tabs start to suck on a laptop. For one my auto hide sidebar hack for firefox broke and I am too lazy to fix it, so now I have basically a whole inch by several inches of dead gray space because I don’t have a full column of 100 tabs ever open, maybe 5 or 10.

This wouldn’t be so annoying except many modern websites use browser viewer size instead of the user agent to make the call you are a mobile or desktop user. So I basically have to use fullscreen browser windows because considering I already lose an inch to the tree style tabs, I really don’t have much width to lose before the site assumes I am an iPad and gives me a ton of hamburger menues that also suck to navigate because of how they tend to wrap text on constrained width browser viewers. Most of the time I just have to disable the sidebar entirely which of course adds a few clicks everytime I change tabs now.

Not only for browsers.

Once monitors got wider I moved everything left and vertical.

It's also kind of a hierarchy that flows from left to right:

OS -> App -> content

Some content follows the same pattern (or can be configured close enough)

Eg: discord servers -> channels -> discussion

Eg: IntelliJ -> project files -> vertical tab for open editors -> editor

Most content nowadays is mobile-first anyway, which is a nice way of saying it wastes most of the space on desktop (most webpages fit a title and subtitle OR 3 bullet points on a 24" screen)

I've got around one hundred firefox tabs open currently, distributed in multiple windows on 8 workspaces and dual monitor.

Horizontal tabs where always a design fail unless their number and title is fixed AND small. Made sense in physical cabinets because gravity wins and the space in a single drawer was limited.

Vertical tabs would be unusable on a window that's resized to be half the width of a 16:9 display.
I do it all the time and I don't think it is "unusable". About the only "issue" with it is often that it shrinks the viewport just enough to trigger "mobile" breakpoints in CSS, but for some websites (YouTube, especially) that can be a feature as much as a "bug".
This is a good point especially on laptops. It might be nice to display side tabs until a breakpoint and thereafter autohide
> Better browser UX, in my strongly-held opinion, starts with vertical tabs. With horizontal tabs, you can have maybe 6 to 8 tabs open before things tabs get difficult to manage or track.

TabMixPlus! Dynamic width vertically scrollable fully customizable multirow tab bar. I have 50 tabs open, 22 on screen, and perfect overview. It still technically runs on current Firefox, but you have to engage in some very vigorous modding. See the README https://github.com/onemen/TabMixPlus but be aware that this will completely disable extension signature validation. (I blame Mozilla.)

I think Sideberry is nowadays more comfortable than TMP.
Vertical tabs are better in some situations and for some users, horizontal tabs are better in other situations and for other users. So all users should be able to choose to place tabs along any side of any window, and change which side and what position any tab is at any time. Not just tabs for emacs frames or web browser windows, but for ALL windows including top level and internal application windows. And you should also be able to mix tabs from different apps in the same frame, of course. Why not?

I implemented tabbed window with pie menus for UniPress Emacs in 1988, and still miss them! Later in 1990 I developed several other versions of tabbed windows with pie menus for NeWS that let you manage any NeWS and X11 windows, and drag the tabs around to any edge.

https://news.ycombinator.com/item?id=38338008

DonHopkins 3 months ago | root | parent | next [–]

UniPress Emacs for NeWS, with tabbed windows and pie menus: 1988.

https://en.wikipedia.org/wiki/Tab_(interface)#/media/File:Hy...

https://www.youtube.com/watch?v=hhmU2B79EDU

https://news.ycombinator.com/item?id=38337808

DonHopkins 3 months ago | parent | context | favorite | on: Vertical Tabs in Visual Studio Code

This is why you should be able to choose which side and position any tab is positioned along any window at any time, and change them at any time by dragging them to where you want. Then you can assign meanings to each side, depending on your workflow, for example (this should be under user control, not set in stone, of course):

Tabs on the top for important stuff.

Tabs on the bottom for administrative stuff.

Tabs on left for things you haven't read yet.

Tabs on right for things you've already read.

Then drag the tab from the left to the right after you read something (like moving it from your "in box" to your "out box"), or pin its tab on the top or bottom of it's important and you want to keep it around and easy to find.

And if you really want, you should be able to hide the tab to save space.

And not only tabs for apps like browser and IDEs, but also the desktop window manager should support tabs on top level windows in a consistent manner, so you can drag tabbed windows in and out of other window frames, as well as arranging them in hierarchical outlines along the edges.

All this is super obvious, and saves a lot of time and effort, so it bewilders me why tabs like I described and implemented in the 1980's aren't universally supported on all desktops and applications by now.

It's not because they're patented. Adobe tried, and sued Macromedia over it, but that patent (illegitimate in my view, since it ignored the prior art, and was extremely obvious and not patentable) has long since expired.

https://www.metafilter.com/2805/Adobe-sues-Macromedia-over-i...

https://news.ycombinator.com/item?id=38337876

DonHopkins 3 months ago | root | parent | next [–]

Also, not everything is a file. Tabs should apply to all edges of all windows, including top level windows, not just one edge of only windows with files in them. And you should be able to drag any window out to top level and it still has its tab attached, then move it around to any position along any edge, or hide it, and of course snap windows together along their tabbed edges, either tiling or overlapping.

How do you control all of that? That's where the pie menus on the tabs come in, of course. Thanks to the tabs, you can even pop up pie menus on windows that are completely covered up, and perform commands on them even though they're not visible, like bringing them to the top (stroke up) or down (stroke down), or closing them (diagonal stroke for confirmation submenu, then stroke up to confirm), or whatever (paste into terminal emulator, evaluate code in editor, etc).

https://news.ycombinator.com/item?id=38347429

DonHopkins 3 months ago | prev | next [–]

And as long as you can have tabs on any side of a window, how about multiple tabs on the same window? Like child tabs as well as label tabs, that are links to other windows.

Another cool use of vertical tabs is for the tabs on the left to select between windows, and the tabs on the right select between children of the current window (not sub-windows, but related windows or sub-directories). And you can use the tabs along the top as breadcrumbs to navigate back up the tree.

Some IDEs kind of do that with a directory browser on the left and a function browser on the right, but with outlines and scrolling lists instead of actual tabs.

You could navigate the tab tree by clicking or gesturing left or right with a pie menu on a tab, sliding the right column of tabs over to the left to descend into the tree.

Like a Finder window that shows directories as tabs on the right instead of icons inside.

You could also have top and bottom edge tabs for different kinds of children (i.e. xml attributes vs elements, object methods vs properties, different views or editors, etc).

The original NeXT file browser had breadcrumbs along the top (but not tabs):

https://www.youtube.com/watch?v=rrTag7nSHlw&t=701s

https://news.ycombinator.com/item?id=38341279

donatj 3 months ago | prev | next [–]

VScode started with vertical tabs only back in the day. It was a very interesting design choice. They switched to horizontal tabs from pressure.

DonHopkins 3 months ago | parent | next [–]

I just can't get my head around the mentality of making that decision for all of the users, hard coding it, and forcing it on them, not allowing you to choose for every window, or change your mind at any time, and simply drag any tab to any edge you want, whenever you want. What makes user interface designers so arrogant and sure of themselves and lazy that they think one particular side is the only side, and the best for everyone, no matter what your screen size, resolution, aspect ratio, layout, number of tabs, icon or label size, workflow, direction of text flow, handedness, visual acuity, physical dexterity, task, and preference?

And then when you inevitably run out of space for tabs along the one edge, instead of simply allowing you to put more tabs along the other edges, you either add more horizontal rows along the top, so you get this abomination [1], or you have tiny little hard to use scrolling arrows at each edge so you can't see all the tabs at once, so you get that abomination [2]:

Is it ever okay to have multiple rows of tabs?

[1] https://ux.stackexchange.com/questions/15558/is-it-ever-okay...

Awesome Scrolling For Wide Tab-Interface Applications - ScrollTabs:

[2] https://www.jqueryscript.net/layout/Awesome-Scrolling-For-Wi...

It's like only putting only one arrow key on the keyboard.

https://news.ycombinator.com/item?id=38337425

DonHopkins 3 months ago | parent | context | favorite | on: Vertical Tabs in Visual Studio Code

I've been implementing and using vertical tabs since around 1988, with I released a commercial product with tabbed windows, the NeWS version of UniPress Emacs, and used it to develop a hypermedia authoring environment for HyperTIES at the UMD Human Computer Interaction Lab.

https://en.wikipedia.org/wiki/Tab_(interface)#/media/File:Hy...

Vertically tabbed windows combine synergistically well with pie menus, and are great for window management, especially when you have many windows.

They are purposefully NOT patented, since the idea is so fucking obvious, but it's disappointing they took so many decades to catch on finally. Still there aren't any decent desktop window managers I know of that implement tabs the right way. (tvtwm is not the right way!)

The later NeWS Toolkit versions from the early 1990's let you drag the tabs around to any side of the window you like: left, right, top or bottom, to any position along any edge. The user should be able to decide which edge and where the tabs are attached to for each window, it should not be hard wired like the tabs in VSCode and web browsers typically are. Being able to choose which edge the tab is on and where the tab is gives users better more flexible ways to organize and manipulate their windows.

https://en.wikipedia.org/wiki/Tab_(interface)

HCIL Demo - HyperTIES Authoring with UniPress Emacs on NeWS, tabbed windows, pie menus:

https://www.youtube.com/watch?v=hhmU2B79EDU

I had a video of the NeWS tabbed windows, demonstrating dragging the tabs to different window edges, but youtube took it down because it contained copyrighted music (Herbie Hancock's Rockit).

Oh, here's the original video you can download from my server:

https://donhopkins.com/home/movies/TabWindowDemo.mov

Here are some different version from 1988-1991 for different versions of NeWS:

https://donhopkins.com/home/archive/NeWS/tabwin.ps

https://donhopkins.com/home/archive/NeWS/tab-1.ps

https://donhopkins.com/home/archive/NeWS/tabframe-1.ps

https://donhopkins.com/home/archive/NeWS/tab-3.0.2.ps

Here's another NeWS program that uses vertical (by default, but any edge if you want) tabs on windows around PostScript objects that you can push and pop on the stack with "direct stack manipulation":

The Shape of PSIBER Space: PostScript Interactive Bug Eradication Routines — October 1989

https://donhopkins.medium.com/the-shape-of-psiber-space-octo...

PSIBER Space Deck Demo:

https://www.youtube.com/watch?v=iuC_DDgQmsM

> And not only tabs for apps like browser and IDEs, but also the desktop window manager should support tabs on top level windows in a consistent manner

I miss the tabbed window feature in KDE 4. This is the feature I'm most disappointed to see missing from version 5.

- https://bugs.kde.org/show_bug.cgi?id=343690 - https://community.kde.org/Plasma/5.4_Errata

I think this is a really essential feature when displaying tiled windows.