search

bblfsh / web

Web client for Babelfish server
http://dashboard.bblf.sh
GNU General Public License v3.0
23 stars 21 forks source link

Disabled Buttons Usability (Load & Share & Search) #223

Open ricardobaeta opened 5 years ago

ricardobaeta commented 5 years ago

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.

image

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.

load-share-search