欧洲杯投注软件

New Form Styles Coming to Grafana

Published: 30 Oct 2019 RSS

欧洲杯投注软件We’re always looking for ways to improve the Grafana UX; recently, we’ve been working on redesigning form styles. The three key areas of improvement are accessibility, scannability, and appeal. They’re very much intertwined, and things like inconsistency affect all of them.

Here’s a look at our design process so far.

Label Alignment

欧洲杯投注软件One of the first things that stood out to me in Grafana were the label backgrounds in the forms. They always felt heavy and stuck out more than the inputs. That’s largely because we currently use left-aligned labels, and the backgrounds are connecting the labels to the inputs. The problem with left-aligned labels is the distance between label and input.

欧洲杯投注软件One solution to this could be to right-align the label. We wouldn’t need the label background, and the labels would be close to the input. But this has a tendency to look a bit messy.

欧洲杯投注软件The way to go is to make the form top-aligned. It looks cleaner and also has the advantage that it lets the user see the label and input at the same time.

Top Aligned Form

欧洲杯投注软件Having the labels top-aligned forced us to look into spacing. First we increased the space between the form elements. We changed the line height of the label and added a small margin under it and a really small indent to it. We also changed input height to match the buttons. This change increased the scannability, and made the form much more appealing.

Top Aligned Form With Spacing

However, top alignment doesn’t really work with checkboxes. Most commonly, the label is put to the right of the checkbox.

Top Aligned Form With Checkboxes

Descriptions

欧洲杯投注软件In the current design, a lot of important and helpful information is hidden in tooltips or half-hidden as placeholders. For accessibility reasons, this is not optimal. Users who only use keyboards will not be able to see explanations, and users with impaired vision will have a hard time reading the placeholders.

To solve this, we decided to use written-out descriptions.

Form With Descriptions

Going Blue

Choosing color for our forms has always been a challenge. For CTAs we have green for primary, blue for secondary, and red for destructive actions like Delete.

欧洲杯投注软件In the past, we’ve considered having an orange button. But coming up with a nice, vibrant orange that is accessible and also works with the brand gradient was not going to happen. Our current green CTA buttons also have the problem of not being accessible when it comes to contrast. Trying to find an accessible green for the CTA returned dull results. So we decided that blue is going to become the new primary color. The problem with a blue CTA was that it didn’t pop next to the gradients used in other form components such as the toggle switch and check box. The solution? Make everything blue. This gave it a much clearer look.

Form Color

Radio Button Group

Right now we have three different radio button groups/segmented controls that we want to merge into one. This was the most challenging component to design. We had decided on using blue. We wanted both states to be easy to read, yet have the active state clearly stand out for everyone, including people who have color blindness. This is what we came up with:

Radio Button Group

欧洲杯投注软件This component has other uses, too. Currently, we use dropdowns when there are only two or three options, and we want to replace them with the new radio component. That way, the options are not hidden, and the user can make a choice faster.

Radio Component

Proper Focus

When it comes to accessibility, Grafana has a long road ahead. One big step in the right direction is making the forms accessible.

欧洲杯投注软件The most obvious problem with the current form styles occurs when you use your keyboard instead of a mouse. Checkboxes and toggle switches have no focused state. Radio button groups with focused state are very subtle and do not behave like radio group.

欧洲杯投注软件So here is the new focused state. It is also going to be used for toolbar buttons and navigation tabs. This will be a huge improvement for those mostly using keyboard.

Focused State

Helpful Errors

欧洲杯投注软件Our current forms have a invalid state, but it is not very helpful if it doesn’t let you know what is wrong. So with the new form style, every time the user enters an invalid input, there will be a message describing the problem and what the user can do about it.

Describing Errors

What Do You Think?

欧洲杯投注软件We haven’t yet implemented the design, so feedback is welcome .

Related Posts

Grafana creator Torkel Ödegaard takes us through the development of user experience, from the beginning of the project to what’s coming next.
This personal home dashboard looks cool -- but it also allows you to make informed decisions throughout the day, says guest blogger Cameron McCloskey.
Meet Grafana Labs team member Doug!

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