Table of contents
Child pages
Related pages
- ...
- Buttons are often styled to attract attention to themselves; they're visually distinct from much of the rest of the UI. This is done to guide the user to the "main action(s)" of that page / view.
- Stack Overflow uses a bright blue color for their "Ask a Question" button.
- Gmail uses a bright red button for their "Compose email" button.
- 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.
Buttons from top websites
Note that the images should be in this order: button, :hover, :active
- Stack Overflow
- There's no difference between :hover and :active.
- Google
