Today we finally rolled out the new navigation menu and search bar that we’ve been working on for a while. We had been getting feedback on the poor usability of the old horizontal menu system and knew that a “pain point” had been reached—it was time to revisit how we treated navigation and search in Circonus.
We heard numerous times from users that our old navigation menus were difficult to use, and a recent survey we performed simply underscored that feedback. The horizontal nature of the menus made them tricky to navigate, especially when combined with the fact that they were not very tall. Also, we had outgrown them; after the recent addition of Metric Clusters and Blueprints, we were feeling cramped and were running out of room in the menu system. The last problem (which we started hearing recently from users) is that the location of the search field made it seem like a global search despite the placeholder hint text it contained. Some users who were new to Circonus hadn’t even noticed the search field; it just blended into the interface too well.
In this redesign we’ve shifted paradigms dramatically to alleviate these three problems. We’ve done away with the notion of showing all the menu all the time, and have implemented a large “sitemap” style menu. When the menu is collapsed, you see the current section name and page title beside a hamburger menu icon. This offers a large trigger area and easy-to-use menu with very few “moving parts.” The menu appears when hovering anywhere over the trigger area, making clicking unnecessary (clicking does work, however, for tablet and other touch-based users). This offers plenty of room both horizontally and vertically for future expansion, and it frees up room to the right for more page-related buttons.
On pages which are searchable, the search bar now sits immediately beside the menu trigger area (containing the page section and title). This makes it easier for users to recognize the contextual nature of the search, and also increases the visibility of search in general. This new search bar provides a dedicated space to show any current search string in operation on the page, and also offers a “minus” button to clear it with a single click. To enter a search string or edit an existing search string, you can click the magnifying glass or click the existing search string, if present. To commit your search string after typing, simply hit enter on your keyboard.
You’ll also notice that we’ve slightly reorganized the menu structure. The main goal of this was to make things more logical; to provide a better model upon which users can base their own mental models, making it easier to navigate Circonus. As such, the sections have been renamed with verbs pertaining to the general tasks related to each section. First is “Collect,” where you’ll find pages related to collecting and organizing data with checks, metrics, metric clusters, templates, and beacons. Next is “Monitor,” where you’ll go to see your hosts’ statuses, set rules, follow up on alerts, and work with contact groups and maintenance windows. Last is “Visualize.” This is where you work with graphs, worksheets, events, and dashboards. Hopefully this will make it easier for new users to get acquainted with the Circonus workflow of collecting data, setting rules to monitor that data, and working with visualizations.
One last benefit of this new menu design is that we now have the opportunity to highlight some secondary links at the bottom of the menu (documentation links, mobile site and changelog links, as well as keyboard shortcuts help). These have been present in the site footer, but many users are unaware of their existence. We wanted to pull some of these links up into a more prominent position since they’re helpful for users.
Thank you to all of our users whose feedback helps us shape Circonus into a better and more useful tool. We couldn’t do this without you!