I am working on a web interface and I want to emphasize a portion of it and make it attractive for people to click on it, which will show additional content (with a 3d css flip animation).

The first version we had is a simple link text with an icon (not too attractive and maybe too general).

The second version is emphasizing the content (it will be a thermometer-shaped level indicator), but I'm not sure yet if the users will click on it. Before doing actual testing I thought about asking it here, so I can tweak it a bit if needed.

Would you click on the new icon?

Is there something I could do in order to improve the clicking ratio of the icon?

Image here: [Button and link - different versions][1]

Edit: I've redone the button so it's either with the link and shown as a simple icon, or as a more emphasized button. New screenshot: enter image description here

Which one would you pick?

  • It has more of a feel of an app icon or dashboard indicator. It could work really well as a button in a different context, but here it feels 'built in' to the overall screen. Also, given the size of your mock-up, I assume it might be mobile-centric? If so, note that touch devices don't have a hover state.
    – DA01
    Commented Oct 26, 2011 at 13:20
  • This is not for mobile, the screenshot is small because it's a small portion of the interface.
    – Cristian
    Commented Oct 26, 2011 at 13:40

4 Answers 4


To me, it does not look like a button. It looks like an image. In a web context, an image is a just graphical element, not a UI element.

In my opinion, there are 2 ways to go here. First solution is that you use a button. In that case you must first design a button that goes along with the rest of the UI design, then put the icon inside that button.

The other solution would be to use a link, in that case you come very close to your original solution, which I think is certainly not bad.

I would not go for a solution where you show a link during hovering.


Users tend to familiarize with interface on a basic level and they immediately start expecting some behaviors. Apple logo in the top left corner on mac OS doesn't look clickable, but since i know the whole menubar is clickable thats enough for me to know that its clickable. So it depends on the rest of the interface you designed.

If it holds an important action, than it should be somehow implied that its clickable. If its not a crucial, but cool for people that find out about it (something like shaking your iPhone when typing to undo) than you can leave it as is with some hover. In my opinion, not only hover element on top of it is enough, but whole element should somehow react to your mouse hover. Try searching for the tread on UX here about "if button should lighten or darken on hover" there were a lot of smart responses there in general.

edit - i just realised that i posted at the same time as Sheff a very similar answer


I think you're asking the wrong question: I still dont know what the button/link is for and I think that's the problem: Don't hide important information behind a icon that nobody understands or a generic text link like "more info".

You can either integrate the information directly on the page (if it's important enough) or make a link with better text (e.g. "Find out more about XYZ"). Oh and don't worry about the icon: Icons usually don't enhance the usability (see uxmyths.com article).

  • Yes I agree. It's probably an important feature, but not totally indispensable, because we have a lot of other more important features that should be accessible from the start. I figured I need a different approach than the existent, but the space is limited, so full text won't help the clutter, on the contrary, I think it will make the interface more hard to use and overview.
    – Cristian
    Commented Oct 26, 2011 at 17:56

I don't think I would click on the thermometer.

How important to the screen is the information within the link? How often will the action be used? Dependent upon it's importance I would consider either a standard text link or a button. If going for a standard text link you could give it further emphasis by adding an icon (similar to how you did in the first sshot)

Obviously there are more factors to consider (consistency/design guides etc) but I find that is a good starting point.

  • The linked content is very important for the company (as it's showing details about our price evaluation system), and quite important for the user (although it's hard to make assumptions; it shows how the score would be distributed if the price is different. See it live here: autouncle.com )
    – Cristian
    Commented Oct 26, 2011 at 13:48

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