During the HOP UX study, one of the pain point we discovered was about the button group, we found usability issues leading to user frustration.

Pain points

After analyzing all the actual available data (Hotjar recordings, heat & click maps) we found these pain points:

1. Selected / active option is not clear especially with the 2 choices case

2. Hover state is not distinguishable from selected / active state

3. Keyboard: focus state is not clear at all, leading the user to be lost and guessing how the interface works

4. Options are too close from each others, this leads the user to miss his click

Addressing pain points

1. Selected / active option is not clear especially with the 2 choices case

Using visually separated option would let us: the opportunity to create a gap between them, which will :

• results in a better distinction between item and their states

• allow us to have the possibility to introduce more distinguishable styles for active, hover or both states at the same time

2. Hover state is not distinguishable from selected / active state

We need to have 4 distinguishable style for states in order to let the user know what's happening:

Default This state should reflect that nothing is set yet, so no highlight at all.

Focus / hover User should know where he's, that's the meaning of these states, that's why they share the same styles, here we need to highlight the position, so it has to be visible but not giving the impression of selection → border + color.

Active This state must reflect the fact that the option is selected, it must be bold and clear, background color is perfect for that, it has the more dominant contrast.

Active with focus or hover What happen's when these two states encounter? they merge! the adjunction of the border will provide enough contrast to be distinguishable while preserving the same behavior.

3. Keyboard: focus state is not clear at all, leading the user to be lost and guessing how the interface works

Solved by addressing issue 2

4. Options are too close from each others, this leads the user to miss his click

Solved by addressing issue 1

As we can see, some of the 4 issues we had to address has been solved using the same solution, nice!

Solution

It's time to see if our ideas are working by creating some design & prototype to demonstrate how this should work and validate the solution.

Prototype

The UI will use the new Selectra theme, taking advantages of the well contrasted colors. Design has been done in Sketch allowing us to incorporate it in a next release of the sketch DS library.

Design system update

This solution will be implemented in the Design system, that way all projects will benefit from these usability fixes.

Next : analyzing the solution

After the DS system release, will come the data analysis using heat, click maps and recordings. This analysis will let us know if our new solution works the way we want and if there is more to fix or not.