1. Appearance of Buttons
Users are used to basic button shapes like rectangles or circles. They prefer easy navigation and direct ‘call to action’ buttons. A change in the appearance of buttons confuses the user and they prefer to leave the page. Therefore, you must create familiar designs like buttons filled with square bottoms, rounded corners, shadows or a ghost button.
2. Button’s Size
The size of the button should be attractive so that the user can find it easily and the design of the primary button should be given more attention
Make sure the size of a button is finger-friendly, and reflects the importance of the element clearly.
A study by the MIT Touch Lab states that a minimum of 10mm* 10mm is a good button size as that is an average fingertip size. Note: Size varies for desktop and mobiles. Do not design too large or too small buttons.
3. Easy To Find
Alignment and placement of a button is essential as placing it at the right place can make it user-friendly. Don’t make users hunt for the button. Choose the correct font and color to highlight it.
4. Clear Labels
A clear representation of buttons is necessary. Don’t be generic with the button labels such as ‘Stop’ or ‘Cancel’ on the same page as it misguides and annoys the user.
Words must be concise and on point. Additionally, you need to keep in mind the whitespace and capitalisation of fonts. A good and direct CTA will give a clear instruction to the user and make them understand what’s next.
Note: Always use the task specific labels or words. For example, if you’re doing online shopping and want to add a specific product to your cart, choose “Add to cart” or “Checkout” for final payment of the order.
5. Follow the Hierarchy
Do not over stuff multiple buttons on the same page. The primary button must always be more prominent than the secondary ones. Moreover, you must only place one primary button on a page or screen at a time. Make sure to follow the hierarchy of buttons because users have become habitual to a particular pattern like the ‘Back/Next’ button in pagination. For example, to go to the second page, we have to keep the arrow on the right hand side and to go to the previous page, we have to keep the arrow on the left hand.
UX button design may seem easy but it’s quite crucial. Even slight wrong placement of buttons can create a major negative impact on the website. From the above points it’s clearly understandable that you need to pay a lot of attention to detail while designing UX buttons. Remember that buttons must always be user-centric. So, what’s the hold? Use these tips and design a killer UX button! Good luck!