INSIGHT

Commonly Made Sidebar Mistakes and How to Correct Them

Written by Stephen Moyers
Commonly Made Sidebar Mistakes and How to Correct Them

Sidebars and tabs effectively play a role in deciding where your user will end up- which impacts the content, design and UI and UX that is used on your site. Despite this, sidebars are not given the attention they deserve.

Branding agencies tell you to always think of the customer before designing anything on your website. Keeping this in mind, what is the first thing a customer would do when they finally land on your page? It is likely that they will first see the different tabs and sidebars and decide where they want to go next on your page.  Many web designers neglect appropriate sidebar usage. Sidebars are often loaded with more distracting features and content than readers know how to deal with, which may lead them to leave the page. Even if a reader doesn’t leave the page because of an overcrowded or otherwise inappropriate sidebar design, he or she will come to ignore the sidebar. In ignoring the sidebar, your readers may miss the important information mixed in with all the non-useful elements.

Sidebar Placement

Before you decide anything else about the sidebar, you should first consider its placement and integration with the other elements of your website. Nothing exists in a vacuum after all, and an ill-considered sidebar placement may throw off the design of your entire site. So before you dive into the world of web design los angeles, there are a few things that you need to consider. The best way to do this is by penning down a set of questions you can ask yourself so that you do not face any major hurdles later on in the journey/

Your first decision is whether to have a left or right-justified sidebar. This decision is influenced by what content you intend to include in the sidebar and its relative importance. A left sidebar is useful if your primary navigation is located in the sidebar, Because readers attach higher importance to what is on the left side of the page, a left sidebar assumes greater importance than the content.

Sidebar 2

Image: The Ultralinx

As you can see in the example, with the left sidebar the navigation menu is not located at the top of the page. The left sidebar takes its place.

The main problem associated with left sidebars is that they’re atypical. Readers expect that the sidebar will be to the right and that the menu will be at the top of the page. While going against expectations with intent and elegance can be useful, the sidebar has to be very high quality. If it isn’t, rather than appearing innovative, you instead look like you don’t know basic design principles.

The right sidebars are the most common. The sidebar takes secondary importance to the content, and the information located there is useful, but not vitally important. Ads are commonly located in the right sidebars.

Some web designers place the menu in the right sidebar. Although a daring design choice, this may confuse readers, who expect the menu to be of primary importance.

Sidebar 1

Image: The Ultralinx

Although this page is well designed, the placement of the sidebar may be confusing to those expecting navigation to be in a location of primary importance. International sites may be more likely to use this design well, particularly if they have a large audience that reads from right to left.

Sometimes, you might decide you need two sidebars – one on each side of the page. The main use of two sidebars is for websites that require a lot of information. If you cannot use one sidebar to hold all the truly necessary information, using two sidebars is an appropriate compromise.

When using two sidebars, it’s important to keep the reading hierarchy in mind. As per creative agencies, the reading hierarchy is one of the most important things to keep in mind so that your viewer does not lose out on any important content. There are a couple of ground rules that you can keep in mind when designing the sidebar. Menus should not be located on the right sidebars, and advertisements shouldn’t be on the left ones. Make certain your important content goes left. When you have a top menu, it’s probably best to only use one sidebar.

Sidebars and Scrolling

Keep your scrolling type in mind when designing your sidebar. With a traditional scrolling style, all types of sidebars are appropriate, although making the left sidebar fixed content may work best. The key consideration for websites using traditional scrolling is to make certain your sidebars, particularly right sidebars, are never longer than your content. Never make your reader scroll down endlessly just for secondary content. As per digital marketing agencies, this is something that can alienate the user and make them exist on your page quickly.

Horizontal scrolling favors fixed-left sidebars. Right sidebars should never be used with this style, as no reader wants to encounter an unexpected sidebar after scrolling all the way across the page, and fixed right sidebars will be just as confusing and annoying. Horizontal scrolling is enough of a challenge and a novelty. Adding sidebars to it can make it unreadable.

Parallax scrolling favors left and dual sidebars. Left sidebars should be fixed and constant with this scrolling style. When the reader goes to a new page every time he or she scrolls, a fixed left sidebar can be an anchoring point, keeping something familiar with the constantly changing pages and formats.

The right sidebars undergo the most change. As with parallax scrolling, a new sidebar could be introduced on every page. If you do change the right sidebar on every page, keeping the format the same should be a priority. The reader may be introduced to new content, but changing the format of every page makes things hard on both your reader and you as the designer. Changing the sidebar template occasionally might work but should be limited to only the most important content changes, letting the readers know when something significant has been added without extra undue strain.

What to Include

Designing a useful and appealing sidebar requires careful consideration of each element’s utility and placement. Now that you are familiar with the world of sidebars and scrolling, you might be wondering what exactly is it that you should do to have the most user-friendly site. As per the best website design company, these are the steps that you should follow to end up with the best site for your needs. Consider what your particular business requirements are and their relative importance. Look at this list. Some of the items are useful, but many of them aren’t.

Many of the items on the list do not belong in a sidebar at all. If you do not want to end up having to undergo website redesign services frequently, it is best to keep the following few things in mind for your site. “As Seen On…” logos should be on product pages, as should YouTube links and videos. Some of the other information could belong on a sidebar, but not on all sidebars.

While this site on WordPress sidebars does include “As Seen On…” logos and YouTube as potential sidebar content, the rest of the suggestions are valid, depending on the amount of space allotted to them. You can also include:

  • These should highlight the key information relating to the content, but no more. Direct users to your “About” page rather than reiterate the entire bio in a sidebar.
  • Limit these to the sidebars on product pages. They should link to a larger “Testimonial” page if you want to quote at length.
  • Social media icons. Possibly useful, but should take up minimal space. If you want them on every page, place these icons on the bottom of a fixed left sidebar. In that way, they will not interfere with the design of your site nor will you have to undergo website redesign in the future to incorporate them due to the rising importance of social media and cross-platform promotions in today’s world.
  • Other articles. Useful for blogs. With product pages, linking to other products on your website may also help, but in both cases, moderation is the key. Do not put both recent and similar posts in the sidebar. Decide which is more important, and put the other category at the bottom of the main content page.
  • Contact information. One of the most useful pieces of information you can put in a sidebar. However, it should be limited to e-mail. There’s no need to put your e-mail, business address, and phone number on every page. That’s what a “Contact Us” page is for.
  • Search box. Another useful piece of information. This can be used in place of other article sections, as it takes up less space and allows the reader to choose what content he or she wishes to see.

Advertisements are commonly placed in sidebars. Although the right sidebar in particular is a good place for advertisements, make certain you don’t ad spam. One ad at the top of the right sidebar is fine, two may be acceptable, and three or more become content spam.

The convention states that advertisements go at the top of the right sidebar. This gives them a place of moderate importance. They aren’t as important as the content or any left sidebar items, but they’re more likely to be noticed than items further down the right sidebar. This convention also means readers who don’t want to be bothered with advertisements can ignore them.

Be mindful of these principles and the dangers of an overcrowded sidebar. Three to five items in the sidebar are considered a good number. Prioritize with that number in mind, and your sidebar decisions should be much easier.

Main image source: Qideas

Stephen Moyers

Stephen Moyers

Stephen Moyers has over a decade of experience as a technology consultant and web marketing manager. Since 2010, he has specialized in various technologies, bringing a...

Read bio

Leave a Reply. Please scroll down to read what others think of this post.

Your email address will not be published. Required fields are marked *

4 thoughts to “Commonly Made Sidebar Mistakes and How to Correct Them”

  • Thank you so much for the clarity. Your site was on pade 1 of the search results when I was confused on whether to use two sidebars and what to put on the the sides to make it balanced. Thanks to your article, I used only the right sidebar and it looks good.

    Thanks!

  • I am glad that I came across this website. Many thanks for sharing such great stuff. I will implement it on my website.

  • thanks for the excellent article

    • Thank you for the kind words!

Get awesome web related content every week

This field is for validation purposes and should be left unchanged.

loader image