12 Ways to Improve Your SaaS Engagement through an Efficient Sidebar Design

The sidebar is a critical interface component that drives the user experience of a SaaS product. Let's deconstruct the essential elements of a sidebar component and understand how one can leverage this component to enhance the user experience of your software and achieve some of your engagement metrics.

If you look at best practices, the sidebar more or less takes 15-20% of the screen space at all times and is like a depot that gets you to any place within the application in the fastest manner to complete a specific task. Easy navigation is of utmost importance for the success of your SaaS.

First things first

I'm not a big fan of how-to-do-something type of content, management or design leadership. I'm only spotlighting best practices that I have observed, designed in some ways and can back up these design patterns with logic and ideal outcomes. New practices are more important than best practices and if you have better ways to do things, please innovate, create, contribute and just don't follow templates. If everyone follows templates, how can we create something new?

A best practice today, was once a new practice. So, take risk, test and measure your new ideas. Every business context and associated software products and interfaces demands a unique UX strategy and not a generalized template.

Back to the central idea.

1. Customization

A good practice is to enable the customization of the menu items in the side bar. Not all your users might want to stick to the fixed sequence of menu items given in your software interface. By providing a simple customization feature, users can rearrange the menu based on their preferences, leading to a happier, efficient and productive engagement with the software. Some interfaces even provide the customization of the sidebar width and screen positioning to meet certain user needs and business context.

2. Modes

Sidebars can be presented to users in several forms like compact mode, where only a bar of icons is shown, or a full fledged bar with icons, labels and sub menus. Modes are contextual to business. Iconography is a no-brainer, however icons should be relatable, and should ideally be industry specific and balance global conventions for better relatability and overall usability. Some SaaS interfaces sport an icon-only sidebar and this is not a good practice from a usability standpoint as this is pushing the users to recall over simple recognition.

While screen real estate is a challenge for complex applications that need a large work area, we can't just sideline usability. If space is really a challenge, then one should balance this with the icon-only sidebar and by also providing a full-fledged descriptive sidebar that contains icons, labels and the whole deal.

By default, always keep the side-bar expanded, to reduce the interaction cost. Another trend is the of use emojis along with icons. Really sets the tone, if that's the tone and style you want the users to experience. By default, expanded mode should be enabled on login or for first time users. You don't want people to be guessing, when they are yet to adopt or engage with your software. Do you?

For expert users who need additional screen space by default, enable customization settings. We need to design for a spectrum of users and nobody starts as an expert, no matter wha the software.

3. Menu Depth

How many levels of depth should the sidebar menu have? If you ask me, anything beyond two levels turns into a complex navigation experience, taxing the user. Level 3 and beyond could be a tab bar or a page specific list menu in the work area outside of the sidebar. Also grouping your menu items and keeping the level 2 items open by default can enhance the usability and overall engagement with the interface.

Hiding level 2 items does not add much functional value, apart from clutter free aesthetics and focus on the work area. It's a balance designers need to find in a given business context. If each menu item has too many sub menu items, it makes sense to keep the menu collapsed. Or else, just keep them open for better engagement. (Considering users can collapse or expand this entire menu at any point in time) Then arises the scrollbar issue. Now users have to deal with two scrollbars, one in the work area and another in the sidebar area.

For extremely complex and large menus, you could even split the sidebar into multiple sections with a simple segment control or tab structure on the top or bottom of the sidebar. Now you technically and practically have multiple sidebars. This approach works best when users want to switch between roles, deal with multiple workspaces or suite of apps within a master app.

The whole idea is how do you optimize this 15% screen space or so and get the best of out this in terms of usability and your overall software engagement metrics.

4. Menu Sequence

Who decides the menu sequence? Is this based on business importance and relevance in your particular product context? Ideally, this could also be based on the way the workflow is generated in the product. Or is it alphabetical?

Menu sequence is a strategic design decision and should be in line with the product metrics and envisioned user experience. We once again go back to the importance of Customization in every aspect of the sidebar.

Including "Recent Activity" or "Favourites" is another smart way to build on the power of user recognition and enhance productivity, which is a common engagement metric for most SaaS interfaces.

5. Badges

Badges like 'New' or 'Beta' can be used next to menu items to increase adoption and engagement. Most SaaS interfaces are built to become an integral part of the user's work life and just tucking in a new menu-item (when you launch something new) without a badge can tend to be overlooked by the users.

Once users are used to the interface, new entrants into the sidebar can also cause frustration and lower productivity as returning users work based on memory and are used to a certain sequence and location of menu items in the interface.

One should take a cautious approach to introduce new menu items into the interface and carefully plant them with a badge at the end of the list to avoid any disturbance in the current user experience. (This is the primary reason, every interface should have a customization feature) Empower your users to define their own experience based on desired workflows and work style. Don't intrude and preach on how to do their work. User are the masters at their work, observe and support them to make things easier, not tougher. (Observation studies is an efficient research method to understand your users)

6. Notifications

Notification badges with numbers, emojis, text or alert icons can signal the user to engage with the sidebar and navigate to a specific menu item and respective work area. At times, these notification badges can become key drivers in productivity and enhancing the overall workflow of the entire SaaS which caters to various user groups in an enterprise context.

Even for consumer SaaS, this is being widely used to drive engagement and assist users to click through and work on desired areas. Ideally users should be empowered to enable or disable badges for specific menu items or else this can turn out to be overwhelming and forcing an irrelevant user experience on a certain set of users. Features are important, however user control of features is paramount. (Again customization and not intrusion)

7. Onboarding

Onboarding can make or break your product. (An entire topic for another day) Most products smartly use the sidebar to help the users with a simple "Getting Started" option in the menu. This features can be turned off, once the user completes a certain number of days of creating an account, or completes a set of tasks like Account Setup, few core activities of the product, completes a guided tutorial, etc.

Signing up a SaaS is easy and just takes a few seconds, however adoption and initial engagement is key in Product-led-growth (PLG) as well as Sales-led-growth (SLG). The sidebar should provide instant help and access to customer support. When you offer customer support, why would you want to hide the availability of the same? Be upfront and be there all the time. Unless you want users to first self-serve through help and documentation and then approach your live support team. This is purely a business decision.

Account management should ideally be tucked into the sidebar, to capture additional data after sign up and profile the customer to provide the best possible experience and upgrade offers. The sidebar is a great place to sport initial promotional offers when free trials are running out. (Hiding this settings does not help anyone) Account Setup should be an integral part of the onboarding experience and not an after thought in PLG.

8. Colour

The sidebar's background colour plays an important role in various aspects of the user experience. It sets the overall tone of the application, is an extension of the brand colour and visual connection with the user. It's an important design decision which impacts and remains with the user day in and day out.

What is the message you are sending to the user subconsciously? (If SLACK is using a specific background colour for their sidebar, there should be a business thought right) Why not just white? Eventually, users identify with unique colours and associate with the product and brand, both consciously and subconsciously. Let's not forget that your software is an extension of the brand. Everything is!

A white background works very well from an aesthetics standpoint, however having a brand colour background or a shade of the same can create the constant connection with the brand. This also enables the user to focus on the work area, which is predominantly in a white background. A white background sidebar is clean and handy when it comes to showing badges, notifications and alerts.

Another perspective is that excessive colour might be a turn off and a distraction for users who want to focus on the work area and not the sidebar. Sidebar navigation is not the product, your work area is what you're selling to the customer. Sidebar is a means to an end, not the end.

If your SaaS product is a suite of apps, then sidebar colour could be a distinguishing factor within your suite of apps. This colour differentiation could also be used to suit various user groups in an enterprise.(Each group gets a colour)

Some enterprise SaaS products even empower the users to change the colour and theme to suit their own brand imaging in premium plans. Not a bad idea, however you're losing your SaaS brand image as the user's company brand image is overriding the efficiency of colour factor, that we just discussed. Most enterprise users are anyways not your direct buyers/customers. Again, this should be a well thought design decision driven by a business strategy.

Now let's explore if the sidebar design has more advantage over a top bar approach.


Please note that a top bar (or tab bar) is used as a subset to sidebars at a page level. Most SaaS interfaces use a contextual top bar within a specific page for page level navigation. 

Note: Here we are talking only about the global level navigation and not the page level interaction.

9. Engagement

The sidebar an occupy upto 15% of your horizontal screen space all all times. Unlike the top bar which has a horizontal orientation and can consume a lot of above-the-fold space, which users are always short of in a desktop interface, due to the aspect ratio and conventional use of computer displays with horizontal orientation. There are cases, where applications are designed for vertical displays. So understanding technical constraints and business context matters before your begin conceptualization.

For a top bar, upto 5% should be okay, however going beyond that, ut starts to intrude into the workspace. (which is your actual interface or product) Well, you're not selling navigation to users. Navigation only enables the efficiency of the product you intend to sell. Better navigation leads to a better use experience.

There is more engagement with a sidebar that is open, as users can navigate easily with the help of a vertical menu, drill down to various sub menu items, if any and perform desired tasks efficiently. A sidebar is used on demand, tucked aside from user attention and the actual workspace is given more importance.

10. Natural Progression

As users interact with your sidebar, there is a natural progression of events in terms of appearance and interaction. Users click on the sidebar which is tucked towards the left and the events unfold on the right. Users in most countries are used to a left-to-right reading and interaction pattern. (I'm not sure how this works for users who are used to a right-left reading behaviour) If you visualize the same interaction with a top bar, it's kind of taxing on the user. Also, visual scanning of a top-to-down menu is way easier than processing a left-to-right menu.

11. Space Optimization

When compared with a top bar, you can tuck 10X more menu items in a sidebar due to its vertical layout orientation. A top bar is not highly usable, if there are more than a few page destinations. If page destinations have sub menus, the drop downs can slide down and cover up your workspace every time you interact with the menu. For very complex or large menus, some products even have a scrollbar within the sidebar (Checkout YouTube on desktop) How awkward would it be to have a scrollbar in the top bar?

The Sidebar clearly has several advantages over the top bar approach for global navigation.

12. Context

I see the efficiency of a top bar only in four scenarios. First scenario is where there are hardly 2-4 destinations in your product without any sub menu items. Here users don't really have any other interaction to perform except to click on the icon/menu-item, leading to the desired workspace. In this context a minimalist top bar makes more sense, as a sidebar can occupy vast screen space for no good reason. All design decisions need to be driven by clear objectives.

Second, when users need too much horizontal space to suit a specific business context, like spread sheets, etc. Here every pixel matters to make the interface highly available and efficient for the users. Sidebars can be a distraction as well.

Third, when the sidebars are a subset of the top bar navigation. Each menu item in the top bar has the potential to open an exclusive sidebar. This works best for complex enterprise applications where you're more or less tucking in several apps within one master app. (Suite of apps) Complex products have dense menus and this demands an integration of a top bar and sidebar, in turn optimizing screen space and enabling easy navigation.

Fourth, when there is an extremely dense menu and a good amount of depth in the information architecture, a top bar with cascading menus or a mega menu could be an answer. However, the downside is this can cover up your workspace every time you interact with the menu. The upside is low interaction cost, as the menu cascades or is available on a platter for users. Again, all of this depends on the business context and what you want the users to accomplish with your SaaS product.

Conclusion

One thing is clear, the sidebar can't be sidelined as just another design component. It can make or break your product and in turn your business. It is crucial to know how to unleash the potential of this component in achieving your UX vision and SaaS engagement metrics.

Every interaction begins with the sidebar. 

Design an efficient one to grow your product and business.