Should I style my buttons?

Question

Are there any major advantages / disadvantages in styling ones buttons like Facebook, Twitter and StackExchange - vs. not styling them like Craigslist and 4chan?

Answer 1

Stylize buttons

Advantages:

• Buttons are more consistant with other parts of your design (provided your ui has style)
• The overall look and feel is improved (provided your buttons don't look stupid)
• Buttons can have more meaning (express different contexts)
• Users are very accustomed to styled buttons, as most of the major websites use them : google, facebook ect. So its not a jaring experience
• Brand consistency and awareness
• You look like a pro.

Disadvantages:

• More effort on your part to have a full button ui, where the unstyled version is complete out of the box. (Mobile compatibility ect.)
• If you are a bad designer, you buttons may not be as recognizable as hoped.
• Styled buttons have an overhead in code and graphics.
• Your styled buttons don't match that user's OS, which may be jaring for cavemen.

Beyond the labor, design perception and professionally concerns the real UX motive to styling you buttons should be MEANING.

Unstyled buttons all look alike. By styling your buttons you can provide the user with more information about that button, and what it does.

Consider for example the buttons that come as a part of twitter bootstrap: http://twitter.github.com/bootstrap/base-css.html#buttons

They suggest using button color to indicate things like:

• Grey : Standard action
• Blue : Action with weight or importance
• Green : Success or positive action
• Yellow : An action to be taken with caution
• Red : A dangerous or potentially negative action

Things to consider it styling your buttons:

• Color
• Size
• Shape
• Icon or Text or Both?
• One line of text or Two? Different size lines of text?

Every aspect should be deliberate and provide value to the user.

Answer 2

It depends on the skill and imagination of the designer. A well-designed button with look and feel distinctive to the rest of the page would be easier to locate once your form is filled, for example have a look at Google's Sign-In button on its login page, while a bad designed button would get mixed up for example see this site's 'Post Your Answer' button at the bottom of this page. Try having only one theme for them and if there is a need for different styles of buttons on the same page, a bit of re-design is in order (again have a look at this page only 'Post Your Answer' at bottom and 'Ask a question' at top).

Answer 3

I'm assuming when you say unstyled, you mean the default buttons your browser uses.

Unstyled buttons are generally easy to recognize due to their familiarity to most users. However, it appears very unprofessional and leaves your site looking unfinished.

Styled buttons on the other hand would most likely follow the branding of where it is used. As a result, this can be done poorly or with great success depending on the circumstances.

I'm personally a fan of Google's button UI. I find it very clean with the matte colors, but has a slight gradient hover state. It follows their brand perfectly but still maintains their recognition as buttons.

Answer 4

A button should look like a button, but beyond that the important thing is that the style the buttons (and all the elements really) fit in with the style of the page/site as a whole. This is the area of visual design or graphic design and involves color theory, typography, principles of contrast, repetition, etc.

Craigslist.org is very utilitarian and unadorned. Someone or a group of people decided that was an appropriate design style for the site, that a more elaborate, colorful, whimsical or stylized design wouldn't fit the site, or possibly that the resources needed for that kind of visual elaboration were better spent elsewhere.

Contrast this with Apple.com, where it's very important to provide a modern, minimal, highly polished, stylistic yet friendly and usable experience.

These visual languages are in some ways just as important as the content of a site because it hits one immediately before any of the textual content is consumed.

So the style of the buttons is determined by the style of the page/site, which should be cohesive, well thought out and aligned with the purpose of the site.

Answer 5

There's no such thing as an unstyled button. You can go with the default browser button style, but your users will spend most of their time on other (read: competitor) sites, and the styling you use is a key element in attracting and keeping users. There are a LOT of good examples out there.

Answer 6

The problem with customized buttons is that they risk not being recognized if they break key styles and metaphors. In particular, buttons that are not rectangular and do not provide hover states could be perceived as non-interactive.

Otherwise, custom buttons are a good way to give an interface strong branding and a sense of polish. Unstyled (or rather, OS-styled) buttons that don't reconcile with their surroundings can make a UI seem unfinished or sloppy, which is a bad impression to give if you're asking people to buy a product or give you money somehow.