VisualEditor on mobile/Section editing

In late 2018, the Editing team conducted user research to understand editors' experiences using the visual editor on the mobile site. The research showed several disruptive workflows and unclear features. These problems make it hard for editors to focus while improving and/or creating an article. Based on this research, the Editing team developed several ideas for improving the visual editor. The goal is to help editors focus on content editing, by reducing distractions and confusion about how to edit on the mobile site.

Section editing
After collecting community feedback on our ideas and conducting a usability test, the Editing team chose to fix section editing.

Existing workflow:


 * 1) Decide what you want to change, while reading the article on a mobile device.
 * 2) Then, scroll around the page to find the button that opens the editing screen.  Sometimes, editors have to scroll through many screenfuls of an article to find the button.
 * 3) Once the editing screen is open, scroll back down to find the part of the article that you want to change.  Sometimes, editors can't find the place that they wanted to change.

We believe scrolling a long distance to find the edit button is distracting. Instead, once you know what change you want to make, you should automatically be guided to the edit command function for the part of the article you want to change. This approach is called Section Editing.

The Section Editing feature for mobile will let you change any section of an article by tapping a contextual edit button. When you tap the contextual button, you will be transported from reading to editing, in the same part of the article that you were reading. You will not need to scroll as much and potentially lose your place.

Instructions
The steps below will guide you to compare two versions of the same interaction on Wikipedia. We are trying to figure out which is a better experience for Editors who have the goal of making quick edits on the go.

Testing Version A


 * 1) Please go to Version A of the prototype on a mobile device: http://visualeditor-prototype.wmflabs.org/wiki/Sections
 * 2) Go to the main menu (the ☰ button at the top of the screen) and log in with the user name   and password
 * 3) Tap on the pencil icon next to the sub-heading titled "Reception".
 * 4) *Note: If you are in wikitext mode, you will need to change to the visual editing mode by tapping on the pencil icon ✎ in the toolbar and tapping on "" (not "").
 * 5) Add a sentence or edit to the first paragraph.
 * 6) Tap the check button.
 * 7) Tap "Save..."

Testing Version B


 * 1) Now, go to Version B of the prototype on a mobile device: http://visualeditor-prototype.wmflabs.org/wiki/Pride_and_Prejudice
 * 2) Repeat steps 3 - 6 (above)

Sharing your feedback


 * 1) Please go to this discussion page
 * 2) Tap/click "Start a new topic"
 * 3) Title the discussion topic
 * 4) In the body of the discussion post, please include your answers to these questions:
 * 5) *What device and browser did you use to test Versions A and B?
 * 6) *How familiar are you with the visual editor?
 * 7) **Not at all - I never use it
 * 8) **Familiar - I use it occasionally to make edits
 * 9) **Very familiar - I could teach someone how to edit
 * 10) *How frequently do you use the visual editor on a mobile device?
 * 11) **On a daily basis
 * 12) **On a weekly basis
 * 13) **On a monthly basis
 * 14) **Less often than a monthly basis
 * 15) **Never
 * 16) *Version A, Version B: which experience did you prefer and why?

⚠ Keep in mind that since this is a prototype there might be some bugs or quirks that you'll come across, and many links will be disabled. If you think that you've encountered a bug, please describe that in your feedback.

Feedback
We are interested in your thoughts on the prototype. Is this a better experience? Was it easier for you to stay focused on where you were within your edit? Was this expected behavior? Any and all comments are appreciated! Feedback will be summarized on the main project page.

Section editing project updates
On this page we will share our progress on the development of this feature.

2019-02-25

 * Updated instructions to now include an A/B test format.

2019-01-11

 * Added instructions for first section editing prototype. This works on mobile and desktop. Please follow the instructions and then add your feedback.