Page MenuHomePhabricator

Article title page
Closed, ResolvedPublic

Description

Why are we doing this?

As we will be utilizing a paginated format to deliver articles, we want to make it easy for users to quickly take action on an article they have opened on first load of the article. We also want to make sure that the key information that allows a user to understand if they have navigated to the correct article is available on this first article page view.

User story

As a user, when I land on a Wikipedia page, I want to see the title of the page, an image, a short description so that I know what I am going to read

Acceptance criteria

Lead article image
Title of article
Wikidata description

Proposed designs

Mocks
Title page with lead imageSecond icon selectedTitle page without lead imageThree line title5+ line title
https://zpl.io/aR7YDxzhttps://zpl.io/VO7kj8Lhttps://zpl.io/a3Oq698https://zpl.io/VDwz6Jehttps://zpl.io/aNM0GJv
Interaction details
ScreenD-pad centerD-pad up/downD-pad left/rightLSKRSK
Article headerSelects focused linkUp- N/A, Down - Moves to next page in articleCycles through header options (and links if there is no lead image)Returns to search resultsOpens menu
Design details
  • If the article has a lead image will will not show any of the introduction text
  • If an article does not have a lead image we will show the first few lines of the introduction text
  • If there is no Wikidata / title description, the line and line space will be removed
  • On first load focus is placed on the first quick link (Sections) and using the hardware left and right keys shifts selection on these quick links
  • If the article does not have a lead image, after the user has tapped the hardware right key two times, the cursor focus will be shifted to the first link in the introduction text
  • Cursor focus should loop through suggestions (eg. tapping right after the last link on the page should bring the focus back to the first link)
  • Titles truncated after 5 lines
  • 5 line titles receive a color fill based on the lead image (if available) rather than a lead image

Event Timeline

AMuigai created this task.Oct 2 2019, 1:55 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 2 2019, 1:55 PM
AMuigai renamed this task from Article landing page to Article title page.Oct 4 2019, 1:11 PM
SBisson moved this task from Backlog to Q2 on the Inuka-Team board.Oct 4 2019, 2:41 PM
SBisson claimed this task.Oct 21 2019, 2:49 PM
SBisson moved this task from Q2 to Kanban on the Inuka-Team board.
SBisson edited projects, added Inuka-Team (Kanban); removed Inuka-Team.
SBisson moved this task from Backlog to Dev on the Inuka-Team (Kanban) board.
cmadeo updated the task description. (Show Details)Oct 22 2019, 7:11 PM
SBisson moved this task from Dev to QA on the Inuka-Team (Kanban) board.Oct 23 2019, 3:09 PM

Note that the 3 buttons (Sections, Quick facts, Audio) and navigating the article links are handled by other tasks.

cmadeo updated the task description. (Show Details)Nov 13 2019, 8:21 PM
AMuigai added a subscriber: cmadeo.

@cmadeo, we decided to go with v2 for the title page design. Would you please provide the zeplin files for that?

cmadeo updated the task description. (Show Details)Jan 21 2020, 12:45 PM
cmadeo updated the task description. (Show Details)

Updated, @AMuigai :)

AMuigai triaged this task as High priority.Jan 21 2020, 2:20 PM
SBisson removed SBisson as the assignee of this task.Jan 21 2020, 3:24 PM
SBisson added a subscriber: SBisson.
SBisson claimed this task.Jan 27 2020, 8:53 PM
SBisson moved this task from Ready for Dev to Dev on the Inuka-Team (Kanban) board.
SBisson moved this task from Dev to Code Review on the Inuka-Team (Kanban) board.Jan 30 2020, 2:17 PM
SBisson moved this task from Code Review to Dev on the Inuka-Team (Kanban) board.Jan 31 2020, 7:21 PM

Some issues have been found with the latest version:

Changing text size can cause the text to move all the way up on the screen. Technical issue, should be fixable.

Applying the same rules on the section title pages pushes the title at the bottom of the page since there is never a description or actions. It shows a large, and not always relevant image, and no text at all. In some cases, the section content is small and could fit on one page but it is being pushed to the next page.
We could get rid of the image and show the beginning of the section text as is proposed in T241148: change the way we display images in articles and section titles I think the page would loose some personality but gain usability.

Applying the same rules on the section title pages pushes the title at the bottom of the page since there is never a description or actions. It shows a large, and not always relevant image, and no text at all. In some cases, the section content is small and could fit on one page but it is being pushed to the next page.
We could get rid of the image and show the beginning of the section text as is proposed in T241148: change the way we display images in articles and section titles I think the page would loose some personality but gain usability.

@AMuigai See comment above about section title pages. This is what it generally looks like:

@SBisson We did discuss losing the image for sections. Let's do that for the sake of usability. If it will reduce the white space at the end of several sections as well, that'd be ideal. Please let me know if the large white spaces are a separate issue.

@cmadeo At some point, we had an arrow on the title page in the designs to show a user that they should scroll down to view content. Please remind me why we chose to no longer have it? It would be good to have it, and, even better (much less priority), maybe only after the first few times a user uses the app. Adding a screenshot here from earlier designs to remind us all.

@SBisson We did discuss losing the image for sections. Let's do that for the sake of usability. If it will reduce the white space at the end of several sections as well, that'd be ideal. Please let me know if the large white spaces are a separate issue.

No matter what we do with the section title page, there is a risk that the last page will be partly blank. I don't know what can be done about that.

SBisson moved this task from Code Review to QA on the Inuka-Team (Kanban) board.Feb 6 2020, 3:45 PM
AMuigai closed this task as Resolved.Feb 11 2020, 12:24 PM