15

I have a section in my website called "Techonology" that is not part of the main content where I put the logos of each technology used in the website (PHP, MySQL, Bootstrap, etc). But I'm searching for a way to point to user that images are links too.

Is there a technique to indicate that an image is a link when this can't be too obvious?

Improve this question
2
  • If the images have titles - you could put the linking onto the titles as well.
    – PhillipW
    Commented Apr 28, 2012 at 19:10
  • The simplest and most common technique is to just make them links. The state change of the mouse is the most telltale sign. You do, of course, depend on user expectations to even try to click images.
    – Taj Moore
    Commented May 1, 2012 at 22:19

5 Answers 5

Reset to default
14

There a few common practices to consider:

  1. Make the image appear button-like by giving it a raised appearance with drop-shadows. This helps imply the button can be depressed.
  2. Alternatively, create the button effect by framing the image in a border (this can be hard to pull off aesthetically)
  3. Ensure the image has a hover state that implies it can be interacted with. Raising it further from the page or applying / colouring the border can work wonders.

What's important, though, is that it's clear when an image is and isn't a link. If users can see no differences between static and interactive elements until they click, you'll engender confusion and frustration - and stop users clicking in future.

Improve this answer
6
  • 1
    I think #3 is really important, showing that something can be interacted with is a great way to encourage users to click.
    – DorkRawk
    Commented Apr 28, 2012 at 19:12
  • 1
    @Jimmy Absolutely agree that there has to be a clear visual difference between an image and a image button.
    – Chris Abrams
    Commented Apr 29, 2012 at 19:19
  • 2
    tablets don't have a hover state ;)
    – Reactgular
    Commented May 2, 2012 at 1:39
  • 1
    +1 @MathewFoscarini Nor do phones. Good point to keep in mind.
    – GotDibbs
    Commented May 2, 2012 at 1:51
  • 1
    I was a hover junky, but with therapy and counseling I've over come my addiction. I think website design is improved when you don't relay on hover states anymore.
    – Reactgular
    Commented May 2, 2012 at 1:59
7

If as in your question you want to have a MySQL link with say the MySQL logo, Stack Overflow does a good job with its log-in screen:

enter image description here

Improve this answer
2

One approach to this problem could be to think what makes any element seem "clickable". Text? Underline/Border ? Hover effects? Colors? Tabs? Raised appearance with shadows? A text that points to it and says 'CLICK!'? Isolation/Spacing?

Here are some ways others do it:

http://v5design.com/

http://erichoffman.me/

Improve this answer
1
2

Depending on the context, I would not worry too much about a visual distinction. As tajmo already mentioned the best indication is the state change of the mouse.

In many user tests I notice how they look for the little hand to appear, and they don't even need to click on the element. Even less technical users differ between clickable and non clickable elements because they subconsciously notice little hand that appears when they hover a link.

Improve this answer
1

For example, links on your site are blue and they became red when hovered. So for showing that images are links too you should give them blue border with few pixels padding. If user will hover that image, he will see hand instead of arrow cursor and border should be changed to red (like in links) to indicate that image is a link too.

Improve this answer

Your Answer

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

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