April 2, 2010 By mike,

DO has been cooking up a location based mobile game over the last month or so, we're still early on in development but I wanted to share an interesting conclusion I came to tonight while building one of the interfaces.

Our game requires the user to make a new 'match' and invite his or her friends to it. While the user will be able to do this from the web interface, we also want it to be possible to start up a new match on the go, right from the mobile device. Essentially a match consists of three things: a starting location, the radius of an area surrounding that location, and a title. The problem I ran into with creating an interface for this is that capturing all of that information can get clunky. Below is the initial layout I came up with based on discussions with the team (disclaimer, I am a programmer practicing design without a license, these would normally be cleaned up before going into production). [caption id="attachment_490" align="alignleft" width="329" caption="Initial Interface"]Initial Interface[/caption]
So I didn't really like the interface here, but I kept rolling along with development anyways, it's still early enough in the process that overlooking aesthetics is alright. However, as I continued about my merry way writing code to support the interface I just built, it slowly dawned on me that everything wasn't as 'alright' as I thought it was. Problem one came up when I tried to actually convert the distance entered into the text field to an appropriately sized circle on the map. The map on the iPhone only allows you to specify dimension in terms of one metric: latitude and longitude differences. So I dusted off my trigonometry skills and started to write the code that converts from a distance in meters, to iPhone friendly units. I then realized this still hadn't exactly solved my problem, as it turns out, users at different elevations can't exact distances the same way when using latitude and longitude to measure them. So for instance, if I'm at the top of an office building, the distance covered between a single degree of latitude is not identical to the distance covered between that same degree at the bottom. Well, needless to say my head started to hurt a little bit here, and I went back and re-evaluated why I was in this situation.

[caption id="attachment_491" align="alignleft" width="329" caption="Reworked Interface"]Reworked Interface[/caption]

The conclusion I came to was that distances in feet or meters really aren't always appropriate metrics to be using for mobile map interfaces. Granted, if you're getting directions it's nice to know how far down the road you need to continue, but on the other hand, how often do you evaluate the distance as drawn by a line on the map, and how often do you evaluate distance by looking down the road and approximating 'another 200 feet'? I would wager that the map will almost always provide more accurate context for distance than any hard number would. So taking that as granted, I reworked my interface (and the concept of what a 'match' consists of) completely without any units of distance.






Our new interface has a few benefits:

  • The user doesn't have to worry about how far away three miles is, they just zoom in on the area they want their game to take place, the red circle remains the same size (relative to the screen) and they have chosen their game radius without having to enter it in a text field.
  • The issue of whether they are using kilometers or miles is completely a moot point
  • We've saved ourselves hours of development time, and the headache of ever having to convert or worry about distance
  • The interface is cleaner and simpler

I imagine that the same issue of converting distance for iPhone maps has occured countless times as more and more location based apps make their way into the app store, keep a look out for this: do you notice many of them bothering to note distances directly on the map?

More from the
DO Blog