3

enter image description here

There are multiple boxes on one page. And it's not for touch-based environment. Currently, both the button and the box are clickable, and they are performing the same function. Both have drop-shadow when mouse over.

Question: Which one is having better user experience?

  1. Both elements are clickable

  2. Only [Start] button is clickable, user might not expect the box to be clickable when a button is there

  3. Remove the button, and leave the box clickable. This gives user more clickable area.

1
  • 2
    You could just add some text to the box saying something like 'Click here to start now' and remove the button.
    – Vince C
    Jul 2, 2015 at 8:59

3 Answers 3

0

Out of your 3 options I would go with a variation on number 3.

3.Remove the button, and leave the box clickable. This gives user more clickable area.

I think having 2 buttons going to the same place is confusing. And the act of clicking a tile/box to navigate to the primary action is very common place on interfaces these days. Especially if there is only one action.

Variation is: I would remove the inner button but maintain the text. The text could be a helpful indicator of what tapping the tile will do if its not already clear, if it is clear then remove it altogether. You may need to tweak the styling of it, e.g. remove the box and make the text blue. It would act a little bit like the action text of the whole tile (if you keep it).

If in the future you decide to add other actions that live as inner buttons to the whole tile then that would be fine (see android cards https://www.google.com/design/spec/components/cards.html#cards-usage), as long as they're styled to look obviously separate actions and have enough outer space.

N.b. you say its not for touch based environment but there is no harm in considering how your app may evolve and become so. So factoring that in at this stage will help the evolution into other platforms easier and also current users will transfer their knowledge of how to use your non-touch app into a touch based environment more easily.

1
  • I disagree with this. Without the visual button, there is no affordance to indicate to a user that the dialog itself is clickable.
    – 17 of 26
    Apr 11, 2017 at 15:45
1

The box has no clear affordance as a button. Making it the primary action with or without a button is leaving the user to guess they can click anywhere on the box. This will also lead to unintended clicks.

Make only the button clickable. If the user needs to be able to hide/close the box, add a close button for the same reasons as stated above.

0

make the whole area clickable. It doesn't make the usability any worse and if you're a fan of Fitts law, makes total sense.

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.