An Article by Opeyemi Okunlola - Head of Design at Enyata
Though it seems to be the smallest and simplest element of UI design, interaction is actually the most important and crucial part of the user experience that, when not properly distinguished, designed, and placed, will frustrate the user and yield no conversions.
Buttons are an element that you will always find on every interface, they allow users to take actions, and make choices because the product must definitely engage users.
As simple as they might look, there are certain rules you need to follow in order to deliver a well-designed button.
In this article, I will be explaining a few basic rules you need to follow for well-engaging buttons.
Be Concise
The ability to pass across the actions to be taken by the users in shorter words.
This was one of the key principles highlighted by Allison Rung, a UX writer at Google. Less is more, but concise doesn’t only mean short. It’s a balance between the number of words used and the message that those words convey. A message is concise when every single word has a purpose.
Be Focused
There must be a target for the button because it is there to guide the user through the conversion flow, but too much directional signage might cause confusion instead of clarity. It’s important to limit your usage of buttons within a single user interface to avoid cognitive overload; the fewer choices a user has, the easier a decision can be made.
Be Clear
Creating an effective button would require you to use between 2 and 4 words; language is the core of your button design. The words you choose will affect how your user perceives the intended action of the button. Using the wrong words may communicate something different, resulting in a reluctance to move forward or a negative experience of unintended results.
Use Contrasting Colors
The color you use for your buttons depends on various purposes; your brand color or even the nature of the intended action. While there’s no right color to use, it’s important to select one that contrasts against its background. If the background is black, then it’s best to use either yellow or white or any other light colour to create an impact.
With good contrast, the button stands out amongst the other elements and demands the user’s attention.
Utilize Smart Placements
Another important guideline is placing the button in the right place for the user to see and take the necessary action.
Mental models are formed through the frequent use of a system and the understanding of how it works. If I asked you to point at where the signup button is located without looking at the screen, where would you point? I could probably read your mind and guess that you thought of the top right-hand corner. By understanding how your users are used to certain systems, you could place your buttons in the right places.
For example, for most landing pages, the banner will have a header, sub-header, and lastly the CTA button — the user will have a higher chance of clicking the CTA after reading the information.
Implement Visual Hierarchy
The order of importance is very important when designing a button.
That’s why it’s important to clarify your primary CTA and create a visual hierarchy to make it the focus. This can be done by designing the primary button in a bolder way (using a contrasting color) and placing it on the right. While the secondary action could be represented using a ghost button or just a simple text link. Implementing a clear visual hierarchy will guide them towards their ideal action, which contributes to conversion goals in a major way.
Test, Test, and Test
All the above tips are very important for improving your button design. The only way to perfect your button is through multiple A/B tests to find out what works best for your users; the copy, colors, size, placement, shape, and style would differ based on your interface design and user personas.
To design the perfect button, designers need to focus on its primary objectives and evaluate its effectiveness via many rounds of A/B testing.
Join our design channel on slack to connect with amazing designers and get free design sessions with experienced designers.
