Button states provide key information to your users and communicate what’s possible in a user interface. This is how to design them
Buttons are everywhere in user interfaces. They guide users through a user experience and have many functions. We use buttons to save our work, to buy things online and to submit forms. All designers should know the UX impact of button state design.
No doubt you’ve clicked a link in your time so you’ll already have a vague idea of button states. Links, back in the day, used to turn purple when you clicked them. That’s a change of state. This idea translates to buttons.
When a user interacts with a button, it changes state. It’s as if the button were speaking to the user. Button states are a way for the interface design to communicate information to the user.
Let’s find how you can design button states. We’ll cover 3 states: normal, hover and pressed all in Justinmind.
How to design button states in Justinmind
Now we know what button states are, it’s time to prototype our own.
Step one: Download Justinmind
To get started on your own button states, download Justinmind.
Once downloaded, create a new web prototype. There is now an empty canvas in front of you.
Step two: Construct your normal button state
To make our normal button state, drag a rectangle from the widget palette onto the canvas. Adjust the size to your liking. This will form the basis of your button.
Select the rectangle you placed on the canvas. In the Properties tab, you will see the following options:
These options allow us to customize the rectangle that we have placed on the canvas and turn it into a button.
We have made our button 150px by 40px which you can do in the Size property. You can make your button responsive by changing the pixel value into a percentage in the drop down menu.
Next, let’s round the border so it has a curved edge. In the Border property, give your rectangle a solid border. In the Round field, write a value of 40. Choose your border color, too.
In the General property, you can add button text in the Value field. We’ve written ‘Button’ in our example. Original, we know.
In the Background property, add your own color. Below the Background property is the Text property. Here you can change the color of your text.
Now you have a normal state button.
Step three: Duplicate your button and design their states
We have our base normal state button. It’s our foundation. We can create different states using the Properties tab and the Events tab.
Right click and copy the button you made. Paste it onto the canvas.
Create the hover state
Select the button you pasted on the canvas and click Add Event in the Events palette below. Choose your Trigger in the Dialog. For the hover state choose Mouse > On Mouse Over > Change Style.
While still in the Dialog, select the button you copied on to the canvas. There is a drop down menu which allows you to select which styles to change. Go to Background > Color. Choose the color you wish the button to change to when the mouse pointer hovers over it. Then click OK.
Now you have a hover state button.
Create the pressed state
Duplicate your hover state button. This time we’re going to add more interaction for the pressed state.
When a user clicks the button, we want to show a loading GIF then have the button turn green and show a tick.
We’ll need a loading GIF and a tick icon to do this. You can get a loading GIF from loading.io. You can create a tick using the line widgets or use an image, it’s your choice. Position these UI elements on top of your button in the middle.
Select your button and click Add Event. In the Dialog, select On Click > Set Value. Click OK. Now in the Events panel, click the gear symbol. Click “Add actions after selected”. Select your loading GIF in the Dialog and select Mouse > On Click > Show.
Now let’s turn the button green. Add another Event. Select On Click > Change Style. From the drop down menu, select Background and then Color. Change your border color doing the same process. Click OK.
For the last two events, we want to hide the loading GIF and show a tick. To do this add another Event, select the loading GIF and choose On Click > Hide. Next select your tick from the Outline panel in the Dialog and choose On Click > Show. Click OK.
In your Events palette, you’ll have 5 interactions, as shown above. Between them are 4 diamond icons which set the sequence of the interaction. Every interaction, except the second one, should be set to “With previous”. The second should be set to “Time after previous started”. Set the time to 500 milliseconds.
Simulate your prototype. Click the button and it should display a loading GIF, change color and display a tick.
Best practices for designing button states
There are a few pointers you can learn so your button states follow convention. In Dan Saffer’s book Microinteractions: Designing with Details, Don Norman writes, “Microinteractions are about the critical details that make the difference between a friendly experience and traumatic anxiety.”
We don’t want to make our users anxious. We want to create a user experience that is painless and effortless. Here are 3 best practices to follow when you design your own buttons and their interactions:
Make it look like a button
It may sound obvious, but there are websites with buttons that look nothing like buttons. Users shouldn’t have to click the button to see if it is a button. They shouldn’t hover over it to find out either.
On a desktop, users expect hover states. But there are times when hover states would be useless. They are redundant on mobile devices, for example. UI designers have to build UI elements in a way that they afford clickable behavior from the user.
How do you make something look like a button? Use bold colors. Make it button shaped. A button should stand out from the other UI elements on the screen. If it blends in, users won’t recognize it as a button.
Use text instead of icons
Icons are very helpful because it’s easier for us to recognize an image than process language. But not everyone interprets icons in the same way. There is no current standardization for icon usage. It’s a user’s previous experience that informs their understanding of an icon. Use text labels for clarity. If you forego a text label, it’s imperative to add a tooltip so that people can still find out what the button does.
Most people understand a danger sign. But a button with a lock icon? What does that mean? Save? Share? Secure? Encrypted? Who knows. If you do use an icon, pair it with text.
Write strong verbs to compel the user to action
With buttons, use action specific language. Verbs work better. Your button text should be concise. Buttons have limited space so it’s not the time to bring out your inner poet.
Strong and short verbs like “Share”, “Buy”, “Install now”, “Start” are preferable. They’re direct, understandable and compel the user to action.
How to design button states – the takeaway
Button states communicate. They give the user information that empowers them to make a decision or complete an action. Follow these conventions so that your button is recognized and used.
If your button looks like a button and acts like a button then your users won’t experience confusion. Button states help prevent any confusion and provide the clarity your users deserve.