2

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?

1
  • 1
    On mobile a touch is either a tap or something else like a swipe or drag. Mobile users can touch, hold, move, and swipe linked areas. The whole card should be a link unless you have more than one link on the card. Mobile users can swipe on that card.
    – moot
    Mar 15, 2018 at 18:46

2 Answers 2

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!

1
  • 1
    I don't think double-tapping is a common convention on mobile. Mar 15, 2018 at 17:25
1

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.

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.