Will removing the border & bevel on these buttons make them look un-buttonlike?

Question

First: I'm not a designer by trade, but I do occasionally do design some things.

A week ago I began writing an open-source, extremely small (960 bytes gzipped/minified!) CSS framework. Since then it's matured somewhat into a stable and usable product. I've been showing it off and am quite proud of it.

One (non-design-minded) person I showed it to thought the buttons were ugly. Personally, I like their simple style and I think they look fine. However, he thought that the border+bevel on the button made them look like they were from Windows 95.

Here are the buttons - from minfwk.com:

If I remove the border & bevel I think they look less like buttons, but he says that they look better.

(This is interesting as I'm usually the proponent of flat design and he argues the reverse)

What's your view on the buttons? Are they buttonlike enough without the border and bevel? Are they "too old-fashioned" with the border/bevel? Are there other issues with them?

Answer 1

The bevel gives the button some affordance and lets people know that they can interact with the object. If you have a completely flat design, you run into the problem of people not being able to tell the difference between a button and a block outside of contextual clues.

This has proven to be a justified concern with Windows Metro having this exact issue.

Even Android, which follows a flat design philosophy, has a bevel and shadow on their buttons to deal with affordance.

So, I would strongly advise that you don't drop all affordance indication from the buttons. That doesn't mean that it has to be a bevel and a shadow, but in my opinion, they are the most subtle options that still show affordance.

---

However, the border on the button does little to show affordance, and I would drop it in favour of a small shadow.

Answer 2

Conventions play important role for users to understand quickly what the UI element is, and what to do with it. This means button should look like a button and user should understand, act upon it. There are lot of styles for buttons which understands affordance.

Buttons serve purpose of showing what to act upon. Example, if you have a form to be filled and then you place buttons, it certainly conveys that the form will be submitted / Cleared depending on action with buttons.

Few can definitely argue that without border and bevel (or additional visual cue) these rectangular shaped hot spots might not look like button. But I think it depends on overall treatment of the button with respect to other page elements. Windows8 is very popular example these days. They have removed all the visual cues except plane color patch for their buttons. But certainly they have maintained it with other UI elements' styles and overall look and feel of the os.

In my opinion, the button style you have shared surely look like buttons. The border is thin and bevel is minimal. Bevel is not so 'IN' these days. If you increase it, it will look like old style buttons. But what you have shared is also fine. And if you remove it still you should be able to maintain it like buttons (additional cue can be hover).

However thin border should not be removed in that case.

Answer 3

Those who are concerned with usability are going to be "battling" (in a sense) the proponents of "flat" design, which seems to be a very popular trend right now. Many designers don't realize the decreased usability of overly flat designs, some are even making the case that it somehow increases clarity.

These people are wrong. The removal of visual cues (e.g. bevel on a button) makes a UI more difficult to understand. If everything is a flat, colored rectangle, it's not obvious which are controls and which are inert labels. Experimentation and thinking are needed to discover how it works.

Keep the visual cues (bevels and shadows and such) as subtle hints on the functionality of the UI.

Answer 4

Personally, I don't think your bevel is enough to make much difference at a glance. If you increased the bottom or top bevel (or both) you might have more to lose.

Even when designing in a flat motif, I like to imply some visually notable dimension on buttons. It doesn't have to come in the form of a bevel, though. A border, shadow, extrude, or even a slight gradient/highlight can work.

In the end, context is everything. The only real answer is to test it. Find a site with enough traffic to test your framework on. There's nothing like numbers to confirm your suspicions.

Answer 5

I'm afraid I disagree. I didn't have an opinion about flat design vs. not-flat, old-style design, until I realized that these days I'm far more drawn to the very minimalistic simplicity and clarity of designs which utilize this flatness. And embarrassingly enough, I'm an artist and designer. I have never had a problem knowing that a button is a button, even when the page is flat as a pancake. It's all about how you implement this flatness, not whether to. I like all your solutions, Owen. Go with your instinct. Don't add any "real" bevels - these days, they'll be more off-putting than "affording."