VisualEditor on mobile/Edit cards

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.

For this quarter's work, 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
'''◻️ What was your experience like using v1.0 of the Edit Cards prototype to complete the the tasks related to editing links listed below? At any point was it not clear what to do next? How did these workflows feel?'''

📲 Edit Cards v1.0 prototype

Tap below to share what you think ↓

14 June 2019 – Functional prototype ready for limited deployment
We have a prototype of the first iteration 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" – illustrates these changes.

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

Prototype: Edit Cards v1.0

Feedback

We are interested to hear what your experience is like using the prototype to complete the the tasks related to editing links listed below. See: Tasks to test

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. We would rather know that not.

Tasks to test:


 * Add a new link
 * Edit the label of an existing link
 * Change the the target of an existing link to another Wikipedia article
 * Change the target of an existing link to an external link
 * Remove an existing link

Next steps

We will be releasing v1.0 of the Edit Cards on Bengali, Hebrew and Persian and wikis. Contributors to these wikissee the Edit Cards live in the mobile visual editor beginning Tuesday, 18th June.

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"Mobile edit cards mockup.png

Background
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.

May 17-19, 2019 | Prague Hackathon
During the Prague Hackathon, we conducted two usability tests of the adding and editing links tappable wireframes with experienced desktop contributors.

What 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?


 * Edit card interaction
 * One tester expressed a reluctance to tap links out of a concern they would be taken to a different page and lose their focus
 * Adding a new link
 * Both testers had no problems adding new links.
 * Editing a link's label
 * One of the testers expected to be able to edit the label text immediately upon tapping the link within the article.
 * Changing an existing link's target
 * Both testers were able to change an existing link's target without issues.
 * Adding an external link
 * One tester expected to be able to tap the "Done" button on the soft keyboard to finish inserting an external link.
 * 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.