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

  • 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 Sep 19 '14 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 Sep 19 '14 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 Sep 19 '14 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 Sep 19 '14 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 Sep 19 '14 at 9:15
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.

  • +1 Option 2 is better to understand - same color as background = not interactive – FrankL Sep 25 '14 at 8:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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