Navigation Menu | UI Redesign
We’ve recently redesigned the navigation UI for our smart-space management platform. It hadn’t been touched in several years, so it was time to improve its usability, with a focus on improving its responsiveness and making it more mobile-friendly.
This post gives an overview of the challenges, how we worked with internal stakeholders to tackle them, and finally the results of our work.
The Problem
While there were numerous challenges, we chose to focus on the major issues we were aware of.
- The primary navigation menu was not scrollable, stopping users to see from seeing the complete list of functionality.
- The content was not wrapping or breaking correctly and was overlapping in the UI.
- The information Architecture was not clear enough, leading to misinterpretation of titles and content (This topic was partially covered as part of this work, but will still need some improvement).
The Research
The team gathered the best practices for a good navigation menu, as well as a collection of great design inspiration. Some of those are listed below.
“Hidden navigation increases task completion time for visitors”, according to Nielsen Norman Group — always display the things that are most important to visitors prominently.”
“Put navigation in places where users expect to see it”
“Visually separate navigation from content”
“Limit the number of top-level options — The Magical Number Seven, Plus or Minus Two, George A. Miller states that short-term memory holds only seven items, plus or minus two.”
“ Add search to simplify web navigation”
The Redesign
As Joey Limmena writes in his article, the UI can be seen by the union of 3 elements:
Functionality — the presence and placement of action items (buttons, text fields, icons, and descriptions) on an interface. It tackles the cognitive elements of design that tell us for what purpose a feature exists.
Branding refers to the color palette, typography, and overall style of a brand. This ties into the look and feel of a brand as a company and induces the type of experience that they’ve set out to create.
Trends. Often, we don’t really think about it, but here’s a thought: how does the fashion industry establish what’s ‘in’ this year? It’s likely not up to you or me.
These were the main elements when creating the design.
Firstly, we decided to remove some unused elements. We’ve decided to eliminate This included the top navigation bar, a drop-down list, and the two icons (that were shortcuts for the left menu items). We also removed the filter in the list, after seeing that it was not being used.
Using just the left navigation, we’ve gained vertical space for the content, as well as optimized the mobile UI.
To eliminate the scrolling problem mentioned earlier, we've decided to eliminate the submenu pop-out card element and stack it under the rest of the content (left image).
Now, if necessary, a scroll bar appears in the whole left navigation if necessary. This decision also follows a trend for web UI in 2020.
We’ve also opted to have the icons in the sub-menu list, so there is always a corresponding image to the content being displayed. This gives us the chance to explore those icons in the content pages as well.
As mentioned above, the filter in the search bar was removed, leaving us with more free space for the new design. Using an already implemented feature in the system, we are now displaying dynamic results as the user types. If there are many results, making the height be bigger than 450px, a scroll bar should appear.
The user details, such as username and his role within the organization, will now appear at the bottom of the navigation. This component should always be visible, regardless of how many items we have in the menu. This follows the best practice of “ Hidden navigation increases task completion time”, now the visitor can always know who is logged in and easily log out.
Finally, there is a better mobile version since we’ve eliminated the top navigation bar.
Conclusion
Helping users navigate should be a high priority for every site. Uniting this with an aesthetically pleasing interface makes using the site easier and a little less of a chore. While the work as designers is never finished, we’re happy with the result so far. We’ve learned we should not wait too long to improve our user experience, instead make constant and small iterations.
Have you or your team already gone through a navigation redesign process? What did you learn from it?
A huge thanks to Ryan Bateman who mentored me in the whole process as well as reviewed this post :)
