Mark Johnson

    Horizontal vs vertical tabs

    Friday 14th June, 2019 - 3 min read

    I was reading a post on Hacker News about tabs being the wrong metaphor which spurred a discussion about horizontal vs vertical tabs and the trade-offs between the two.

    The comment said:

    “Tabs on the left and right edges of the windows work much better than top or bottom tabs, because text is wider than it is tall, so you can fit a lot more tabs, and actually read their labels.”

    Horizontal tabs

    Horizontal tabs are tabs going across the top or bottom of windows.

    Horizontal tabs can be useful, and are used frequently in many products.

    Tabs

    But horizontal tabs run into issues pretty quickly. See how tabs become unreadable in Chrome once you have too many open at once.

    Too many tabs in Chrome

    Firefox has the same issue. It addresses the issue of unreadable tabs, but introduces a painful side scroll mechanism to navigate between tabs.

    Too many tabs in Firefox

    Vertical tabs

    Vertical tabs go along the left and right edges of windows and seem to overcome some of the issues faced with horizontal tabs. As the poster said, text is wider than it is tall, so you can fit more tabs in the space and make them more readable.

    For example, OneNote uses extensive vertical tabs.

    OneNote tabs

    You can read multiple levels of tabs far easier than you could in a horizontal display.

    Horizontal and vertical

    Many applications use both horizontal and vertical tabs. Take VSCode for example.

    VSCode

    Vertical tabs are used for files in the project directory. A typical project can range from tens to hundreds and thousands of files. You can collapse and expand trees to find relevant files, and it is intuitive for search functionality to show a vertical list of files to be opened.

    Horizontal tabs are used for files currently being worked on. You will typically be editing a small number of files and so you’re unlikely to encounter labels becoming unreadable. Also I personally find myself interacting with horizontal tabs far more than vertical tabs in an IDE, although I don’t know whether that’s the larger target area or simply the fact that most software uses horizontal tabs.

    Conclusion

    It seems to me that horizontal tabs are king for a small number of elements, but vertical tabs win out for tens of elements and beyond. This can be plotted in the graph below where black = horizontal, grey = vertical, X = number of elements and Y = usability

    Trade-off

    With few tabs, vertical doesn’t perform so well because the majority of the box will be empty and you’re eating into valuable page real estate with whitespace. This is where horizontal tabs are king, as you’re only losing tens of pixels at the top of the page.

    With many tabs, vertical performs far better than horizontal as you’re less likely to face unreadable labels, and when we have more elements than can fit on the page, vertical scrolling is far better than horizontal scrolling.

    Resources


    Enjoyed this post? ❤️

    Subscribe by email or RSS.



    Contact