Search this area

Search this Area

WHAT

The search this area pattern allows the user to search various points of an area, giving the user control over when to update features in the map. Search this area avoids updating features in the map until the user instructs the app to do so. It can avoid confusion and frustration for the user.

WHY

Any time a user pans or zooms the map, the visible area changes and new features must be loaded from the server. Besides initial features being removed from sight, this can lead to the problem that users may be left wondering whether data exists in this area or hasn’t loaded yet. Unless the features are already available on the client browser, each small pan event requires a server request to retrieve the new features, which consumes unnecessary bandwidth on mobile devices. Another undesired side effect can occur when the map extent is tied to a list, which will change with every map move. This behavior is often expected but in other cases can lead to confusion or even frustration.

WHEN

The search this area pattern is often found in mobile exploration apps in which screen space is limited and data connections are unreliable. Constant panning and zooming requires features to be added or removed constantly. As a result, users lose track of features they have already looked at and become disoriented when new features trickle in slowly or not at all. This uncertainty can even lead to a feeling of helplessness and frustration.

HOW

The recommended implementation on mobile devices is to provide a button labeled Search This Area or Redo Search in Map. Place this button in the top or bottom center of the map or as part of the location list. Show the button whenever the map extent changes, and new features can be requested. Hide the button again after the user has clicked it to retrieve features for the current extent.

In situations in which bandwidth is less of an issue, your app can provide users with the choice to opt in to search the map as the extent changes. Instead of the button, add a check box labeled Search as Map Moves, Search as I Move the Map, Update Results When Map Moves, or something similar. Apply the following recommendations to the check box:

  • Checked: Results will update automatically after each pan or zoom event.
    Keep the check box visible so users can opt out of automatic refreshes.
  • Unchecked: Results will not be updated automatically. Instead, after a
    pan or zoom event has occurred, turn the check box into the Search This
    Area button. When this button is clicked, the app fetches the updated
    results and the button turns back into the check box.

The default state of the check box can be checked or unchecked and depends on its intended use. Consider using a small panel that floats in the top area of the map to host the check box and the button.

Because the main concern is bandwidth and data overload, apply additional safeguards to limit the number of features being fetched. One way is to implement a threshold that disables the Search This Area button after zooming out beyond a reasonable scale.  Another way is to restrict the requested features to a smaller area, typically the size of a city — that is, as the user zooms out to a small scale, retrieve only features from a small area around the map center.

EXAMPLE

The mock-up in figure 5.10 exhibits an app that connects people with local businesses. Users can use their mobile app to find and explore these business sites in the map. The example shows a search for restaurants. As the user zooms or pans the map, new restaurant sites become visible and other sites may disappear. While the user tries to find their area of interest, the app avoids requesting new sites, helping to save bandwidth, and shows a Redo Search in This Area button instead. When the user clicks this button, the app removes existing points from the map and retrieves a new set of sites in the area. The new sites are added to the map as numbered markers so that the user can refer to them from the list that is accessible from the list icon in the header.

Mock-up mobile app for restaurants in Salzburg doesn’t load new data until the user explicitly triggers a new search in the area.
Mock-up mobile app for restaurants in Salzburg doesn’t load new data until the user explicitly triggers a new search in the area.

MORE EXAMPLES

Google - Search this Area checkbox
Google – Search this Area checkbox
Google - Search this Area button
Google – Search this Area button
Airbnb - Search this Area button
Airbnb – Search this Area button
Airbnb - Search this Area checkbox
Airbnb – Search this Area checkbox
Yelp - Search this Area checkbox
Yelp – Search this Area checkbox
Yelp - Search this Area button
Yelp – Search this Area button

Leave a Reply