Detailed sidebar usability guide

From this article, you will learn everything about sidebars: whether you need them, how many side panels there should be on the site, which side they should be from, which elements should be in them.

Why talk about sidebar sites

Sidebar or sidebar - part of the structure of a web page, which is located on the right or left side and contains functional, informational and conversion elements.

In the side columns webmasters publish standard elements. Here are some examples:

  • Navigation menu.
  • Follow button.
  • Social network widgets.
  • Ad units.
  • Widgets for the latest publications.
  • Widgets for popular publications.
  • Subscription Forms.
  • Biography of the author or information about the company.
  • References to the archives.

See what happens: site owners put standard elements in sidebars, but finding two identical side columns on different resources is difficult. It is not about differences in appearance and size.

Webmasters publish various standard elements in sidebars. On one site you will find a subscription form and a tag cloud, on the other Vkontakte widget and a navigation menu, and on the third only advertising. In the side columns you can see two or three or more than a dozen elements.

There are no sidebars on Texterra, HubSpot and MOZ blogs. In "Mad Seals", Cossa and Webpromoexperts sidebar on the right. At "Tapes.ru" and Nielsen full sidebar on the left. There are examples of sites and blogs with two or more side panels.

Do we even need side panels? What functions do they perform, how to use them effectively, what should be the perfect sidebar? Let's figure it out.

Do I need a sidebar on the site

The "Mad Seals" sidebar is on the right. On the internal pages there is a subscription form, information about "Kittens" and a category navigation menu.

Approximately 40 or 45% of site visitors to colleagues do not see a side column. It's all about adaptive design: because of it, on a mobile screen, the sidebar turns into a bottombar. Simply put, the side panel is shifted to the bottom of the screen of the mobile device.

Even if your site has a sidebar, almost half of the users do not see it. On sites with responsive design when viewed from mobile devices, the sidebar moves to the bottom of the screen.

If users of smartphones and tablets do not see the sidebar, do desktop users need it? To answer this question, you need to define the functionality of this element.

The sidebar structures the page when viewed on a desktop screen. Due to this, the main content zone and auxiliary area are distinguished. The structure helps users instantly scan the page and find the right data. For example, immediately after landing on the blog page in LiveJournal, the user knows where the basic information is located, and where you can find the menu, links to other publications and archives.

Thanks to the sidebar, the site owner gets the opportunity to publish on the page auxiliary elements without affecting the main content. Menus, conversion forms, recent publication lists, and even advertising are less distracting the user from reading, placing orders or other actions in the main area of ​​the page.

Page structuring has side effects. Users interact more actively with the main content zone than with the auxiliary unit. For example, on a test site with a sidebar on the right, the AdSense ad clickability under the main content is 0.87%.

CTR ad units in the sidebar does not exceed 0.1%. In the sidebar advertising is on the first screen. That is, the user sees it immediately after landing on the page. In the main content area, the AdSense unit is under publication. To see it, the surfer needs to scroll almost to the end of the page.

Marketer Brian Harris tested the effectiveness of the sidebar on his blog. Conversion of the page without sidebar increased by 26% compared with the base page. According to Harris, the CTR of the elements in the sidebar of his blog is 0.3%.

After removal of the sidebar, Impact marketing agency specialists registered an increase in blog page conversion by 71%.

If you use a sidebar, there is less space left on the page for the main content. This can force you to reduce the size of the size, reduce the length of the line and line spacing, to refuse from indents between paragraphs. As a result, your content is choking and unreadable.

Another disadvantage of using the sidebar is that it still distracts users from the main content. If the sidebar of the site is overloaded with bright elements, for example, photos, animated advertisements, conversion forms, the visitor may not finish reading the publication.

For example, the sidebar in the blog of the famous marketer Heidi Cohen by the ability to attract attention successfully competes with the main content zone. In the sidebar of this resource work as many as 14 elements.

Should I Use Sidebar? Yes, if you want to improve usability for desktop users. In the sidebar you can put the main or additional navigation menu. Thanks to the sidebar, you get space to publish auxiliary widgets, such as social networking plug-ins, subscription forms, archives, and links to popular publications.

Discard the sidebar if you want users to focus exclusively on the main content. The absence of the sidebar makes it as close as possible to view the site on the screens of different devices. That is, the desktop user does not have to get used to the lack of a sidebar when viewing a resource on a smartphone.

How many sidebars should be on the site

None or one. There is no need to use more than one sidebar in the era of the mobile web and user congestion. Even a sidebar takes up tens of percent of the page. If you use two side panels, they occupy up to half the usable space of the page. This worsens the conditions for interaction with the main content.

Pay attention to the internal pages of the site "Vedomosti". The full side column is on the right. On the left side of the page are links and announcements of related publications. These elements are similar to the second sidebar.

As a result, the main content is literally wedged between auxiliary objects. Obviously, this has a negative effect on user experience. The reader has to literally look for the next paragraph with his eyes, as he is lost against the background of announcements and the sidebar on the left. In addition, animated ads, announcements and even bright buttons on the right of sharing do away with reading.

It literally hurts me to read publications on the Vedomosti website. It seems that this is not a resource of a solid business publication, but an old-school blog of a moneymaker from the early 2000s.

Compare the internal pages of the site "Vedomosti" with the pages of publications "Layfhakera." This site has one sidebar on the right. It has ads and a block of the best publications. Announcements of articles are made under the publication in the block recommendations.

Alexander Alaev solved the sidebar problem in an interesting way. On the main page of his blog there is a side column with standard widgets. On the pages of publications sidebar is not. This allows users to focus on the main content.

But Alexander made a common mistake. He used a page template with no sidebar, and not a special theme without a sidebar. As a result, the line turned out to be too long, which negatively affects the readability of the content.

Do not use more than one sidebar. This worsens the user experience: distracts visitors, reduces readability of the content.

There are excellent refutations of the last recommendation. Check out the desktop versions of Facebook and Vkontakte sites. On the first there are three sidebars, and on the second there are two. Resources work more than successfully. But to be successful and convenient with two or more side columns, you need to have the popularity and magnetism of Facebook and VKontakte.

Where should the sidebar be: right or left

Both options are possible. Choose the preferred one according to the type of site, user needs, tasks that the side column should solve.

According to Nielsen, users are paying more attention to the upper left area of ​​the page. Immediately after landing, visitors instantly scan the landing page. The surfer's gaze movements on the page can be described using the F-pattern.

Use the sidebar on the right to focus users on the main content of the page. This recommendation is valid for content projects: personal and corporate blogs, industry resources. The sidebar on the right uses vc.ru, Cossa, Layhhaker and other popular projects.

Thesis rationale for using the right side column:

  • The user should focus on the main content.
  • The sidebar contains background or supporting information.
  • If necessary, the user will consciously find the navigation menu or archive in the right pane.
  • Conversion elements work more efficiently if they are in the main content.

Use the left sidebar if you want to attract more user attention to the information published in it. This is true for online stores. They publish navigation elements in the left column: a menu of product categories and filters.

The sidebar on the left is a great solution for web services. It is more convenient for users when the control and navigation menus are on the left side of the screen. Pay attention to Google services and "Yandex", for example, Gmail, Tag Manager, "Metric". In the web interface of these services, navigation elements are located in the left sidebar.

The left sidebar is often used by large content projects. Media sites are placed on the left sidebar of the navigation menu. A striking example - "Lenta.ru". Also publications publish sidebar links to current or popular publications and ad units.

The following theses explain the advantages of the left sidebar:

  • The user must pay attention to the information in the sidebar, even to the detriment of the main content.
  • The navigation and control menu should be prominently displayed. The user will be able to navigate the site without being distracted from the main information.
  • The ad unit or conversion form on the left sidebar is more noticeable. For the sake of monetization, you can sacrifice the interests of the user.

Use the sidebar on the right if it is important for you that users first of all pay attention to the main content. Prefer the sidebar on the left if you want to provide users with the most convenient navigation and control.

Want an argument on the sidebar on the left? In the Nielsen Norman Group blog, the sidebar is located on the left side. This company dog ​​ate usability sites.

What information should be published in the sidebar

The sidebar takes up space from the main content of the web page. To ensure that the victim is not in vain, publish useful functional elements and information in the sidebar. What exactly might the user need in the side column of the site?

Navigation and control elements

This is almost the only element that alone justifies the use of a side column. The navigation menu improves the usability of any site: from the media or blog to the online store and web service.

If the only or main navigation menu is in the sidebar, place it as high as possible. Thanks to this, users will not get lost on the site, quickly find the necessary sections and specific publications.

The "Lenta.ru" in the sidebar is the main and only navigation menu. On the category pages of the site "Svyaznoy" in the sidebar are several navigation elements. In the side column of the Euroset website published navigation links to the main product categories.

If the main menu of the site is in the header of the site, in the side column you can use auxiliary navigation elements. For example, if the header contains links to the main pages and sections, filters, links to posts headings, blogs of specific authors will be useful in the sidebar. On the site madcats.ru, the main navigation links are at the top of the page, and the category menu is in the sidebar.

Social widgets

These are button followers and community widgets. The "Follow me" block at the top of the sidebar is a good alternative to the social buttons in the header of the site. In the sidebar, the buttons remain visible, but do not overload the header. An important advantage is that it is easier to add a call to action on the sidebar. In the cap, he will take a lot of space.

How effective are subscription buttons for news in social networks? The above mentioned experiment in the VideoFruit blog, during which the clickability of the widgets in the sidebar was 0.3%. On the test site in 30 days I received 10 transitions from the “Follow me” block to social public posts.

The CTR of the button block in the side column of the test site for 30 days was 0.097%. Low clickability indicates the inefficiency of the social widget as a tool to attract visitors to the public only in a specific case.

How appropriate is it to publish the follower block in the sidebar? You can reason like that. The buttons to subscribe to the public in social networks on the site are needed. They should be in a prominent place. This is usually the cap or top of the side column. In the sidebar, the buttons do not take up much space, do not visually overload the header and do not distract users from the main content.

In the side column of sites you can often see social community widgets, for example, the Page plugin or the Vkontakte page widget. Social plug-ins of this type usually contain a conversion element, for example, the button "Subscribe" or "Like".

Due to the visual appeal and relatively large size, social plugins should be more efficient than the “Follow me” block. Is it really?

For the experiment, the widget of the Vkontakte page was installed in the side column of the test resource. During the period from April 8 to May 7, 10,234 people visited the site. During this period, one user subscribed to the page using the widget. CTR button "Subscribe to news" amounted to 0,009%.

Three more people moved from the site to the community "Vkontakte" on the links widget. This does not change the overall picture - for the test site, the social plugin turned out to be an ineffective tool.

The illustration above displays graphs of views of Vkontakte users and group members. Apparently, the counter considers viewing each visit to the page with the widget by users logged in to "Vkontakte".

For example, on May 9, the statistics recorded 101 views of the widget by Vkontakte users. 350 people visited the test site that day. If we were talking about active views, almost 30% of site visitors should interact with the social plugin. This is unreal.

So social plugins in the sidebar are useless? No, because it is impossible to extrapolate the results of a test resource with an attendance of 300 - 400 people per day to all sites. In addition, the social widget is not only for converting visitors to followers.

First, a sidebar plugin can increase the visual appeal of a page and make it more informative. Notice the Twitter feeds on media sites. Secondly, the social widget can be considered puzomerkoy. The site owner shows the visitor the popularity of the resource in social networks.

Information about the author or company

The story about the author and ideological inspirers can be seen on the side panels of resources associated with Neil Patel: neilpatel.com and quicksprout.com. Of the Russian-speaking colleagues information about the company in the column on the right offer repeatedly mentioned "Kitties".

Mr. Patel argues that his sidebar biography helps build community and increases user loyalty. Neil permits publication of information about the author under the article, but considers this method ineffective. He explains this by the fact that not all users read the material or scroll through the page to the end.

Information about Patel on his sites is social evidence and a selling element at the same time. Other bloggers and companies may adopt this tool. Be sure to test different versions of images. For example, a portrait of three cats on the Kitty site looks much better than a Patel photo on the Quicksprout site. Фото Нила сильно отвлекает от чтения, а рисунок котов вызывает положительные эмоции и не раздражает.

Конверсионные элементы

В качестве конверсионных элементов в сайдбаре чаще всего используют формы подписки. Примеры можно увидеть на сайтах и в блогах Webpromoexperts, Cossa, Searchengines.ru, Shopolog и других.

Are subscription forms effective in the sidebar? According to the Aweber mailing service, the conversion rate of the subscription form on a specific site was 0.4%. A pop-up window with a subscription form on the same site provided a conversion of 5.5%. Brian Harris from VideoFuit noticed that the static subscription form on the sidebar provides a conversion rate of 0.3%. The floating subscription form in the sidebar provided an increase in conversion to 0.8%.

That is, the conversion rate of the subscription form in the cases presented was less than 1%. Is it worth it to publish the conversion element in the side column given the low efficiency of this tool? Decide for yourself. Just do not forget about the above mentioned experiments VideoFruit and Impact, during which the rejection of the sidebar increased the page conversion rate by tens of percent.

Advertising

Media sites and bloggers often publish advertisements in sidebars. Moreover, contextual advertising systems consider placement of blocks in the sidebar effective. AdSense recommends posting ads on the sidebar immediately below the navigation menu.

According to my observations, AdSense ad units in the sidebar are ineffective. Over several months of testing, a 300 by 250 rectangle provided a CTR of 0.06%, and a 300 by 600 skyscraper provided a 0.11% click-through rate. Advertising in the block of recommended content, which is under the publication, provided the CTR of 0.87%.

Nielsen claims that the habit of webmasters to place ads in the right sidebar forces users to avoid all the elements in the sidebar. Therefore, Nielsen experts do not recommend publishing not only ads on the sidebar, but also any visual elements that resemble banners and ads.

By the way, in early 2016, Google removed the right sidebar with ads from the search results. The largest search engine in the world shows ads above and below search results. For some of the queries, the right sidebar displays the Google PLA advertisements.

In runet, more than 20% of surfers use ad blockers. When a program blocks an ad, the appearance of the sidebar spoils. For example, this happens if the ad code is inserted into the standard WordPress Text widget. In this case, users see in the sidebar an empty widget container.

According to the Infolinks advertising platform, site visitors quickly notice, interact more willingly and consider less annoying ads, which are not located in the traditional areas of publication of ads. This means that users find the sidebar advertising annoying and do not notice it.

Are there arguments in favor of posting ads in the sidebar? Yes. Firstly, the text block in the sidebar practically does not interfere with perception of the main content. It will be more honest to publish it on the side of the reader than to insert commercial links into the text of the publication.

Secondly, if you publish the AdSense unit in the sidebar so that it is on the first screen, you will receive revenue even without user clicks. The system often turns in blocks that are on the first screen, pay-per-impression ads.

Advertising model monetizing websites and blogs is dying. This is another reason to abandon the placement of banners in the sidebar.

Content Announcements

It is difficult to find a sidebar without content announcements. Widgets of the latest, popular, commented publications are on sites of almost any media.

The purpose of publishing a selection of content is clear: the user follows the links, the depth of viewing and the session time increases. The publisher has more opportunities to engage the visitor in the interaction and convert it.

But a block of popular publications in the sidebar can distract the user from reading the current publication. The publisher invites the visitor to follow the link at the moment when he has not yet viewed the current page.

An example of the absurd use of the content announcement can be found on the Autonews website. The user sees a block of related publications with the "Read also" heading next to the main publication headline.

There is no such error on the CNN website. Recommended content appears in the sidebar just opposite the last section of the main publication.

How effective are content announcements in the sidebar? On the test site, the CTR of the widget of Relap related publications in the sidebar was 2.04%. The similar indicator for the widget under the main content was 32.49%.

Despite the relatively low clickability, content announcements in the sidebar can be useful for users. Widgets of the latest or popular publications and other collections complement the navigation elements. The following guidelines will help you effectively use content collections:

  • Do not announce content with banners. If the announcement looks like an advertisement, users will avoid it.
  • Do not place the clips at the top of the side column. Allow the visitor to read the main publication, and then offer him other content.
  • Take care of content relevance. On news sites, it is appropriate to publish the block "Fresh publications", related articles will fit into the blog, and you can announce similar products in the online store.
  • Nielsen experts recommend carefully using image thumbnails on the side panel. They make the announcement look like an advertisement and reduce the CTR.
  • Offer users a selection of useful or evergreen content.

What exactly should not be in the sidebar

Take care that there are no useless elements in the sidebar of your site. They worsen the usability of the site: distract the user from the main publication, reduce the visual appeal of the page, in some cases reduce the download speed. What elements are we talking about?

Tag Cloud

This widget comes from the past, when the keywords meta tag was still working, and webmasters added five tags to each publication. The tag cloud takes up a lot of space and is inconvenient to use for navigation.

Recent posts widget on blog homepage

Fresh publications can be announced on the main and in sections of the corporate site, on news resources, on the pages of headings and publications. On the main page of the blog, the user sees the list of posts in reverse chronological order, so an additional widget is not needed here.

Calendar Widget

From the point of view of the navigation element, the calendar is useless. But it takes a lot of space.

Widget "Meta" on sites running CMS WordPress

This visual element should be used only in one case: if you want users to register on the site. In other cases, the link to the admin and WordPress.org on the site is not needed. And the RSS feed can be announced differently.

Counters, Puzomerki

If these elements are needed, place them in the footer.

Block "Last comments"

The "Fresh Comments" widget clutters the sidebar and impairs the usability of the site.

Please note that with the Disqus commenting system you can display relevant discussions under the main publication.

Do not publish in the sidebar any items that may distract the audience from the main content.

What if you don’t have a website without a sidebar

Think twice. Recall that about half of your site visitors do not see the sidebar. On the screens of mobile devices, it turns into a bottombar. Check out the research done using lighttracking. Nielsen claims that because of the advertising, users have developed blindness in relation to all elements in the side columns. According to VideoFruit, the CTR of any widget in the sidebar does not exceed 0.3%.

If you still do not refuse the sidebar, make it as useful as possible to the audience. Publish navigation elements in the sidebar: main or auxiliary menu, list of headings, product filters. If there is no search form in the header, place it in the upper part of the side column. Also offer users a selection of content, social widgets. Experiment with ad units.

Make sure that in the side column of the site there are no more than 3 - 5 elements or widgets. Make sure the sidebar doesn't take up too much space from the main content area. The recommended sidebar width is from 20 to 40% of the total page width. If you use multiple sidebars, their total width should not be more than 40%.

In the comments share the experience of using the side column. Do your users click on the links in the sidebar, click on the ads? Which side is the sidebar on your site? Are you ready to completely abandon the sidebar?

Watch the video: DesignTalk Ep. 59: A guide to everyday design ethics (January 2020).

Loading...

Leave Your Comment