Menu Search
Jump to the content X X

Sponsored Article How To Design Better Buttons

Buttons are a common element of interaction design. While they may seem like a very simple UI element, they are still one of the most important ones to create.

In today’s article, we’ll be covering the essential items you need to know in order to create effective controls that improve user experience. If you’d like to take a go at prototyping and wireframing your own designs a bit more differently, you can download and test Adobe XD1 for free.

Make Buttons Look Like Buttons Link

How do users understand an element is a button? The answer is simple. Visual cues help people determine clickability. It’s important to use proper visual signifiers on clickable elements to make them look like buttons.

Shape Link

A safe bet is to make buttons square or square with rounded corners, depending on the style of the site or app. Rectangular shaped buttons were introduced into the digital world a long time ago, and users are very familiar with them.

buttonbp (12)2
Windows 95 at first run: notice that every button, including famous ‘Start’ button, has a rectangular shape. Image credit: Wikipedia3. (Large preview4)

You can, of course, be more creative and use other shapes, (circles, triangles, or even custom shapes), but keep in mind unique ideas can prove to be a bit riskier. You need to ensure that people can easily identify each varying shape as a button.

Floating Action Button (FAB) which represents the primary action in Android application is shaped like a circled icon.5
Here, the Floating Action Button (FAB), which represents the primary action in an Android application, is shaped like a circled icon.

No matter what shape you choose, be sure to maintain consistency throughout your interface controls, so the user will be able to identify and recognize all UI elements as buttons.

Why is consistency so important? Well, because users remember the details, whether consciously or not. For example, users will associate a particular element’s shape as the “button.” Therefore, being consistent won’t only contribute to a great-looking design, but it’ll also provide a more familiar experience for users.

The picture below illustrates this point perfectly. Using three different shapes in one part of your app (e.g. system toolbar) is not only confusing to the user, it’s incorrect design practice.

There's nothing wrong with creativity and experimentation, but keep the design coherent.6
There’s nothing wrong with creativity and experimentation, but keep the design coherent. (Large preview7)

Shadows and Highlights Link

Shadows are valuable clues, telling users at which UI element they are looking. Drop-shadows make the element stand out against the background and make it easily identifiable as a tappable or clickable element, as objects that appear raised look like they could be pressed down, (tapped or clicked). Even with flat buttons (almost flat, to be exact), there are still places for these subtle cues.

If button casts a subtle shadow this helps users understand that the element is interactive.8
If a button casts a subtle shadow, users tend to understand that the element is interactive.

Clearly Label Buttons Link

Users avoid interface elements without a clear meaning. Thus, each button in your UI should have a proper label or icon9. It’s a good idea to base this selection on the principles of least astonishment: If a necessary button has a label or icon with a high astonishment factor, it may be necessary to change the label or icon.

Clear and Distinct Labels Link

The label on actionable interface elements, such as a button, should always tie back to what it will do for the user. Users will feel more comfortable when they understand what action a button does. Vague labels like ‘Submit,’ or abstract labels like in the example below, don’t provide enough information about the action.

Avoid designing interface elements that make people wonder what they do.10
Avoid designing interface elements that make people wonder what they do. Image credit: uxmatters11

The action button should affirm what that task is, so that users know exactly what happens when they click that button. It’s important to indicate what a button does using action verbs. For example, if a user is signing up for an account, a button that says, ‘Create Account,’ tells them what the outcome will be after pressing the button. It’s clear and specific to the task. Such explicit labels serve as just-in-time help, giving users confidence in selecting the correct action.

A button's label should say exactly what will happen when user press it.12
A button’s label should say exactly what will happen when the user presses it. Image credit: Amazon13

Put Buttons Where Users Can Find Them Link

Don’t make users hunt for buttons; put buttons where users can easily find them or expect to see them.

Location and Order Link

If you’re designing a native app, you should follow platform GUI guidelines when choosing a proper location and order for buttons. Why? Because applying consistent design that follows user expectations saves people time.

Image credit: Apple14
Image credit: Apple15. (Large preview16)

In the case of web-based apps, you should think about which placement truly works best for your users. The right way to determine this is by testing.

If you design mobile navigation it’s worth paying attention to the best practices for buttons location. The article The Golden Rules Of Bottom Navigation Design4517 covers this topic.

Make It Easy For Users To Interact With Buttons Link

The size and visual feedback of buttons, play key roles in helping users interact with them.

Size and Padding Link

You should consider how large a button is in relation to the other elements on the page. At the same time, you need to ensure the buttons you design are large enough for people to interact with.

Smaller touch targets are harder for users to tap than larger ones.18
Smaller touch targets are harder for users to tap than larger ones. Image credit: Apple19. (Large preview20)

When a tap is used as a primary input method for your app or site, you can rely on the MIT Touch Lab21 study to choose a proper size for your buttons. This study found that the average size of finger pads are between 10–14mm and fingertips are 8–10mm, making 10mm x 10mm a good minimum touch target size. When a mouse and keyboard are the primary input methods, button measurements can be slightly reduced to accommodate dense UIs.

10mm x 10mm is a good minimum touch target size.22
10mm x 10mm is a good minimum touch target size. Image credit: uxmag23

You should consider the size of button elements, as well as the padding between clickable elements, as padding helps separate the controls and gives your user interface enough breathing space.

buttonbp (5)24
Here is an example of padding between buttons. Image credit: Material Design25. (Large preview26)

Provide Visual Feedback Link

This requirement isn’t about how the button initially looks to the user; it’s about interaction experience with the UI element. Usually, a button isn’t a one-state object. It has multi-states, and providing visual feedback to users to indicate the current state should be a top priority task. This helpful illustration from Material Design27 makes it clear how to convey different button states:

Make sure you consider the hover/tap states and active states of the button.28
Make sure you consider the hover, tap, and active states of the button. Image credit: Material Design29.
30
This animation shows the button’s behavior in action. Image credit: Behance31. (Large preview32)

Visually Highlight The Most Important Buttons Link

Ensure the design puts emphasis on the primary or most prominent action. Use color and contrast to keep user focus on the action, and place the button in prominent locations where users are most likely to notice it.

Call-to-Action Button Link

Important buttons, (such as CTAs,) are meant to direct users into taking the action you want them to take. To create an effective call-to-action button, one that grabs the user’s attention and entices them to click, you should use colors with a high contrast in relation to the background and place the button in the path of a user.

If we look at Gmail’s UI33, the interface is very simple and almost monochromatic, with the exception of the ‘Send’ button. As soon as users finish writing a message, they immediately notice this nice blue button.

Adding one color to a grayscale UI draws the eye simply and effectively.34
Adding one color to a grayscale UI draws the eye simply and effectively.

The same rule works for websites. If you take a look at the Behance35 example below, the first thing that will catch your attention is a “Sign Up” call-to-action button. The color and the position, in this case, is more important than the text.

The most important call-to-action button stands out against the background.36
The most important call-to-action button stands out against the background. (Large preview37)

Visual Distinctions for Primary and Secondary Buttons Link

You can find another example of grabbing the user’s attention with buttons in forms and dialogues. When choosing between primary and secondary actions, visual distinctions are a useful method for helping people make solid choices:

  • The primary positive action associated with a button needs to carry a stronger visual weight. It should be the visually dominant button.
  • Secondary actions, (e.g. options like ‘Cancel’ or ‘Go Back’,) should have the weakest visual weight, because reducing the visual prominence of secondary actions minimizes the risk for potential errors, and further directs people toward a successful outcome.
Notice how the primary action is stronger in colour and contrast.38
Notice how the primary action is stronger in color and contrast. Image credit: Apple39. (Large preview40)

Button Design Checklist Link

While every design is unique, every design also has a set of items in common. That’s where having a good design checklist comes in. To ensure your button design is right for your users, you need to ask a few questions:

  • Are users identifying your element as a button? Think about how the design communicates affordance. Make a button look like a button (use size, shape, drop-shadows and color for that purpose).
  • Does a button’s label provide a clear message as to what will happen after a click? It’s often better to name a button, explaining what it does, than to use a generic label, (like “OK”).
  • Can your user easily find the button? Where on the page you place the button is just as important as its shape, color and the label on it. Consider the user’s path through the page and put buttons where users can easily find them or expect them to be.
  • If you have two or more buttons in your view, (e.g. dialog box), does the button with the primary action have strongest visual weight? Make the distinction between two options clear, by using different visual weight for each button.
Visual distinction for 'Submit' button. This should be the visually dominant button.
When looking at the visual distinction for ‘Submit’ button, it should be visually dominant over the other button. Image credit: Lukew

Conclusion Link

Buttons are a vital element in creating a smooth user experience, so it’s worth paying attention to the best essential practices for them. A quick recap:

  • Make buttons look like buttons.
  • Label buttons with what they do for users.
  • Put buttons where users can find them or expect them to be.
  • Make it easy for the user to interact with each button.
  • Make the most important button clearly identifiable.

When you design your own buttons, start with the ones that matter most, and keep in mind that button design is always about recognition and clarity.

This article is part of the UX design series sponsored by Adobe. The newly introduced Experience Design app47 is made for a fast and fluid UX design process, creating interactive navigation prototypes, as well as testing and sharing them — all in one place.

You can check out more inspiring projects created with Adobe XD on Behance48, and also visit the Adobe XD blog to stay updated and informed. Adobe XD is being updated with new features frequently, and since it’s in public Beta, you can download and test it for free49.

(ms, il, aa)

Footnotes Link

  1. 1 http://adobe.ly/2dHvgEx
  2. 2 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Windows-95-at-first-run-large-opt.png
  3. 3 https://en.wikipedia.org/wiki/Windows_95
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Windows-95-at-first-run-large-opt.png
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Floating-Action-Button-preview-opt.png
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/11/consistent-large-opt.png
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/11/consistent-large-opt.png
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/11/button-casts-a-subtle-shadow-preview-opt.png
  9. 9 https://www.smashingmagazine.com/2016/10/icons-as-part-of-a-great-user-experience/
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/11/designing-interface-elements-that-make-people-wonder-what-they-do-preview-opt.png
  11. 11 http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/11/button’s-label-preview-opt.png
  13. 13 https://www.amazon.com/
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/11/web-based-apps-large-opt.png
  15. 15 https://developer.apple.com/library/safari/documentation/UserExperience/Conceptual/MobileHIG/Modal.html
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/11/web-based-apps-large-opt.png
  17. 17 https://www.smashingmagazine.com/2016/11/the-golden-rules-of-mobile-navigation-design/
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Smaller-touch-targets-large-opt.png
  19. 19 https://developer.apple.com/design/tips/
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Smaller-touch-targets-large-opt.png
  21. 21 http://touchlab.mit.edu/publications/2003_009.pdf
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/11/10mm-x-10mm-is-a-good-minimum-touch-target-size-preview-opt.png
  23. 23 https://uxmag.com/articles/excerpt-from-the-new-book-the-mobile-frontier
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Padding-between-buttons-large-opt.png
  25. 25 https://material.google.com/components/dialogs.html#dialogs-specs
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Padding-between-buttons-large-opt.png
  27. 27 https://material.google.com/
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/11/hover-tap-states-and-active-states-of-the-button-preview-opt.png
  29. 29 https://material.google.com
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Animation-shows-the-buttons-behavior-in-action.gif
  31. 31 https://www.behance.net/gallery/23056487/Material-Design-Button-Animation
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Animation-shows-the-buttons-behavior-in-action.gif
  33. 33 https://mail.google.com/
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Adding-one-color-to-a-grayscale-UI-preview-opt.png
  35. 35 https://www.behance.net/
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2016/11/The-most-important-call-to-action-button-large-opt.png
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2016/11/The-most-important-call-to-action-button-large-opt.png
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2016/11/primary-action-is-stronger-in-colour-and-contrast-large-opt.png
  39. 39 https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/WindowAlerts.html
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2016/11/primary-action-is-stronger-in-colour-and-contrast-large-opt.png
  41. 41 http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php
  42. 42 https://blogs.adobe.com/creativecloud/the-evolution-of-buttons-in-ux-design/
  43. 43 http://uxmovement.com/buttons/how-button-placement-conventions-reinforce-user-habits/
  44. 44 http://uxmovement.com/buttons/visual-weight-of-primary-and-secondary-action-buttons/
  45. 45 https://www.smashingmagazine.com/2016/11/the-golden-rules-of-mobile-navigation-design/
  46. 46 https://www.usertesting.com/blog/2015/09/29/11-characteristics-of-persuasive-call-to-action-buttons/
  47. 47 http://adobe.ly/2dHqYbP
  48. 48 http://adobe.ly/1U9LS0E
  49. 49 http://adobe.ly/2dHqYbP

↑ Back to top Tweet itShare on Facebook

Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.

  1. 1

    Thanks for the post Nick. I’d be curious to hear your thoughts on email marketing and buttons/CTA’s.

    5
  2. 2

    Good stuff, but it feels like the Pressed and Normal visuals are reversed?

    22
    • 3

      Vitaly Friedman

      November 10, 2016 3:04 pm

      Ouch! Good point, Ian — we are on it! Contacting the author ;-)

      2
    • 4

      That’s a common criticism (that I happen to share) of Google’s material design buttons. Their argument is that in a digital space, especially on touch screens, the button rises to “meet” your finger at the point where it touches the screen. It’s all part of their perception of how the “z-index” of UI components tells a story.

      3
    • 5

      Hey Ian! Thanks for your question!

      This is a Material Design specifics: in Material Design the button actually raises on click. In the real world we push a button down but in a digital world where our buttons are behind a screen we can’t push the screen in to push the button down, so the button would need to come to us — it’s supposed to signify that when you touch the screen the button is actually connecting with your finger at the screen. That’s why the Material Design button reacts the way it does.

      15
      • 6

        That’s why they call it “pressed”? ;-)
        I think we shouldn’t follow Google here. Unless we are developing for Android of course.

        3
        • 7

          Hey Goran,

          I believe too that Google shouldn’t be the only style to follow when designing for better buttons.

          What’s most important and true is that it really depends on your project, if the buttons you use are in line with the shape and feel of your project, whether it be an app or a website, etc.

          That is, unless you base your styling on Material, then it’s best to use Material like you said with your saying on Android Apps, since you are following what a crazy amount of Android users see daily.

          In fact, there is a recent post about your question by Michael Flarup!

          https://www.smashingmagazine.com/2016/11/what-everyone-should-know-about-the-process-behind-app-design/#visual-design

          The part there about ‘Visual Design’, mentions that Yes it is possible to have a ‘UI Kit with a Twist’. You look at the Paypal app. They make great use of their 50% border-radius rectangle buttons, not something you see everyday in an app. And with this they also have a tonne of blue-to-green Gradients, something refreshing like an ice slush of double flavours, mmm.

          Kind regards,

          Mic

          1
  3. 8

    Jeremy Preston

    November 9, 2016 6:11 pm

    We use buttons all the time in our designs, but I guess we never really think about whether we are using them consistently. Excellent article….thank you.

    3
  4. 9

    A discussion we have here regularly is around focus state. Clients have varying opinions and understanding around button usage and accessibility so it’s something we like to bring up early in the conversation. Often the client isn’t aware of focus states at all until they start analysing their own pages–we don’t typically pay most routine online interactions this sort of attention. It’s not until they’re eyeballing every detail that things like focus states become apparent, and it isn’t unusual for a client to say something like, “I don’t like that border around our button” or, “Why is that link still underlined?”. However, once we explain the importance of accessibility they really appreciate the extra level of care we’re taking to make experiences great for their users.

    3
  5. 10

    As a huge fan of buttons I really enjoyed reading the article. I aggree to most of your points. A good example for buttons in general are the new Google material products. Well implemented and highlighted as they should.

    https://material.google.com/components/buttons.html

    0
  6. 11

    Awesome article, very helpful.

    Totally nitpicky quick suggestion, tho…consider putting a “(pdf download)” suffix next to the MIT touchlab text link. I clicked it thinking I was headed over to a web link and I downloaded a PDF.

    0
  7. 12

    Kind of unnecessary self-advertisement here, don’t you think?

    2
  8. 13

    Please stop taking information from various sources, compiling it into an article and calling it your own.

    0
  9. 14

    Alexander Walther

    November 12, 2016 8:26 pm

    “You should consider the size of button elements, as well as the padding between clickable elements, as padding helps separate the controls and gives your user interface enough breathing space.”

    Which is called “margin”, not “padding” ;) But both help the user.

    4
  10. 15

    How are we all on the argument that OK/SUBMIT/GO/NEXT should always be placed on the right side, with CANCEL/NO/BACK on the left? I think this rule works, but of course it may be entirely cultural based on our reading conventions.

    2
    • 16

      Thanks for your question! I should say that consistency with platform conventions is the most important thing to consider when designing an order for buttons. Applying consistent design that follows user expectations saves people time.

      Just a few examples here:
      1. Apple MacOS Guidelines says that “A button that initiates an action is furthest to the right. The Cancel button is to the left of this button.” So for MacOS users ‘Cancel’ is on the left of ‘OK’ button.
      2. Google Android guideline says “The dismissive action of a dialog is always on the left. Dismissive actions return to the user to the previous state.The affirmative actions are on the right. Affirmative actions continue progress toward the user goal that triggered the dialog.” And this means that for Android, ‘Cancel’ is on the left of the ‘OK’ button.

      0
  11. 17

    Best Essay Help

    November 16, 2016 10:30 am

    I really like your blog write-up which is obviously informative & fantastic…. Keep sharing more… Thanks a lot!!!

    0
  12. 18

    Good read, but there are a couple of instances of the word “padding” when what is actually meant is “margin”. For example, discussing the “padding between buttons” is misleading, because padding is from the inside of an object, not outside. I realize this may come off as nit-picky, but I’m a believer that we should work hard to avoid terminology confusion, because it creates space for ambiguity and undesired results.

    0
  13. 19

    Nice article!

    It’s a shame you don’t go deeper into the different states a button can be in. For example the focus state is also used when ‘tabbing’ your way through a webpage. The focus state suggested by Material design wouldn’t be distinctive enough for that use case.

    Also the disabled state is an interesting one as it’s often confused for a grey button and vice versa. Getting this right can be tricky.

    Then there are toggle-buttons, a set of mutually exclusive buttons where one is marked as active. It’s hard to design these to match the standard button in an interface. Often the non-active buttons have a lower visual weight and the active button has the same colour as a standard button. This means the button that looks like a standard button is the only one that doesn’t do anything.. What are your thoughts on this?

    1

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top