Distraction-free editing

Editing Wikipedia with VisualEditor on the mobile web

Distraction-free editing.png
File:Distraction-free_editing.png () by Jess Klein /Wikimedia Foundation, CC-BY-SA-3.0.
English: Illustration of a person editing Wikipedia on a mobile device

The Wikimedia Foundation’s goal for VisualEditor this year is to create a frictionless environment for editing on mobile to help editors publish more frequently, with more joy. After brainstorming, the Foundation’s Editing team came up with a set of mobile design principles to apply to a plethora of possible design interventions. This post describes our thinking behind the first round of interventions.

Intervention 1: Manage Performance Expectations

Evaluating the user experience, we noticed that certain areas of the experience felt pretty slow to editors. While performance is something that we will continue to work on (and can really only manage to some degree as the other part of the equation is the user’s environmental bandwidth), we can make this moment feel less painful for the user by managing their expectations around performance.

The key issue here is that users aren’t given any kind of feedback during moments like these. Many folks click their edit button and see this blank white screen with a spinner.

Blank white screen with a loading spinner.png
File:Blank_white_screen_with_a_loading_spinner.png () by Jess Klein /Wikimedia Foundation, CC-Zero.
English: This blank white screen with a spinner provides no feedback to the editor about what is loading or happening.

We thought of a few different ways to address this, including microcopy telling users what’s happening, skeletons and loading screens. Ultimately, we decided to address this by creating a seamless animation transition. To do this we grey out the read mode and transition it to line up with the edit mode. Then when the editor is ready we seamlessly swap it in. We combined this with a user interface refresh to provide a more reassuring throbber and instructional microcopy. In addition to reassuring contributors, the loading overlay helps editors to maintain their focus on the edit that they initiated the editor with the intention of making.

Editing Wikipedia on mobile.gif
File:Editing_Wikipedia_on_mobile.gif () by Image by Jess Klein CC0 and text from Wikipedia. https://en.wikipedia.org/wiki/Nellie_Bly, CC-BY-SA-3.0.
English: In this gif, you can see that a user taps on an edit button and instead of seeing a blank white screen with a loader, they see a series of screens and overlays to indicate progress (and if we did this right, they won’t even realize that this is happening).

Intervention 2: Improve Wayfinding through Section Editing

We believe that mobile editors can be more productive when they are able to focus on editing only one section at a time.

While the performance expectation intervention is in the realm of meeting fundamental expectations, the second issue we tackled is more unique to Wikipedia: navigating to your edit! One complaint that we repeatedly heard from editors during user testing was that they would find something to edit, click the edit button and then take a really, really, really long time to scroll to the part of the page that they intended to edit. This is acutely painful for users on mobile devices because the amount of information revealed to them at any given time is significantly smaller than on a desktop experience. What was happening in mobile was that you’d click a section editing button and get taken to the editing view but scrolled more or less in the proximity of the section you intended to edit.

Our intervention removed all of the other content so that you can focus on just that one specific part of the content. This directly relates to our mobile design principles — we are removing stimulation and setting the stage so that an editor can do one thing at a time.

Way-finding improvements to mobile editing.gif
File:Way-finding_improvements_to_mobile_editing.gif () by mage by Jess Klein, CC0 and text from Wikipedia. https://en.wikipedia.org/wiki/Nellie_Bly, CC-BY-SA-3.0.
English: As you can see here, the contributor can get to the content faster!

Initial Testing Results

We tested these interventions on-wiki, on usertesting.com and, at in-person editing events. The initial feedback has been quite positive. Users have been able to maintain their location within the edit and are using words like “expected” or “obvious” when describing the behavior of the interactions.

We’ve also learned that many people expected to be able to have the functionality to edit the whole page as well as choosing to dive in and edit within sections. Additionally (while unrelated specifically to this intervention, but useful for the future iteration of the product), we observed several users attempting to switch back and forth between the different edit modes without much success.

Shipping and Next Steps

These first two interventions (the loading overlay and section editing) have already shipped to Wikipedia and, in addition to the qualitative analysis efforts that I described above, we have recently concluded an A/B test thatshowed that “contributors using Section Editing are ~3% more likely to save the edits they start than contributors using full-page editing.”

The loading overlay was deployed to all Wikipedias and the same was done for section editing after we analyzed the test results.

What’s next for VisualEditor on Mobile?

Although 3% seems like such a small increase, we are banking on lots of incremental interventions having a large collective impact. The Editing Team analyst, Neil Patel Quinn said, “Considering the difficulty of making it possible to contribute to an encyclopedia on a four-inch screen, a 3% increase from a single tweak to the interface is a real accomplishment.” The next three interventions that we are tackling are:

1. Make VisualEditor default for new users on mobile. All of our testing suggests that there are just too many steps for an editor to get into VisualEditor, which in theory, is the more new-contributor-friendly experience. Let’s lessen the burden and make VisualEditor more discoverable by openly testing out this hypothesis.

2. Make it easier to edit context items (links, citations, images, infoboxes, templates, etc.) on mobile. Editing these items is an unnecessarily complex activity. We’re creating a new part of the interface that will show additional details about, and actions related to, editable elements within articles. These interventions will help editors to focus on one thing at a time while simultaneously creating more structured workflows around specific editing tasks.

3. Make a single state toolbar. Contributors are confused about what steps to take to publish their changes, how to undo a mistake and go back without losing all of their changes, and how to get back into editing mode after “accepting changes”. That combined with the fact that contributors are confused about why the toolbar behaves in unexpected ways is why we need to refine the toolbar so that it can be used as a guidepost during editing.

A few things that you can do to help

Excited? Great! So are we. We want to collaborate with you to make this a great mobile editing experience. Here are three things that you can do right now.

Edit Wikipedia using your smartphone via the mobile web

The best way to help with this effort is to try editing on your phone. Don’t focus on the new features, just make some great additions to the encyclopedia.

Share feedback

After you’ve made edits or contributed in some other way on mobile, tell us about it by posting on our product page.

Incorporate user testing into an upcoming event

Do you organize events for editing Wikipedia articles? If so, we would love to collaborate with you to learn how Wikimedians are editing directly from you, so drop us a note on the Talk page.

Thanks to Ed Erhart, Peter Pelberg, Sherry Snyder, Bartosz Dziewoński, Carolyn Li-Madeo, and Ed Sanders for proofreading and feedback. Thanks again to all those who have participated as testers.

🤜🏽 David Chan, Bartosz Dziewoński, Ed Sanders, and Peter Pelberg for working on the implementation of the Wikipedia editing features described here.

Originally posted by Jess Klein to Down the Rabbit Hole on 22 July 2019.


New advanced mobile contribution features coming to mobile

Wikimedia Foundation Readers Web team brings contribution tools to mobile

Photographing Yosemite (Unsplash).jpg
File:Photographing_Yosemite_(Unsplash).jpg () by Luke Pamer luke_pamer, CC-Zero.
English: Yosemite National Park, United States

In early 2018 the trend was clear: more people were accessing Wikipedia from a mobile device than desktop. This helped our team recognize the importance of improving the mobile editing experience in order to provide access to necessary tools for editors – particularly for people where a mobile device is their only device. Seeing that the needs of new editors are different from those of existing editors we decided to break the work up by audience and focus on advanced editors – editors that were familiar with the tools and would benefit from easier access on the mobile web.

For the last year, the Readers web team has been focused on empowering existing editors to be able to do more on the mobile web version of Wikipedia. We began our work at the Wikimedia Hackathon 2018 in Barcelona and Wikimania 2018 in Cape Town, where we interviewed editors in order to learn what features would (and wouldn’t) be helpful for them on mobile. We then created a prototype of a mobile website with additional editor features and collected feedback on it via our MediaWiki project page.

We tested our prototype with more than 60 editors. The response to the design was overwhelmingly positive, and included some great suggestions as well as raising some valid concerns. We collected the feedback and integrated it into our final designs.

Based on initial research, past requests from communities, and this prototype feedback, the team decided to focus on the navigation of the site and access to special pages.

We began with introducing the Article/Discussion tabs at the top of the page.

Wikipedia and Alex Hollender – Licensed CC BY-SA 3.0

The feature was first released as an opt-in setting on Arabic, Indonesian, and Spanish Wikipedias due to their relatively large populations of existing mobile editors.

These links provide more visibility to the discussions that take place around article creation. Previously a link to the discussion page was a small link at the bottom of the article page.

You can see edits being made by contributors with this mode enabled by selecting the #Advanced mobile edit tag on Recent changes (Example from Spanish Wikipedia).

Recently the team released a second set of features and included additional Wikipedias for testing and feedback (Italian, Japanese, Persian, and Thai).

These new features include:

  • Article and Discuss tabs at the top of all pages.
  • An enhanced toolbar (at the top of article and user pages), with a link to page history, and a new menu that contains other useful actions and links such as page information, wikidata item, permalink, what links here, Special:Cite, and more.
  • An updated main menu with links to Special pages and the Community portal.
  • Fully featured history pages, formatted for mobile screens.
Wikipedia/Alex Hollender – Licensed CC BY-SA 3.0

There are more features to come, including a new user menu, an improved Recent changes page, and other small bug fixes.

We plan to release these features to all wikis in the near future. If you’re an editor on one of the seven listed Wikipedias, you can enable the Advanced mobile contribution setting and try the features out for yourself.

So far the feedback on these features has been positive. The opt-out rate has been very low. This means that the people who have tried it do like and use the improvements. We hope you’ll be one of them too! Try it out and please tell others about these features. If you have any questions you can find out more on the project page. Feedback is welcome.