2

I have a tappable row (yellow with blue border in pic) which does action A.

However inside this I could have input controls (checkbox, textbox, etc). I have wrapped this area in a non clickable view (indicated by the grey area). This is to stop taps just outside the input tap area from triggering action A by accident. It acts as a blocker.

Ideally I would focus the input control when this grey area is tapped but in the meantime it simply does nothing.

Is there a way I can indicate that this grey area around the input control is not tappable so that users actually trying to trigger action A don't get annoyed or think that the whole row isn't tappable?

enter image description here

n.b. this area isn't actually grey in my design its transparent, I have coloured it grey just to help me ask this question. So if my design were actually yellow and grey then currently the row would look more like the below.

enter image description here

n..b this is for an Android app.

ADDITION: Example of tap feedback on tappable area of row. enter image description here

Improve this question
7
  • I don't know about signaling an area isn't interactive before a user clicks on it, but there's opportunity to do something once they have clicked. Using :active state on buttons/links etc acts as feedback that the item that was clicked was actually a clickable item. Whereas clicking the background of a website doesn't give any feedback - which itself is a form of feedback, it states that what you clicked on isn't an interactive item. I would say that you should work on your :active states and have them clear everywhere so when users click something non-interactive they get no response...
    – JonW ♦
    Commented Sep 19, 2014 at 9:01
  • ...and when they click an interactive item they do get a response. That helps separate the interactive from the non-interactive.
    – JonW ♦
    Commented Sep 19, 2014 at 9:01
  • Cheers Jon, good way of looking at it. I have added another mock. So lets say the feedback for tappable areas is a transparent blue. If I only show that feedback over the tappable area and when the tappable area is tapped, that should be enough to indicate the area that doesn't go blue isn't tappable? So when they tap that area and it doesn't go blue/tap it should be obvious enough why?
    – Dave Haigh
    Commented Sep 19, 2014 at 9:11
  • I don't follow you entirely. In which area are the interactive controls (checkbox, input field, etc) in the yellow area or the grey area? I think what I don't really understand is whether it's an interactive container which contain another interactive element? Such as: [Interactive container A [ Checkbox ] ]?
    – AndroidHustle
    Commented Sep 19, 2014 at 9:11
  • yes. imagine the yellow area is a row in a table. That row is tappable i.e. it could navigate to a page or a popup. But inside that row there could be a control like a checkbox. The tappable area around a checkbox is small so someone trying to tap the checkbox could easily accidentally trigger the tap on the row it lives in and end up navigating away or getting a popup. So ive added a buffer zone (grey area).
    – Dave Haigh
    Commented Sep 19, 2014 at 9:15

1 Answer 1

Reset to default
1

I put a white border around the unclickable area and the darker border around just the clickable area - feels like this works better...

pic

The other option might be to make the background colour of the 'untappable' area the same as the page background, i.e., white.

Improve this answer
1
  • +1 Option 2 is better to understand - same color as background = not interactive
    – FrankL
    Commented Sep 25, 2014 at 8:26

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.