VisualEditor on mobile/Edit cards

Tracked in Phabricator
Task T221247

This page talks about the Editing Team's work to improve the context items in the mobile visual editor. We're calling these edit cards. Edit cards are the part of the editing interface that shows additional details about, and actions related to, editable elements within articles. These elements include links, citations, images, infoboxes, templates, etc.

Edit cards Give mobile contributors more space and guidance to complete their edits. Group: Editing Start: 2019-04-01 Team members: Bartosz Dziewoński, David Chan, David Lynch, Marielle Volz, Rummana Yasmeen, Jess Klein, Sherry Snyder Backlog: #VisualEditor-Edit_Cards Lead: Ed Sanders Management: Marcella Florence (engineering), Jazmin Tanner (program), Peter Pelberg (product)

We will focus on two elements in particular:

1. Adding and modifying links
2. Adding and modifying citations

This initiative sits within our team's larger effort to simplify contributing on mobile, described in the Foundation's 2018-2019 annual plan.

You might find value in watching this page if you are interested in:

• Seeing and sharing your input on new designs (see below)
• Testing prototypes (One is up now!)
• Getting real-time updates about new designs, user testing findings and measurement specifications

Open questions

The latest version of Edit Cards is now live to all contributors using the mobile Visual Editor.

We are curious to know: what has your experience been like using them to add and edit links?

To try the latest version of Edit Cards, open the Visual Editor on your mobile device and share your feedback on the talk page:

📢 Share your feedback

Updates

26 November 2019 - measuring impact

As of today, the latest iteration of Edit Cards have been available to all contributors using the mobile visual editor for approximately 11 weeks.

This means, we now have enough data to do an impact analysis to determine what – if any – change the deployment of Edit Cards have had on the likelihood contributors will save the edits they start (read: edit completion rate).

We anticipate having results to share in early January 2020.

2 September 2019 - v3 deployment timing

Comparison: Edit Cards v2 --> Edit Cards v3

Tomorrow, 3 September, all contributors using the mobile Visual Editor will be able to use Edit Cards v3.

The decision to release Edit Cards v3 to all wikis is 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 this section below: User testing: v3 prototype.

As quick reminder, Edit Cards v3 [primarily] includes the following changes:

• Moving from there being two edit pencils on the Edit Card to one
• Combining fields for editing a link's display text and target into one screen
• Changing the name of the field for editing a link's display text from "Label" to "Text"

20 August 2019 - v3 prototype ready

There is a new version of Edit Cards ready for testing: Edit Cards v3.

This latest iteration includes the different approach to editing an existing link's label we mentioned in the 26 July update with a slight modification: rather than having to use different dialogs to edit a link's label and target, Edit Cards v3 combines these two workflows into one dialog.

While we think this design will be especially helpful for checking whether a link and its target are in sync, we wonder how contributors with smaller devices will find the experience.

We would value hearing your input. Tap the button below to try Edit Cards v3:

📲 Try Edit Cards v3

2 August 2019 – v2 live on all wikis

Edit Cards v2: live on all wikis.

Good news: the deployment train is no longer blocked. This means, as of today, 2 August 2019, Edit Cards v2 are live for all contributors using the mobile visual editor to try!

31 July 2019 – v2 deployment to all wikis

A proposed design for a new approach to editing the label of an existing link.

The deployment of Edit Cards v2 has been delayed due to an unrelated technical issue. We will post an update to this page when this issue has been resolved. You can read more about this issue here: https://lists.wikimedia.org/pipermail/wikitech-ambassadors/2019-July/002190.html

Yesterday, 30 July, Edit Cards v2 were deployed. This means, that by the end of the day (PST) on Thursday, 1 August, all contributors using the mobile visual editor will see and be able to use Edit Cards v2.

Next up: prototyping a new way to edit the label of an existing link. This is a response to the findings that came out of the v2 usertesting.com testing we ran: 12-19 July: v2 prototype (usertesting.com)

26 July 2019 – v2 testing (usertesting.com)

While our on-wiki Edit Card v2 testing is ongoing, we finished going through the results of our latest round of usertesting.com testing. You can read a summary of our findings and the changes we are making in response below: 12-19 July: v2 prototype (usertesting.com).

❗️As a reminder, we are planning to deploy Edit Cards v2 to all contributors using the mobile visual editor next week.

19 July 2019 – v2 deployment timing

The Edit Card v2 usability tests we have been running over the past two weeks have been positive. As a result, we anticipate Edit Cards v2 will be available to all contributors using the mobile visual editor the week of July 29th.

On the topic of testing, this week we finished running 5 tests on usertesting.com. These tests were designed to determine how usable Edit Cards v2 are and whether any aspect of them behaved in ways test participants did not expect. Next week, we will post the results.

❗️Please note: you have not missed your opportunity to test Edit Cards v2.0! There is a test ongoing. Please tap here to participate: 📲 Edit Cards v2.0.

Edit 13-September: Edit Cards v2 was released to all wikis and is no longer available for testing.

15 July 2019 – v2 prototype ready

Comparison: Edit Cards v1 --> Edit Cards v2

~3 weeks ago, we shared the first iteration of Edit Cards: Edit Cards v1.0. A couple of things have happened since then:

1. Edit Cards v2: we have a new iteration of Edit Cards ready for you to try: 📲 Edit Cards v2.0.
   
2. Edit Cards v1 feedback: we have been talking with contributors, on and off-wiki, about their experiences testing Edit Cards v1.0. This feedback is summarized in the "User Testing" section below: Edit Cards v1.0 feedback.

Edit Cards v2

In Edit Cards v2, you are likely to notice an updated look and feel and an additional edit button. This means there are now separate buttons for editing the link target and the link label. See a comparison of Edit Cards v1 and v2: Compare: Edit Cards v1 and v2

Testing Edit Cards v2

We are curious to hear what your experience using the prototype to add and edit links is like. To try the Edit Cards v2.0 prototype, please tap here on your mobile device:

Edit 13-September: Edit Cards v2 was released to all wikis and is no longer available for testing.

14 June 2019 – v1 prototype ready

Comparison: mobile Edit Cards v1.0 compare to mobile context items

We have a prototype of version 1.0 of the new Edit Cards ready. In this first iteration, you will notice the mobile context items that used to appear beneath the editing toolbar are now bigger and shown at the bottom of the screen, where the keyboard used to be displayed. This screenshot – "Comparison: mobile Edit Cards v1.0 compare to mobile context items" – shows these changes.

Using the prototype

📲Prototype: To try the Edit Cards v1.0 prototype, please tap here on your mobile device:

Prototype: Edit Cards v1.0

*Edit 13-September: Edit Cards v1 was released and is no longer available for testing.

Feedback

We are curious to hear what your experience using the prototype to edit links is like. We have listed some specific tasks to try on the talk page.

As you test the prototype, please keep in mind some links might not work and there may be other quirks. With this said, if and when you encounter something that is not how you expect it, please let us know.

Next steps

We will be releasing v1.0 of the Edit Cards on Bengali, Hebrew and Persian and wikis. Contributors to these wikis will begin to see the Edit Cards live in the mobile visual editor on late Thursday, 20 June 2019.

31 May 2019 – Tappable wireframes

A couple things...

• Prototype: we have a tappable wireframes ready for each of the editing links workflow...we would valuing hearing what you think. More details: Open questions.
• Prague Hackathon: A couple members of our team went to the hackathon. There, we were able run 2 usability tests for the latest iteration of the Edit card prototype. Our findings from those tests are listed in the User testing section below.

8 May 2019 – Initial wireframes

The first set of wireframes for the new adding and modifying links edit cards are ready and we are keen to hear what you think on the talk page. You can see a mockup of the "links edit card" below and the planned updates to the rest of the adding and modifying links workflow in this Invision Freehand. To view the "Freehand" as a guest, follow these steps:

1. Tap this link: https://wikimedia.invisionapp.com/freehand/document/s1duRw6io
2. Tap "Continue as Guest -->" in the top-right corner of the page
3. Enter an email address
4. Tap "Continue"

   

   An early design for the edit cards. This particular mockup shows how the "links" edit card could end up looking.

Background

Confusion modifying a link using mobile VE

This year, we are committed to helping contributors be more successful contributing on mobile, using the mobile visual editor. Core to their success, as the Design Research team's Mobile Contribution Research has shown, is:

1. Contributors being able to easily find the editing tools they need to complete their edits
2. Editing tasks being simple enough to complete on-the-go

However, the Mobile contribution research report and our team's user testing suggest, how and where mobile context items are currently shown within the interface can make it difficult for to contributors to discover what properties of an element are editable and what steps they need to take to edit those properties.

In exploring this new "edit card" design pattern we are striving to make the editable elements embedded within articles (links, citations, images, infoboxes, templates, etc.) more visible and the steps associated with editing them more clear and straightforward. We think doing so will lead to contributors have an easier time completing the edits they open the mobile VisualEditor intending to make.

Link context item in the mobile VisualEditor (highlighted in yellow)

User testing

v3 prototype

To understand what usability improvements might need to be made to Edit Cards v3, we ran two different user tests:

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

How were we testing?

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

What did we find?

Of the 5 workflows we were testing, test participants had success completing the following tasks:

✅Adding a new wikilink

✅Editing an existing link's target

✅Editing an existing link's display text

✅Removing a link

While they had difficulty completing the following tasks:

❌Adding an external link

Next steps

Testers in our usertesting.com and internal (WMF staff) tests founds the two button treatment of the link Edit Card (one button for editing an existing link's "label" and another button for editing its "target") to be confusing.

In response, we created and tested a prototype at Wikimania that combined the two edit buttons into one. All testers found having one edit pencil to be more intuitive. All testers also found that combining the workflows for editing a link's target and display text into one screen to make sense. Although, a few contributors mentioned that the word "Label" was not a clear way of communicating the purpose of the field for editing how a link is displayed within an article. As a result, the title of this field has been changed to read "Text."

Outside of this feedback, we saw that some contributors were momentarily confused by how the information and edit actions on the link Edit Card were displayed. The visual design of the edit card is something we intend to address in a future iteration. You can see a few early concepts in this Invision mockup: Edit Card link layout.

v2 prototype

From 12-19 July, we ran a test on usertesting.com to understand how usable and intuitive Edit Cards v2 are.

How were we testing?

Test participants were given 20 minutes to complete a set of tasks related to adding and editing links using the Edit Card v2 prototype. After completing these tasks, participants were given four written questions to answer about their experience.

What did we find?

Of the 5 workflows we were testing, test participants had success completing the following tasks:

✅Adding a new wikilink

✅Linking an existing wikilink to a different article

✅Removing a link

While they had difficulty completing the following tasks:

❌Editing an existing link's label

❌Adding an external link

Next steps

To improve the workflows test participants found difficult, we are implementing the following changes:

• Provide instructions for how to properly format external links: phab:T227899
  • Several test participants did not expect to have to include "https://" in the URL of the external link they were attempting to add. In response to this observation, we added a message to the "External Site" tab to make this requirement obvious (no instructions were given before).
• Provide a clearer indication about what to do after tapping the link label edit pencil ✎: phab:T228220
  • Several test participants were surprised to see the keyboard appear after tapping the edit pencil to edit a link's label. To make the next step in the workflow – using the keyboard to change the link label – more apparent we added a new visual cue to the link label within the article.

In addition to the changes above, we are considering a different, form-based approach to editing link labels. Although, this is a change that would not go into effect until after v2 is released. This mockup will give you a sense for what we have in mind: phab:T225725

v1 prototype

Over the past couple of weeks, we have been inviting feedback from contributors, on and off-wiki, about the Edit Cards v1.0 functional prototype.

How were we testing?

For this round of testing, we asked test participants to independently complete five adding and editing links workflows and share their experiences with each of them. You can read the full test here: Feedback: Edit cards v1.0.

What did we find?

While test participants found individual parts of the adding and editing links workflows to be confusing, the majority of participants still managed to successfully complete all of the five tasks they were testing.

You can read more feedback about each workflow below. And if you are curious to see the context where some of this feedback was mentioned. These are two good threads to read: Thread A & Thread B.

Detailed results

1. Miscellaneous
   • Two contributors found the fullscreen link search overlay to be disruptive.
2. Adding a new wikilink
   • One contributor thought it was unclear what to do after landing on the link search results page.
   • One contributor was surprised to be presented with the Edit Card immediately after tapping a wikilink from within the link dialog search results and thought another action would be needed to finish adding a new link.
3. Editing the label of an existing link
   • Two contributors found it confusing that tapping twice on an existing link showed they keyboard *not* the Edit Card.
   • One contributor was not sure how to get the Edit Card to show after tapping twice on existing link.
4. Changing the target of an existing link to another Wikipedia article
5. Change the target of an existing link to an external link
   • One contributor thought new contributors could be confused by there being two tabs – internal and external – within the link dialog.
   • One contributor found the "?" icon that appears next to search results for articles that do not exist yet (red links).
6. Removing an existing link

Invision prototype

During the Prague Hackathon, we conducted two usability tests of the adding and editing links tappable wireframes with experienced desktop contributors.

How were we testing?

In each of the two tests we ran, we asked contributors to tap through the five adding and editing links workflows (below), while doing their best to say aloud what they were thinking as they were using them.

What did we find?

1. Miscellaneous
   • One tester expressed a reluctance to tap links out of a concern they would be taken to a different page and lose their focus
2. Adding a new wikilink
   • Both testers had no problems adding new links.
3. Editing the label of an existing link
   • One of the testers expected to be able to edit the label text immediately upon tapping the link within the article.
4. Changing the target of an existing link to another Wikipedia article
   • Both testers were able to change an existing link's target without issues.
5. Change the target of an existing link to an external link
   • One tester expected to be able to tap the "Done" button on the soft keyboard to finish inserting an external link.
6. Removing an existing link
   • One contributor had difficulty finding the "unlink" button, but we think this is likely a result of contributors needing to scroll on the prototype to bring the "unlink" text into view. In the release version, all three edit actions will be visible without contributors needing to scroll the Edit card.

Glossary

• Context items: the parts of the editing interface that shows details about, and actions related to, different elements within articles, like links, citations, images, infoboxes, templates, etc
• Edit cards: what we are calling the new design of the "mobile context items". These "edit cards" will show details about, and actions related to, different elements within articles, like links, citations, images, infoboxes, templates, etc.. These "edit cards" will show details about, and actions related to, different elements within articles, like links, citations, images, infoboxes, templates, etc.
• Mobile context items: the parts of the mobile editing interface that shows details about, and actions related to, different elements within articles, like links, citations, images, infoboxes, templates, etc.

• Toolbar: a bar containing buttons that activate particular editing tools

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