VisualEditor on mobile/Toolbar refresh

From MediaWiki.org
Jump to navigation Jump to search

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[edit]

Refreshed toolbar v1 designs

  1. In Screen 2, what do you think will happen when you tap the "<" button?
  2. In Screen 4, what do you think will happen when you tap the "↶" button?
  3. 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?

📢Share your feedback

Updates[edit]

26 July 2019 – v1 designs ready[edit]

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:

  1. In Screen 2, what do you think will happen when you tap the "<" button?
  2. In Screen 4, what do you think will happen when you tap the "↶" button?
  3. 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:

  1. 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.
  2. 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[edit]

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[edit]

Findings from the user tests we have yet to complete will be posted here.

FAQ[edit]

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[edit]

  • "Editing mode"
    • The part of the edit flow when you are able to make changes to the article you are viewing.
  • "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 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.
  • "Common edits"
    • Adding and modifying links, adding and modifying citations and formatting text.

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