4

I've created a mobile site with a portfolio page. On the desktop version, hovering the mouse over the images changes the mouse pointer to a finger indicating the image is hyperlinked.

To try to get the same effect on mobile I have placed a "small pulsating finger pointer" over every hyper-linked image but after a while it feels annoying.

Is there a better way?

Improve this question
1

5 Answers 5

Reset to default
2

I used a faded "finger pointer" icon in the corner of images, and it doesn't appear too annoying with correct amount of fading. Also tried a "pulsating one", and that brought up annoyance. Haven't heard bad feedback of the faded one, so it has atleast passed testing with my audience. So if it's not obvious to everyone that some images are clickable on touch screen, there's a faded tip available.

Improve this answer
2
  • Seems reasonable, I think I will go with that.
    – Naz
    Sep 23, 2012 at 19:46
  • It seems like UX problems are timeless. It's 2021 and I found this answer useful. However, I consider using link icon instead.
    – Filip Witkowski
    Apr 28, 2021 at 6:50
4

Users of mobile devices with touchscreens tend to think all objects of reasonable size can be clicked. Look at any mobile app and you'll find that most images are clickable, yet usually there's no indication of that.

Improve this answer
5
  • 1
    This isn't an answer. It's more of a statement about what is popular, but that doesn't make it correct. No indication of something doesn't translate into the user knowing that it's clickable. There is a reason why images in a hyperlink are suppose to have a border. The person asking the question has modified the CSS to hide that boarder, and then use a hover state which doesn't exist on mobile devices. Now he's confused why it's not clear that it's clickable. That's not a problem with mobile, it's a problem with his CSS. He has disable a method that already existed by default.
    – Reactgular
    Sep 21, 2012 at 20:04
  • I'm not saying that the above answer is bad advise. It is true, that most mobile Html is rendered this way. If the clickable state of the image is clear in the layout and design, then it works, but what I'm saying is that it seems Html designers have forgotten some of the very basic features of Html/CSS that have always been there since the first version.
    – Reactgular
    Sep 21, 2012 at 20:09
  • It doesn't have anything to do with HTML or CSS. He's asking about a way to indicate that an image is clickable, on mobile, to parallel the hover state he has on desktop. I'm saying that he doesn't need that, and there is no way to parallel a hover state on mobile. The HTML conventions have been developed for regular web, not mobile. Take the same advice I gave him and look at any decent leading mobile app and see if they use an indication that an image is clickable.
    – Vitaly Mijiritsky
    Sep 21, 2012 at 21:05
  • @MathewFoscarini Compare this question and accepted answer: Indicate tappable area on mobile
    – Vitaly Mijiritsky
    Sep 22, 2012 at 7:53
  • I know what you mean, if something looks interesting people tap it even if there is no link behind it. But I would like to have something for the long run a standard of my own, if you will, that easily differentiates clickable and non clickable images.
    – Naz
    Sep 23, 2012 at 19:45
2

I agree that most touch users will see most images on a page as linkable, but a shadow behind the image and a thin white border around the image creates a visible separation from the page.

A blinking finger would bug me.

Improve this answer
0

The images need to be given Affordance. There are many articles on the Web, here's the top one from a Google search for "ui design affordance."

http://www.joelonsoftware.com/uibook/chapters/fog0000000060.html

There are a variety of ways to give affordance to visual objects without a "pulsating finger" (geez that sounds funny). The most common way to provide affordance is to create contrast between the object needing affordance and its surrounding context.

Improve this answer
1
  • +1 for a good article (from the SE CEO's blog, no less ;) That aside, I think the OP's question betrays an intuitive (if not explicit) understanding of an affordance, but it's really about how to design that affordance.
    – msanford
    Sep 21, 2012 at 15:57
0

The internet standard is to surround the image with a border that is the same color as hypertext links.

<a href=""><img src="something.png></a>

That HTML without modifying the CSS will produce an image with a border indicating that the image can be clicked.

Improve this answer
1
  • I understand what you are saying that it is a standard but looking across the internet landscape as it stands today nobody is using this, thus users would not be aware of the convention as they are of say for example underlined text meaning a hyperlink. So the difference bewtween a bordered image an non-bordered image would be lost. So I don't think it will be a viable option for me.
    – Naz
    Sep 23, 2012 at 19:43

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.