Using images for submit buttons

Is it really worth the bandwidth?

[korkus2000]

I have recently found, during a test, that users seemed to prefer regular gray html buttons over images and styled ones. It was only about ten users we tested but it seemed that people took longer to fill out forms with non-standard buttons. Has anyone else seen this or is it just a fluke? It seems it had even more of an impact the longer the form. It seemed to be confusing. They said they where scared that if they pushed the wrong button then all of their work filling out the form would be lost.

I really want to know so I can stop using them if it is stopping people from filling out forms. Anyone have any input on this?

[choster]

The usability gurus will tell you to stick with traditional (i.e. plain) buttons and links because they are familiar to the user. The problem with using images for submit buttons is the same as for using icons-- it's not immediately obvious that the image is in fact a button or link, and because they are different on every site, some users will be apprehensive about cliking on them.

As always, however, your mileage may vary, and much will depend on the type of site, the type of form, and the type of audience. If the forms are being submitted, say, by repeat visitors to a consistently designed message board, images can be appropriate. But if you're designing a support request form for one department of a very large company with many different websites, generic is best.

[martinibuster]

I think it all depends on how "branded" your site is with a particular look or color scheme. If you can get away with it, then definitely lose the gifs.

On the other hand, the standard buttons may look garish within the setting of your design scheme. I downloaded a guestbook program for a client and decided to make gifs for the "Click to sign" and "Home" buttons, so that it would match the rest of the site.

Perhaps it comes down to labeling your buttons in the most explicit manner possible, to idiot proof them.

If you can get away without the gifs, then do it. But I alway seem to end up rolling my own...

[mivox]

I actually made gifs that looked like regular buttons for one site... so I could add a little checkbox image to them. If you can keep a button small, it only needs to be downloaded once no matter how many times is appears on the site, so I don't really think of it as a bandwidth issue. I try to keep graphic buttons at 2K or smaller.

I think for shopping carts, having buttons that are a little more explicit than the norm... like a shopping cart with an arrow pointed into the basket for "Add to Cart", etc., (or at the very least, having buttons say something more explicit than "Submit") can actually help internet novices who may not realize a "Submit" button means both "Put this in my shopping cart" and "Check Out Now," etc.

[bacana]

I would say that depending on the type of form, it's better to keep the Gray (ugly) buttons. I like to use css to decorate my buttons, I found that if I can decorate a button using css, then I will not bother creating it and exporting as gif.

So if the form consist of something important like a e-commerce form, where money and credit card are involved, then use the standard buttons. If it's just a cool subscription to receive e-mail then try to design something simple and nice using gifs, or css.

One thing that I do is to create the button using photoshop or fireworks, and then see if I can do the same thing using css. If it works then css is the key.

[edit_g]

Same here bacana. CSS is the best way to do it. I've found that a little bevel often goes a long way (is that a pun? no...) just to make the button fit in with the rest of your site.

The grey ones are very boring and for some reason I have also found myself strangely repelled by radio buttons lately.

[Filipe]

Consistency is a good reason to use greys. If you plan to use CSS to make something a particular color on your site, make sure to make that global property and not to switch between the two.

Greys will probably always cause the least problems (people will always know to click on those - for the same reason that it's important to always underline your links, and have them a different color from other text - so people know to use them), but having CSS enhanced buttons are always nicer looking, and something I often do myself.

For those of you who are asking "CSS"? What's that? Go here:

[w3schools.com...]

[Hawkgirl]

I guess I'm on the other side of the argument: I prefer using graphics for buttons. But I make sure that my graphic buttons all look like buttons; that is, they're 3-D looking and entice people to click on them.

I also make sure that the buttons are consistent from page to page, not only in look & size but in placement on the page, as well.

I've never experienced problems and it hasn't come up as an issue in any of my usability tests. The things that do come up as usability issues boggle the mind, but that's another discussion entirely!

[Harley_m]

I agree with Hawkgirl...but then shes not really going against what youve said. i dont think things that dont look like buttons should be used as buttons. it would be like having a keyboard with a totally flat smooth surface with all the letters written on it and touch sensitive invisble buttons...its not totally obvious, even to someone who has used a keyboard before, that pressing the word submit on an image will be a button.

I have no problems with the usabilty of buttons as long as they stand out loud and clear as buttons, are consistant throughout the site, and are clearly marked...