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

Details

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:

Criteria

Approach

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

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

The Good

Everything

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.

Verdict

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

Archive


blog comments powered by Disqus

Published

26 December 2014

Category

Blog

Tags

About Me