VisualEditor on mobile/Toolbar refresh

Group:	Editing
Start:	2019-04-01
Team members:	Bartosz Dziewoński, David Chan, David Lynch, Marielle Volz, Rummana Yasmeen, Jess Klein, Sherry Snyder
Backlog:	#T211255
Lead:	Ed Sanders
Management:	Marcella Florence (engineering), Jazmin Tanner (program), Peter Pelberg (product)

Tracked in Phabricator
Task T211255

This page talks about the Editing Team's work to redesign the mobile VisualEditor's editing toolbar.

This initiative is a part of our team's larger effort to simplify contributing on mobile, described in the Foundation's 2018-2019 annual plan. And more specifically, to increase the likelihood contributors will have success making quick edits on-the-go, by making it easier for them to find the tools they need to complete their edits.

We will use this page to, among other things:

Host conversations about experiences with the mobile VisualEditor's existing editing toolbar
Invite feedback about designs in-progress
Share plans for, and findings from, user testing
Announce deployment details

Watching this page is a good way to stay up-to-date about the above in real-time.

Open questions

Feedback: toolbar v1

Last Thursday, 5-September, version 1 of the refreshed mobile visual editing toolbar became available to all contributors using the mobile visual editor and we are curious to learn what your experience has been like using it.

More specifically, we are curious to know things like: At any point while you were editing, was it not clear where to find the editing tool (e.g. insert a link or citation, format text, etc.) you needed to complete your edit? What tool were you looking for? What kind of change were you trying to make in this moment?

If you have thoughts, please share them on the talk page by tapping this button:

📢 Share your feedback

Updates

Above: version 1 of refreshed mobile VisualEditor's editing toolbar.

2 September 2019 – v1 deployment timing

On Thursday, 5 September, all contributors using the mobile Visual Editor will be able to use the version 1 of the refreshed mobile visual editor editing toolbar.

This release comes as a response to the positive feedback the team received during the latest rounds of user testing. For more information about the results of these tests, please see: User testing: v1 prototype.

As quick reminder, v1 of the refreshed toolbar [primarily] includes the following changes:

Single state: combing all of the editing tools into "one," single-state, toolbar
New navigation: revising the buttons for moving forward and backward in the edit flow

Next up: In response to the "read" vs. "edit" mode confusion that surfaced in our initial rounds of testing, the team is going to explore changes to make it more clear to contributors the article is "editable" after they tap the edit button. Separately, the team is also going to consider making "review changes" a default step in the edit flow to give contributors more confidence they are making the changes they intend.*

*Note: the scope of this work has expanded beyond the editing toolbar to include changes that help contributors more confidently move from starting to publishing their edit(s).

26 July 2019 – v1 designs ready

Design: mobile VE refreshed toolbar v1

We have a new design ready of version 1 of the refreshed mobile visual editor editing toolbar! Details about the key changes we are proposing are listed below.

Before that, there are three questions* the team could use your help trying to answer:

In Screen 2, what do you think will happen when you tap the "<" button?
In Screen 4, what do you think will happen when you tap the "↶" button?
What are your impressions of the design? Do you see anything that's confusing or could go wrong if we were to deploy this version of the toolbar?

If you have thoughts, we would value hearing them on the talk page: Talk:VisualEditor on mobile/Toolbar refresh.

Changes

In version 1 of the refreshed mobile visual editor editing toolbar, you might notice the following changes:

All of the tools and actions related to mobile editing exist in one toolbar.
- Before, actions like switching between wikitext and VE and exiting out of "editing mode" were located in a separate toolbar.
There are new buttons for moving "forward" and "back" through the "edit flow"

Our primary reason for making these changes is to make it more clear to contributors how to navigate between the different steps of the editing flow.

Next up

Engineering work is starting to bring these design to life. We anticipate having a prototype ready for testing in mid-August. We will post a link to the prototype on this page once it is ready.

*These questions are also posted in the Open Questions section above.

Background

Current mobile VE toolbar

For contributors to be successful making quick edits on-the-go, it is important they be able to easily find the editing tools needed to complete their edits. It is also important for those editing tools to work as contributors expect.

Trouble is, as our team's and the Design Research team's research has shown, the mobile VisualEditor's existing editing toolbar can make it difficult for contributors to:

Find the tools they need to make an edit/change
Know what to do to publish their changes
Know what to do to undo a change/recover from a mistake

These issues are intensified on mobile where screen space limits how many editing tools and how much information about each can be exposed on-screen.

We intend to address these issues by redesigning the existing mobile VisualEditing toolbar in such a way that contributors:

Can easily find the editing tools needed to complete edits
Can recover from mistakes with minimal effort
Can easily understand what steps to take to publish their changes

We think that by making the editing tools easier to find and the steps to publish edits more clear, a greater percentage of contributors will complete the edits they open the VisualEditor with the intention of making.

User testing

v1 prototype

Over the past couple of weeks, we have been testing version 1 of the refreshed mobile visual editor editing toolbar in conjunction with Edit Cards. These tests have included the following:

We first ran a remote test on usertesting.com with five participants
We then ran in-person tests at Wikimania with an additional nine participants

The tests above were combined with internal (WMF staff) testing.

How were we testing?

In both tests, participants were given a set of tasks related to adding and editing links using Edit Card v3 and the refreshed toolbar v1, while having their actions and mobile screens recorded.

What did we find?

The changes to the toolbar seem to make sense. The majority of contributors in our tests intuitively found the editing tools needed to complete the edits and the buttons needed to publish their edits. In fact, most test participants did not actually notice the toolbar.

With this said, several testers had trouble identifying when they were in "editing mode" vs. "reading mode."

Next steps

In response to the mode confusion that surfaced in our initial rounds of testing, the team is going to explore changes to make it more clear to contributors the article is "editable" after they tap the edit button.

FAQ

Q1: What – if any changes – will be made to the mobile wikitext editing toolbar?

A1: We will make changes to the mobile wikitext editing toolbar to be sure the following buttons look the same in both the mobile wikitext and mobile visual editor editing interfaces:

The button to switch between the mobile wikitext and mobile VE editing interface
The button for going forward in the edit flow
The button for going back in the edit flow
The button for publishing edits
The button for exiting/closing the editing interface.

Q2: What new features will be added to the mobile wikitext editing toolbar?

A2: For the time being, we do not have plans to introduce any new functionality into the mobile wikitext editing toolbar.

Glossary

Common edits: adding and modifying links, adding and modifying citations and formatting text.
Edit flow: the different steps involved with making and saving an edit. These steps vary between editing interfaces and platforms (i.e. mobile and desktop).
Editing mode: the part of the edit flow when you are able to make changes to the article you are viewing.
Editing toolbar: the part of the mobile VisualEditor interface face where the tools needed to make changes to the content within articles are located. The editing toolbar also houses buttons for publishing changes made during an edit session.
Reading mode: when the article is not editable.

*For a full list of VisualEditor terminology see the VisualEditor/Developer glossary.