Page MenuHomePhabricator

Standardize footer across mobile apps with addition of an "About this article" footer menu
Closed, ResolvedPublic1 Estimated Story Points

Description

User story

As a reader I don't want my interface cluttered with unnecessary information. I want a consistent place to find meta information about the article.

Problem

Currently the placement and access to different article metadata is inconsistent across platforms. There are links out to browser on Android for Talk and Edit history, whilst iOS uses an "About this article" footer menu which navigates to article disambiguation, read-only edit history,etc all in-app.

Proposed solution

Standardize the availability and placement of the various article metadata across Android and iOS.
On Android, this means adding a new footer menu after the article content area called "About this article" as well as including it as a new section in table of contents drawer.

Note: Changes to iOS documented below have been separated into related subtasks.

Status (Android)Article itemAndroid (currently)iOS (currently)Proposed
DoneView in browserlink out on footerdoes not existAppear on iOS and Android as link out under legal disclaimer (Android: move placement; iOS: add this link - T172746)
Update text string to be View talk pageTalk pagelink out on footer to mobile browserdoes not existAndroid: Add to "About this article" footer menu on both with link out to browser icon initially. iOS: File ticket to do the same as Android - T172747. Additionally, file ticket to have in-app Talk page (for both apps)
Update text string of the main action text to be View edit historyEdit historylink out on footer to mobile browseron footer menu, opens in-app read-only versionAndroid: move to footer menu with link out icon initially. Additionally, file ticket to have in-app editable 'Edit history' page (for both apps)
Update menu item to show a text string for the main action text as Read in another language, with the subheading showing ''Available in <#> other languages'Available languagesdoes not existon footer menu, opens in-app popoverAndroid: add to footer menu (opening the same languages screen as when language icon tapped on article toolbar)
DoneView on a mapdoes not existon footer menu, opens in-app popoverAndroid: Add to footer menu
n/aSimilar pages (i.e., disambiguation) - eg. Scientology articlenot in footer, shown in article overflow menu, opens as a bottom sheeton footer menu, opens in-app popoverLeave as status quo until cross-platform design of this section (see related task T143535). Note: There is a separate bug on Android to add hatnotes to the article (see T172686)
n/aPage issues - eg. Scientology articlenot in footer, shown in article overflow menu, opens in a bottom sheeton footer menu, opens in-app popoverLeave as status quo until cross-platform design of this section (see related task T143535)

Mocks

Light mode
Article bottom - Light.png (2×720 px, 231 KB)
Dark mode
Article bottom - Dark.png (2×720 px, 249 KB)

Mock in Zeplin

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
KHammerstein raised the priority of this task from to Needs Triage.Oct 27 2015, 9:47 PM
KHammerstein subscribed.
KHammerstein set Security to None.

The word "page" is repeated too much.. we can work on wording.

Regarding the location of displaying Content issues of an article, please take a look into T158307.

RHo renamed this task from Restyle footer to include page issues and disambiguation to Standardize footer across mobile apps with addition of an "About this article" footer menu.Aug 7 2017, 11:36 AM
RHo updated the task description. (Show Details)
RHo removed a subscriber: KHammerstein.

@RHo The overall design of the mock looks nice! I had just one suggestion to make about the usage Edit history. At first glance, I mistook it for an option to edit the history! I guess that's because it's different from the wordings used in the web (View history). I suspect there might be others like me out there.

Is it possible to replace Edit history with something else? How about Article history?

thanks @Kaartic - yes, since the page in mweb is "Page history", "Article history" seems a good fit. Updated mocks.

Although I personally prefer the word "article," I recommend phrasing it as "Page history" since all articles are pages but not all pages are articles. We've been trying to do this in the codebase too!

Hi @Niedzielski - since this is being shown in the "About this article" footer menu, shouldn't it be fine to use 'article history' here?

since this is being shown in the "About this article" footer menu

That's the reason I thought Article history was a good fit, too.

@RHo, ah, would it be better to reword the footer menu header since this will appear on non-article pages?

@Niedzielski – ah did not realize that the about this article menu would appear on non-article pages as well. Just had a quick design pow-wow with @Nirzar and @cmadeo and made the following updates:

  • Copy changes to footer menu:
    • About this article -> More information
    • footer menu items reworded to be uniform actions to take (Read in another language, view edit history, etc)
    • Additional metadata on a menu item shown as secondary text (ie. "Available in X other languages" and the "Last updated time elapsed")
  • Styling changes - both sections are rendered the same way as separate flush cards to distinguishes article content (everything that can be edited in an article) rendered separately.

@RHo The new change looks nice except for one place in my opinion,

  • About this article -> More information

The phrase More information seems to be misleading when the page is an article as talk pages and edit history don't always give more information about the article. I guess something general and agnostic of where it's being shown would do? How about Related information (or) Related links ?

BTW, this is just my humble opinion.

Whilst the "About this article" footer menu is largely implemented, there are some visual design deviations in the mocks shown in the description and Zeplin, namely:

  • Menu titles should all be written as actions (eg. "View talk page" rather than "Talk")
  • Icons should be updated

Actual:

image.png (1×1 px, 193 KB)

RHo triaged this task as Medium priority.Mar 6 2018, 4:11 PM

There are just some copy changes and the addition of hatnotes and page issues as menu items to be done on this task.

Charlotte set the point value for this task to 1.Mar 12 2018, 5:45 PM

Whilst the "About this article" footer menu is largely implemented, there are some visual design deviations in the mocks shown in the description and Zeplin, namely:

  • Menu titles should all be written as actions (eg. "View talk page" rather than "Talk")
  • Icons should be updated

Actual:

image.png (1×1 px, 193 KB)

@RHo Are these the only changes to be done on this ticket for Android?

hey @Sharvani - yes, please refer to the first column of the task description which describes the remaining text items for this ticket.
As for the icon updates, they are here:



Change 421426 had a related patch set uploaded (by Sharvaniharan; owner: Sharvaniharan):
[apps/android/wikipedia@master] Standardize footer text and icons:

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

Change 421426 merged by jenkins-bot:
[apps/android/wikipedia@master] Standardize footer text and icon

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

hey @Sharvaniharan - just missed the update on the third row of the table in the task description:

Update menu item to show a text string for the main action text as Read in another language, with the subheading showing Available in <#> other languages

Expected:

image.png (114×372 px, 9 KB)

Actual:

image.png (1×1 px, 247 KB)

Change 427705 had a related patch set uploaded (by Sharvaniharan; owner: Sharvaniharan):
[apps/android/wikipedia@master] Title added to bottom content 'Available in 'n' languages' section

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

Change 427705 merged by jenkins-bot:
[apps/android/wikipedia@master] Title added to bottom content 'Available in 'n' languages' section

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

@RHo Quick additional question about the design:
In the mock, it looks like the "separator" lines between the items (in About this article and Read More) have a left-margin that is aligned with the start of the text. This is currently not in the implementation, and it's also different from other lists where we use separators, e.g. reading lists and Feed. Should we update those other separators to follow this pattern as well, or is this a one-time difference specific to these items only?

hi @Dbrant - that's a good catch, the separator lines starting from the article title was missed in the initial implementation. And yes, this display is for the footer menu list items only (basically applying this for when list items are on a full width card).

I just created a ticket for the missing bookmarking on Read more per this ticket T192534 yesterday, so can add it to this task... unless it's preferred to create a separate separator task?

Have Added separator visual tweak to T192534 and this LGTM

image.png (1×1 px, 211 KB)

on Pixel 2 (8.1), Wikipedia v2.7.232-alpha-2018-05-17