Mobile UX ? make whole div clickable or not?

Forum Moderators: not2easy

Message Too Old, No Replies

Mobile UX ? make whole div clickable or not?

On a category list page.

ken_b

8:42 pm on Feb 18, 2019 (gmt 0)

I'm wondering if making a whole div clickable is a good idea or not.

These are relatively small divs that contain a thumbnail image and 2 - 3 short lines of descriptive text next to the image.

If not a good idea I'd just make the image and subject title text clickable.

But I like the idea of making the clickable area bigger, mostly for the mobile UX.

I know how to do it, just not sure if it's a good idea.

Looking for your thoughts, ideas, experiences?

Thanks

not2easy

12:02 am on Feb 19, 2019 (gmt 0)

My first concern would be accidentally clicking a link as they swipe down the screen.

ken_b

2:31 pm on Feb 19, 2019 (gmt 0)

Yeah, that could be an issue, especially on smaller screens under 500 pixels wide.

robzilla

5:26 pm on Feb 19, 2019 (gmt 0)

Most people would probably tap on the image or text, but it depends on how you present the div. If it's like a tile or card, one might expect the whole thing to be clickable.

Mobile devices are pretty good at separating clicks and swipes, but it's always good to test that with your layout and code specifically.

tangor

4:33 am on Feb 20, 2019 (gmt 0)

It all depends on your padding ... and fat fingers. :) Test, test, test!

docluv

8:22 pm on Oct 2, 2019 (gmt 0)

I always make the entire row or card clickable.

Remember to make sure the target is large enough to be selected.

Also don't worry about accidentally tapping the link while scrolling. There are built in delays to handle that sort of thing.

I try to wrap the card in an anchor tag and let the browser handle navigation naturally. If you are using the div to trigger an action on the page, like displaying a dialog, then you would want to target.addEventListener("click", func).