Miller’s law states that the average person can retain five to seven items in their mind at once.
Yes, the reality is that our short-term memory is limited. So, as UI/UX designers, our product designs are not only aesthetically pleasing and easy to use but are also intuitive. So, we must include in our UI design elements that complement how the human brain processes information.
So, how exactly do we do this? Well, it all starts with having a well-structured categorization of how our platform works. Yes, we’re talking about introducing a sidebar in our UI UX design.
As the name suggests, a sidebar is basically a vertical column placed to the sides of a digital platform’s interface that gives our users extra information. Its content and layout can differ from website to website and platform to platform. Still, its main purpose is to complement the primary content and give our users a more accessible method of accessing relevant information.
Yes, we can include a sidebar in any type of platform or website. But when do I really need a sidebar? How do I know I need a Sidebar and not other navigation tools like Drawers or Tab Bars? When should I use sidebars (besides when a client really insists on it)?
Well, it’s essential to use sidebars on three types of platforms:
1. Content-Heavy Platforms
When we’re talking about content-heavy platforms, we think of news websites, blogs, and even social media platforms. This type of content typically has a substantial amount of information and various sections to navigate through. For this reason, a well-designed user interface becomes crucial to enhance user experience and facilitate content discovery.
Think about it! Without a strategic system, finding certain information can become overwhelming, resulting in user frustration and causing them to leave the platform.
This is where sidebars become a need in our user interface design. Look at TechCrunch! By implementing a sidebar, the users can easily access articles related to Startups if this is what they want. And if they want to read about another topic, they can simply switch to a different category from the sidebar without any effort.
While you might ask yourself – But wait! Can’t I also use a drawer? And well, yes, you can. However, in situations like this, as UI/UX designers, we might want to opt for a sidebar as it offers a more persistent presence on the screen. This way, it’s much easier for our users to access the essential information and features without needing to open and close a drawer repeatedly.
Even more so, in the example of TechCrunch, having a sidebar instead of a drawer ensures that the categories of articles are consistently in the users’ line of sight, making them easily accessible and memorable.
2. SaaS Platforms
Steve Krug, a famous UX professional, once said (and wrote a book about it) – “Don’t make me think.”. So, when creating a SaaS platform (and any other product design), this is the principle that UI UX designers should remember. When we land on a SaaS platform, we should immediately know where to go next without having to put too much effort into it. And in this situation, sidebars became a need – maybe even a necessity.
In fact, sidebars are becoming more and more popular – and it’s primarily because of SaaS platforms. And it makes sense!
Since our users frequently switch between different sections or features, sidebars act as the central hub of our SaaS platform. This way, sidebars facilitate the overall user experience, making it quite impossible to manage complex software without a reliable and intuitive way of organizing content. Even more so, it allows UI UX designers to present the platform’s functionalities logically, grouping related features in a way that makes sense for our users.
The idea of using sidebars in SaaS platforms is to simplify the lengthy and probably complex process of using our product. This way, we can implement a section to the sides of the screen that stands as a table of contents, allowing our users to effortlessly follow and navigate through our platform much more easily.
In the case of SaaS platforms, we’re not only using sidebars for navigational purposes. Rather, we can also show our users the next steps they have to follow and their progress. This way, they can easily grasp the workflow and understand the sequence of actions required to achieve their goals.
3. eCommerce Platforms
There’s nothing more complex than an eCommerce website. And the more products or services your online store offers, the more links you will need. And the more categories you have, the more structure you need.
Because of this, sidebars become a critical UI element of the UI UX design as they provide an efficient and organized way for our customers. In fact, an eCommerce website can’t even function without a way to group categories and filters – unless you are purposefully trying to destroy your platform.
And it makes sense! After all, the success of an eCommerce platform heavily depends on creating a way for our customers to find our products quickly.
Yes, many big eCommerce websites adopted a horizontal main menu structure. Amazon, eBay, Etsy. As you can see, all of these platforms have a top tab bar. So, now it raises the question – is it better to use a horizontal bar or a sidebar for our eCommerce platform?
Well, the answer is not so simple. The eye-tracking visual principle revealed that using a horizontal bar for navigation would result in significant unused space. Even more so, a study conducted in 2004 at Utah State University suggests that the majority of users preferred a vertical navigation layout.
Yes, maybe a study from 2004 is not so relatable anymore, and we should follow the lead of large companies. However, the reality is that sidebars provide a more comprehensive categorization solution and stand out much more.
So, try to adopt sidebars as much as possible!
We at uinkits understand the importance of great user experiences and creating amazing UI designs. That’s why we’ve developed a Figma UI Kit with design components that include these essential UI elements that enable you to design intuitive and user-friendly interfaces effortlessly.
“You press the button, we do the rest.” – Kodak.
Inspired by this iconic tagline from Kodak, we believe in simplifying the design process for you. Our Figma UI Kit, uinkits, is a complete design system with UI components that allows you, as a UI UX designer, to create your products as quickly as pressing a button.
Our design system includes UI components, icons, variables, cards, buttons and everything you need for your design process. All you have to do is take your UI design component needed, and you’re ready to use it in your designs!
