Show visual indication when tapping on menu items takes users to an external webpage
Closed, ResolvedPublic2 Estimated Story Points
Actions

Assigned To

Authored By

	RHo
	Feb 6 2017, 9:35 PM

Description

Story
As a user who is careful with managing privacy and data usage, I want a clear indication when I'm tapping on navigation within the app when it is actually redirecting me to an external web page.

Problem
Currently there is no visual indicator that selecting the "Support Wikipedia" option in the Explore feed overflow takes them to a external web page. This is especially misleading since the other links (login and Settings) navigate users to other sections within the app.
Similarly certain items in Settings and article footer menu do the same.

Proposed solution
Add an "Open in new" icon to the "Support Wikipedia" item as a commonly understood sign that the item will open as an external link or new area outside the current tab/view.

ic_open_in_new_black_24px.svg294 BDownload

Area with external link	Icon placement and application
"Support Wikipedia" in Explore feed overflow	16dp from RHS edge of overflow menu item; sized: 24x24dp; color: Material theme Secondary color [Light theme: Black@54%]
"Wikipedia app FAQs", "Privacy policy", "Terms of use" menu items in Settings	16dp from RHS edge of screen; sized: 24x24dp; color: Material theme Secondary color [Light theme: Black@54%]
Talk page and Edit history items on the "About this article" footer menu	16dp from RHS edge of card; sized: 24x24dp; color: Material theme Secondary color [Light theme: Black@54%]

Details

	Subject	Repo	Branch	Lines +/-
	Tweak: Show visual indication when tapping on menu items takes users to an external webpage	apps/android/wikipedia	master	+17 -2
	Show visual indication on items take users to an external webpage	apps/android/wikipedia	master	+95 -10

Customize query in gerrit

Related Objects

Mentioned Here: T156018: Show visual indicator when gallery item descriptions contain external links
T107476: External links should be visually identifiable with no interaction

Event Timeline

RHo created this task.Feb 6 2017, 9:35 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 6 2017, 9:35 PM

Dbrant moved this task from Needs Triage to Design Doing on the Wikipedia-Android-App-Backlog board.Feb 8 2017, 4:28 PM

More generic case here: T107476

Gallery case here: T156018

RHo merged a task: T107476: External links should be visually identifiable with no interaction.Mar 6 2018, 9:54 PM

RHo added subscribers: StudiesWorld, Ragesoss.

RHo renamed this task from Show visual indication that tapping on "Support Wikipedia" takes the user to an external webpage to Show visual indication when tapping on menu items takes users to an external webpage.Mar 6 2018, 9:57 PM

RHo triaged this task as Medium priority.

RHo updated the task description. (Show Details)

RHo moved this task from Design Doing to UX Debt Backlog on the Wikipedia-Android-App-Backlog board.

RHo raised the priority of this task from Medium to High.Mar 12 2018, 11:48 AM

• Charlotte set the point value for this task to 2.Mar 12 2018, 5:42 PM

• Charlotte raised the priority of this task from High to Needs Triage.Mar 12 2018, 6:00 PM

• Charlotte moved this task from UX Debt Backlog to Android-app-release-v2.7.24x-H-Hot-pepper on the Wikipedia-Android-App-Backlog board.

• Charlotte edited projects, added Wikipedia-Android-App-Backlog (Android-app-release-v2.7.24x-H-Hot-pepper); removed Wikipedia-Android-App-Backlog.

Dbrant moved this task from Backlog to Ready for dev on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.24x-H-Hot-pepper) board.Mar 14 2018, 4:55 PM

cooltey claimed this task.Mar 15 2018, 3:44 AM

cooltey moved this task from Ready for dev to Doing on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.24x-H-Hot-pepper) board.Mar 15 2018, 6:58 AM

Change 419965 had a related patch set uploaded (by Cooltey; owner: Cooltey):
[apps/android/wikipedia@master] [WIP] Show visual indication on items take users to an external webpage

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

gerritbot added a project: Patch-For-Review.Mar 16 2018, 2:02 AM

cooltey moved this task from Doing to Code Review on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.24x-H-Hot-pepper) board.Mar 16 2018, 3:34 PM

Change 419965 merged by jenkins-bot:
[apps/android/wikipedia@master] Show visual indication on items take users to an external webpage

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

Dbrant moved this task from Code Review to Design signoff on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.24x-H-Hot-pepper) board.Mar 23 2018, 2:14 PM

hi @cooltey, couple of visual tweaks:

In the Settings screen, the height of menu items with the external link icons has taller than expected

there are no external link icons on relevant items in the 'About this article' footer menu:

Expected:

Actual:

Change 424711 had a related patch set uploaded (by Cooltey; owner: Cooltey):
[apps/android/wikipedia@master] Tweak: Show visual indication when tapping on menu items takes users to an external webpage

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

cooltey moved this task from Did not pass QA to Code Review on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.24x-H-Hot-pepper) board.Apr 6 2018, 9:50 PM

Change 424711 merged by jenkins-bot:
[apps/android/wikipedia@master] Tweak: Show visual indication when tapping on menu items takes users to an external webpage

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

cooltey moved this task from Code Review to Design signoff on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.24x-H-Hot-pepper) board.Apr 9 2018, 5:40 PM

LGTM on Pixel 2 (8.1) v2.7.231-alpha-2018-04-12. Moving to QA to check on a few more devices

Looks good on 2.7.231-r-2018-04-09.

@RHo, I am curious about the 'view on a map'. This link goes to your device mapping app (or asks for permission). Should it also have an icon?

that's a good point @ABorbaWMF but think we are fine to not show since the icon is being used when we send users to an external browser link in menu items, which is useful for example when the user may be offline, as it helps save opening a no connection page. Users can be offline and tapping on the map icon will still open properly in the Maps app with the geocoordinates.

Dbrant closed this task as Resolved.Apr 27 2018, 3:59 PM

	F16762769: image.png
	Apr 6 2018, 6:36 PM

	F16762856: image.png
	Apr 6 2018, 6:36 PM

	F14548088: image.png
	Mar 6 2018, 9:57 PM

	F14549295: image.png
	Mar 6 2018, 9:57 PM

Show visual indication when tapping on menu items takes users to an external webpageClosed, ResolvedPublic2 Estimated Story PointsActions

Description

Details

Related Objects

Event Timeline

Show visual indication when tapping on menu items takes users to an external webpage
Closed, ResolvedPublic2 Estimated Story Points
Actions