Improve the reading experience of footer sections of articles
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	RHo
	Aug 19 2016, 11:19 AM

Description

Problem
Users in previous studies have found it unclear that the 'Read more' related articles are short article recommendations rather than actual articles due to the large size of the card thumbnails, and the length and prominence of the lead paragraph.

Specifically on Android - there are also the following issues:

Missing the Wikipedia word mark branding in the footer
[BUG] 'Read more' section has a nested scroll

Solution – From parent ticket (cross-platform footer design T164105):

Update the design for a more compact presentation of 'Read more' articles (with Android-specific styling applied)
Standardize legal copy and wordmark placement - including addition of the 1dp divider below the wordmark
- Move "View page in browser" to sit below the legal copy (per the shared page-library task T172746)

New 'About this article' footer menu design specific to Android (see task T116841):

Move Last updated <date> link moved to become a new footer menu item
Talk page link moved to become a new footer menu item
Addition of "Available in <#> languages" as a footer menu item
Addition of "View on a map" as a footer menu item, if this metadata exists for an article.

Mock:
Updated Aug 8 2017

Light mode

Article bottom - Light.png (2×720 px, 227 KB)

Dark mode

Article bottom - Dark.png (2×720 px, 244 KB)

Mock in Zeplin

Asset:

wikipedia-wordmark.svg3 KBDownload

Details

	Subject	Repo	Branch	Lines +/-
	Overhaul bottom content.	apps/android/wikipedia	master	+890 -701

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Declined	None	T120730 Enable pinch-to-zoom
Invalid	• Niedzielski	T165439 Integrate footer menu, read more and license transforms into page-library on Android
Resolved	Mhurd	T147728 Switch article footer (read more etc) to use JS injection instead of native overlay
Resolved	cmadeo	T164105 Footer design
Invalid	None	T163839 Phase one: consolidate the JavaScript transforms and associated CSS
Resolved	Mhurd	T164137 Consolidate footer menu, read more and license transforms into page-library
Resolved	Dbrant	T143400 Improve the reading experience of footer sections of articles

Event Timeline

RHo lowered the priority of this task from High to Medium.Aug 19 2016, 11:19 AM

RHo created this task.

• JMinor moved this task from Needs Triage to Templates on the Wikipedia-iOS-App-Backlog board.Aug 22 2016, 6:36 PM

• JMinor moved this task from Templates to Product Backlog on the Wikipedia-iOS-App-Backlog board.Sep 1 2016, 11:59 PM

• JMinor renamed this task from Improve the reading experience of footer sections of Articles to Improve the reading experience of footer sections of articles on iPad.Sep 2 2016, 12:14 AM

RHo added a project: Android Design.Oct 24 2016, 6:34 PM

Restricted Application added a project: Wikipedia-Android-App-Backlog. · View Herald TranscriptOct 24 2016, 6:34 PM

RHo renamed this task from Improve the reading experience of footer sections of articles on iPad to Improve the reading experience of footer sections of articles.Nov 2 2016, 3:29 PM

Dbrant moved this task from Needs Triage to Open Questions/Discussions on the Wikipedia-Android-App-Backlog board.Nov 2 2016, 7:45 PM

• JMinor moved this task from Product Backlog to Design Backlog on the Wikipedia-iOS-App-Backlog board.Nov 3 2016, 9:23 PM

RHo updated the task description. (Show Details)Nov 10 2016, 6:14 PM

• NHarateh_WMF edited projects, added Wikipedia-iOS-App-Backlog (Design); removed Wikipedia-iOS-App-Backlog.Feb 15 2017, 12:09 AM

Restricted Application edited projects, added Wikipedia-iOS-App-Backlog; removed Wikipedia-iOS-App-Backlog (Design). · View Herald TranscriptFeb 15 2017, 12:10 AM

cmadeo subscribed.May 10 2017, 6:20 PM

RHo mentioned this in T164105: Footer design .May 10 2017, 6:28 PM

RHo removed projects: Wikipedia-iOS-App-Backlog, iOS-app-feature-iPad.May 10 2017, 7:25 PM

RHo updated the task description. (Show Details)

RHo edited parent tasks, added: T164105: Footer design ; removed: T132600: Improve the reading experience of Articles on iPad.

Mhurd added a parent task: T164137: Consolidate footer menu, read more and license transforms into page-library .May 11 2017, 6:09 PM

@RHo

I added a parent task so when we migrate the iOS footer JS transforms (for the menu, read more, and legal footer) to the wikipedia-page-library, we can then have Android take a stab at using it as well.

Sharing this transform code means it would be nice if we could keep the platform designs fairly similar, but as I mentioned in the comment here we can already fairly easily customize the bits you asked about.

Here's how the transforms presently look on iOS:
(Tap image for animation)

To be clear, once T164137 is merged Android *could* choose to use the design you see in the image above as-is (with the tweaks you mentioned here) at almost no cost - the menu, read more, and footer transforms are all completely functional.

RHo claimed this task.May 16 2017, 2:32 PM

RHo moved this task from Open Questions/Discussions to Design Doing on the Wikipedia-Android-App-Backlog board.

• Niedzielski added a project: wikimedia-page-library.Jun 12 2017, 8:00 PM

• Niedzielski moved this task from Open to Footer on the wikimedia-page-library board.Jun 12 2017, 8:04 PM

@Mhurd, let's point this next meeting.

@Niedzielski hmm it's unclear to me what decisions product has made around consolidating these presentations.

@Niedzielski ...but I guess that could wait until the Android integration task?

Estimation of this task must occur at least after the initial consolidation and perhaps after Android integration has started. Work early on in integration with Rita. We don't think the customizations requested will be too tricky.

• Niedzielski edited projects, added wikimedia-page-library; removed wikimedia-page-library-tshirt.Jun 20 2017, 8:31 PM

RHo updated the task description. (Show Details)Jul 17 2017, 1:11 PM

RHo updated the task description. (Show Details)Jul 21 2017, 6:15 PM

RHo updated the task description. (Show Details)Jul 21 2017, 6:33 PM

RHo updated the task description. (Show Details)Jul 21 2017, 6:58 PM

RHo mentioned this in T144844: Page screen should include wordmark.Aug 7 2017, 10:35 AM

RHo updated the task description. (Show Details)Aug 8 2017, 5:46 PM

• NHarateh_WMF mentioned this in T172954: "Footer menu" and "Read more" headings in the TOC should be visually distinct from article section headings.Aug 23 2017, 3:41 PM