Nathan Wailes - Blog - GitHub - LinkedIn - Patreon - Reddit - Stack Overflow - Twitter - YouTube

Buttons (UI / UX)

Owned by Nathan Wailes
Last updated: Oct 31, 2017
7 min read

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

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)

Follow me on Twitter