Has the sidebar passed its use by date?

Default avatar.
May 17, 2016
Has the sidebar passed its use by date?.
In this day and age of new design trends, faster and faster website speeds, and mobile dominance, one classic page element is still sticking around, though many may overlook it. Around since the early days of the web and a mainstay on different sites, the sidebar has had longevity. With many people simply scanning or skimming through content, though, not everyone pays attention to it, especially with the F-shaped reading pattern establishing that people usually start on the left side of a webpage and scan across and down the page. Add to that the increasing demand for faster page-load times, and the sidebar can easily be ignored. That begs the question, is the sidebar still necessary today? It’s not the primary means of navigation, and other design elements like social media buttons have become more important.

The purpose of the sidebar

The sidebar was never intended to be a site’s primary means of navigation. The navigation bar or menu typically goes horizontally across the top of the page, traditionally always leaving the sidebar as more of an afterthought of secondary navigation. Nonetheless, a sidebar is supposed to help users with navigation, mainly depending on the type of site. For example, a blog is going to feature a much better use for a sidebar in this regard than, say, a dating site. Sidebars are generally used to feature content that needs to be highlighted, as when you want users to take a specific action that lets them further interact with your site. For instance, a blog can round up its most popular or recent posts and then feature links to these in the sidebar. This not only helps users navigate the site more efficiently, but it also prompts users to perhaps read content that they otherwise would have missed if it wasn’t featured prominently in the sidebar.

The placement of your sidebar

Sidebars can be put on the left- or right-hand side of the page, as well as, in some unique cases, on both sides of the page. Where you put the sidebar should be dictated by the user experience, as with all page elements.

Left-hand sidebar

When you put your sidebar on the left of your page, know that it’ll basically have to function as your site’s main navigation bar. That’s because the classic usability study that established the F-shaped reading pattern on the Internet confirms that users spend most of the time looking down the left side of a page. Since this is where their eyeballs are, it should also be where the main navigation is if you’re going to position the sidebar here, just to help their user experience. Consider also that a horizontal menu bar across the top of your page may be too cramped to fit in all of your navigation titles or categories if you’re designing for a big store, organization or news site. A vertical sidebar/navigation menu down the left side of the page can be the solution. Wikipedia illustrates this design choice to a tee: It doesn’t have horizontal, top-of-the-page navigation, but instead has its navigation bar down the left side of its pages as a very long sidebar. 001

Right-hand sidebar

The right-hand sidebar is definitely more common; when it’s on the right side of the page, it doesn’t function as main navigation, but as secondary navigation. Again, this goes back to the F-shaped reading pattern and how your site visitors just don’t look at the right side of a page first or prominently. It’s like reading a book in English; we read from left to right. This means that there’s a good chance that the content in your right-hand sidebar will either be missed or won’t be seen by as many users as the content in your left-hand sidebar. Since this content is secondary, you shouldn’t place too much important info here. The right-hand sidebar’s secondary status explains why some sites’ pages, such as Match.com’s, actually place ads here, whether it’s ads for related Match.com services or from other brands altogether. Ads here also don’t have as much monetary value as ads in other places on a page. Of course, other sites use the right-hand sidebar differently, for example to highlight popular and related content for a reader of the site. Nascar.com’s right-hand sidebar features the top headlines of the day and any content related to the article on the page. 003

Dual sidebars

Some sites will actually use two sidebars, one on the left and right of the page. A concern of this approach is presenting the user with too much info on the page, thereby raising the risk of essential info getting lost in the shuffle, especially if that info is presented on the right-hand sidebar. Another concern is interchanging the important info between the left and right sides of the page without giving enough thought to what should be a priority. There’s a way to make this still work, though. You have to put the most important content on the left-hand sidebar because that’s where your visitors will look first and most. This means the navigation, the main web apps, etc. Then, on the right, that’s where you can place the secondary navigation items, elements like most popular articles, social media buttons, a search bar, and so on.

Showcase of sidebars

Here’s a look at various types of sidebars from around the web.

LinkedIn

LinkedIn’s sidebar is on the right side of the page, and it offers recommendations of people on the network whom you may know. 004

Twitter

Twitter has the dual sidebar happening: The one on the left shows your profile and picture while the one on the right shows the number of impressions, recommendations of whom to follow, and worldwide trends. 002

Fox News

Fox News displays its additional and related content and its hottest, trending stories in the right-hand sidebar. 005

Still meaningful in 2016

There you have it. Sidebars are still relevant in today’s design world that’s seemingly dominated by news of one new design trend after another. It just goes to show you that, when something is as UX-centric as the sidebar, it can enjoy good longevity and remain a core staple of web design for a long time. The fact that it’s an unsung page element of sorts is perhaps the best testament to its high usefulness, though. Users have taken it for granted because they simply expect it to be there, as it is a classic element that’s been present for decades on the web. Without a sidebar, any site would simply be harder to navigate and use, which would cripple the UX. That’s never a good thing from any designer’s standpoint!

Marc Schenker

Marc’s a copywriter who covers design news for Web Designer Depot. Find out more about him at thegloriouscompanyltd.com.

Read Next

24 Best Creative Portfolio Websites in 2023

For anyone working in a digital creative field, whether design, illustration, animation, video, or a combination of…

15 Best New Fonts, September 2023

Nothing upgrades your designs like selecting the right font. It’s all too easy to fall into the trap of using the same…

Weekly Design News #1

Every Sunday we’re rounding up the best of the previous week’s stories from webdesignernews.com, and in this issue #1,…

The 20 Most Controversial Logos of All Time (Ranked)

When you hire graphic designers to create your company's logo, what do you expect? Professional designs, culturally…

LimeWire AI Studio Generative Art App

If you’re looking for the most exciting way to launch a career in AI-generated art, then you’re in the right place.

20 Best New Websites, September 2023

Are you in need of design inspiration? Are you looking for the best websites designed in 2023 to pull ideas,…

The Dangers of Deceptive Design Patterns (And How to Avoid Them)

As web designers, our role in crafting user-friendly digital landscapes is critical. We are tasked with creating user…

10 Best Ecommerce WordPress Themes in 2023 [September update]

You plan to set up shop with an online store. You know there’ll be competition. And to compete with or beat that…

5 Marketing Tools Every Designer Needs

Yes, designers do need marketing tools. From freelance graphic designers who need to land more work to designers who…

Exciting New Tools For Designers, September 2023

At the end of another summer, we are all getting ready to knuckle down for some serious work in the fall. But we want…

Elon Musk calls LinkedIn ‘Cringe’—Announces Competitor

Elon Musk recently announced his intentions to create a direct competitor to LinkedIn. Musk’s grand plan is to make his…

Everything You Need to Know to Embrace the Y2K Design Trend

The turn of the millennium was a major cultural shift, and the Y2K aesthetic emerged as a visualization of what the…