Thumbless scrolling

When we found out how easy it is to detect the smartphone’s orientation by accessing the gyroscope, we experimented with it and came up with some cool ideas. Our favourite usecase is the Thumbless scrolling by tilting your phone.

Thumbless Scrolling

So why could this be useful?

First of all, the users thumb or other fingers don’t collide with the information on the screen – Everything is always visible during scrolling.
Furthermore it can be much more convenient to gently tilt your device than always replacing and moving your thumb while reading long texts.

Once we finalized our prototype, we will test this functionality on long reads and see how often the “thumbless scrolling” will be activated. If you’re interested in trying it on your own, here you go:

demo.sansho.studio/gyroscroll

Here’s how you access the gyroscope data via javascript. In this example you get values for rotation, vertical- and horizontal tilting.

window.ondeviceorientation = function(event) {
alpha = Math.round(event.alpha); // Returns the rotation
beta = Math.round(event.beta); // Returns vertical tilting
gamma = Math.round(event.gamma); // Returns horizontal tilting
}

For the first prototype (you can try above) we matched the vertical tilting values to the body scroll position and added a breakpoint so it doesn’t start scrolling at slight shakes.

Still here?

We manipulated the position of a div with this data and created a simple math game for smartphones. It checks the position of the divs that show either the right or wrong sum of the calculation.

Thumbless Scrolling

Test it here:
demo.sansho.studio/mathgame

It’s getting a bit more advanced when we are passing the data from on device to another to create some kind of Wii-controller.

Thumbless Scrolling