Sidebar: Improving Website Usability
Any web resource should not only be attractive and aesthetically pleasing, but also convenient for the end user. Sidebars, or side panels, located on all pages of the site, help structure information and make it easier for the visitor to navigate within the portal. In this article, we will talk about how to improve usability with the help of columns and what elements should be placed in them.Why you shouldn't give up on the sidebar?
The sidebar is visually separated from the main content on the portal page, so it immediately attracts the visitor's attention. Such a panel allows:
Increase conversion. It is simply impossible not to notice a separate column located on the left or right. By placing navigation elements in this part of the screen (for example, the site menu or sections), you will make it easier for the user to find the necessary information, and therefore increase the chances that the necessary target actions will be performed.
Structure the information. No one wants to spend a lot of time searching for the necessary section of the site. Use a sidebar to make it easier for visitors to navigate inside the portal.
Place advertising banners. There is often not enough space on pages for advertising banners. The sidebar is a great place to add additional blocks without distracting users too much from the main content of the resource.
Personalize content. The column to the right of the main content can be used to place recommendations. Leave here links to blog articles related to the topic of the main text, or similar products, if we are talking about a card. This can significantly increase the depth of viewing of the web resource.
Get to the top of search results. Sites with convenient navigation and well-thought-out usability always occupy higher positions in search results. Therefore, the sidebar also has a positive effect on SEO promotion.
So, we have decided why we need a sidebar. It remains to decide on which side to place the columns - left or right?
Choosing a location for the speaker
The placement of this interface element on the page largely depends on its content. Web designers divide sidebars by:
Location
Depending on which side of the column is located from the main content, the sidebar is considered right-sided, left-sided, or double-sided.
We read from left to right, so it is better to place columns with navigation elements on the left: the portal menu, its sections, product categories. This location will attract much more attention from visitors.
Marketing research confirms that the sidebar located on the right side of the site is the best place for additional information. Place links to new or popular materials that you recommend visitors to view, a feedback or subscription form, or advertising banners in this area.
Double-sided sidebars are extremely rare: most often, they are used on portals with extensive functionality or in online stores. The web page format allows you to place from one to four columns, but you should not abuse their number.
Degrees of mobility
This element of the site can be either fixed or dynamic. A fixed sidebar remains stationary when the user scrolls the page, while a floating sidebar follows the visitor. In addition, columns can be hidden and expand only after clicking a certain button or pointing the cursor to a specific area of the site.
What should be added to the sidebar?
To ensure that the contents of the columns do not distract visitors from studying the main material, but, on the contrary, facilitate the process of interaction with the resource, it is worth carefully choosing the contents of this area. The following elements can be placed on the right or left:
Navigation and control
Links leading to sections of your portal will allow you on page seo service to quickly find what you need and easily navigate between individual pages.
Social Media Widgets
It is recommended to place such elements to the right of the main text. The presence of social networks and additional communication channels with the site owner (for example, in popular messengers) significantly increases the loyalty of visitors.
Information about the author or company
The sidebar can easily replace the "About Us" section if you have chosen a small landing page as your corporate website. This solution is also suitable for a personal blog. A little information about the author in the column on the right side allows the reader to learn more about you and your business, and therefore to be imbued with trust.
Conversion elements
These include feedback and subscription forms that allow the user to leave their contact information, ask a question, or subscribe to the portal's news. In the right column, such elements are most noticeable, especially if they move as the page is scrolled.
Advertising
Advertising blocks will not go unnoticed and will be less annoying to the visitor if they are placed in the column on the right. These do not necessarily have to be banners of third-party services used to monetize the resource. Blocks with information about current promotions and discounts, as well as the hottest offers with a limited validity period, will look organic here.
Recommendations
Place small announcements of content on the left or right panel that are close in topic to the main content of the page. For example, if we are talking about the "About Us" section, you can offer the user to go to the section with company news.
Sidebar Design: General Rules
You have decided on the location, type and content of the columns. Now it remains to find out how to make the sidebar aesthetically pleasing and organically fit this block into the overall design concept of your resource.
The width of the columns in expanded form should not exceed 30% of the total width of the page, and their height should not cross the boundaries of the screen.
Leave the left sidebar for the menu, and the right one for additional information. Most users are accustomed to this arrangement of blocks.
Highlight individual components of the sidebars with contrasting colors so that they do not blend in with other elements of the site and are clearly visible. Do not forget that the shades used in this area should be combined with the color palette chosen for the portal.
To grab users' attention without distracting them from viewing the main content, choose a font size for columns that is 20% larger.
Don't forget about adaptability: be sure to check how readable the text in a given area is from different devices and screens. Don't overuse columns if your site is viewed mainly from smartphones or gadgets, or give preference to hidden sidebars.
頁:
[1]