Welcome to WebmasterWorld Guest from 18.207.132.114

Forum Moderators: not2easy

Mobile UX ? make whole div clickable or not?

On a category list page.

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

Senior Member from US 

WebmasterWorld Senior Member ken_b is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 5, 2001
posts:5896
votes: 120


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
12:02 am on Feb 19, 2019 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4569
votes: 367


My first concern would be accidentally clicking a link as they swipe down the screen.
2:31 pm on Feb 19, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member ken_b is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 5, 2001
posts:5896
votes: 120


Yeah, that could be an issue, especially on smaller screens under 500 pixels wide.
5:26 pm on Feb 19, 2019 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 25, 2005
posts:2091
votes: 370


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.
4:33 am on Feb 20, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10606
votes: 1128


It all depends on your padding ... and fat fingers. :) Test, test, test!
8:22 pm on Oct 2, 2019 (gmt 0)

New User from US 

10+ Year Member

joined:May 31, 2004
posts:31
votes: 3


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).