4

I have a landing page with a grid of projects that the user can click into.
enter image description here

I'm wondering is it best to:

  1. Only make the link/button clickable OR
  2. Make the entire box clickable.

I'm leaning more on option 1 since I feel like it is convenient to have a big hit area. The only downside I can think of is that the whole page become clickable essentially and there's a potential issue for mis-clicking (especially for mobile). I've played with some sites that do this however it doesn't seem to be an issue. Anyone have thoughts, experience or research that says one works better than the other?

Additional info about the page: The grid bleeds fully to the left and right and will have no visual gaps between them. The page will have a hero and filters on top. The image will go from B&W to color when you hover over the box.
This will be responsive, (boxes will resize and eventually stack).

2 Answers 2

4

I would propose a third option.

  1. Make the button and image clickable

It has become a convention that images are clickable on websites and in applications.
My personal experience with this is during my time at a webshop where user research pointed out that almost 70% clicked the image of the product in a list of products in order to navigate to the product page. The rest clicked the title or a link not different from your 'View -->' link.

Blogs also recognize this convention. I tried finding the article I once read this, but I couldn't find it. The author said that when tracking the clicks, visitors often also tried to click the featured image.
Popular blogs like Smashing Magazine and Designmodo also use this pattern. The title and the featured image are clickable and there is also a 'read more' button. This caters to three different user behaviors.

An example more in the line of your case is Pinterest. They have a card layout where the image is clickable. When a description is added, this text is not clickable. Below that is the source which is clickable and takes you to the website the image is pinned from.

So my advice, make the image and the 'view -->' button clickable, but not the text.

1
  • speaking only from personal experience I have real trouble with this as frequently the website responds to a click when I mean to scroll which is exacerbated by single column responsive sites where the image is as wide as the screen - this is possibly due to the fact my phone is not particularly new, so it has some latency on touch, but I'm guessing this might happen to other users, just something to consider during design
    – Toni Leigh
    Mar 16, 2015 at 19:46
0

Your clickable area doesn't have to be bigger than it needs to be to actually click, taking into account the size of fingers and the fact that some people don't have the motor skills with mice and fingers. From this article we see guidelines raging from 28px (Nokia) to 44px (Apple) but the article goes on to quote research here and here that shows the larger the size the quicker and easier to click.

Importantly here you have room in your designs for a decent size button, so use it.

As for your panels, if you make the entire thing clickable you are going to run into problems when it comes to scrolling. If you do this you'll need to be sure that you catch a scroll as a scroll and not a click, probably more problematic than its worth when there's enough room to have an easily clickable button in each panel at any screen size.

I personally think 28px is way too small, I've always gone for 72px in designs wherever possible.

3
  • I find the ios safari browser differentiates pretty well from scrolling vs clicking. indiegogo.com on mobile has cards that are pretty close together and I tend to be able to scroll through without any misclicking. I'm not too sure about other mobile devices though, need to get my hands on an android.
    – skwokz
    Mar 3, 2015 at 23:05
  • its certainly something that can be done, but it might turn out to be more of a headache than it's worth
    – Toni Leigh
    Mar 3, 2015 at 23:07
  • having had a bit more thought about it and observed things with my own phone I've commented on the other answer to elaborate
    – Toni Leigh
    Mar 16, 2015 at 19:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.