8

I'm prototyping a new form, and it's got the 'glass' buttons on it. Several colleagues freaked out and went on rants about glass buttons being the ultimate evil.

Objectively speaking, what's wrong with them?

I like them because they're shiny. But, I am a rational individual (mostly), so I'm open to logical arguments against their use.

...the form is for an intra-company app. Mostly data entry stuff.

Examples of 'glass' buttons.

alt text

4
  • 2
    Um, can you show us a picture of what this "glass button" is? Just so we know what you're talking about?
    – Rahul
    Oct 26, 2010 at 20:07
  • 3
    I think for a lot of folks it falls into the realm of 'chart junk' (decoration for the sake of decoration)
    – DA01
    Oct 28, 2010 at 1:16
  • 3
    If it's for a company, organisation or product of some sorts, I always try to match any custom UI made for them with the company/product branding guidelines - ie coloring and style of buttons as well. Is the logo or any styling elements similar to glass buttons? Then go ahead. If not, then maybe reconsider and try to find something more fitting with the existing image (if there is one). Oct 30, 2010 at 13:54
  • 2
    @DA01: I personally find those types of gel buttons tacky and have been overused, but I don't think there's anything wrong with having design elements that aren't strictly functional. Aesthetics actually play a large role in usability, and you'll find that most popular sites contain design elements that exist purely for aesthetics (even YouTube and Gmail have glossy or 3D buttons that have nothing to do with usability). It's more a matter of keeping them subtle to make sure the entire UI is consistent and cohesive. Gel buttons draw too much attention in most cases. Nov 9, 2010 at 23:54

8 Answers 8

24

The thing that I think your colleagues may have objected to is that glass buttons have been overused the last few years. There is nothing wrong with using them, but I'd recommend against using examples like those you posted because the gradients aren't very subtle and the contrast is poor between the text and the background in the pinkish button. Those particular buttons give the sense of an amateur design. Done right, the glass button should be subtle.

11
  • 2
    I agree, they really have been overused; especially in various hardware/drivers related utilities like, for example, Realtek HD Sound Effect Manager img244.imageshack.us/img244/8080/realtekmanagersc5.jpg. Oct 27, 2010 at 6:27
  • 3
    @Marek: On such occasions I always wonder what's wrong with a normal UI consistent with the rest of the system ...
    – Joey
    Oct 29, 2010 at 1:05
  • @Marek @Joey - I really don't see a problem with that interface. There's nothing wrong with giving your interface a unique look within an environment as disparate as a desktop OS. As long as the interface is easy to understand. Nov 1, 2010 at 15:16
  • 1
    @Charles Boyung The UI should have a unique look when it serves some purpose and therefore it helps users - good example: Winamp 2.x cdn.avinashtech.com/wp-content/uploads/2009/09/winamp-2.JPG (I've stopped using Winamp years ago, so I have no idea how it looks now). Nov 1, 2010 at 18:19
  • @Marek - If that were the only reason to have a unique look, then there would NEVER be unique looking applications, because even Winamp (your example) has absolutely no need to look different than a "standard" windows application. Having a unique look does absolutely nothing to help the users. What do you see about it that "serves some purpose" and "therefore it helps users"? Nov 1, 2010 at 18:38
6

here's an example of a nice glass button (from designlenta.com)

alt text

4
  • aka Apple Mac OSX
    – Kevin Peno
    Oct 28, 2010 at 20:15
  • 6
    And an example of the essence of the problem: I find this particular button quite ugly with the serif font and all.
    – jensgram
    Nov 1, 2010 at 14:58
  • @jensgram - That's not the essence of the problem at all. You are ALWAYS going to find people that don't like DesignElementA or DesignElementB. This has absolutely nothing to do with glass buttons in particular. Nov 1, 2010 at 15:13
  • But notice, as one of the other answers pointed out -- it's a true glass button. It doesn't have it's own color, it's clear (and this does make it much nicer than many of the other buttons displayed). But of course, on a background that's not solid, or maybe even grey, it might not look as nice)
    – cgp
    Nov 8, 2010 at 16:17
4

I'd say, of the top of my head, that the colors are LOUD and IN YOUR FACE. A more subtle coloring (less over-the-frigging-top-saturation) and slighly less super-shiney would probably help your case and win them over to the general idea.

Also, with the increased attention-hogging world we live in, you have to make a conscious choice whether you want to add more "look at me here right now" to the world or provide a calmer experience away from that.

It depends. Some people like to live in rainbow land. Definitely not everyone.

Who are your users?

2
  • 1
    This is the answer to the question "why shouldn't I use ugly buttons", not this question :)
    – Rahul
    Oct 26, 2010 at 20:53
  • 2
    @Rahul: True enough, but the distinction wasn't obvious from the example buttons. ;-P
    – Macke
    Oct 27, 2010 at 14:40
3

I think part of the problem is that "glass buttons" have the potential to look either perfectly fine or really, really ugly. While usability is mostly about effective user interfaces for certain people in certain situations, a lot of users care about aesthetics as well. And "glass buttons", especially the more colorful ones, have a tendency to easily look childish or unprofessional, and they have also been overused. In addition to the aesthetics issue, the particular ones in your example are very loud – as someone else mentioned – which also means that they take attention away from everything around them. The shininess you like definitely enhances this factor. Sure, a button is important to find, but the form is more important than the button when you first open the page – because the form is what you want to fill in, without it the button is useless.

There's nothing particularly wrong with "glass buttons" in theory; they can be done in a good way or in a bad way. But there aren't really any major advantages to using them, especially "loud" ones like in your post, in an intra-company app for data entry.

2

This sounds like an issue with working within the users' expectations. The whole "glass buttons v non-glass buttons" is a moot point. This argument based on aesthetics.

However, the there is usability question regarding the document style: "What's wrong with using a slick, modern style?"

Well, it's all about user expectations. When I look at the glass button, I think Apple because most Mac apps use the standard Mac styling, which includes glass buttons. And, if you are on a Mac, you would expect to see these buttons. However, it would be jarring for a Windows user to see standard Mac styles in his windows environment. Or if on a intra-net, why change the style for just one form? Why make it harder for users to use just your product? Remember, users spend most of their time on other  websites. Don't make them put in more effort for your design.

There is a good reason for congruency. It's an easy and effective way to ensure that your users can recognize elements.

More importantly, it draws attention way from your buttons (or other distracting, "shiny" element) and allows the content (which should be the main focus) to shine through.

A site doesn't have to look pretty to be useful and provide a good experience.

Don't spend time jazzing up boring intranet forms, it won't fool anybody. Just work on making the content and process more-user friendly.

1

Because you should use the standard button for the platform unless you have a very good reason not to. “I like them” and “They’re shiny” are not very good reasons. ^_^

The standard button has many advantages. To list a couple:

Users will recognize and understand them.

There’s actually a lot of subtleties to button behavior. e.g. Triggering on mouse-up rather than mouse-down. Dragging off the button before mouse-up to cancel. The specifics of these depend upon the platform. Depending on the platform and toolkits you are using, it may be a lot of work to get these subtleties correct with a custom button. Get them wrong, and users can be frustrated.

(Of course, if the glass buttons are the standard button for your platform, then there’s nothing wrong with using them in most cases. Indeed, you should.)

2
  • Sorry, but studies have shown that as long as it looks like a button, even if it's not "the standard button for the platform", people understand them just fine. The bigger problem is if you have something that looks like a button that isn't a button. Nov 1, 2010 at 15:11
  • 1
    Can you point me to one of those studies? My experience in user testing is that with some custom buttons, people don’t always recognize them as buttons. Though they’ll figure it out eventually, it makes things more difficult than necessary. (Of course, if the user isn’t experienced with the platform, even platform buttons can have the same issue.) Do those examples pass the test for “looks like a button”? Subjectively, they seem borderline to me. Nov 2, 2010 at 14:04
1

Glass buttons are fine (see OSX) but your examples are just, well, garish, I'm afraid. Tone down the colour and your colleagues probably won't mind as much.

1

Just use the buttons that are part of the platform your designing for - i.e. if it's a web based system, go for HTML buttons. Your users will be used to these depending on browser / platform (as others have mentioned here).

Another point to note is there's much less effort in building the forms in the first place - and if for any reason your pages load slowly (resulting in graphics not loading) or the paths to your graphics get broken, your forms can still be used.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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