✏️ UX TRENDS

Back to Newsletters

Do your Buttons suck? Heres how to fix them.

Buttons are Special


Buttons are special and you need to do them right. Buttons are the gateway to someone buying a product, signing up for your newsletter, unfollowing someone, etc. Buttons can make or break a user's experience. Lets go over what is bad and make it good...

❓ Don't be Ambiguous


/img/2/Screen_Shot_2020-08-17_at_7.48.48_PM.png

No one likes a button that just says, "click here". Or a button that just says, "Next". Ambiguity leaves the user confused and sometimes frustrated. When a button states "Continue" or "Last Step" or "Go to Step 3", the user knows the length of the form. The more the user knows, the better the user experience.

⚠️ Call to Action


One of the biggest uses of buttons are call-to-action buttons. When creating a button, tell the user what is going to happen. The button should give the user an expectation of what will happen next.

/img/2/Screen_Shot_2020-08-17_at_8.15.49_PM.png

Here, Stripe excites the user by giving credibility to their product and then pulls the user in. The user immediately knows this button will allow the user to start using the Software and API.

Sometimes buttons can be vague. Like "Join us" doesn't necessarily tell us what you mean. It could mean I'm signing up for a newsletter, or it could mean I'm paying for something or joining a MLM scheme. Be specific.

💡Also, don't use "Learn more". Its tired and no one really knows what they are learning.

/img/2/Screen_Shot_2020-08-17_at_8.01.21_PM.png

👨🏼‍💻Be Aware How a Button Makes the User Feel


/img/2/Screen_Shot_2020-08-18_at_1.35.59_PM.png

Sometimes a button can be daunting to press. Take, for example, Amazon's Buy Now button. Honestly, I rarely use Amazon's One-Click Buy. I want to be secured in knowing I am using the right card and that I am sending it to the right address. Again, its all how to user feels... the user experience.

💥 It can be very confusing for a user to have 2 checkout buttons. A 'Add to Cart' button and a 'Buy Now' Button without any context really confuses the user. Both buttons are good on their own, but less is more. Giving the user two options, especially when they do the same thing, worsens the user experience.

/img/2/Screen_Shot_2020-08-17_at_8.14.22_PM.png

Here, Airbnb confirms that the user can reserve a large Home without being charged yet. Making the user feel better about reserving.

🖍 Primary & Secondary Buttons


Buttons are colored differently depending on the task. Buttons to continue or lead the user are usually friendly colors or have the same color scheme as the website. These are usually presented as 'Primary' buttons. Primary buttons are usually highlighted automatically because that is the desired direction to take. For example, the 'Deploy' button is primary because it is highlighted and filled in. While the 'Live Example' button is called a 'Secondary' Button. The secondary button usually is not a bad path, but not necessarily where the website's main focus.

/img/2/Screen_Shot_2020-08-18_at_1.45.55_PM.png

Primary buttons are where the website wants to point the user. Notice on Cancelation pages how the cancel button is just outlined rather than filled in. It is not a primary button because who wants a user to cancel a subscription? Here is Netflix's cancel button. Although Red would probably be the color of other buttons, but the cancel button is gray. Drawing less attention to it.

/img/2/Screen_Shot_2020-08-18_at_1.50.15_PM.png

Takeaways


  1. Don't be ambiguous. Make sure your buttons have a specific action
  2. Tell the user what is going to happen when they click the button
  3. If the button is performing a big action, relieve the customer with additional text that gives piece of mind.
  4. Choose the color or highlight of your button carefully. Make sure buttons pop off the page.

Feedback


Have any suggestions or wanna tell me what to talk about next week? Tweet me! @bnpneio

Subscribe for more Case Studies right to your Inbox!