Page MenuHomePhabricator

Story Builder navigation (browser back button)
Open, MediumPublic

Description

Problem

This task proposes changes in the behavior of device back key to improve the story creation experience.

Design

01. Current behavior of story builder page.
A tap on the device's back key brings user out of the story builder.

01a. Proposed behavior of story builder page.

en.m.wikipedia.beta.wmflabs.org_wiki_Special_StoryBuilder_Cat(Samsung A50) (18).png (1×720 px, 811 KB)
  • A tap on the device's back key should bring up a confirmation dialog box.
  • Tap on Discard would take user out of story builder.
  • Tap on Cancel would take user back to story builder page.

Note: we can use existing confirmation dialog box(class="ext-wikistories-confirm-content") here.


02. Current behavior of publish page.
A tap on the device's back key brings user out of the story.

02a. Proposed behavior of publish page.
A tap on the device's back key should bring user back to the story builder.


03. Current behavior of highlight text page.
A tap on the device's back key brings user out of the story.

03a. Proposed behavior of highlight text page.
A tap on the device's back key should bring user back to the story builder.


04. Current behavior of overflow menu.
A tap on the device's back key brings user out of the story builder.

04a. Proposed behavior of overflow menu.

en.m.wikipedia.beta.wmflabs.org_wiki_Special_StoryBuilder_Cat(Samsung A50) (18).png (1×720 px, 811 KB)
  • A tap on the device's back key should bring up a confirmation dialog box.
  • Tap on Discard would take user out of story builder.
  • Tap on Cancel would take user back to story builder page.

05. Current behavior of image selection screen.
A tap on the device's back key brings user out of the story.

05a. Proposed behavior of image selection screen.

  • User lands on image selection page from the create stories CTA in the article page: clicking back key takes the user back to article (because nothing has been saved).
  • User lands on Search after clicking the “+” or “replace image” button in the story builder: clicking back key takes them back to story builder

Acceptance Criteria

  1. On the image selection page --> article page or story builder (as described above)
  2. On the Publish page --> take the user to the text entry screen
  3. On the text entry page --> take user to article page (text entry page acts sort of as a homepage)
  4. When the overflow menu is invoked --> display the confirmation dialog box.

Test Scenarios

  1. Verify all acceptance criteria are met.
  2. Verify functionality on android and iOS mobile devices, as well as on major browsers.

Event Timeline

SBisson renamed this task from Inside the story builder change device back key behavior. to Story Builder navigation (browser back button).Dec 2 2022, 2:48 PM
SBisson triaged this task as Medium priority.

Change 864826 had a related patch set uploaded (by Sbisson; author: Sbisson):

[mediawiki/extensions/Wikistories@master] Builder: url navigation

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

SBisson edited projects, added Wikistories (R2); removed Wikistories.

Change 864826 merged by jenkins-bot:

[mediawiki/extensions/Wikistories@master] Builder: url navigation

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

SBisson added a subscriber: SBisson.

I've decided to merge the patch attached to this task even though it still had unresolved comments. Those were about the possibility of having the confirm dialog also displayed when the user closes the window or tab to prevent them from losing their unsaved story. While I like the idea I have to admit is was not the purpose of this task so if we want to do it we can file it as a new task.