0

Most web interfaces have the classic sticky topbar + 2-3 columns layout (just like StackExchange).

Stack Exchange User Experience

Some but few websites use a different approach and, instead, have a collapsable sidebar (i.e. BitBucket):

BitBucket layout

While the first approach is surely the most familiar one to pretty much everyone who's ever used the Internet (including the 50+ generation) and I can imagine it will work better for them just because they're familiar with it, I don't quite understand why sticky top bars have become the Times New Roman of layouts and are almost a standard for any modern UI.

Sidebars allow you to:

  • save vertical space, which is limited (compared to horizontal)
  • have a more responsive/consistent UI (and more easily achievable)
  • can show you more content and be more readable (top bars tend to be thin to save more space)

so it feels like they should be preferred over top bars.

Do you know of any studies on this and what do you think it's best?

  • I assume that this question is only talking about the desktop view for the user, although the prevailing view (or at least current trend) is to design for mobile first, and then see whether it needs to be customized for desktop or if the responsive design will take care of the rest. – Michael Lai Oct 8 at 22:15
1

I am not aware of any studies, but below is my personal experience why sidebars should be rarely used if you target desktops.

Sidebars scale badly on large or ultrawide screens, unless you fill the whole screen. Even two sidebars on a 32" 16:9 screen leave a lot of empty space. I've seen websites where there is 10 centimeters of empty space between sidebar and content on my desktop.

Some websites can support this use case - where there is a lot of information to present and the sidebars are quite wide. One website which does this well in my opinion is GitLab - two sidebars with clearly defined roles (navigation to the left, details of current view to the right) and a maximum-width central column. But even then a fourth of my screen is empty space.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.