# Titles ## How ### 1. How you can choose your perfect sidebar in 5 minutes. ![image](https://hackmd.io/_uploads/ByAFT9KUA.png) ### 2. How I chose my perfect sidebar and how you can do even better in 5 minutes ![image](https://hackmd.io/_uploads/S1lAaqKUR.png) ### 4.How I chose my perfect sidebar. See how you can choose in simple way ![image](https://hackmd.io/_uploads/SkVoUD0U0.png) ### 5. How I Redesign my sidebar. How you can design your perfect sidebar in simple way. ![image](https://hackmd.io/_uploads/SJZz6DCIC.png) ### 7. How Our Sidebar Redesign Transforms UX. A Quick,Analysis Personal Journey to Effortless Navigation. ![image](https://hackmd.io/_uploads/r1P73o080.png) ## Simple ### 6. A perfect sidebar for my product. Choose yours in 5 minutes. ![image](https://hackmd.io/_uploads/BkN6xsKIC.png) ## Principled approach for deciding titles Benefit for reader: 1. if they have a sidebar, they get to know the best practice 2. If they are going to create a sidebar, then they'll have the best knowledge 3. Effortless for their users [Part1]: Keywords: [Improve/Enhance] Sidebar, UX, Users, Customers 1. Make sure your sidebar doesnt burden the users 2. Is your sidebar burdening the users? 3. Can Your Sidebar Be Better? 4. Is Your Sidebar Hurting Your UX? [Part2]: A Quick, Analysis Personal Journey to Effortless Navigation. 1. Our Redesign Journey to Effortless Navigation Titles: 1. Can Your Sidebar Be Better? Our Redesign Journey to Effortless Navigation ![image](https://hackmd.io/_uploads/BJUskaA80.png) 2. Can Your Sidebar Be Better? A Quick, Analysis Personal Journey to Effortless Navigation. ![image](https://hackmd.io/_uploads/Bkg0JTA8C.png) 3. Is Your Sidebar Hurting Your UX? Our Redesign Journey to Effortless Navigation ![image](https://hackmd.io/_uploads/SyLxg6R80.png) 4. Is Your Sidebar Hurting Your UX? A Quick, Analysis Personal Journey to Effortless Navigation. ![image](https://hackmd.io/_uploads/H1bmxp0IR.png) 5. Can Your Sidebar Be Better? Our Redesign Journey for a User-Friendly Experience ![image](https://hackmd.io/_uploads/r1jIeTCUC.png) 6. Is Your Sidebar Hurting Your UX? Our Redesign Journey for a User-Friendly Experience ![image](https://hackmd.io/_uploads/S14OeTAUA.png) --- Have you ever felt frustrated navigating a website with a clunky sidebar? We hear you. At [Hexmos](https://hexmos.com/), we're constantly striving to improve the user experience. Recently, we took a critical look at our own sidebar design and identified many areas for improvement. In this blog post will delve into the journey of redesigning our sidebar navigation, taking inspiration from industry leaders. ## Our Existing Sidebar Design ### High Contrast and Visual Distraction Our initial sidebar design boasted a bold black and white theme. While visually striking, it created a high visual contrast that drew unnecessary attention away from the content users came for. This distracted from the overall user experience. ### Solving issues in initial design We recognised the need for improvement with our initial sidebar design. Prioritised user focus on the content by implementing a lighter theme for the sidebar and navigation bar. <div style="text-align: center;"> <img src="https://hackmd.io/_uploads/BJv_OgiU0.png" alt="image 373" width="400"/> </div> This shift in color scheme achieved two key goals: **Reduced Visual Clutter:** The lighter theme created a more balanced visual experience. The sidebar no longer competed with the main content area for user attention. **Content Takes Center Stage:** By adopting a lighter theme, the content on the page became the focal point. Users could now easily find the information they were looking for without being distracted by the sidebar. But, User experience was not good due to multi-level ### Inefficient Multi-level Navigation While the lighter theme addressed the initial contrast issue, further exploration revealed a new challenge. Our multi-level navigation structure required users to click through three levels to reach certain sections. This inefficiency became apparent as users expressed frustration with the navigation flow. Imagine trying to find a specific setting buried within three layers of menus! **A solution was needed** Clearly, a three-click journey wasn't ideal. We brainstormed solutions to improve the navigation flow and user experience. Our goal was to create a system that was both intuitive and efficient, allowing users to find what they need quickly and effortlessly. Before going into solution lets understand about the product we are building and ### Hexmos Feedback We are a small team, building a product called [Hexmos Feedback](https://hexmos.com/feedback). Feedback Consistently Motivate Your Team with Less Effort. More than 60% of employees yearn for regular, meaningful feedback, but often feel undervalued. Hexmos Feedback helps your people provide frequent feedback to one another effortlessly so that your team always remains highly motivated. Feedback keeps teams motivated and engaged through recognition and continous feedback. We have attendance management as a part of Hexmos Feedback.we go beyond simple attendance.we help you look at "participation". Explore Feedback: https://hexmos.com/feedback Our book: https://turnoverbook.com/ ## Case Studies To find inspiration for a more intuitive navigation system, we turned to industry leaders known for their user-friendly interfaces. Here's what we learned: ### [Notion](https://www.notion.so/) Notion offered a clean, single-level sidebar. It has some issue which cannot be used in our use case. #### Absence of multi-level navigation While this worked for their specific content structure, it wouldn't accommodate our complex, multi-level navigation needs. #### Single-Level Navigation Wasn't Enough Having all the elements in the sidebar will clutter sidebar, making it difficult for users to find what they're looking for. <div style="display: flex; justify-content: center;"> <img src="https://journal-wa6509js.s3.ap-south-1.amazonaws.com/d687aa77a8c07174143527a54573b808fab3189fa8ca0826630f464a0684d652.webp" alt="Notion" style="width:50%; height: auto;"> </div> <!-- <div style="display: flex; justify-content: center;"> <img src="Notion-1.webp" alt="Notion" style="width:50%; height: auto;"> </div> --> **What is our requirement** Mainly we needed Hover-Based Navigation,Adaptability and Enhanced Grouping. So,we looked to other case study ### [Google Play Console](https://play.google.com/console/) Similar to Notion, Google Play Console utilised a single-level navigation with additional functionalities accessed through tabs. #### Lack of Visibility of navigation all at once While this streamlined the experience for accessing some features, it lacked the ability to display all navigation options at once. This could be overwhelming for users with diverse needs and all the other navigation is done through tabs. All right, we can do tabs. #### Switching with Tab Imagine having to switch between multiple tabs just to see all the available options! It is not that we can't do but showing everything which is present for the user directly when they hover would be more greater thing, right? right? Then we came to what is that cloud? That is why even Google Play console didn't work. <div style="display: flex; justify-content: center;"> <img src=" https://journal-wa6509js.s3.ap-south-1.amazonaws.com/2cc4339a5d671a55d6f4e5a7509d4ffbf6bd09d4c4716681da6e060bd344306a.webp" alt="Cloud Hover" style="width: 35%; height: auto; margin-right: 20px;"> <img src="https://journal-wa6509js.s3.ap-south-1.amazonaws.com/8500513b1df60b4e5cdd68c9f1cd07b5448528e176b7e3aafe6c9d8423e5bb92.webp" alt="Cloud Hover" style="width: 35%; height: auto; margin-left: 20px;"> </div> <!-- <div style="display: flex; justify-content: center;"> <img src="Play-1.webp" alt="Cloud Hover" style="width: 35%; height: auto; margin-right: 20px;"> <img src="Play-2.webp" alt="Cloud Hover" style="width: 35%; height: auto; margin-left: 20px;"> </div> --> ### [Google Cloud](https://console.cloud.google.com/) Our previous navigation system required users to click through multiple levels to reach their desired destination. This inefficiency created frustration as users felt lost in a maze of menus. #### Why choose Google Cloud? Google Cloud's navigation system addressed this problem with its hover-based interaction. Users could simply hover over the sidebar elements to see all navigation options, eliminating the need for unnecessary clicks. This intuitive approach made navigation quicker and easier. Additionally, Google Cloud employed a clear visual hierarchy using differentiated text sizes and capitalisation for primary, secondary, and tertiary navigation levels. This hierarchy allowed users to scan the sidebar and identify the section they needed at a glance. This focus on user-friendliness and efficiency is what made Google Cloud's design the perfect inspiration for our own redesign. <div style="display: flex; justify-content: center;"> <img src="https://journal-wa6509js.s3.ap-south-1.amazonaws.com/25e41352ac4a3001d7032f94406a8e66bff4b4569edfbdc8599ac5528998f8f8.webp" alt="Cloud Hover" style="width:50%; height: auto;"> </div> <!-- <div style="display: flex; justify-content: center;"> <img src="Cloude-Hover.webp" alt="Cloud Hover" style="width:50%; hight: auto;"> </div> --> ## Final Implementation Drawing on the strengths of Google Cloud's design, we implemented the following enhancements: ### Hover-Based Navigation Users can now explore all navigation options simply by hovering over the sidebar elements, eliminating unnecessary clicks and frustration. This intuitive approach allows for a quicker understanding of the available functionalities. ### Hierarchical Theming We created a clear visual hierarchy using text size and weight. Primary navigation features bold and larger text, secondary elements are slightly smaller and capitalized, and tertiary options utilize a lighter hover highlight for differentiation. This visual hierarchy makes it easy for users to scan the sidebar and identify the section they need at a glance. #### L1 (Primary) Navigation: Bold and larger text. #### L2 (Secondary) Navigation: Slightly smaller, capitalized for easy differentiation. #### L3 (Tertiary) Navigation: Smaller, lighter hover highlight to indicate hierarchy. <div style="display: flex; justify-content: center;"> <img src="https://journal-wa6509js.s3.ap-south-1.amazonaws.com/dba5804471dd4fdd3947cb53030babf9b6e5241552f6f28656bd1178c9ac4a2b.webp" alt="Cloud-Hover" style="width:50%; height: auto;"> </div> <!-- <div style="display: flex; justify-content: center;"> <img src="Hexmos-final.webp" alt="Cloud-Hover" style="width:50%; height: auto;"> </div> --> ### Minimal and Focused Design We prioritized a clean and uncluttered design aesthetic, ensuring the sidebar doesn't compete with the main content area. This minimalist approach prevents information overload and keeps the focus on the user's task. ### Adaptability Recognizing the diverse needs of users across different screen sizes, we incorporated a sidebar minimization feature for optimal viewing on smaller displays. This ensures a seamless user experience regardless of the device being used. ### Enhanced Grouping We ensured related navigation items were grouped together for better organization and discoverability. Grouping similar functionalities makes it easier for users to find what they're looking for and understand the relationships between different features. To understand even more about it You can refer this [Article](https://journal.hexmos.com/api-integration-in-react-best-practices/) ## Conclusion The redesigned navigation system, inspired by industry leaders and user feedback, is a significant step forward. By prioritizing a user-centric approach, we've created a more intuitive and efficient navigation experience that empowers users to find what they need quickly and easily. We believe this translates to a more enjoyable and productive user journey on our platform. This redesign is a testament to the importance of listening to user feedback and constantly iterating to improve the user experience. We are confident that these changes will make our platform more user-friendly and accessible for everyone.