The store locator pattern finds physical store locations closest to a place, address, or the user’s current location. It is important for companies to provide a store locator that helps their customers easily find the most suitable real-world store location.
Most businesses operate on the internet, but their customers still live in the physical space and may need to visit brick-and-mortar locations such as a store, bank, office, dealer, or facility. If they cannot locate a location that is close to them, the business loses money. The company’s website must provide an easy way to find and open the store locator itself, and the store locator workflow should be optimized to find the most convenient store that offers the services needed.
Any business with physical store locations or services should provide a store locator. The number of stores will dictate how to present the location information. If the business has only one location, it’s best to display the address, phone number, business hours, and a link to get driving directions directly on the home page or Contact Us page. For few locations, provide a static location directory that can be accessed from every page throughout the app or site. Once your business has 10 or more locations, resort to implementing a dynamic store locator.
E-commerce sites with physical locations, such as big brand or shipping stores, may choose to embed a simplified version of the store locator directly into their workflows. Based on the user’s current location, the closest store is preselected. Product listings and business hours are then based on availability for that location. Users can update the default location by entering more exact location information, such as a zip code.
A store locator can be successful only if users can find it first. Provide clearly labeled links such as Find a Store, Store Locator, or Locations, and avoid branded terms. Add a link to the locator from all the pages within the site, preferably in the header or footer sections. Consider placing additional links on strategic pages such as the shopping cart page to find pickup locations or product pages to check in-stock inventory.
The process to locate a store should provide the following steps:
- Enter location information. Use location finder and locate me to identify the desired location.
- Optionally, apply attribute filter to limit the locations to meet certain criteria such as specific services, products, or availability.
- Activate search by clicking a button labeled Search, Find, or simply Go.
- Add a marker and center the map around the location. Use a street map as the basemap layer.
- Show results in a list and on a map. Use location list to show locations by distance, and include important attribute information, such as store name, phone number, and business hours.
- Refer to location list earlier in the chapter for additional best practices on how the list and map should behave.
- Retain the selected search and filter options so it’s easy to refine and search again.
The two main edge cases to consider are that the locator returns either zero results or too many results. The following suggestions can help you optimize the user experience:
- No results found: Consider increasing the search radius to check whether more results become available. This approach works well for specialty stores or fine-dining choices in which users are willing to drive longer distances. It’s less likely to be a good choice for commodities such as get-ting a cup of coffee. Alternatively, inform the user that no results were found and offer a way to shop for the same product or service online.
- Too many results: Start with a default search radius that works well for most locations and without overwhelming the user. Use implementation techniques such as lazy loading to save bandwidth by showing only a few locations at a time. Reduce the results by offering attribute filters, such as services offered, product availability, or business hours.
The mock-up below shows an app to find libraries. It illustrates how the app uses a simplified store locator embedded in the page header. On start-up, the app remembers any previously selected site or locates the closest one. The trailing down arrow indicates that this option can be changed, and as the user clicks on it, a panel to select another library location slides out from the left. The top section of this panel includes a locate me link and a location finder, followed by a list of nearby sites. The currently selected site is marked as such, but the user can easily change to another site by clicking the Set as My Library button.
The app also offers a more comprehensive store locator that can be opened through a link in the top-right corner labeled Find Locations. This store locator opens a dedicated page with a list of libraries side by side with a map.