You don’t have to dig too far into the HTML5 geolocation API before you find web developers asking the wrong question: how do you use the geolocation API without asking user permission?
Fortunately the geolocation API can’t be invoked without user permission, as mandated by the spec. I know I wouldn’t want web browsers sharing my exact location with any old website without my permission. But that leaves an interesting UX challenge.
Developers wishing to bypass user permission are trying to avoid the browser’s permission dialogue box, likely under the premise of reducing user friction and confusion.
We’re probably all familiar with this dialogue box. It looks like this in desktop Chrome:
and this on iOS in Safari:
This dialogue is confusing in desktop browsers like Chrome if you’re not expecting it, but in Safari in both iOS and OS X it’s outright intrusive, forcing users to make a decision before they can continue using the site.
First time visitors to the Arby’s website (I’ve been reading too many Nihilist Arby’s tweets) for example are greeted by the geolocation permission prompt, and are unable to use the site until it’s addressed.
Not the best first impression.
We can assume Arby’s is asking for our location in order to list nearby restaurants, but there’s no clear indication of this to the user. This UX is pretty intrusive at best, and creepy at worst.
In desktop browsers we can provide users with some website content explaining why we’re requesting their location information, but this doesn’t work in Safari, especially on iOS, as the dialogue box prevents user interaction with the page and covers most of it anyways. Beyond that though, there is a better solution than convincing the user to share their location.
Make geolocation calls user initiated
We can improve the experience of geolocation dramatically by making location information access user initiated. That is to say, don’t call
navigator.geolocation when the page loads. Instead, wait for the user to initiate an action from the UI requesting the site to use their location for more relevant information.
This fundamentally changes the nature of the information transaction; the site asking for your location information (potentially creepy) is now the user asking the site to use their location to provide better information. The user is now in control, and trust can be built.
Let’s say your site lists locations for a franchise. Typically a call to
navigator.geolocation could be made on page load and a list of nearby locations provided. This has all of the problems discussed above though. Instead, we could provide some default information, or possibly use IP location for an initial filter. In fact, though easily spoofed IP based location can often get you accurate city level granularity, and might be all you actually need.
But let’s continue with this example. Now that the page has loaded, the user has some generic information, but they’d really like more local information. Fortunately you’ve placed a button above the locations list that says “Find a location near me”.
When the user clicks “Find a location near me”, and only then, is
navigator.geolocation used. When the permission dialogue shows up, the user knows exactly why it’s there; they requested it. Personal information is being transfered, but the user is the driver of this exchange, and possesses the power in the transaction.
Sometimes, it’s best said with a Pen
Consider if you will the following CodePen. I’ve written an example of the concepts discussed above: default, generic information is provided using an IP address; UI is provided for the user to request more specific information based on their location, if they should so choose.
It’s a respect thing
By structuring our location based functionality in this way, we’re also expressing an amount of respect for the user. We acknowledge that somebody’s exact location is very personal information, and we’ll only make use of it if the user wants us to, at the user’s request.
The Google Maps exception
I realized as I was writing this that map based applications like Google Maps could be a possible exception; by launching a map the user expects information based on their current location. Having said that, it’s possible Google Maps is one of the only applications that have garnered this expected behavior. If your location map on a company site is Google Maps based,
navigator.geolocation calls should still be user initiated, even though Google Maps itself does call
navigator.geolocation on page load.
In closing, here are 3 simple guidelines to provide user empowered geolocation functionality:
- Only use the geolocation API if you actually need lat/long granularity of accuracy, or need to prevent IP spoofing
- Don’t call
navigator.geolocationon page load
- Only call
navigator.geolocationwhen initiated by the user