Page MenuHomePhabricator

On a story viewer, improve the design of read next story option
Open, MediumPublic

Description

Description

The new design of the read next story option will let users select & read stories attached to an article which will improve story reading experience. The current design has some problems, such as the visibility of "read next story" button on some images can be problematic, distracting users from reading the story text available on the last story page. This will improve the story reading experience.

en.m.wikipedia.beta.wmflabs.org_wiki_Gray_wolf_wikistories=1(Moto G4) (1).png (1×1 px, 1 MB)
Description/User story

As a reader,
I want easy access to other related stories
so that I can learn more on the topic

Design

If an article has only one story attached

  • Do nothing.

If an article has more than one story attached

One story attachedMultiple stories attached
01. Read more stories - one story.png (780×360 px, 24 KB)
01. Read more stories - multiple stories.png (780×360 px, 44 KB)
  • Insert a story page at the end of a story to show list of stories attached to an article.
  • Inserted page has a blue background(#3366cc) to separate it from rest of the story. We can experiment with different colors when code will be ready.
  • If there are more stories than what can be displayed on device screen then randomly select set of stories to show.
  • Unlike other story pages, this page won't have play/pause & kebab menu(3 dots).
  • This page will have status bars similar to other story pages.
  • Click/Tap on "View" will link will open the story.
  • Click/Tap on "Close" icon will take user back to article.
  • Click/Tap on left side of screen should take control back to last page of the story.
01. Read more stories - multiple stories.png (780×360 px, 44 KB)
  • Truncate long story titles if they exceed more than two lines.
At presentAfter removing the next story button
en.m.wikipedia.beta.wmflabs.org_wiki_Cat_wikistories=1(Moto G4).png (1×1 px, 1 MB)
en.m.wikipedia.beta.wmflabs.org_wiki_Cat_wikistories=1(Moto G4) (1).png (1×1 px, 1 MB)
  • Remove the "Next story" button from the last page of a story.
  • Adjust the padding between text box and image license as currently we have it to keep "Next story" button. We can try different values once the code is available is ready.

Design file

Acceptance Criteria

Given a reader is looking at the last page of a Wikistory
When it is the only story on a Wiki page
Then there should not be a final slide that presents other stories to read

Given a reader is looking at the last page of a Wikistory
When reading wiki stories,
Then there should be another page to prompt the user to view other stories.

Test Scenarios
  1. When there is only one story on a wiki page, there should not be a last slide to view more stories.
  2. When there are few stories on a wiki page, viewing a story should show an additional page after the last page with text.
  3. Choosing to edit the page that has the prompt to view stories should open the editor on the last story page.
  4. Only stories on the wiki page should be suggested. Stories from another wiki page should not be suggested.
  5. Clicking on the "View" CTA of any suggested story should view the story.
  6. Tapping the back arrow navigation on this "Read Next Story" frame should take the user to the last story page.
Open questions
  1. After reading a story, will the extension exclude it from the list of the next suggestion?

We can try this on different articles and see whether to still keep them or remove. As of now, we are suggesting to pick stories randomly which can fit on the screen.

Event Timeline

SGautam_WMF renamed this task from On a story viewer improve the design of Read next story button. to On a story viewer, improve the design of read next story option.Jun 10 2022, 5:47 AM
SGautam_WMF updated the task description. (Show Details)
SBisson edited projects, added Wikistories (R2); removed Wikistories (MVP).
PWaigi-WMF updated the task description. (Show Details)
PWaigi-WMF updated the task description. (Show Details)
PWaigi-WMF updated the task description. (Show Details)
SBisson triaged this task as Medium priority.
SBisson moved this task from Ready for Dev to Dev on the Inuka-Team (Kanban) board.
SBisson moved this task from Dev to Ready for Dev on the Inuka-Team (Kanban) board.
SBisson added a subscriber: SBisson.
hueitan added a subscriber: hueitan.

Change 859089 had a related patch set uploaded (by Huei Tan; author: Huei Tan):

[mediawiki/extensions/Wikistories@master] Add new design of read next story on the last frame of each story

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

Test wiki created on Patch demo by HTan (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/61160d88e2/w

Test wiki on Patch demo by HTan (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/61160d88e2/w/

Change 859089 merged by jenkins-bot:

[mediawiki/extensions/Wikistories@master] Add new design of read next story on the last frame of each story

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

Hi @hueitan

Clicking on the back arrow navigation takes the user to the previous two screens, rather than the previous screen, e.g for a story with 3 frames, it takes me back to the second frame but it should be the third frame.

Hi @SGautam_WMF looking at the screenshot below, the suggestions look a bit too wide and uneven. Should we have a maximum width for this and centralize it on the display?

image.png (1×2 px, 319 KB)

@EUdoh-WMF Thanks for sharing this, I am happy to take care of this during css related sessions with engineers. Feel free to move it to design signoff column.

I have created a small bug for the story navigation observation here - T324927.