Button on clickable object

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?

  • 7
    I would question what the user's expectation would be upon clicking on the text/image there. Personally, if there is a button present and I were using a non-touchscreen device, I would expect nothing to happen unless I click the button (and only the button).
    – kwah
    Commented Jun 16, 2013 at 20:21
  • 1
    If the whole box is clickable, that means the + isn't really a dummy. You can click on it! (Just doing so does the same thing as clicking outside of it). If the next person knows something that you also know, that does not make you a dummy!
    – Kaz
    Commented Jun 17, 2013 at 3:10
  • @Kaz Well it's a dummy from a programming point of view since I haven't specifically set it up to do anything. :) Commented Jun 17, 2013 at 11:05
  • The red [+] thing near the right top corner suggests, to Windows users, a window closing action (which is actually a red [x]). SNag's round icon is better because it's round. I'd move it down, off the corner. I'd put no button at all.
    – Juan Lanus
    Commented Jun 18, 2013 at 18:45
  • 3
    Why not use a Add To Cart button like everyone else? You're doing something fancy for the sake of being fancy. I fail to see how this is easier for the user.
    – Reactgular
    Commented Jun 18, 2013 at 23:59

7 Answers 7


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 '+'.

  • 2
    Note on your note — the article you link about clicking on labels isn't so good. <label> is supported in all modern browsers so a JS reimplementation is unwise, and id= for= can be avoided by simply placing the field inside the label.
    – Kevin Reid
    Commented Jun 17, 2013 at 20:24
  • @KevinReid: Thanks! Changed the links to jsFiddle demos that use <label>.
    – SNag
    Commented Jun 18, 2013 at 5:40

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.


click pointers

  • 7
    Only changing the cursor doesn't work very well on, say, a tablet. Which are becoming awfully common these days.
    – user
    Commented Jun 17, 2013 at 7:11
  • @Michael -- Sure. Makes sense. My bigger point is simply that the dummy button will likely defeat the purpose of having the entire box clickable and better visual design is necessary. Commented Jun 17, 2013 at 8:00
  • Maybe I misread your answer, but "a better visual design is necessary" is not how I read your suggestion "to just change the cursor to indicate something clickable".
    – user
    Commented Jun 17, 2013 at 8:42
  • @Michael -- Very fair point. My apologies. I've edited to improve. Perhaps it's clearer now? Commented Jun 18, 2013 at 2:17
  • Much better now IMO. +1.
    – user
    Commented Jun 18, 2013 at 11:04

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:

Drop shadow on box and green <code>+</code> sign Box with drop shadow and unshadowed green <code>+</code> sign

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.


More obvious option is combining price and add button.
add to cart

  • 15
    Voted up because it definitely adds to the discussion, but my personal instinct upon seeing this is that the green background is highlighting the price as opposed to indicating that it is clickable (dropshadow notwithstanding).
    – kwah
    Commented Jun 16, 2013 at 19:58
  • 3
    I actually find this more confusing. The + indicates an action, whereas a price is just a label. It's not at all obvious clicking does anything now.
    – devios1
    Commented Jun 20, 2013 at 19:07
  • @chaiguy – it's a sketch, I mean green button with price as label. Commented Jun 20, 2013 at 19:25

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.

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?

enter image description here

enter image description here

  • My worry is that a headline at the top of the page could be easily missed. The users focus will immediately be the (hopefully desirable) items offered for sale. An inline visual indicator feels like the more appropriate solution in this scenario and the user will be expecting something to indicate each item can be 'added' to their shopping cart. A measure of success is how easy the customer can get what they want - so we have to make it even easier!
    – TheSaint
    Commented Jun 19, 2013 at 10:15
  • 1
    My theory, which would need some testing of course, is that most users would assume that the tiles as laid out in my wireframe are clickable. Also the suggestion is to make an attention grabbing title which could just be the correct weight and size of text. I'm assuming they're already clicked something to view the purchase options like a 'menu' link as well, so they should already be in the mindset of selection options by the time they see this page. My core point is that the problem can be solved by the steps leading up to clicking the tiles, rather than adding something TO the tiles. Commented Jun 19, 2013 at 10:18
  • I see your point - but we've assumed too much because your theory suggests that they have been through a specific journey to get to this stage. However, they may have been supplied a hyperlink straight to this page, possibly even bookmarked halfway down and therefore will miss out on the considered journey that enables this end point to make sense. Overall my guess is that really it depends on the specific context and as you say, testing, perhaps AB tests would help clarify the issue. In general, I'm learning more and more that it's such a subjective science
    – TheSaint
    Commented Jun 19, 2013 at 11:12

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

Here it uses the same concept for picking coupons

That is how it looks like when you hover over it.

Your Answer

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

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