Table of contents

Child pages

Related pages

...

Advice / Learnings

Buttons are often styled to attract attention to themselves; they're visually distinct from much of the rest of the UI. This seems to be done to guide the user to the most-likely action of that page / view that isn't otherwise easily spotted.
- Stack Overflow uses a bright blue color for their "Ask a Question" button.
- Gmail uses a bright red button for their "Compose email" button.
  - Their two main actions are 1) viewing emails and 2) sending an email. The search-bar is in its typical position at the top, so it doesn't need attention brought to it. The emails take up a lot of space on the screen, so they also don't need attention brought to them. But the 'Compose' button is both relatively small (compared to the section of the screen taken up by emails) and also doesn't have any kind of established location that it can assume the user will look for it in, so it benefits from being a bright color.
The extent to which a button is styled to attract attention to itself seems to depend on the extent to which the button is in a conventional location.
- "Save" buttons are often grey and located at the bottom of a list of options, which is where most users will expect to find such a button (either there or at the top). So they don't need to be a bright color.
- Stack Overflow's "Ask a Question" button and Gmail's "Compose" buttons are placed somewhat arbitrarily, and so they are bright colors to guide the user more-quickly to them.
Avoid using regular buttons to handle options that could instead be represented with checkboxes or radio buttons.
- Major websites (Stack Overflow, Gmail, Facebook) seem to try to limit pages to have only one or two buttons, to be used for major actions that can be taken on that page.
- Having lots of "regular" buttons, where a lot of them are used for "options", can make the user feel confused.
- One thing PyCharm does is to have its "Reset" button styled as a link and up in a corner, and pop up only when it's relevant to be used.
- On Rhymecraft I had a "Toggle fullscreen" button that should've been a checkbox instead.
It may be a good idea to have buttons show up or become prominent when they are relevant and fade or disappear altogether when they aren't relevant.

Articles / Videos

Undated - UserSnap - The evolution of buttons in web design
Undated - Vizlly - Where to Position Your Book Now Button to Boost Clicks
2011.07.07 - UX Movement - Visual Weight of Primary and Secondary Action Buttons
2012.05.07 - UX Matters - 7 Basic Best Practices for Buttons
2012.06.12 - CSS Tricks - Crafting Minimal Circular 3D Buttons with CSS
2013.02.13 - TutsPlus - Principles for Successful Button Design
2014.01.07 - CSS Tricks - When To Use The Button Element
2014.11.10 - WebDesign.org - Ghost Buttons - The Most Anticipated Web Design Trend for 2015
2015.03.08 - Nielsen Norman Group - Beyond Blue Links: Making Clickable Elements Recognizable
2015.07.09 - UX Movement - How Button Placement Conventions Reinforce User Habits
2015.07.17 - DesignModo - The Ultimate UX Design of the Perfect CTA Button
2015.09.29 - UserTesting - 11 Characteristics of Persuasive Call-to-Action Buttons
2015.10.19 - Adobe - The Evolution of Buttons in UX Design
2016.11.02 - Smashing Magazine - The Golden Rules Of Bottom Navigation Design
2016.11.09 - Smashing Magazine - How To Design Better Buttons
- Summary
  - Make buttons look like buttons.
    - Shape
      - The safest shape is square or square with rounded corners.
      - Maintain consistency of shape throughout your interface controls.
    - Shadows and highlights
      - A subtle shadow serves as a clue to the user that the element is interactive.
  - Clearly label buttons.
    - Each button in your UI should have a label or icon.
    - Make sure the user will understand from the label what the button does.
      - Prefer context-specific labels like "Create Account" over context-agnostic labels like "Submit".
      - Use action verbs (e.g. "Create").
      - The label should state what the outcome will be after pressing the button.
  - Put buttons where users can find them.
    - Applying consistent design that follows user expectations saves people time.
    - If you’re designing a native app, you should follow platform GUI guidelines when choosing a proper location and order for buttons.
    - Within the boundaries of best-practice guidelines, use testing to determine the best locations for buttons.
  - Make it easy for users to interact with buttons.
    - Ensure the buttons are large enough for people to interact with.
    - Touch: 10mm x 10mm is a good minimum size. (Source: MIT Touch Lab)
    - Mouse: button measurements can be slightly reduced (from 10mmx10mm). (Source: MIT Touch Lab)
    - Ensure you have enough padding between clickable elements to avoid mis-clicks.
    - Provide visual indications of the button's different states (disabled, normal, focused, pressed)
  - Visually highlight the most important buttons.
    - Ensure the design puts emphasis on the primary or most prominent action.
      - Use color and contrast to keep user focus on the action.
      - Place the button in prominent locations where users are most likely to notice it.
    - Secondary actions should have weaker visual weight.
      - Explanation: Reducing the visual prominence of secondary actions minimizes the risk for potential errors, and further directs people toward a successful outcome.
      - Examples: options like ‘Cancel’ or ‘Go Back’.
2016.12.03 - 1st Web Designer - How to Use Ghost Buttons Effectively
2017.05.29 - ElegantThemes - Button Design Guide: How to Design Buttons that Convert

Button generators

Buttons from top websites

Note that the images should be in this order: button, :hover, :active

General observations
- They use a 3-D effect (a bevel, emboss, or shadow), but it's very minimal, just a pixel or two.
Stack Overflow
- - There's no difference between :hover and :active.
  - I could be wrong, but they may have just based its styling and positioning on the Gmail 'Compose' button, because it is styled and positioned very similarly, except on the opposite side of the page, and it's blue instead of red.
  - It's also not all caps, whereas the 'Compose' button is in all-caps ('COMPOSE').
  - The text is not bold, whereas a lot of button text seems to be in bold (see Google / Facebook below).
    - This may be because the text is longer than most buttons, and having it in bold might make it harder to read or too prominent. Or it might be an oversight, or just a stylistic difference of opinion. I tried switching the font-weight to bold and it felt like more like "Hey look at me, this is what you should do next" than "this is an important button to be aware of" (which is how I feel the current button comes across).
  - The cursor changing on click seems like a bug to me. I can't think of any reason to do that beyond indicating to the user that they have done something, and I think the color-change already does that much more effectively.
Google Search
- - With the transition to the :hover state I get the vibe of an assistant standing along the wall who steps forward when you motion for him. The idea is to get out of the way and avoid distracting the user if their attention is focused elsewhere, but to "step forward" and make it clear to the user that it is a button if that is where there attention is.
  - It doesn't change the tool-tip. My guess is that the button's styling already makes it absolutely clear that it is a button, so a change of tool-tip would just be more noise. Maybe a custom tool-tip is more useful when something acts like a button but doesn't look like a button, just to make it clear to the user.
  - Bold text.
  - It's not a bright color (blue, red). It seems likely that this is because it is in an obvious location, and so it doesn't need the bright color to draw attention to itself.
- - Bold text
  - Bright color (because the button is in a corner and needs to draw attention to itself).
  - It has a very thin light blue border, and when you click it seems to add to the effect of the center of the button being pressed down.
Facebook
- Facebook seems to be using an even-flatter design than Google (i.e. no or extremely-subtle shadow effects).
- - It uses the short "Friends" to make it easier to scan, but uses the more-explicit "Your friends" in the pop-up to remove any ambiguity for new users.
  - The pop-up is still present in the :click state but I didn't bother showing it.
  - I also didn't bother showing the drop-down for the last image, since it doesn't seem directly relevant to the button.
- (No change for :active)
- (No change for :active)

Browser not supported