Would you consider this a button? [closed]

Question

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?

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:

Which one would you pick?

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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