Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
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 Jun 16 '13 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 Jun 17 '13 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. :) –  om nom sushi Jun 17 '13 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 Jun 18 '13 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. –  Mathew Foscarini Jun 18 '13 at 23:59

7 Answers 7

up vote 52 down vote accepted

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.

before_and_after_add

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

share|improve this answer
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 Jun 17 '13 at 20:24
    
@KevinReid: Thanks! Changed the links to jsFiddle demos that use <label>. –  SNag Jun 18 '13 at 5:40

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.

share|improve this answer

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

share|improve this answer
    
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 Jun 19 '13 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. –  Toby Vacher Jun 19 '13 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 Jun 19 '13 at 11:12

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.

click pointers

share|improve this answer
7  
Only changing the cursor doesn't work very well on, say, a tablet. Which are becoming awfully common these days. –  Michael Kjörling Jun 17 '13 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. –  DrFriedParts Jun 17 '13 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". –  Michael Kjörling Jun 17 '13 at 8:42
    
@Michael -- Very fair point. My apologies. I've edited to improve. Perhaps it's clearer now? –  DrFriedParts Jun 18 '13 at 2:17
    
Much better now IMO. +1. –  Michael Kjörling Jun 18 '13 at 11:04

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.
share|improve this answer

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.

share|improve this answer

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

share|improve this answer
14  
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 Jun 16 '13 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. –  devios Jun 20 '13 at 19:07
    
@chaiguy – it's a sketch, I mean green button with price as label. –  Alexey Kolchenko Jun 20 '13 at 19:25

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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