Vertical tabs in web browsers have always seemed the kind of user interface idea that sounds good in theory, but never quite works out in practice. As most browser features, it started out years ago in Opera, until Opera abandoned its proprietary rendering engine and switched to Chromium. Firefox had several extensions for vertical tab placement, Chrome at some point experimented with a flag to enable them, but they never became a standard part of browser interfaces. Until, at least, Microsoft Edge started working on the concept, and launched a preview of vertical tabs late last year in the Dev channel. The feature has graduated to the Stable version of the browser earlier this month, so it should be currently available to all Edge users.
I have both the Dev and Stable versions installed, and I switched the Dev version to vertical tabs as soon as this was available, but I still browse predominantly in the stable version. I honestly did not expect to find vertical tabs this convenient and usable. Now that they are available in Stable Edge, I have them on most of the time. Having a visible button to switch back is extremely helpful, both to make the feature discoverable to users, and as a ‘safety net’, allowing people to quickly switch back to the familiar horizontal placement if they feel overwhelmed or annoyed by vertical tabs.
After listening to our users and consolidating our findings, we came upon some important considerations for the next iteration.
Michele McDanel
- A visible feature button: We learned that many users like to switch between horizontal and vertical tabs, depending on the number they have open. Users needed a visible toggle, rather than one hidden under a setting. We adjusted the placement of the vertical tabs button to increase discoverability and efficiency.
- A cohesive color palette: When we first began prototyping, we were using the same color as the horizontal tab-band. But our users noted how vertical tabs appeared dark and heavy. So, we lightened their color to make them feel more cohesive with the rest of the browser UI.
- A collapsible pane: Some users expressed the need to focus or temporarily regain more screen real estate without losing the benefits of vertical tabs, especially on smaller monitors. To address this, we added a collapsed pane functionality, which enables users to see more of the web while still providing access to their tabs.
They take some time getting used to, and navigating between tabs is a bit awkward, because with a mouse the target area is much smaller and further away on the right side of the screen. I started using keyboard shortcuts more frequently (Ctrl+Tab / Ctrl+Shift+Tab to switch back and forth between neighboring tabs, Ctrl+W to close the active tab – a middle-click is my preferred method with horizontal tabs). Having tabs appear individually in the Alt+Tab switch now makes a lot more sense, because you can use a familiar shortcut to navigate between open tabs.
On the plus side though, you can get more screen space for websites thanks to the collapsible pane. It is a little jarring how the panel auto-expands when you hover the area to switch or close tabs, but fortunately improvements are on the way. A Reddit user posted a workaround, available in the Beta versions for now, to freeze the collapsible pane in place, reducing it to a thin strip of favicons. It is a very unusual set of steps: hover the vertical tabs bar; once the pane auto-expands, move the pointer to its border; when the pointer turns into a horizontal resize arrow click and hold the mouse button, then press the Caps Lock key. In the Stable channel the tabs side-pane is not resizable, so this trick does not work yet. I assume once this rolls out to Stable the browser will have a clear toggle somewhere in the settings, as I don’t imagine people will ever stumble upon this weird combination of actions by chance.
It seems that Microsoft secretly added an option so that the Vertical tabs pane doesn't auto-expand when it is minimized (when you can only see the tabicons). from r/edge
There are several other hidden options related to tab management, that you may find under flags. You can turn off the title bar in vertical tabs mode – I hated the result and immediately turned this off – or you can play around with the various tab groups experiments.
Post a Comment