Look at your phone. Open absolutely any website. You will encounter this functionality that we call a button over and over again. They are present on practically every interface and allow you as a user to take actions and make decisions that lead to the fulfillment of particular conditions for obtaining the result I.e. interaction.
They might seem like the most obvious functionality to place and animate but even in something so small, there are certain rules one needs to follow. Today, we will be reviewing some of these rules.
All Buttons Need to Look Like Buttons
When we talk about the user interface, we are not looking for something bizarre or complicated. Every time a user sees a page or an application there should be instant recognition of what is clickable and what isn’t.
Users don’t want to spend time looking around at the page looking for the elements. The more time a user spends decoding your UI the less usable it becomes for the user.
What are the indicators that show that an element is clickable? First is by drawing on their previous experience and looking for visual signifiers that they normally associate with a UI object. These signify include size, shape, shadow, color, etc.
The issue with most interfaces is that in their bid to be different, they somehow manage to create weak signifiers; which then hamper the discoverability of the button.
For mobile users, this issue gets further amplified. A desktop user can just hover their cursor over the elements to check inactivity whereas all a mobile user can do is tap away.
Do Not Assume Obviousness
In some cases, designers just don’t highlight the functionality in the interface as they believe it will be obvious to the user. This sadly is not the case as the user is not acquainted with your elements as you are. So, what is obvious to you might not be to them.
Stick To What Users Know
There are a lot of opportunities that a UI provides for you to be different but the design of a button is not one of them. Ensure that no matter what design you select for your button, it should be something that the user has previously seen and used.
Utilize White Space
Where your button is placed is important not only for usability but also for the experience that the user will go through. The white space around a button will help users figure out whether or not something is an interactive element or not. Thus, avoid creating clutter around your button lest the user thinks it is part of the design instead of the functionality.
The Location Of The Buttons Matter
Place the buttons where the users are expecting to find them. They should be easy to spot and use. You are not designing a treasure hunt. Do not place buttons in places where nobody will look for them. If a user can’t spot a particular button, they’ll just leave your page never to return.
Stick To Traditional Layouts And Standard UI Patterns
Buttons need to be discovered. It is as simple as that. You cannot have buttons that are not being used. With the integration of a standard layout, you increase the chances of the discoverability of each element. A good layout has three major components- a standard format, clean design and good utilization of whitespace.
Before rolling out an application to the masses, test out discoverability. You do this by asking users to navigate the pages without any input from your side. This will give you a comprehensive view of the interface you have designed.
Be Precise With Labels On Buttons
Don’t just be generic with what you put on the buttons. Often generic terminology can lead to very confused users. Button labels need to clearly state what they do. The button’s action needs to be highlighted by the words written on it.
Just look at the buttons on your banking applications, every time you need to complete a transaction there is a dialogue box that clearly gives you the option of “Complete Transaction” or “ Cancel”. Now imagine instead if the only words written were yes or no. I’m sure you would not want to continue working with the bank.
Size The Buttons Properly
The priority of the element should clearly be reflected in the size of the button on the screen. A larger button would automatically mean a more important action.
Prioritize
The most important element on the screen needs to look like the most important button on the screen. Try and ensure that your primary button looks important. If you have to increase the size, do it. Or maybe use a contrasting color. The end goal is to make it stand out of the page.
Remember The Mobile Users
The world is moving to handheld devices and in this vein, you have to ensure that the buttons you create cater to those users. Often times than not the buttons on mobile applications are a teeny bit too small. This often leads to the user choosing the wrong option while using the application.
Maintain The Order
The order for buttons should be in line with the flow that exists between a user and the system. Before inserting a button ask yourself ”Will the user understand this?” Understand the flow that is expected by the user and then accordingly create your design.
Avoid Overcrowding With Buttons
A lot of designers get a little too enthusiastic and end up adding too many buttons on their application or web page. When there are too many buttons most users end up making no decisions at all. When you are in the process of designing a website make sure that your flow points towards the most important actions of a website.
Ensure Feedback on Interaction
When it comes to a button there needs to be some kind of feedback showing the user that the task is now completed. This feedback can be either audio or visual in nature. As long as there is feedback it works well for the user. When a user does not receive any kind of feedback the first assumption they make is that the system did not record their actions or receive their command. This can often prompt the user to create multiple entries where it isn’t required.
Explore microinteractions for creating effective feedback modules.
When it comes to interactions like downloading not only an acknowledgment is important but also a user input that shows the state of progress of the download.
One might feel like buttons are the smallest of elements and really not all that complicated or important. But when it comes to interaction design it is these small elements that create a good UX. Your final design is a collective of each of this element and thus each part needs your attention.
