Upcoming Upgrades to VividCortex's Navigational Interface

Posted by Alex Slotnick on Feb 27, 2016 3:55:36 PM

Most of the time, we post about things like Queueing Theory, SketchRanking, or monitoring best practices principles.

But today, we'd like to share something much more visible: a suite of navigational updates that we'll be introducing to the VividCortex app in the coming weeks, as we complete testing and optimization. Our interface will retain the general elements of the old design, but the changes we're showcasing here will make users' experiences with VividCortex more agile, streamlined, and intuitive.

Here's a feature-by-feature breakdown of what's new:

Chat with an Engineer (and other adventures)

In the past, you could initiate a live chat with an engineer or access help within the app by locating these blocky icons in the corner of your screen. Satisfactory... but nothing special:   

original-help.png

Now we've traded in those lozenges for something a little less square. Take a look at this handsome button, powered by elevio

Screen_Shot_2016-02-24_at_1.32.32_PM.png

A quick hover and click sees the circle unfold into this fully equipped menu:

Screen_Shot_2016-02-24_at_1.32.43_PM.png

From here, you can find quick reference to a variety of VividCortex resources. The same live chat option is available, and it opens directly in the app. The "guided demo," "blog," and "status" selections likewise offer seamless, sidebar functionality. Here's what a typical "status" looks like, within the app (note how all of the widget's options remain available in an unobtrusive column on the left):

Screen_Shot_2016-02-24_at_2.46.17_PM.png

Meanwhile, selecting "Twitter" and "VividCortex documentation" will redirect you to our Twitter feed and documentation on our website, respectively. In the latter, you can find guides for getting started, selecting hosts, our various dashboards, and using all manner of VC tools.      

Please note that you'll need to be careful with adblocking extensions, as some of our users have reported these extensions are blocking the help, chat, and other widgets.

 

A More Shapely Profile for the Profiler's Column Selector

The column selector in the Profiler was already a useful and powerful navigational device. It lets you hide or reveal a wide variety of columns with specialized metrics, providing the user with precise focus on any particular categories of interest. But looking at the older manifestation of the selector -- a pop-up, modal window -- we decided that it was just too bulky and intrusive, with a more complicated appearance than necessary. This is the old look: 

original-profiler.png

And we're replacing it with this, a dropdown, single-column menu:  

new-profiler.png

The toggle switches remain the same, as they provide a quick, intuitive way for a user to customize exactly which items should be visible at any given moment.

 

Sub-Navigational Switches are Now Truly Submerged

It may seem obvious that "sub-navigational" switches ought to exist in some layer beneath the top. But in the past, they've floated right at the surface, next to truly top-level navigational selections, looking like this:

original-subnavigation.png

These switches represent options on the page that the user is currently viewing, so the place for them should be somewhere in the horizontal form, not on the universal level. This is a change we've been deferring for a long time, but now's the moment. We've taken the model version above and simplified it by relocating those switches to their own dedicated widget. The sidebar now looks like this: 

 new-navbar-charts.png 

And the switches can now be found in the dropdown menu in the top right section of the screen, under "Choose Categories."

Screen_Shot_2016-02-24_at_3.28.44_PM.png

The options that the menu provides are customized depending on which dashboard the user is viewing when the widget is selected.

new-subnavigation.png

 

Less is More on the Left Navbar

And finally, we'll be simplifying our lefthand navbar by aspiring toward a more immediate and minimal aesthetic. Currently, the navbar looks like this:

Screen_Shot_2016-02-26_at_12.21.59_PM.png

We plan to unclutter its flow by slimming it down and relying solely on icons -- no text necessary. We'll gain a significant amount of space onscreen, opening up the app's overall appearance. The transformation will look something like that of CircleCI's navbar, which demonstrates a much more responsible design choice: 

original-circleci.png      new-circleci.png

 

Smoother Cruisin' for VividCortex Users

These changes are exciting because they manage to retain the core, empowering experience of using VividCortex -- but they make that experience smoother and more intuitive than ever. We look forward to hearing your feedback on VividCortex's changes when they rollout soon -- don't hesitate to tell us what you think!    

 

Recent Posts

Posts by Topic

see all