Design: Controls (Inputs, SegmentedControls, Buttons, etc...)

The UI components are starting to come together, powered by the various (WIP) core systems.

For this issue, I would like to touch upon the various control elements (like Inputs, Buttons, etc…).

These components are arguably the most important elements within a digital user-interface. Even more so it used within an application like an editor (e.g. Gutenberg).

Not only should they work well in isolation, they should work well when combined together.

Clusters

Within the context of an editor, a “cluster” of controls will be common place (example below):

(GIF: Shows TextInput and SegmentedControl components being combined together. Also, dark mode!)

Controlling Noise

From my experiments, I’ve realized how important it is to (pardon the pun) “control” visual noise. This becomes especially important depending upon how many “clusters” of controls a user may see on screen, and, how many of those controls require immediate attention.

High Contrast

Above is a “high-contrast” example. Here, the controls have a strong border radius. The pro of this is that controls are easily spotted. However, they become visually overwhelming (and noisy) as soon as they cluster.

Medium Contrast

Above is “medium-contrast”. This example is more common place. The borders are present, but are subtle. This is probably the most balance between the 3 examples.

Low Contrast

Above is “low-contrast”. There are no borders at all. These UI controls are common in Mac OS/iOS interfaces. This excels at blending into the background when the controls are not needed. However, the lack of border and controls may make these elements appear disabled (depending on previous user experience)

Zero Contrast

Above is “zero-contrast”. There’s no indication of interaction at all! (This is from Figma by the way). Borders appear when hovered. Similar to low contrast, this excels at fading into the background, allowing the content to be the main focus. A downside is that a lack of borders may make these controls appear to be non-interactable (like read-only text or labels).

[jasmussen]

It’s impressive to see you work, Q.

I wonder whether it’s the right approach to branch the control appearance into three separate levels of contrast, ultimately asking for a user choice. A high contrast (7:1 ratio AAA) is an awesome addition. But outside of that there’s a simplicity in not having to make a choice.

In this case, the low contrast option also adds a lot of gray to the sidebar, which in total volume ends up standing out, for example when compared to Figma where a similar gray means “toggled”.

The challenge is real, however! There are many settings already, and with global styles slowly emerging, not only will there be more, but in many cases there will also be presets to choose from and custom values to override. Finding order in this chaos is a key value!

In some casual explorations where I tried to balance this standoff of minimalism, contrast, and global styles, I arrived at “one row per setting”, which expands when you click it:

I don’t totally love the whole flow there, but it gives a rhythm to each row, and it allows expanding the complexity while still having a useful clear resting state. Sharing here in case it can inspire work!

[ItsJonQ]

cc’ing @jasmussen + @MichaelArestad . In case you folks are interested 😃