Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I had to make a page with a couple links on it, so I thought I would try to make the links big and decorative:

My button

But I ran into the problem that people didn't realize it was a button, so they didn't know what to click on. It's obvious that something like this is a button:

Obviously a button

My question is: How can I design my buttons to be obviously click-able?

share|improve this question

6 Answers 6

up vote 12 down vote accepted

This isn't really a "graphic design" answer, but you may also want to see if you can change the text. In your examples, I don't think the art of the "install" button is particularly more button-like than your Outlook button. However, the text on it is a well-known verb so it is associated with performing an action. In the same vein, "Launch Outlook" may attract more clicks than simply "Outlook".

From a graphics standpoint, (and further to jhocking & luckycypher's comments), some other things you could try:

  • Make the edges glow on hover
  • change background/border color schemes on hover
  • add a subtle shadow (with or without beveling the surface) so the button appears raised from the page
  • add a small icon next to the text to indicate what action is to be performed (if I 'Outlook', what am I doing?)
  • place your button in a location where other buttons are typically placed on your site
  • make the button theme match other navigation links/buttons on the site.

You could also try asking over on UX for other UI-centric thoughts.

share|improve this answer
4  
Spot on. Ask yourself: what is the call to action of this button? Buttons usually do something and having some action on them makes the user identify it as a clickable one. See e.g. buttons/links on this page: edit, close, flag, add comment, post your answer (intentionally skipped link as it may be confusing at times) — all clearly have some action to run. –  koiyu Jun 19 '11 at 9:44
1  
To add: even might–be–confusing link is clearly seen as a button since it looks the same as the obvious buttons next to it. Users usually seek for patterns. For example, if you had an install button and an outlook button and style both the same way, users probably interpret them both as buttons. (OK, a lot of repetition to your answer, but it does just prove you're on the right tracks :-D) –  koiyu Jun 19 '11 at 9:48

Bevel the graphic so it looks 3 dimensional.

share|improve this answer
3  
Also have add a hover state, either with css or javascript. –  luclabs Jun 17 '11 at 20:47
    
CSS would be preferable in this case. –  Kramp Jun 18 '11 at 10:48

you should use two kind of image one is on active and one is normal state normal state will look bit embossed

attaching a SS and see how they clarifying different stats of a button,

example image for showing buttons

and whenever user get on your button change cursor to hand it will feel like link,if possible you can write in small click here to instal..or you can point this button with the help of any arrow or something like that...

see how others showing there download/install buttons.

Latest trend on buttons


Follow these tutorial to create such nice looking buttons

share|improve this answer

The key here is affordance - visual clues for the user to be able to determine the behaviour and intended use of something from a distance - before interacting with it - like a flat plate on a door says push and a handle says pull.

See http://bit.ly/irzAfP for my own examples of affordance.

The main cues are beveled edges and gradient fills for a 3D feel and if appropriate with distinct drop-shadowed edges indicating a real raised and rounded button that makes you just feel you want to push it, combined with a clear call to action such as an appropriate label and/or well chosen icon. Note that rounded corners are more friendly and square corners seem harsh to the eye.

See also my tutorial on creating simple metal and glossy/glass effect buttons using Inkscape: http://bit.ly/iV6hHD

share|improve this answer

Why don't you underline the text on the button (or make it blue even) - this way it will be perceived as a link and users will know clicking it would get them somewhere.

share|improve this answer

I think the color and border style of your button is not the main issue of your button. It might be that it is too big! It looks more like a word/title in a frame than a button. Try to just make it a bit smaller so the text inside it fills out (at least for the height).

As others have said, it will also help to have it pop out somehow on mouseover.

share|improve this answer

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.