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 do you think of the latest iteration of the adding and editing links prototype? At any point was it not clear what to do next? How did these workflows feel?'''

Tap below to share what you think ↓

31-May-2019
A couple things...


 * Prototype: we have a clickable prototype 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
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"

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 prototypes 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

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


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


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

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