Three approaches to designing a “near me” mobile search

Posted on Sep 15, 2010 in Design, Web Dev | 0 comments

Mobile devices like the iPhone that contain a Global Positioning System (GPS) are revolutionizing how people find things near them. Yes, the term “revolutionize” is sorely overused, but I think it’s warranted. Having recently bought an iPhone 4, the utility of the built-in GPS and—more importantly—the applications that use it is fresh on my mind. I use the word utility today, but I imagine within a few weeks I’d use necessity instead: it really is that powerful a tool.

For those unfamiliar with the concept of a “near me” search I’ll briefly outline how it works, using the Google Maps application as an example. Opening the software on a GPS-enabled device shows the user a marker on the map where he or she currently is, as determined by the GPS. Suppose the user wanted to find coffee shops near them; they just enter the term “coffee shop,” “café,” or simply “coffee” with the magical term “near here” or “near me” appended to it. Suddenly, pins appear on the map indicating nearby places they can get caffeinated.

As both a web developer and a designer, I see three approaches to designing a “near me” search feature for an application. From a developer’s point of view, they range from easy to hard. From a user’s perspective, they range from “ho-hum” to “wow!” (You can probably guess that the easy implementation is also the “ho-hum” one.)

Some notes and assumptions

Before I begin describing each approach, please note the following:

• I’ll stick with one example use case (finding coffee or snack shops) , though the design approaches could apply to any sort of “near me” search: subway entrances, grocery stores, etc.;
• I’ll focus in this post on the design of such features, not on the technical requirements (such as the data source providing location data and how that information is sent to the device) needed to bring them to reality; and
• I’ll show visuals for an Apple iOS-based device (iOS is the software powering iPhones and iPod Touches), though the concepts would be applicable on an Android-based device or other mobile platforms.

In each approach below, I assume three pieces of data have already been sent to the data service with the search request:

1. the user’s desired location type—in my example, a coffee shop;
2. the user’s location, typically as a point defined by latitude and longitude coordinates as determined by the GPS; and
3. the radius within which the user would be willing to travel. This is often a variable the user can set before they search, but depends on the design of the application.

Approach 1: List display

Mock-up of a "near me" search result page taking a very simplistic design approach.

Difficulty level: easy; User “Wow!” factor: low.

The most common design approach for “near me” search results is a list. In its simplest form, the application would simply display the nearest matching locations returned from the data service. Each result could be tapped to display details about the location, such as its full address, photos, menus, link to its website, etc. A more useful variant on this simple approach would be to include the distance to the location and the orientation from the user’s present position. For example, “Scott’s Café (.15 miles southeast).”

Approach 2: Map display

Mock-up of "near me" search results positioned on a map.

Difficulty level: moderate; User “Wow!” factor: moderate.

A more sophisticated approach—and one users are certainly accustomed to thanks to Google Maps—is to show locations on a map. Google and other mapping services provide APIs to allow developers a relatively easy way to show locations on the map. While such services work well for general applications, others need more greater customization (say, a theme park showing snacking and dining locations). In those cases, custom map tiles can be overlaid to show a simplified and branded map surface, dotted with custom icons rather than generic pins. (For complete customization, developers could write their own map display programs, too.)

Approach 3: Augmented reality display

Mock-up of an augmented reality "near me" search results.

Difficulty level: hard; User “Wow!” factor: high.

Several real-world examples of augmented reality map displays already exist for mobile devices. The term “augmented reality” refers to a hybrid display of real-time video overlaid with position- and time-sensitive information. (It’s a concept best seen, not described; take a look at the aforelinked gallery of iPhone applications using this approach.)

A tired user would enter the search term—in this case, coffee—and hold his device’s mobile camera up. The video displayed onscreen is overlaid with actual locations and distances where the necessary caffeine can be obtained. Panning the device or walking causes the location markers to move appropriately.

Though not represented perfectly in this static mock-up, the attributes of location markers (size, color, opacity, or a combination) in this design approach could change to better indicate each location’s distance from the user. As with the other approaches, the markers are tappable to display more details about the locations.

Ensuring the best experience across devices

Mobile devices are not all created equal: newer, top-of-the-line models have GPSs and built-in video cameras, whereas older devices may have a GPS or still camera, or perhaps lack even these items. So how do you ensure a quality experience for all devices? The answer lies in design based around progressive enhancement.

This term describes a design process that provides basic functionality for all devices first—including older, less capable ones. The design would then improve (i.e., provide additional features and user experience enhancements) depending on what the device (or web browser) can support. Well-written apps do this through a process called feature detection, in which the device or browser is tested for support of a certain feature before the design attempting to employ it. If that feature is not supported, a fallback approach is used.

In our theme park “food-finder” example, the baseline design would provide a list of all the coffee and snack shops in the park, presented in the traditional paginated display containing, say, five results on a page. (This is similar to approach #1 described above.) From this most basic approach, the app could improve the user experience based on whether the user’s device:

• supports javascript? If so, load a library and use an “endless scroll” (or other javascript-based coolness) instead of pagination to display results.
• has a GPS? If so, fetch only those results within the preset (or user-defined) distance preference.
• has a video camera?
  • If not, display the nearby locations as pins on a map (approach #2).
  • If so, display an augmented reality approach where locations are positioned appropriately for distance and orientation (approach #3).
    (The “pins-on-a-map” approach should still be an option, however, for users who prefer it over augmented reality.)

Final thoughts

GPSs, cameras, and ever-increasing processing power has already transformed what is possible with mobile information displays. As these powerful devices become more common, users will start to expect sophisticated displays. (It’s already difficult for many users to comprehend a phone without a touch screen!) The examples above just scratch the surface of the innovative ways designers can approach information display with these devices. Who knows what other approaches designers will come up with.

I, for one, won’t come up with anything without some coffee. At least I know how to find the nearest café.

Related: If you liked this, check out:

1. Designing a real estate listing website After over 8 years, we're selling our condo in Kenmore,...
2. Cross-post: One developer's perspective on the SWS's course search resource The UW's Office of Information Management invited me to be...
3. Manage your Facebook search engine display Facebook (FB) recently enabled a public version of its users’...
4. Don't search for… Three things you should NOT search for on Google’s Image...
5. Usability—or lack of it—in GigaSize downloads Some sites’ usability is so atrocious it simply must be...