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'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?

share|improve this question
    
possible duplicate of Indicate tappable area on mobile –  Vitaly Mijiritsky Sep 22 '12 at 7:53
add comment

5 Answers

up vote 1 down vote accepted

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.

share|improve this answer
    
Seems reasonable, I think I will go with that. –  Naz Sep 23 '12 at 19:46
add comment

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.

share|improve this answer
    
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. –  Mathew Foscarini Sep 21 '12 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. –  Mathew Foscarini Sep 21 '12 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 '12 at 21:05
    
@MathewFoscarini Compare this question and accepted answer: Indicate tappable area on mobile –  Vitaly Mijiritsky Sep 22 '12 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 '12 at 19:45
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
    
+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 '12 at 15:57
add comment

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.

share|improve this answer
    
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 '12 at 19:43
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.