Special:Nearby lacks to show purpose of the feature to the user
Closed, ResolvedPublic3 Estimated Story Points
Actions

Assigned To

Authored By

	• bmansurov
	Feb 4 2016, 2:23 PM

Description

The nearby page is a little confusing. It requests users location right away before they can work out if they want to do that.

Goals

Provide a purpose of the feature to the user, to set expectation of what happens when they give location permission
Location permission CTA should be an explicit consent

On first page load there should be a text telling the user to allow the browser to share the location with the site. T120520 is similar, but this point is a little different. This is a call to action asking the user to share their location. The aforementioned task is a general intro about the page (I think).

Design

nearby-empty state.png (1×750 px, 114 KB)

Empty state: zpl.io/V1ZpdZ5
Flow: https://wikimedia.invisionapp.com/freehand/document/mpWCcVzXQ
Copy for confirmation/error message: You have denied access to Location Services for “https://en.m.wikipedia.org”. To change this please visit your browser or device settings.

SVG

nearby-article-illustration.svg6 KBDownload

Acceptance criteria

When the user has an old browser or is not running JS, the "show nearby articles" button will be disabled.
On a first visit 3 clicks to get to nearby results (1: click menu item, 2: click button, 3: give browser permission).
On a second visit it would be 2 clicks (steps 1 and 2).
A geolocation permission warning is _not_ printed to the console:

[Violation] Only request geolocation information in response to a user gesture. https://en.m.wikipedia.org/w/extensions/MobileFrontend/resources/mobile.nearby/Nearby.js?38c95
getCurrentPosition	@	Nearby.js?38c95:93
refresh	@	Nearby.js?38c95:265
Nearby	@	Nearby.js?38c95:32
refresh	@	nearby.js?0c69a:69
refreshCurrentLocation	@	nearby.js?0c69a:103
matchRoute	@	oojs-router.js?f0f4f:29
(anonymous)	@	oojs-router.js?f0f4f:94
each	@	load.php?debug=true&…version=09gt2zl:368
Router.checkRoute	@	oojs-router.js?f0f4f:93
(anonymous)	@	nearby.js?0c69a:115
mightThrow	@	load.php?debug=true&…ersion=09gt2zl:3583
process	@	load.php?debug=true&…ersion=09gt2zl:3651

Previous history of this task

We fixed the following things:

Upon visiting https://en.m.wikipedia.org/wiki/Special:Nearby you'll see a permission dialog to access your location. If you block or ignore the dialog you'll keep seeing the spinner in the middle of the page. When blocked, there should be some text informing the user about it.
Similarly on the desktop site the text "Loading..." shows but never disappears. The hidden class applies but there is no equivalent css rule to hide this on desktop.

Developer notes

Use mw-ui-icon and mw-ui-icon-large

Open questions

@Nirzar to add asset

Details

Related Changes in Gerrit:

Subject	Repo	Branch	Lines +/-
Hide the Landing page when presenting /page/{page} route	mediawiki/extensions/MobileFrontend	master	+10 -2
Remove the refresh button on Nearby	mediawiki/extensions/MobileFrontend	master	+0 -63
Show overlay when quering geolocation/mwapi	mediawiki/extensions/MobileFrontend	master	+10 -10
Introduce landing page for Special:Nearby	mediawiki/extensions/MobileFrontend	master	+206 -181
Hygiene: Refactor Nearby.js by introducing the LocationProvider	mediawiki/extensions/MobileFrontend	master	+69 -44
Hygiene: Refactor Nearby.js by introducing the LocationProvider	mediawiki/extensions/MobileFrontend	master	+204 -170
Show Special:Nearby error messages correctly	mediawiki/extensions/MobileFrontend	master	+4 -2

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Open	None	T169162 [Epic] Improve special page template on Minerva
Resolved	None	T169379 Update and adopt new special page template for remaining special pages (Contributions, Nearby, History and Watchlist)
Open	None	T96040 Wikibase special pages (tracking)
Duplicate	None	T120520 [Story] make it easier to understand what Special:Nearby is
Resolved	• Nirzar	T125820 Special:Nearby lacks to show purpose of the feature to the user
Resolved	aude	T138478 "Loading..." text is never hidden on Special:Nearby after loading is done

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Jdlrobson moved this task from Needs Prioritization to Design on the Web-Team-Backlog-Archived board.Jun 2 2017, 8:46 PM

Jdlrobson edited projects, added Web-Team-Backlog-Archived (Design); removed Web-Team-Backlog-Archived.

Jdlrobson updated the task description. (Show Details)Jul 10 2017, 11:35 PM

Jdlrobson updated the task description. (Show Details)Jul 10 2017, 11:37 PM

Jdlrobson updated the task description. (Show Details)

• bmansurov unsubscribed.Dec 22 2017, 9:50 PM

Jdlrobson raised the priority of this task from Low to Medium.Feb 22 2018, 5:29 PM

Jdlrobson merged a task: T120520: [Story] make it easier to understand what Special:Nearby is.

Jdlrobson added subscribers: Lydia_Pintscher, aude, Mbch331.

Would we only render the nearby results once the user clicks "Show nearby articles"?

Yes.

On a first visit 3 clicks to get to nearby results (1: click menu item, 2: click button, 3: give browser permission).
not unreasonable :)

On a second visit it would be 2 clicks (steps 1 and 2)
correct

Just need some assets nirzar!

my time to shine!!

Jdlrobson updated the task description. (Show Details)Feb 22 2018, 9:45 PM

Jdlrobson updated the task description. (Show Details)

Jdlrobson moved this task from Incoming to Needs Prioritization on the Web-Team-Backlog-Archived board.Feb 22 2018, 10:20 PM

Jdlrobson moved this task from Needs Prioritization to Triaged but Future on the Web-Team-Backlog-Archived board.Feb 24 2018, 12:01 AM

Jdlrobson updated the task description. (Show Details)Feb 28 2018, 5:18 PM

ovasileva moved this task from Triaged but Future to Upcoming on the Web-Team-Backlog-Archived board.Feb 28 2018, 5:20 PM

Maybe this will side effect fix the warning in T188475.

ovasileva set the point value for this task to 3.Feb 28 2018, 5:21 PM

• Niedzielski updated the task description. (Show Details)Feb 28 2018, 6:34 PM

• Niedzielski merged a task: T188475: [Bug] Nearby frequently cannot display places.

Raising to high priority since the merged in task was high.

Jdlrobson added a project: Readers-Web-Kanbanana-Board-Old.Feb 28 2018, 11:01 PM

Jdlrobson moved this task from Upcoming to 2017-18 Q3 on the Web-Team-Backlog-Archived board.

• Nirzar updated the task description. (Show Details)Feb 28 2018, 11:14 PM

ovasileva moved this task from To Do to Needs Design Review on the Readers-Web-Kanbanana-Board-Old board.Mar 1 2018, 6:16 PM

pmiazga claimed this task.Mar 6 2018, 8:14 PM

pmiazga moved this task from Needs Design Review to Doing on the Readers-Web-Kanbanana-Board-Old board.

When the user has blocked permissions for providing geolocation the "show nearby articles" button will be disabled.

just curious about this point. if user not given permission, particularly blocked it, this button serves as a purpose to request for permission?

Change 417457 had a related patch set uploaded (by Pmiazga; owner: Pmiazga):
[mediawiki/extensions/MobileFrontend@master] Introduce landing page for Special:Nearby

https://gerrit.wikimedia.org/r/417457

gerritbot added a project: Patch-For-Review.Mar 8 2018, 10:18 PM

Change 418027 had a related patch set uploaded (by Pmiazga; owner: Pmiazga):
[mediawiki/extensions/MobileFrontend@master] WIP: Introduce LocationProvider class

https://gerrit.wikimedia.org/r/418027

• alexhollender_WMF subscribed.Mar 12 2018, 5:10 PM

• Nirzar renamed this task from Special:Nearby does not give correct feedback to Special:Nearby lacks to show purpose of the feature to the user.Mar 12 2018, 5:40 PM

• Nirzar updated the task description. (Show Details)

no one here answered about the the first AC here!

When the user has blocked permissions for providing geolocation the "show nearby articles" button will be disabled.

This was not intended. @pmiazga @alexhollender and I talked about this just now and Alex will be adding a quick flow of this use-case

cc @ovasileva

@Jdlrobson we are okay with hiding the title on empty state. the flow should be empty page > tap button > see browser dialog (while empty state is in the background) > say yes > hide empty state, show title and list

@pmiazga attempting to clarify the desired behavior — see here: https://wikimedia.invisionapp.com/freehand/document/mpWCcVzXQ

• alexhollender_WMF added a comment.Mar 13 2018, 5:18 PM

This comment was removed by • alexhollender_WMF.

In T125820#4044063, @Nirzar wrote:

no one here answered about the the first AC here!

When the user has blocked permissions for providing geolocation the "show nearby articles" button will be disabled.

This is not in the acceptance criteria. Does that not answer the question ? :)

Jdlrobson updated the task description. (Show Details)Mar 13 2018, 5:34 PM

that's cheating!

Change 419327 had a related patch set uploaded (by Pmiazga; owner: Pmiazga):
[mediawiki/extensions/MobileFrontend@master] Hygiene: Refactor Nearby.js by introducing the LocationProvider

https://gerrit.wikimedia.org/r/419327

Change 419327 abandoned by Pmiazga:
Hygiene: Refactor Nearby.js by introducing the LocationProvider

Reason:
Wrong push

https://gerrit.wikimedia.org/r/419327

• alexhollender_WMF updated the task description. (Show Details)Mar 14 2018, 2:36 PM

• alexhollender_WMF updated the task description. (Show Details)

@pmiazga I updated the copy for the message: You have denied access to Location Services for “https://en.m.wikipedia.org”. To change this please visit your browser or device settings

@pmiazga pointed out that there's another case to design for:
User taps "allow" > but we are unable to determine their location (error.POSITION_UNAVAILABLE)

I updated the designs to cover this flow. Copy for the error message is: Wikipedia Nearby cannot determine your location. Please try again with a better signal.

Change 418027 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Hygiene: Refactor Nearby.js by introducing the LocationProvider

https://gerrit.wikimedia.org/r/418027

Change 419525 had a related patch set uploaded (by Pmiazga; owner: Pmiazga):
[mediawiki/extensions/MobileFrontend@master] Show overlay when quering geolocation/mwapi

https://gerrit.wikimedia.org/r/419525

ReleaseTaggerBot added a project: MW-1.31-release-notes (WMF-deploy-2018-03-20 (1.31.0-wmf.26)).Mar 14 2018, 9:00 PM

Both patches have +2s but are blocked on my patch ( https://gerrit.wikimedia.org/r/#/c/419521 )

Change 417457 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Introduce landing page for Special:Nearby

https://gerrit.wikimedia.org/r/417457

Change 419525 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Show overlay when quering geolocation/mwapi

https://gerrit.wikimedia.org/r/419525

Jdlrobson moved this task from Needs Code Review to Needs QA on the Readers-Web-Kanbanana-Board-Old board.Mar 15 2018, 1:21 AM

Nirmos mentioned this in T189818: Special:Nearby regression in #/page/{title} route.Mar 15 2018, 9:07 PM

I created T189818 about the race condition you have introduced.

Ready for testing.
http://reading-web-staging.wmflabs.org/wiki/Special:Nearby?useformat=mobile
ping @Nirzar @Alex

Looks good to me on staging

The notifications are missing
I could not test the main workflow here since dev wiki can't determine location. the transition from accepting location vs not accepting

@ABorbaWMF this is not ready either

The notifications are missing
I could not test the main workflow here since dev wiki can't determine location. the transition from accepting location vs not accepting

Not sure what this means.
Are you sure you are using https? It's working fine for me. https://reading-web-staging.wmflabs.org/wiki/Special:Nearby

The notifications are missing

the notification count is missing in the header as you can see in the screenshot. I'm assuming that space is reserved for refresh icon when the permission is given but at the empty state, either the search icon should move to the right or we should show notification. the search icon looks like it's floating out of no where.

Third option is keeping the refresh button as it is but disabling it.

Are you sure you are using https? It's working fine for me. https://reading-web-staging.wmflabs.org/wiki/Special:Nearby

https! worked for me now. didn't know we need to add https for location permission to work.

the flow can be tested and looks good.

Change 420126 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Remove the refresh button on Nearby

https://gerrit.wikimedia.org/r/420126

e notification count is missing in the header as you can see in the screenshot.

Ah got it! The easiest thing to do would be to remove the refresh button altogether. It's a bit of a weird button... It's only really useful if you are on a moving vehicle. That would be Remove the refresh button on Nearby .

If we want to to keep it, we'll need to invest a bit more work here and work out how it behaves when the user has shared a URL, as the workflow seems broken on https://reading-web-staging.wmflabs.org/wiki/Special:Nearby?useformat=mobile#/coord/41.383611,2.182222 and its undocumented in the code. Even if we'd that I'd prefer to remove it and then work on this next week. If it's important we'll have to revert all the changes and start this task again. @ovasileva / @Nirzar
what would you recommend.

https! worked for me now. didn't know we need to add https for location permission to work.

Yeh... geolocation now requires https. We only ever use https in production this will not be a problem.

Daniel_Mietchen subscribed.Mar 17 2018, 10:59 PM

I would be okay with removing it, but will leave it up to @Nirzar and @alexhollender to make the final call. Let's talk about this during standup today.

@ovasileva Let's get rid of it.. we can bring that feature back when we work on special pages to have call to action. as of now the refresh button is not even in the right place.

Jdlrobson moved this task from Needs More Work to Needs Code Review on the Readers-Web-Kanbanana-Board-Old board.Mar 19 2018, 5:29 PM

Change 420126 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Remove the refresh button on Nearby

https://gerrit.wikimedia.org/r/420126

Change 420393 had a related patch set uploaded (by Pmiazga; owner: Pmiazga):
[mediawiki/extensions/MobileFrontend@master] Hide the Landing page when presenting /page/{page} route

https://gerrit.wikimedia.org/r/420393

Change 420393 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Hide the Landing page when presenting /page/{page} route

https://gerrit.wikimedia.org/r/420393

Over to you. Staging is up to date.

Macro votecat: looks good

I tested this on slow internet connection.. 3mbps. and we need a spinner while we fetch the list of articles. right now, i only see "Nearby" as a title and nothing happens for 5-7 seconds and then you see the list. let's create a followup for that @alexhollender

Jdlrobson mentioned this in T204876: [Bug - development NOT production] Nearby TypeError when using JSONPForeignApi.Sep 19 2018, 9:42 PM

	F14126875: nearby-article-illustration.svg
	Feb 28 2018, 11:14 PM

	F15616721: image.png
	Mar 16 2018, 7:33 PM

	F15615311: image.png
	Mar 16 2018, 7:12 PM

	F15615261: image.png
	Mar 16 2018, 7:12 PM

	F15615345: image.png
	Mar 16 2018, 7:12 PM

Special:Nearby lacks to show purpose of the feature to the userClosed, ResolvedPublic3 Estimated Story PointsActions