Disabled Buttons Usability (Load & Share & Search)

[ricardobaeta]

Problem

A button should always provide visual feedback upon people's interaction - hover/click - despite being disabled. This rule is not being applied to the disabled buttons LOAD & SHARE & SEARCH.

Solution

One step forward on plain usability is to add a “not-allowed” cursor when people :hover disabled LOAD & SHARE & SEARCH. With this solution, we provide enabled & disabled interaction behavior, improving people's experience.

Solution Details

Targeting the buttons disabled attribute on the proper Less file, we control its :hover behavior. We attach LOAD & SHARE bblfsh-header__button class, and SEARCH bblfsh-search-panel__button one. Something along what is shown below.

button.bblfsh-header__button:disabled,
input.bblfsh-search-panel__button:disabled {
  cursor: not-allowed;
  pointer-events: all !important;
}

Solution Example

We can see how this usability improvement affects the user experience on source{d} UI.