UX Notes: States of Button

While Designing an App, Website, or any interface as a UX designer it is essential to define all possible states of the design. One way to understand or get to these states is by interacting with the designs as a prototype.

Ok, but what are these states?

States are the feedback that the user gets while interacting with the Interface, it also helps the user to know where is he/she/them and what is happening in the current interface.

One best real-life example would be an electrical switchboard indicator. it has the following states.

1. Light ON: This state helps the user to know that the current is there and that he/she/they can use the switch.
2. Light OFF: This state helps the user to know that there is no current and that he/she/they cannot use the switch.

Electric Switchboard indicator

Like this Defining states in Design gives the user more clarity about their actions and results.

Let's see how can we apply this in Buttons, Why Buttons? because it is the most fundamental component that users interact with and will be easy to understand state concept

Like states, there are different types of buttons but For this let's take a Primary button with an icon.

Primary Button with Icon

There are 2 different types of groups of states

• Action States: These are the states which visually show the interactions with the buttons like Default, Hover, etc.
• Result States: These are the states which visually show the results of the interaction like Success, Error, etc.

Different Button states

Let's understand a little bit about each state.

Action States

As the name suggests these states are those which give visual feedback when users interacted with the Buttons.

If we follow our previous electric switchboard indicator example then the Indicator and the position of the switch visually show the interaction with the switch hence are the Action States

They are normally 5 different types of action states:

Action states

• Default: As the name suggest this is the rest or default state of the button before any interaction happened.
• Hover: When the User hovers the CURSOR over the button there is a change in the state that happens to show that the button is selectable/clickable.
  
  Notice how I emphasized the cursor, there is a reason behind it. The hover state is a little bit different from all other mentioned action states here. unlike all other states, Hover State is only valid for an interface with the cursor. Interfaces having touch, button, voice, or gesture controls don't support a hover state due to the missing cursor.
• Focus: Have you ever used keypad phones? In these types of interfaces which can be navigated using buttons, a separate state is used called the Focus state. just like hover it focuses on the selection before selecting to provide visual feedback of the selection. See the example below to understand clearly.

Focused on Left Key before selecting

• Clicked/Pressed: When the button is enabled and can be selected while clicking or pressing visual feedback ensures the user that the button is being clicked or pressed.
  Many times touch-enabled interfaces use Long pressed interaction to show more options for selection.
  
  This can be better explained by the below example, where in an android touchscreen phone you can long press to open up further options

Pressed Interaction

• Disable: This states shows that the user cannot interact with the button as it is disabled.

So this sums up the Action States of Button. Let's see the Result States

Result States

Result states are those which give visual feedback after the user interacted with the Buttons. These states are generally non-clickable as it shows the final result.

Let us go back to our previous electric switchboard indicator example. After the user interacted with the switch ( Let’s say it’s connected with a bulb ) the visual feedback we receive is turning on the bulb if there is current, which is the result state of the action

There are normally 4 different types of action states:

Result States of Button

• Default: Same As explained before this is the rest or default state of the button before any interaction happened.
• Loading: Technically we can and cannot say this state is a result state. we can say because it comes after clicking the default state and we cannot say because it is not the final result it is a transition state between default and error/success state.
  This state is used to give clarity and a visual message to the user that he/she/they need to wait for some time to see the result.
• Success: As the name suggest this is the Result state which shows the success of the process. This type of state is generally used after the completion of a process like submitting, Downloading, Uploading, etc.
• Error: Unlike the Success state, this state shows the failure of the process. Visual feedback is important where as it is the success or failure of the process to give the user clarity regarding the result of the process.

To summarize briefly states are important during any interaction to give feedback to the user and serve a better User Experience

Feel free to share your view. Let's Learn Together.