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 edit links? At any point was it not clear what to do next? How did these workflows feel?'''

Tap here to test the v1.0 of the Edit Cards prototype ↴

14 June 2019 – Functional prototype ready
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

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