User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I'm currently trying to determine how buttons with just icons as placeholders should be represented throughout our product.
Currently, each button is displayed as the representation on the right in this image.
I'm curious if they shouldn't be colored or have an active much of a hover state like a button, and more like the left side where they are gray and then have a slightly darker hover state?
Not sure what the best use-case for this is. I'm also trying to stick to material design as well.
As I understand their spec for icon toggles :
A good button affords usability by presenting a different visual style for each state the button is in. Some may not fully apply depending on the medium (eg hover isn't really a state on a touchscreen device).
States:
Although 2,3,4 can all technically be skipped, (the button still works) the users experience is not as good.
The focus state let's a user see which element on the screen has the focus "where am I?" and let's the user press space/enter to invoke it.
The hover state helps with discoverability showing which elements are actionable, and let's the user know they are "in the hotspot".
Finally the active state lets the user know that their tap/touch/click was successful and the system registered the input. If you've ever used a system that doesn't have this state it can be annoying if the response is slow... you ask yourself did I really click that? And end up clicking it again and again.
TL;DR whenever possible, ensure your buttons render something for all the states.
Note: In addition in some cases there is an additional mode of "disabled".
