I have tappable tiles that navigate off to a different page in an app.

Within the bounds of these tiles I have input controls. Interacting with these input controls should have no effect on the navigation that occurs when tapping on the tile itself.

The problem is that users could accidentally tap just outside of the input control and therefore trigger the navigation action. What would be the best way to solve this problem?

An idea: Would setting a safe zone around the input control which doesn't trigger the navigation be sufficient? But how would the user know this i.e. if they tap this area thinking it should navigate away it may look like the navigation tap event is broken. See mockup of idea.

enter image description here

1 Answer 1


Interesting question.

Rather than having a dead zone (safe zone) that does nothing, you should make your "safe area" trigger the label editing. If you do this, then tapping the tile will either trigger the navigation, or editing of the text box. This way there will be no sense that the tile is "broken", and the user can easily cancel out of editing the text box. They will soon get the idea.

For touch, the Nokia developer guide suggests that a touch target should be at least 1 x 1 cm (many other guides seem to give the size in pixels, which doesn't seem as reliable over different devices). I think this is a good guide for how big your detection zone should be for the text box.

Is this is a Windows 8 style tile? Their guidelines for interacting with tiles might give you some inspiration.

If you want to make the edit vs navigate distinction clearer, perhaps you could go further and introduce some concept of "selecting" a tile for edit?

  • Have 2 modes for your tile; normal and "selected"
  • Have some gesture (e.g. tap and hold) that moves the tile from the normal state to the selected state.
  • When in normal mode, the entire tile is tapable for navigation.
  • When in selected mode, user has access to edit the label, but navigation is disabled.

You need to have some kind of affordance to indicate the difference between the 2 modes. Perhaps in this case enabling / making visible the text box control is sufficient.

  • "you should make your "safe area" trigger the label editing" sounds obvious once someone says it. I think if the safe area isn't too large and only covers enough to cater for clumsy taps then this is a good solution, thanks
    – Dave Haigh
    May 1, 2014 at 10:03
  • and also your suggestion of 2 modes is nice. in my particular scenario it wont be viable, the edit controls need to be prominent and always on, but for other situations this may be useful.
    – Dave Haigh
    May 1, 2014 at 10:04
  • @DaveHaigh Yeh, I find that if I look at a problem too long it's really hard to step back and see the obvious. :)
    – Franchesca
    May 1, 2014 at 10:07
  • I tend to turn to stack exchange for some inspiration, works sometimes if the right person sees it
    – Dave Haigh
    May 1, 2014 at 10:09

Your Answer

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

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