Hit area for items in a grid-page.

Question

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

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

Answer 1

I would propose a third option.

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

Answer 2

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.