Search this Area

Search this Area

What Problem Does This Solve?

Avoid updating features on the map until user has explicitly opted in to do so

Why Use This Pattern?

Any time a user pans or zooms the map the extent changes and therefore the visible features on the map will change also. Sometimes this behavior is expected but in other cases it isn’t and that’s when this behavior leads to confusion or even frustration. Examples when updating results are not expected include searching for points of interest like hotels, restaurants, or incidents especially when the list of results is side by side with the map. Any pan or zoom would then result in having currently visible features disappear, new features suddenly appear or simply flipping the order of the search result items so that the list appears to be different.

Additionally, and unless the features are already available on the client (e.g. browser), each small pan event requires a server request to retrieve the new features which may be slow or expensive especially on mobile devices.

When to Use This Pattern

Search this Area pattern is often found on mobile devices where data connection and screen space are limited. Use when users explore an area and need to keep track of features they have looked at or about to look at. Relying on the application to randomly draw new and remove existing features is unexpected behavior and will leave the user helpless and frustrated. It’s better to empower the user to opt into this feature by either checking a box that this behavior is desired or explicitly pressing a button to refresh the results. This interaction makes sets the correct expectation and avoids the feeling of losing control and confusion.

What’s the Solution?

Add a checkbox to opt-in to searching the map as the extent changes. This element can be a small panel floating in the top area of the map labeled “Search as map moves”, “Search as I move the map”, “Update results when map moves” or similar. The default state of this checkbox can either be checked or unchecked and depends on the type of application and its intended use. If the checkbox is checked then the results will update automatically after each pan or zoom event. If the checkbox is unchecked the results will not be updated automatically but the checkbox will be replaced with a button labeled “Search this area” or “Redo search in map”. Upon clicking this button, the application will fetch the updated results and the button turns back into the checkbox.

Special Considerations

Consider limiting the number of features that are being fetched. This can be done either by numbers or by extent, i.e. even if the user zooms out to a small scale only an area the size of a city and typically encompassing the center of the map will be included in the search query. Another option is to implement a threshold that disables the Search this Area button or checkbox after zooming out beyond a reasonable scale.

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