欧洲杯投注软件

Behind the Grafana UX: Redesigning the Thresholds Editor

Published: 25 Sep 2019 RSS

As part of building the new Gauge panel in React, we also wanted to update the panel controls, especially the thresholds control.

A threshold in the context of Grafana欧洲杯投注软件 is simply a value that, when exceeded, a condition occurs. An example would be a single stat panel with a green background that changes its background color to red when a threshold is breached.

Original Thresholds Control

欧洲杯投注软件Above is the old implementation that is still used in the single stat panel. There is an input field where the user writes two values separated by a comma. To indicate to the user how it’s used, there is a tooltip that explains how it works. Underneath, we had three color swatches that opened a color picker if clicked on. The color on the left is the base color. The color in the middle is the first threshold color. The color on the right is the second threshold color. This is something that is not clearly indicated.

欧洲杯投注软件The implementation was not intuitive and often difficult to understand. The control also only allowed for two thresholds.

There were three key improvements we wanted to make:

  • It should be easy to add thresholds
  • Users should be able to add as many thresholds as they want
  • It should also be clear how the thresholds work. There should not be any need for a tooltip

Solution #1: The List

First, we looked at how competitors handled thresholds to see how their solutions could work for Grafana. The initial result the team came up with was to create a list of thresholds.

A new feature here was the “Min” and “Max” values. In the version we were using, the “Min” and “Max” were in a different control (Gauge control).

We started with “Min” at the top and “Max” at the bottom, and the user could add thresholds in the middle.

It worked and was an improvement over what we had. But the result wasn’t something we were happy with.

One big issue here was where to put the “+ Add” button. Users want to have the button where the action happens, but not having the button at the bottom felt weird. Having both “Min” and “Max” at the top solved this. But what if the user wanted to add a threshold between two other thresholds?

Thresholds, List Solution

Solution #2: The Horizontal Line

So we went back to an earlier idea, which was simply to have a line that the user could click on to add a threshold, a bit like gradient controls in drawing softwares.

Thresholds, Horizontal Line Solution

The big appeal of this idea was that the line would clearly show what the color meant and how it would be shown in the Gauge panel.

欧洲杯投注软件The first problem, however, was how to indicate to the user to click on the line.

Single Stat Panel, Horizontal Line Solution with Colors

欧洲杯投注软件The nice thing about this solution is that users can clearly see what the colors mean. Orange is from 500 up to 750, and above 750 it would switch to red.

欧洲杯投注软件The user can also choose where to add new thresholds. For example, a user can add a threshold between the 500 threshold and 750 threshold or after the 750 threshold.

But it still wasn’t clear to users that, depending on where one clicks, it would give them a different result. So where should the information live?

欧洲杯投注软件In this example, the info for only one threshold is shown at a time. Also, the “Min” and “Max” are set in the Gauge control.

欧洲杯投注软件So what about combining the line solution with the list feature we had before? How the threshold works is shown, which is nice. But we still had the problem of where to place the “+ Add” button.

Thresholds, Horizontal Line Solution with Add Button

欧洲杯投注软件Here, we also set “Min” and “Max” in the thresholds control. This will be discussed further down.

Thresholds, Horizontal Line Solution with Thresholds Limit

欧洲杯投注软件With this combined solution, however, another problem emerged with the horizontal line design: It limits the amount of thresholds users can add.

Solution #3: Rotate the Line

欧洲杯投注软件By rotating the line and combining it with the list we had a breakthrough.

Thresholds, Vertical Line Solution

欧洲杯投注软件The thresholds instantly became clearer. What is seen in the control is what will be seen in the Gauge.

But we were still left with the issue of how users would add new thresholds. The idea of clicking on the line had a bigger appeal than an “+ Add” button.

Thresholds, Vertical Line Solution and Adding Thresholds

Also an ongoing discussion throughout this whole process was whether the thresholds control should set the “Min” and “Max” values. A “Min” value made sense at first, but since “Min” and “Max” values here were Gauge specific and other panels were going to use the thresholds control, we removed the “Min” and “Max” and added a base color.

Thresholds, Vertical Line Solution and Adding Thresholds on Line

The idea of clicking on the line to add thresholds was still not ruled out. But making that function clear to the user was still difficult.

欧洲杯投注软件So we evolved the design to add the “+” sign to the line, which eventually became a “+” button next to the line.

The Final Design

Thresholds, Final Design

The single stat panel still uses the old thresholds editor so you can compare it with the new thresholds editor, which you can find in the Gauge or Bar Gauge panels.

Grafana Labs co-founder Torkel Ödegaard欧洲杯投注软件 has also been with different ways to improve the UX of the single stat panel so there may be more updates to share soon.

欧洲杯投注软件In the meantime, if you have any feedback about the new thresholds editor – or Grafana in general – share them .

Related Posts

A rare problem with a self-referencing variable caused a customer's dashboard to break. Here's how to salvage the situation.
Meet Grafana Labs team member Callum!
VP of Product Tom Wilkie demos how to accelerate Prometheus queries from four seconds to less than 100 milliseconds.

Related Case Studies

After trying to DIY, Wix embraces Grafana Cloud

Metrics is an important part of Wix’s culture, so Grafana Cloud was chosen to monitor mission-critical systems.

"It doesn’t make sense, price-to-performance, to do it ourselves, so we were looking for a fully-managed solution from a team that had experience running monitoring at scale."
– Alex Ulstein, Head of Monitoring, Wix

DigitalOcean gains new insight with Grafana visualizations

欧洲杯投注软件The company relies on Grafana to be the consolidated data visualization and dashboard solution for sharing data.

"Grafana produces beautiful graphs we can send to our customers, works with our Chef deployment process, and is all hosted in-house."
– David Byrd, Product Manager, DigitalOcean

Grafana enhances end user experience for Apica Systems

The company uses Grafana alongside its SaaS product to detect availability and performance issues before they affect users.

"There have been all kinds of dashboard solutions, but Grafana changed that game in terms of being extremely dynamic and hooking in whatever you like."
– Sven Hammar, CEO, Apica Systems