During the 12 November "Needs Discussion" meeting, the Editing Team aligned on assuming the simplest and most effective way to address the "section editing dead-end" issue in would be to do the following...

Augment the existing mobile section editing experience by offering people a button that, on-scroll, would be revealed and offer people the ability to edit the entire article.

Requirements

Primary UX

• Just the section selected will be loaded, and a Edit full-page (exact copy TBD) button will appear to allow users to load the rest of the article's sections in an editable state.
• Depending on the section selected, there will be the following cases:
  • 1st section: when someone scrolls to the point of reaching the bottom of the lead section, the Edit full-page button will be revealed
  • Middle section: when someone scrolls to the point of reaching the bottom or top of the section, the Edit full-page button will be revealed.
  • Last section: when someone scrolls to the point of reaching the top of the last section, the Edit full-page button will be revealed

Visual styles

• Button:
  • Normal Neutral Button
  • box-shadow-medium
  • Paddings around button:
    • Bottom button: 20px on top, 48px at the bottom
    • Top button: 32px on top, 20 at the bottom
• White gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, #FEFEFE 108.8%)
• Fake skeleton
  • 4 lines of fake skeleton
  • 20px height each skeleton line
  • 4px padding between skeleton lines
  • @background-color-interactive
  • @border-radius-base

Edge cases

• Short section in a long article:
  • First section: The button will be displayed by default beneath
  • Middle section: The button will be displayed by default beneath, and the button will appear above if the user scrolls up.
  • Last section: the button will appear above if the user scrolls up.
• Extra short article: In very short articles (when HTML is less than 20K), the entire article will be loaded and the "Load entire article" button will NOT be displayed.

Visual diffs

• Ensure no dirty diffs are introduced as a result of people potentially switching between section- and full-page editing mid-edit on mobile.

Copy

• We will run a usability testing to decide one of these copies:
  • Edit full page
  • Previous sections / Next sections
  • Switch to full page

Proof of concept

https://80a3b29990.catalyst.wmcloud.org/wiki/Douglas_Adams#/editor/0

Open questions

• 1. How will we make the button visible when the keyboard is up?
  • At present, buttons are presented within the document, so there will be no issues with the keyboard
• 2. What will the button copy say?
• 3. How will the button visually appear?

---

i. Where "refining" here could refer to things like: 1) showing 1-2 lines of text from the previous (or proceeding) section behind the button that would enable people to edit it, 2) polishing the animation that appears when the content people are attempting to edit is not yet loaded (T409131)