Improve "Set my location" user experience

I would be happy with simply a loading indicator. Like "getting your location ... [loading animation]

I agree this workflow is not workable in the real world. Instead of submitting the form (IPGV&M: Set my location form) can't we call ip_geoloc_get_visitor_location(); with ajax? We could then show the users a loading indicator (using progress =>TRUE) until that function returns and then and only then reload the page?

/**
 * Implements hook_form_alter()
 */
function MYMODULE_settings_form_alter(&$form, &$form_state, $form_id) {
  switch($form_id) {
    case 'ip_geoloc_geocode_address':
      // Make some changes on the Set my Location Block
      $form['new_button'] = array(
        '#type' => 'button',
        '#value' => 'Set Location (AJAX call)',
        '#ajax'=> array (
          'callback' => 'ip_geoloc_get_visitor_location();',
          'progress' => TRUE,
        ),
      );
    break;

PS i have literally been waiting for this module for years but it seems like it's been here all the time! Brilliant module guys.

Agree with comments above. Thinking about this while also cross-referencing #2435503: getCurrentPosition() returned error 3....

Re #2: "... have literally been waiting for this module for years but it seems like it's been here all the time! Brilliant module guys....".
Thank you, Lee. This may be because the name of this module is so crap! But now we're stuck with it....

I agree with the original poster and Lee in #2 that currently visitor position retrieval and page refresh aren't as smooth as I'd like them to be.

Something along the lines of the code in #2 could be a valid approach.

However, keep in mind that the PHP function ip_geoloc_get_visitor_location() mentioned in the code example does not make the ultimate Javascript call, getCurrentPosition(), that returns the user's Wifi or satellite-based location.

Where is this done?
When instructed (either by a timer or by the user) to (re)fetch the visitor's location, the module inserts through drupal_add_js(), some (invisible) javascript at the top of the page, which contains the getCurrentPosition() call, that it sends to the browser. This is the initial page load. Currently it is just reloading the page as is with the extra javascript. To make it clear that the module is now waiting for a location update from the visitor's mobile or laptop, we could make the screen go white, with on it a "Please wait" message and/or something spinning. But making the screen go blank and unusable is not so user-friendly either...

After a while the browser asynchronously (i.e. through AJAX) sends the updated visitor location to the Drupal site and it responds with refreshing the page, executing Views maps and filters, using the new location.

I am aware there are some slick maps with location update mechanisms out there, but the solutions I've seen do everything in javascript. With Drupal we can't do everything localised to just the javascript as we have to tell the server/PHP code (in particular the Views, both map and tabular) that we have a new visitor location to work with, to centre maps, to filter distance by etc. We need to do a lot more than simply move the visitor marker on the map.

Would love to fix this. Open for suggestions.

In the mean time, I have implemented a version of AlfTheCat's suggestion in #1.

It's just a simple message "Locating you now. Please wait a few seconds...".
It doesn't have any fancy animated throbbers etc. yet. Let's first see whether this cheap fix alleviates things and could potentially mark a direction for a solution.

Check out today's IPGV&M 7.x-1.x-dev.

Rik

I'll hopefully try that out tomorrow Rik

Screenshot in Safari for the case where the visitor hasn't given permission to share location yet.

The Safari popup on this test site partly covers the "Set my location" block that has the "Find me" button that was just pressed.

Rik, the recent commit does what you had set out for it to do in terms of displaying the message. My main issue i see with this is that the page is still being refreshed because of the form submit, can't we use an ajax call in #2 and then refresh after say 3-5 seconds? As far as i can see the submitting of the form does nothing more than call ip_geoloc_get_visitor_location(); therefore let's do it with ajax...wait...then refresh.

Re #8

Hi Lee,

I believe there is more to it then just that call ip_geoloc_get_visitor_location(), as I tried to explain in #4.
But I also believe that with your suggestion from #2 we're on the right track.

Basically pressing "Go" while the "Find me" option is selected should result in a sequence of 2 AJAX calls and a page refresh at the end of it that picks up the new-found visitor position prior to re-loading the page.

Phew!

Rik

Agree that #2 seems the best way to go, if feasible.

Would it be possible to have a variable status message?

Alf what do you mean by variable status message?

I was thinking that, with this process being quite critical to the UX when the website centers around a map, it would be nice to have customization options for the progress message (or perhaps even colorbox support so you could have a modal with some fancy html "sit tight for a few seconds while we find you" message).

Still working on the "fancy" bits (configurable progress message?), but for now the actual reloading process is already improved with my latest checking.

An AJAX call is used to download a few lines of essential JS to the browser, while at the same time starting a throbber with the text "Please wait...". The remainder of the page remains unchanged, until the the Wifi/GPS location comes through from the browser/device at which point a full page refresh is executed that takes into account the new location, as Views, blocks, tables, maps may have changed as a result of the updated visitor location.

Give it a spin and let me know if I'm on the right track...

Rik

Going to give it a spin today, it sounds awesome.
I'm also curious what happens if someone's on a PC with lan, so no way other that throught the IP address to detect a location.

@AlfTheCat, #15
For that you need to enable either the Smart IP or GeoIp modules. IPGV&M will automatically fall back on whichever one is enabled.
Rik

PS1: when you do all this experimentation it is a good idea to switch on IPGV&M's debug mode on the IPGV&M config page, bottom fieldset.
PS2: in the browser console the JS prints out how long it took the device to getCurrentPosition() and how long to reverse-geocode that position to a street address, using Google.

@RdeBoer #15
I've got both those modules enabled, I was just wondering, before I tried the latest dev, if the message would show when on a pc without wifi/ gps. But now that I've tried it, that's clear. Thanks for the debug tips. I didn't know about the browser console showing getCurrentPosition() data. Nice!

@RdeBoer #13
I love the improvements. It's a good idea to move the "find me" radio button into an actual button. The locating text is awesome.
My thoughts are that:

• The "locating you now" text should show on page load. That's I think where a lot of possible confusion can happen (hence my colorbox idea), where the page doesn't indicate something is happening in the background, and then it suddenly refreshes, probably just when people are entering their address manually.
• I think the remaining radio button should go now that we've got these improved buttons

Hope it helps, it's cool to see this evolve so nicely :)

Sidebar: using Jquery Loadinganimation does improve the UX I think (you can override the CSS). It's worth a try.

Hi AlfTheCat,

Thanks for the link to https://www.drupal.org/project/jquery_loadinganimation. I'll see if I can implement that or something like that.

Re: " I think the remaining radio button should go now that we've got these improved buttons"
You can do that by entering none in the label field.
The button is still relevant when the block is configured to also have a Region selector, see screenshot:

The "Locating you now" text should show on page load."

I think it is. What happens is this:

1) User presses "Find me" (or "Locate me" or whatever you decided to put as a label on that button).

2a) Invisible to the visitor, the module sends, via AJAX, a few lines of javascript to the browser to instruct it to engage its Wifi/GPS device to return its position (as lat/lon) and also to contact Google to reverse-geocode the lat/lon into a street address; the step of sending is so short (I reckon less than a third of a second on my laptop) that I suppressed the throbber and "Please wait" message, as it was nothing more than a flicker so short that I could not read it. It just confused me. So currently for one third of a second after pressing the button, nothing appears to happen, while the AJAX is doing its thing. I have found this a more fluid behaviour than having a throbber spinning for on third of a second.

2b) After this split second, the browser is working in the background to retrieve the current position, which on my system takes just over 3 seconds (unless I had already asked for its location less than 30 seconds before, in which case the browser returns that old position in less than a second). With this 3-second process being kicked off and proceeding in the background the AJAX has already updated the form inside the "Set my location" block. The only thing it changes on the form is putting up that "Locating you now" message.

3) When that 3 seconds or so has elapsed and the browser has acquired the new position, it informs the server of the new lat/lon and, if configured to do so, also included in the same asynchronous call, the street address obtained from Google.

4) The server receives the browser call and refreshes the page, using the new location. Depending on how complex that page is, add another 2-4 seconds of refresh time.

5) The "Locating you now" message remains visible throughout steps 2b) to 4), until the page refresh erases it.

Is this what you are seeing as well?
How do my timings compare to yours?

Rik

https://www.drupal.org/project/jquery_loadinganimation is a fine piece of engineering, but if it takes over the screen and does not allow the user to move to another page while the animation is in progress then it doesn't quite suit our needs. This is because with IPGV&M's "Set my location" block you can move away to another page while your location is being established in the background. When that update location comes in it will simply be the new page you are on that will be refreshed, using the new location.

So I've tweaked the UX a little more. In the latest 7.x-1.x-dev it goes like this:

During step 2a (see above in #19), i.e. during that first 0.3 seconds, a throbber appears. But no text. I did this to minimise "flicker/jolting" of the screen.
Then after 0.3 seconds the throbber continues and a message appears: "Locating you ...".
Then when the page refresh is complete, throbber and message are erased.

There is still a small flicker when the second AJAX form update comes in. You can probably minimise this further with the use of CSS. It may be theme-dependent too.

The throbber used is just core's throbber. You could override it with your own animated .gif or similar by overriding in your theme core file module/system/system.base.css.
Or use a module similar to https://www.drupal.org/project/jquery_loadinganimation

Ok, understood. It sounds like solid reasoning. I guess the difference in use case is that in my case the homepage contains the map and the site centers around the concept of mapping stuff. The homepage has a map and a proximity based view with exposed filters, therefore it's important for people to understand that their location is being retrieved before they start using the filters, for they will reset as the page reload comes in. They aren't expected to navigate away to other pages whilst the location comes in. In this case the jquery_loadinganimation can come in handy.

Re: " I think the remaining radio button should go now that we've got these improved buttons"
You can do that by entering in the label field.
The button is still relevant when the block is configured to also have a Region selector, see screenshot:

I think in some cases it desirable to remove the "move me" radio (I don't have a region dropdown atm), for instance, my widget now looks like the screenshot: .
Although

div#edit-fixed-address {
  display: none;
}

does that trick.

Yes totally agree that there should be an option to suppress the "Move to" radio button.
You can do that through CSS like you showed or you can type "none" in the text field for the label on the config panel of the Set My Location block.

Do you feel I need to add/change anything before cutting a new release?

PS have you tried adding Leaflet More Maps to your current setup?

Ah, nifty, I didn't know about the "none" part :)

Yeah I've installed the leaflet more maps module but haven't had time to go through all of the extra maps. But I will, some of them look amazing.

To me it's looking good, I like the fact that the throbber can be overridden and the "locating you now" text is cool. Putting a landing page in front of the actual map page is also a good way to buy time whilst the user is being located. The Loading animation can cover other (edge) cases. So lots of ways to get to Rome, looks like excellent work!

Thanks for the feedback Alf!
If there aren't too many other issues in the IPGV&M issue queue then I hope to get this out as part of the next official release 7.x-1.27 in the next few days.
Rik

Awesome, thanks for all the good and hard work gone into this module, am happy to contribute wherever I can!

One note though, but maybe its in my theme... I still only get the "locating you" text when I press the "Find me" button. When I just surf to the page containing my map, no indication is visible that the user's location is being determined, there's just a full page refresh after a few seconds and the map updates.

Is that the same on your side or is this behavior unexpected?

I get the spinning indicator although i'm sure when i tried this last time it wasn't there. Maybe a rebuild fixed that for me.

@leewoodman:
Yes that's correct. I put out a newer version of 7.x-1.x-dev. Thanks for confirming that the spinning throbber + "Locating you..." message work for you when you press "Find me".

But @AlfTheCat's comment is, I think (please confirm Alf), about a slightly different scenario. It's about the periodic (e.g. every 60seconds) refresh of the geolocation that you can opt to have, if so configured on the IPGV&M configuration page. This does, in this version, indeed NOT produce a spinning throbber and message. This is because the process is a little different. It is initiated from the server based on a timer, not from the client. It is not AJAX initiated, although the page refresh that follows after a few seconds is.

I could put a spinning throbber up in this second case as well, I think... let me go away and investigate what would be involved..

Rik

What is the reasoning behind waiting for the user to manually press the "Find me" button? When used with a map view, it is just adding an unnecessary step. It is also a bit cumbersome to have to place the block on the same page as the View.

It would be nice if, upon visiting the View, the user is automatically prompted to allow for location detection. Currently, I am writing some js to auto-submit the form so that the user to automatically asked to share their location.

@RdeBoer #29

Yes indeed, I have an interval specified for the location refresh to happen, for I found that when I don't enable this feature, upon visiting the location view, the user location does not get retrieved unless the "find me" button is pressed.

Again I think there are two scenarios, one is where the homepage of a site does not contain a map, but consists of a landing page that attempts to fetch the visitor's location in the background. By the time the user clicks through to the actual location based view, the location is either already captured or there is now a definitive need for the user to supply it manually. This approach requires fewer visual explanation of what the site is doing/ what is happening.

Then there is the second approach, where the homepage contains the location based view. Here spinners and status messages are required because unsuspecting visitors need to be aware something is happening to determine their locations and whatever information they see now is waiting to be refreshed.

All in all, I think the first scenario provides the best user experience at this time, it's quite tricky to get the second scenario fully covered. Drupal also just isn't great at that sort of stuff (fancy overlays, loading indicators, etc).

Another benefit of having a landing page without a location based view is that it will load quicker and that is an important SEO vector.

@jlongbottom #30

There are a few scenarios:

• The visitor is connected through a lan cable and no wifi/ GPS is available. Ip based location discovery will be very approximate so the visitor might want to correct the determined location
• The user wants to move himself on the map, see distances in a proximity view from another location than his / her own.
• The visitor declined to share his/ her location when initially prompted, but now wants the views to be aware of it after all
• For other reasons the location discovery timed out or didn't work and there's a need to try and re-establish it
• Webmasters do not want to prompt visitors for a location right away, only on demand.

I really like the "move me" feature by the way, it's very intelligent and convenient.

@jlongbottom #30

In regards to the necessity of the block... If you configure the module to periodically retrieve the location (set any interval you like) it will automatically attempt to retrieve the user location on first visit, no need to press the button.

@AlfTheCat #32-33

Thanks for the quick reply. That clarifies it for me.

@RdeBoer

Great module, keep up the good work!

@jlongbottom, #30:
"I am writing some js to auto-submit the form so that the user to automatically asked to share their location."
@AlfTheCat, #31:
I have an interval specified for the location refresh to happen, for I found that when I don't enable this feature, upon visiting the location view, the user location does not get retrieved unless the "find me" button is pressed.

Are you both aware that you can enter "0" for the periodic interval?
In this case the location is only auto-retrieved once when the user first visits the site.
After that the user can still manuallly press "Find me" or "Move me" as much as they like, of course.

On the other hand, if visitors to your site tend to move as they're using the site (e.g. like https://foursquare.com/), then a periodic refresh (i.e. using a number greater than 0) is a good idea.

@AlfTheCat, #32: Thanks for explaining the various scenarios.

Rik

Added example of CSS for an alternative, bigger throbber, taken from CTools.
See ip_geoloc/css/ip_geoloc_all.css

Some more inspiration for throbbers may be found in Views Sexy Throbber, http://drupal.org/project/views_sexy_throbber

Awesome, thanks so much Rik!