A site I'm working on has summary panels, with an action button to continue or view more details on that item.
I'd like to make the whole panel clickable not only the button. Are there any negatives to this? Which is preferred?
There are no other actions within the panel nor should there be. I imagine having the whole panel as an action cloud lead to miss clicks or fat fingering on mobile.
The circle in this example is an icon, not a secondary action.
Without seeing the larger context of your UI and your use case, the advantage of a larger hit area is that the user 'click' or select the CTA from a larger hit area.
Look into Fitt's law
Fitts’ law states that the amount of time required for a person to move a pointer (e.g., mouse cursor) to a target area is a function of the distance to the target divided by the size of the target. Thus, the longer the distance and the smaller the target’s size, the longer it takes.
By making the whole card clickable (or touchable for mobile), you reduce the time to move the mouse to it, and allow for less dextrous users to be able to properly select it.
Are there any downsides to users accidentally selecting this CTA?
If they are committing to an irreversible action, then you might keep just the button clickable, but you have not implied that the CTA is destructive or irreversible in your question as stated.
From an accessibility point of view I’d make sure that the action button specifically has the click-action attached, since screen-reader users would mostly expect a button / link to be clickable. You can still make the entire card clickable with the mouse, though, for sighted users. But let’s say you just made everything a clickable button - screen-readers would have to read aloud a lot of content for every single button, and you would quickly gain other problems when, say, you want to add tooltips or links to the inside of the card.
