Improving Navigation Design
Making a troubleshooting and monitoring tool more intuitive
Imagine being tasked to find a book from a giant pile of books — that task would be frustrating because you have no hints on where to start and you’ll have to manually comb through every single one until you find it. On the other hand, when you walk into a bookstore or library looking for a particular book, you know exactly where to look because books are organized by genre, then by author last name.
Bookstores and libraries are intuitive because they make use of information architecture. Information architecture is the practice of organizing content in a way that is understandable to the user. One of the best ways to simplify the user experience and navigation in your product is to improve the information architecture. When the layout of your product becomes too complicated, your user won’t be able to access what they need easily.
Often, the products with the best information architecture are the ones you don’t even think about because the location of the content is so intuitive.
Recognizing breaks in the user’s workflows
As an effort to simplify the overall experience in vRealize Operations Manager, a troubleshooting and monitoring tool, my team and I decided to start by addressing the pain points around navigation. When evaluating past baseline research studies, we noticed that users had to click around in the product to find the functionality they were looking for. Particularly in enterprise design, when a user is in the middle of a complex task, getting lost in the navigation can mean serious breaks in the workflow. In order to design a truly intuitive information architecture, we had to gain a better understanding of our users’ mental models. Mental models are people’s understanding of how something works or should be in the world.
Working with our user researcher, Ashley Pan, my teammate Manasvi Somaiya and I created a research plan as a first step to designing a new navigational structure for the product. We started by listing out the existing information architecture and all the different pages in vRealize Operations. Based on previous user research data, we observed that users had a hard time customizing for their needs. One of the main reasons for this was the fact that settings and customizations are not in context of the tasks. For example, to access alerts, users go to ‘Alerts’, but to change alert thresholds, users had to go to a different section of the product called ‘Content’.
Understanding the user’s mental model through card sorting
To gather more information on how our users would like to group the pages, we conducted a closed card sorting study. A closed card sorting is where users sort a list of items into predefined groups, with the option to add additional groups they see fit. We used an online tool called OptimalSort to do the card sorting. On the right, there was a list of every single page within vRealize Operations and on the left, there were the groups that currently exist. The users were told they can add new groupings if they felt a page didn’t belong to any of the existing groups.
We gathered data from nine users. Throughout the study, we asked our users to think out loud and explain to us the reasoning behind their decisions. Several users were confused what the ‘Content’ section meant and why it was there. For the pages that used to be under ‘Content’, some of them created a new section labeled ‘Settings’ and others placed them in context under ‘Alerts’.
The most interesting part of the study, though, was that every single user we spoke to added a new section called ‘Dashboards’. Currently, all the dashboards sit under ‘Home’, with customizations again under ‘Content’. In the user’s mind, they should be able to find everything related to dashboards in one place. Additionally, while discussing this topic, many users brought up the fact that navigating through dashboards today is very clunky. Dashboards are currently arranged in a horizontal tab structure and most users have over a dozen dashboards open, resulting in lots of horizontal scrolling. The tabs just didn’t account for the scale that our users needed.
Translating findings into an intuitive navigation
Taking the results we gathered, we analyzed how many users placed different pages under the various sections and considered the qualitative feedback we received as well. We were able to get a better understanding of the mental model our users have when they come in to use our product. We continued the discussion with our PMs and engineers and after a few iterations, we came up with a final design for the navigation structure. We changed the placement of over 30 pages, used progressive disclosure in the side navigation, removed ‘Content’ and added ‘Dashboards’, and used Clarity’s header and sidebar navigation styles. (Clarity is VMware’s open source design system.)
To resolve the dashboard wayfinding issue, we proposed using a list view instead of tabs and decided on the design through another round of research. We asked users to show us how they navigate between dashboards today. Typically, users have their frequently accessed dashboards open in the tabs. However, many of them opted to use the dropdown of all the dashboards (which can be as many as a hundred) because the tabs were too tedious to navigate through. When presented with the list view alternative, the users gave immediate positive feedback.
“That’s exactly where I expected it to be!”
-Rob, vRealize Operations user
After the updated navigation was delivered in the following release, we were able to validate the new structure with users and received a lot of positive feedback. These changes might seem subtle, but to our users, it makes a big difference to their day to day.
We’re hiring!
The VMware design team is looking for talented designers to help us continue transforming enterprise design. Check out our open positions!
