TransWikia.com

How to indicate that an image is a link too?

User Experience Asked by Renato Dinhani on November 9, 2021

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?

5 Answers

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.

Answered by webvitaly on November 9, 2021

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.

Answered by tripelle on November 9, 2021

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/

Answered by Gbert90 on November 9, 2021

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

Answered by icc97 on November 9, 2021

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.

Answered by Jimmy Breck-McKye on November 9, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP