I've never seen this anywhere else, but it seems like a good way to prevent the frustrating occurrence of accidental clicks while scrolling. What do you think?

mockup of mobile "safe scrolling area" idea

  • I have never experienced this issue myself, although with badly implemented app I can see it happen. I was just wondering if you can share on what app do you may get a click while scrolling?
    – Izhaki
    Jan 11 '14 at 1:52
  • It's generally not an app, but the mobile version of a website in a mobile browser. The example above isn't for an app, but also for a mobile website. Jan 11 '14 at 18:11
  • That's odd. Could you provide the browser and the site on which the issue happens?
    – Izhaki
    Jan 11 '14 at 18:34
  • Apologies I wasn't clear - this isn't one single website, but happens very often on lots of different sites using Safari on my iPhone 4. Jan 11 '14 at 18:44
  • Could you give a few examples of such sites? I'm buzzing to see this.
    – Izhaki
    Jan 11 '14 at 19:13

The two principle mouse/touch events in question, which the OS fires (to the application) are:

  • click (for mouse) or tap (for touch)
  • drag

There is actually a rather complex mechanism behind how the OS determines whether a gesture is the former or the latter. I'll be demonstrating it with mouse (for common terminology sake), but it works the same for touch. It goes:

  • The user performs mouse-down.
  • From the mouse-down coordinates, there's a safety area for mouse movement. Say 2 pixels to each direction. This safety area is to protect from false drag events in case the mouse moves a bit between the moment of mouse-down to the mouse-up (albeit a very short period - within the milliseconds range).
  • If the mouse moves outside this safety area, the OS fires drag-start event, followed by a drag event for each consecutive mouse movement.
  • Upon mouse-up:
    • If the mouse at any point left the safety area, a drag-end event will be fired (even if the mouse returned to the safety area).
    • If the mouse never left the safety area, a mouse-up event will be fired, followed by a click event.

A properly implement application should respond to a click event and not mouse-down or mouse-up events (which may cause the issue you are describing).

So it's really that you either get a click event, or if the user moves the mouse/finger it will be a drag event (so long the move is bigger than the given safety area). Thus even if the UI doesn't support scroll (and it is possible for a list to appear as if scrollable while it isn't) once the user moves the mouse/finger there wouldn't be a click event.

If my memory doesn't fail me, the actual OS safety area is not in pixels, but in inches instead (so higher resolution screen won't have a smaller safe area), and it may vary depending on the OS tracking speed.

To conclude a properly implemented application should not suffer from the issue mentioned. Regardless, the safe scroll area seems to me:

  • A serious space-consumer in a platform that is the display real-estate is highly limited.
  • Could potentially bring usability issues on its own - how do you increase its affordance, signifying to users these unconventional feature?
  • And as mentioned, the original issue should not exist.
  • Thank you for your helpful response, though I'm still unclear on whether the "safe scrolling area" I'm proposing is a good idea/ux. I do accidentally click all the time while trying to scroll, but maybe this is a rare problem at large. Jan 11 '14 at 16:47
  • I've updated my answer with a short conclusion referring to your proposal.
    – Izhaki
    Jan 11 '14 at 18:33

Is adding a safe scrolling area a good idea and/or ux?

I would say yes to it being a good idea. No doubt there are plenty of people who experience the same problem you have. They will welcome your solution. And I don't see how people who don't have this problem will we opposed to this idea as long it doesn't take up to much space.

I would say no to it being good ux. That's because I'm considering the way people will hold their device, the reach of their thumb or finger is limited in some ways, and the fact your limiting the interaction possibilities.

One handed

enter image description here

According to this image, right-handed people will be forced to hold their thumb in an awkward position in order to scroll on your safe scrolling area. Left-handed people will have less problems.
The image isn't representative for everyone, so some right-handed people will have no problem making the gesture needed for your interaction.


enter image description here

In this position the thumb or finger has more reach and people will have no problem reaching the safe scrolling area.

Two handed

enter image description here

In this position the reach of the thumb is limited in the portrait position. Only small dragging gestures are possible.

When I scroll, usually with my thumb, I don't move in a straight line up. My drag will have a curve to it. I know the scrolling will not be limited to the safe scrolling area, but adding that bar will suggest it is. Therefor you'll be forcing people to perform a certain movement within a limited area.

But it might work out. It would be awesome if you try and succeed, introducing a new and safer way of scrolling. So you could try it out and see what real time users think of it.

  • as the OP couldn't give a specific example, could you kindly provide a single example where this behaviour can be observed? That is, a browser and a site where this may happen?
    – Izhaki
    Jan 13 '14 at 11:36
  • 1
    @Izhaki Just like the OP said, tapping something by accident when you intended to scroll can happen on any browser and on any mobile website you're visiting where you're scrolling a bunch of links. But as an example, take the Twitter app. Every tweet is an link itself singling out the tweet. When scrolling you could, by accident, bounce off the screen for a split second so the scroll is detected as a click. It happens to me from time to time. It can't be recreated by simply visiting a certain website on a certain browser. It's an user error. Jan 13 '14 at 11:46

The general rule in mobile is just to detect drag vs. tap. Instead of adding a specific gutter for scrolling, could you try detecting when the user's gesture is a tap or drag?


You don't have a lot of real estate on the screen to start with, and you can't ever guess accurately what's going to be enough pixels (in width) for one user's finger vs another.

Perhaps it'd be better to use submenus (group your items) instead of having a menu that a user needs to scroll. It's a click or two more but it cuts out the need to cripple the UI unnecessarily.

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.