Thanks for visiting Marketpath. We use cookies to make this website work better for you and to track site visits anonymously.

Tell Me More Ok, Continue

Looking for content tailored to you? Let us know what role best suits you:

Marketer Developer Agency General

UX Tip of the Week: Button Standards

July 23, 2019 By Emily Oskay

Humans are creatures of habit, therefore unless all of your users are of the four-legged variety, your users are creatures of habit too. UX/UI Design is not, in fact, form over function and neither should your button placement. Additionally, it is important to use clear language and contrast in color and design to clearly guide the users to the primary action as well as make them fully understand what the button action is. 

The first rule of buttons is that users are trained for certain types of button placement, and here are a few you should consider as standard:

Close Button Dialog

If a button functions as a way to close a window, tab, or pop-up screen, your users are inherently going to look in the top right or left corner of their window for a close button. You are trained to do so by every word processing program and internet browser you’ve ever opened to do so. You’ll notice a trend as of late in advertising (think of the pop-up ads in your Candy Crush game) is to explicitly move this button into a different corner to trip you up, often putting their call to action where you would inherently click on the close button. Whether you choose right or left, be consistent in its placement and functionality.

Close Button on a website's dialog

Close Dialog Buttons can be moved, but just keep them consistent across your website


Save and Cancel Buttons  

Buttons for a primary action typically work better on the right side of a pop-up dialog. The reason for this is a user associates “ok”, “save”, or any similar action with progress and moving forward. Secondary actions like deleting, discarding, or canceling should appear on the left and in a secondary weight and color if they are not the primary intention of the dialog.

Save and Cancel Buttons

 

Be Clear in Your Word Choice

Additionally, it’s important to use clear messaging and contrast to make users quickly and clearly understand what will happen from their actions. 

A good rule of thumb is not to use “Yes”, “No”, or “Ok” unless it is to comply with something such as the use of cookies on your website. Even then a clearer action would be “Yes, I accept” or “Ok, I Understand.” Be clear and explicit to avoid confusion. A confusing, permanent action can lead to data loss, a rise in support issues, or less conversions or sales. 

YESNO_Bad

DELETECancel_Good

 

Don't Forget to Check Mobile

Lastly, don't forget how and where you're using these buttons. A button on a desktop can be a lot easier to click with a mouse than a small button on a phone with your finger. Ensure you review all of your buttons on mobile to make sure they're appropriately sized and usable.

signUp


 

Related Tags: UX Tip of the Week, Website Design, Marketing, Website Marketing Tips & Best Practices

Emily Oskay, UX Designer, Marketpath

Emily Oskay

Emily joined the Marketpath team in December of 2014 as a User Experience (UX) Designer. She serves as the product designer for Marketpath CMS, and the lead designer for the Pro Services division. Emily works directly with clients to establish their online marketing goals and outlines any functional requirements the custom website may need before designing client websites.

Emily obtained her Masters of Science in Information Architecture & Knowledge Management with a concentration in User Experience Design from Kent State University in 2018. She previously attended Purdue University and graduated from Purdue University in May of 2013 with a B.A. in Visual Communication Design and Computer Science. In her free time, Emily enjoys cooking, drawing and designing, traveling the world, and spending time with her family and friends.

Looking to see Marketpath CMS in action?

Sign Up for a Demo