Page MenuHomePhabricator

[StoryViewer] Navigating to a previous (and next) story frame
Closed, ResolvedPublic

Description

Background

On a laptop browser, when trying to navigate to a previous story page using the "Back" browser button, the user is taken to the previous story instead of the previous frame. T300782#7870245

On a mobile device, a user should be able to go back (or forth) to a story frame and view its content. Currently, the story frame loads according to the progress timer and tapping the back button on a phone ultimately takes the user back to the Wiki page.

Suggestion: We could replicate the functionality of social media apps (IG or Whatsapp) when viewing stories.

Design details

For mobile

  • Tap on the left of the screen to go back to the previous story page or on the right to go to the next one.
  • For first page of a story, tap on the left of the screen would do nothing.
  • For last page of a story, tap on the right of the screen would do nothing.

For desktop

Story viewer middle frame.png (820×1 px, 1 MB)

  • Click on back arrow to go back to the previous story page or on next arrow to go to the next one.

Story viewer first frame.png (820×1 px, 912 KB)

  • Only show next arrow for a first page of a story.

Story viewer last frame.png (820×1 px, 1 MB)

  • Only show previous arrow for a last page of a story.
Design details

Event Timeline

EUdoh-WMF renamed this task from [StoryViewer] A user should be able to view a previous and next story frame to [StoryViewer] Navigating to a previous (and next) story frame.May 10 2022, 12:56 PM
EUdoh-WMF updated the task description. (Show Details)

Thanks for creating this task, I observed behavior of browser & phone's back button for other applications(IG, WA, Google web stories), and they always take users out of story viewer. In my opinion, it's good to stick to that behavior. To navigate between story pages, we can do the following

Frame 28.png (900×1 px, 1 MB)

Desktop: Click on back arrow to go back to the previous story page or on next arrow to go to the next one.

Mobile: Tap on the left of the screen to go back to the previous story page or on the right to go to the next one.

Brower & device's back key: A click or tap on these would take users out of the story viewer.

Happy to update the ticket if we agree with this approach.

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

[mediawiki/extensions/Wikistories@master] Navigating to a previous and next story frame

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

SBisson triaged this task as Medium priority.Jun 9 2022, 12:59 PM

Change 798427 merged by jenkins-bot:

[mediawiki/extensions/Wikistories@master] Navigating to a previous and next story frame

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

It looks like we cannot use this feature on non-touch screens narrower than 1000px.

Testing:

  • I think you are right. The arrows disappear when the screen is narrowed on a desktop/laptop.
  • On a mobile device, tapping works as expected, outside the text area.

I have some suggestions in mind for this, we are going to include this as part of overall story viewer & builder experience for desktop.

I have noticed moving between pages doesn't work when tapped on text box. It should allow to move between pages even when its tapped on text boxes as they are non-interactive elements. Attached a video for reference.

@hueitan let me know your thoughts on this. If you're experience the same then shall we move this ticket back to dev column or create a new one to address the issue.

Change 809199 had a related patch set uploaded (by Eamedina; author: Eamedina):

[mediawiki/extensions/Wikistories@master] Include the textbox area as clickable for next/prev navigation

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

Change 809199 merged by jenkins-bot:

[mediawiki/extensions/Wikistories@master] Include the textbox area as clickable for next/prev navigation

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

Moving between pages working for textbox area too.