VisualEditor on mobile/Draft:Edit cards

Tracked in Phabricator
Task T221247

This page talks about the Editing Team's work to implement new mobile context items in the mobile VisualEditor. These "edit cards" as we are calling them, refer to the part of the editing interface that shows additional details about, and actions related to, elements within articles. Elements like 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: #T221247 Lead: Ed Sanders Management: Marcella Florence (engineering), Jazmin Tanner (program), Peter Pelberg (product)

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:

• Sharing what you think about the current design for these new "edit cards" (see below)
• Testing prototypes
• Getting real-time updates about new designs, user testing findings, measurement specifications,

Updates

Current mobile VE citation context item

8-May-2019: The first set of wireframes for the new adding and modifying links edit cards are ready for your feedback. You can see a mockup of the links edit card to the right and the whole adding and modifying links workflow in this Invision Freehand: Linking with contextual inputs. 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, as the Mobile contribution research and our team's user testing has found (see: Confusion modifying a link using mobile VE), where mobile context items are shown on the page, and the limited amount of space they are given, can make it difficult for to contributors to discover and use the editing tools needed to make edits. We have also found that the steps for completing these edits can be confusing and complex.

Current mobile VE link context item

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 needed to edit them more clear and straightforward. We think doing so will lead to contributors having more success completing the edits they open the mobile VisualEditor with the intention of making.

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 referring to the new design of the mobile context items as. 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.

    

    Confusion modifying a link using mobile VE