John Gazzini

Circular Slider In Buoy

The Problem

It’s difficult to zoom on a map when holding the phone with one hand. It’s one of the few things that still requires you to hold your phone with 2 hands. It could be better.

The Solution


Jarod and I are working on a new app called Buoy, which is a social network with a strong emphasis on location. In order to quickly move around a map to see all the places you care about the most, a lot of pinching/zooming is required. This is terrible in too many ways to list… your fingers cover the screen, you need 2 hands, it takes a long time… Ok. Maybe there’s just 3. But in an app focused on exploring places, it needs to be better. And we aren’t the first ones to recognize this need.

Google Maps actually has a double-tap-hold-slide gesture that works well for small zoom distances. The main issue with this approach is that nobody knows about it, because it’s literally invisible. Another issue is that the zoom is limited by the height of the screen / sensitivity of the gesture. For getting a birdseye view of traffic around you, this rarely takes more than 2 performances of the gesture. However, each gesture requires at least 2 taps, plus some sliding. That gets old quickly, especially when navigating (which usually implies that you’re moving, or trying to move). So, we came up with some requirements for our solution:



Our first approach was to use an actual slider, but these have a range/sensitivity tradeoff that is just unacceptable.

Next, I pictured a gear-like spinner thing, sort-of like the dial on a watch:

The Good

It seems sort-of neat, and it allows you to zoom continuously to any zoom level with 1 finger.

The Bad

You accidentally press it a lot, specifically if you ever want to actually pinch/zoom the old-fashioned way. Accidental touches were a real problem.


Next, we developed a little knob that you needed to activate the circular control:

The Good


The Bad

It’s tough to zoom in accurately. I’ve considered some type of auto-adjust to prefer to zoom near certain geo-points on the map, or perhaps even something as extreme as allowing the user to tilt the phone as they zoom in to steer left/right/up/down.


We’re going to use the knob for now. I feel like circle sliders are hip these days. I’ve been seeing more of them, specifically in the Auxo 3 jailbreak.

This also took a lot of work to implement well. I’ll open-source the project when I get around to it… I actually spent several hours on it, and the math got somewhat complicated. The toughest problems, from a technical perspective, included:

← Previous


blog comments powered by Disqus


26 December 2014




About Me