Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
If the images have titles - you could put the linking onto the titles as well. –  PhillipW Apr 28 '12 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. –  tajmo May 1 '12 at 22:19
add comment

5 Answers 5

up vote 11 down vote accepted

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.

share|improve this answer
1  
I think #3 is really important, showing that something can be interacted with is a great way to encourage users to click. –  DorkRawk Apr 28 '12 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 Apr 29 '12 at 19:19
2  
tablets don't have a hover state ;) –  Mathew Foscarini May 2 '12 at 1:39
1  
+1 @MathewFoscarini Nor do phones. Good point to keep in mind. –  GotDibbs May 2 '12 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. –  Mathew Foscarini May 2 '12 at 1:59
show 1 more comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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/

share|improve this answer
add comment

If as in your question you want to have a MySQL link with say the MySQL logo, you could do worse than what Stack Overflow does with its log-in screen:

enter image description here

share|improve this answer
add comment

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.