Marco.org

I’m : a programmer, writer, podcaster, geek, and coffee enthusiast.

How To Make Tilt Scrolling That Doesn’t Suck

In 2008, I added tilt scrolling to Instapaper. Today, that’s an “innovation” in Amazon’s Fire Phone, but Farhad Manjoo says they blew it:

Take Auto Scroll, which moves the text on your screen as you tilt the phone back and forth. Because Auto Scroll calibrates its scrolling speed according to how you’re holding the device when you first load up an article, your brain will struggle to find a set rule about how much to tilt to get the right speed. Often I’d scroll too fast or too slow.

This is the biggest design challenge when implementing tilt scrolling. Tilting is relative to some “zero” point — tilt forward from that angle to scroll up, and tilt back to scroll down.1 When, and how, is the zero point set?

Scroll down Scroll up Zero

You can’t just have a fixed angle be the zero point, like straight up, because nobody holds their phone in the exact same orientation all the time. The zero point needs to be relative to however the phone is being held.

My solution is to have tilt scrolling always default to off, make the user toggle it on every time they want it, and use the phone’s current orientation as the zero point when they tap the button. Critically, this means they can toggle the button off and on again to reset the zero point whenever they want, like if they change positions while sitting or in bed.

Amazon has apparently chosen instead to set this when the article is first loaded, but that will never work well enough in practice. I assumed my method was common sense, but apparently not.

The biggest problem with tilt scrolling is that doing it right requires a prominent button to toggle it on and off to make realignments easy for users, and it can never just be on by default. In most cases, it’s not a widely-used enough feature to justify a prominent, always-there button in the interface, so it’s (rightly) cut from the feature list.

I don’t have a Fire Phone to test with — thank goodness, it seems — but I wonder how they did on the other details. For tilt scrolling to be useful in practice, there needs to be a bit of a dead zone around the zero point, where no scrolling occurs, so it’s forgiving of inadvertent small motions. The dead zone should be wide enough so nobody accidentally scrolls in the wrong direction when they’re trying to keep it still, but narrow enough that neither direction is frustratingly far away:

But it’s no good if someone activates tilt scrolling, tries to scroll down (the most common action), and the first few tilt degrees do nothing because the trigger zone is too far away. It feels unresponsive. So the best thing to do is not quite to center the scrolling bands around the zero point, but offset them so that the zero point is very close to the beginning of the scroll-down zone:

This way:

I assumed all of this would be common sense to anyone implementing a tilt-scrolling feature.

More from Manjoo’s review:

Worse, if you put your phone down on a table while you’re in the middle of an article, the scrolling goes haywire and you lose your place. The best thing about Auto Scroll is that you can turn it off.

This also seems like common sense. Instapaper’s tilt scrolling always stopped if the phone was set on a flat surface. Originally, that was actually a bug — probably not wrapping around the zero angle properly — but it was so obviously useful that I left it in.


  1. These directions are non-negotiable if downward scrolling is the more common direction in your app, like almost everything. The way most people hold phones, tilting the top of the device toward you makes the screen angle slightly less readable, while there’s usually plenty of leeway in the other direction. You want the device-toward-you action to be the less-common scroll direction. ↩︎