Reachability by overscrolling

There is an accessibility setting on the iPhone called “Reachability”. When you enable it, you can double tap the Home button or swipe down the Home indicator on the iPhone X to make the screen content move closer to you fingers so that you could tap it.

In The revolution in the mobile user interface I wrote that you should flip the UI so that all the meaningful controls end up on the bottom. But what if you have a full screen of tappable content? Then let the user overscroll it!

Look at this video for examples and read the explanation below:

Use a modern web browser to view this video

This is how Reachability works on the Home screen of the iPhone X. App icons just move down so that you can reach the top ones. Notice though, that visually it looks as if you just scrolled the screen down.

This is what happens if you actually try to scroll the screen down. The icons blur away and the Search interface appears. But wouldn’t it be better if it actually just scrolled the icons down, revealing the search bar above them? This way, you wouldn’t even need Reachability to use the Home screen with one hand.

This is how Reachability works in Settings. The whole screen just shifts down, letting you tap user account settings or Airplane mode.

This is what happens if you actually try to scroll the screen down. Stuff just moves down, but unfortunately bounces back when you release your finger. But wouldn’t it be better if it actually just scrolled the items down even if there is nothing else above? This way, you wouldn’t even need Reachability to use lists.

Reachability should not be an accessibility setting, but a natural property of the design. If you’ve already flipped the user interface of your app, now it’s time to implement the overscrolling.