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:


 * See and sharing your input on new designs (see below)
 * Testing prototypes
 * Getting real-time updates about new designs, user testing findings and measurement specifications

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

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.