Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

An example of the buttons in question

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?

share|improve this question
2  
Please post link to the image (at imgur or elsewhere). Noone is going to visit links posted by a total stranger. What's more, your question is too broad and asks for personal opinions instead of answers. –  Deer Hunter May 24 '13 at 4:45
1  
@DeerHunter So sorry! I couldn't post images yet as I didn't have enough rep. It looks like JohnGB edited it. Also, I wasn't sure how to phrase the question but it looks like three people did find good answers to write. –  Owen Versteeg May 24 '13 at 11:13
1  
Owen Versteeg, to tell you the truth, I don't like the colors of the buttons (maybe the blue one doesn't jar the eye, but the two others are a bit disappointing). –  Deer Hunter May 24 '13 at 11:48

5 Answers 5

up vote 12 down vote accepted

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.
enter image description here

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.

share|improve this answer
    
Awesome, thanks! I've followed what you said and I'm wondering how you think i.imgur.com/X6FSASV.png looks (no bevel and 3px shadow.) Or do you prefer i.imgur.com/cn6ZXvv.png (3px shadow and smoothing)? –  Owen Versteeg May 24 '13 at 11:36
    
@OwenVersteeg The first one doesn't look like a shadow as shadows are soft. The second one has better affordance, although the choice of 3px is a design one, not a UX one, so whatever you like design wise for that. I would still suggest a small bevel though to improve affordance. –  JohnGB May 24 '13 at 12:06
    
You could also steal the "3d" buttons from css-tricks.com. It's still flat-design-ish, but they're raised and buttony. –  Koen Lageveen May 24 '13 at 19:53
    
    
Hmm, i.imgur.com/ZPPxWYO.png also looks OK –  Owen Versteeg May 24 '13 at 20:50

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."

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer
    
Thanks! I'll try to find a site popular enough that would like to use Min. I agree that user feedback is really important. –  Owen Versteeg May 24 '13 at 11:41

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.

share|improve this answer
    
I agree, I think flat buttons can sometimes lack affordance. Thanks for your feedback! One thought I had was that button-change-on-hover doesn't work on mobile; I've implemented the hover state for devices that support it. Thanks! –  Owen Versteeg May 24 '13 at 11:40

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.