Best pattern for an image link on a card

Question

I am using cards with images in a project. Ideally, I would like to have the images to be clickable and link to additional information on the topic presented on the card. On desktop, this works wonderfully. On mobile, this is an issue since users end up activating the link when trying to scroll. I have currently deactivated the image link and introduced "More Info" button. Feels link a sub-optimal solution though. Any graceful patterns out there?

Answer 1

I have two possible solutions I can think of in this case.

1) This is also not quite the most optimal, and would require some testing to see if users quickly can figure out what to do. On mobile, perhaps require users to 'double tap' instead of tapping once to prevent them from accidentally accessing content they don't want.

A way you could possibly do this so the users can naturally figure out what to do is once they click, either the card will create a drop shadow or the text in the image will underline to indicate a link. Do something in some way to indicate that if you click again it will take you to the content. So click once -> indicates somehow to click again -> user is taken to content they want. This should hypothetically stop the issue of accidentally link clicking. But again, user testing should be done on this feature foresure because you don't want your users to wonder how to access content.

2) Another solution might be only allowing the text to be a link, and as such underline the text or in some way indicating that the text is a link. This way the content is still clickable but should make it harder to accidentally access content. (I don't know how your cards are designed so this may not be true) And because the users may want to click the image, perhaps allow the image to be a link if the users holds it down or double tap.

Either way, it's hard to know what to do without any visualization and there is of course 100 ways to approach this problem. I hope these help a little!

Answer 2

There is a function that disables clicks when scrolling. With javascript the developer can write a code somewhere along the lines of : If scrolling stopped enable buttons and when scrolling disable buttons.

Edit: By buttons I was reffering to any type of links.