Is a dummy button an appropriate way to show that a box is clickable?

Question

As you can see in the picture, I have some clickable boxes with products that the user can click to add to a cart. The button at the top right corner of the box is a dummy. Actually the whole box is clickable, not just that little button. Is this an appropriate way to show that the box is clickable, or would a dummy button just add more confusion?

Answer 1

Remove the drop-shadow, and make the button an icon instead. This flattening basically renders the whole tile as a single seamless unit, and users would quickly discover that touching the icon has the same effect as touching anywhere else on the item box.

Also, if your target device is non-touch, you could highlight the entire box on hover rather than just the '+', to make it clear where the click-zone is.

In fact, you could indicate the item 'added' status using a checkmark.

(Apologies for the use of black bold icons; they're for representation only. I couldn't find matching green icons.)

Additional Note:
It is interesting to note that this situation is analogous to how users often expect to click on the description next to a checkbox to check/uncheck it (and knowing this, developers make checkbox descriptions clickable; checkbox demo here, and a similar radio button demo here). This goes to show that users will invariably click inside the item box (most likely on the description) to 'add' the item, and not necessarily on the '+'.

Answer 2

Disclaimer: I am not a UX expert

Cursors, Et. Al.

My thesis is that you should indicate a clickable area in other ways -- don't use dummy buttons.

My approach is to change the cursor to indicate something clickable. That, obviously, doesn't work for touch-based devices. Other answers here have provided some excellent ideas for visual design-based approaches that are more appropriate if you service touch-based environments.

Certainly cursor change can only help improve things, so I would definitely use it (in addition to other visual design cues).

Our Experience

We've actually tested a similar concept on our site and what we found was that when we put a dummy button, new users would only click in the dummy target area and old users would complain that the new button was "too small" indicating that they were discarding their prior knowledge about the entire clickable area.

My conclusion is that if you put a dummy button, it will largely defeat the purpose of having the entire box clickable.

Perhaps some greater UX contributors will provide more alternatives, but I think you should reconsider a dummy-based approach.

Cheers.

Answer 3

I actually think your current design actually works pretty well: the green + sign indicates that there's something interactive there (and the general nature of the action), and while it also does mark the sign itself as the key interactive element, one would naturally expect the actual trigger area of the + button to extend beyond its visible borders, perhaps even to the whole surrounding box.

Still, if you wanted to make it clearer that the entire box is clickable, one thing you could do is add a drop shadow also to the box to separate it more from the background, and perhaps even remove the drop shadow from the + entirely:

That way, the green + is still there to indicate interactivity, but now the "button-likeness" is moved from the + to the entire enclosing box.

Other ways to indicate clickability, which are not as easily shown in a static mockup, would be to change the mouse cursor (as suggested by DrFriedParts) and maybe to slightly shade the box when the user moves the cursor over it. Alas, such hover cues don't work too well on the increasingly more common touchscreen devices, but they can still provide useful additional cues for traditional mouse-based displays.

Answer 4

More obvious option is combining price and add button.

Answer 5

If the whole box is clickable, you're basically dealing with a tile-ish interface. Do not clutter up the 'box' with additional UI components to give the visual cue of a button, you can just remove the elements and play with the border of the box itself.

• Use a drop-shadow on the box's border to differentiate it from the surroundings
• Maybe highlight the entire box on mouse-over
• Standard change in the cursor icon from navigation to selection
• Color the box's background in something distinguishable from the surrounding (background) color.

Answer 6

I think most of the answers so far are suffering from tunnel vision, but that's because the question only includes the clickable element, not the rest of the page.

I'd argue that it's quite likely the case that one element above all of these clickable tiles to clearly state that the things below it are clickable, would be better than having an icon/button on every single clickable element.

Changing the cursor is a given, and will probably happen by default due to the markup.

Instead of the plus button, consider an attention-grabbing title to this section of the page saying 'Select items to add to your cart', and perhaps something to distinguish the end of the section that that title refers to.

If you already have such a title, maybe you don't need the buttons you're asking about at all?

Answer 7

I think its difficult show that the box is clickable at first look(Glance). You can grab the chance to show that whole box is clickable when user hover over it.

You can try this one:

1. Make the arrow to cursor which shows that the whole area is clickable.
2. Mask the area with white color with opacity about 0.6 to 0.7.

Images below makes it clear (This is for choosing the coupons).