Buttons (UI / UX)

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.

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').
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.
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)