Talk:VisualEditor on mobile/Edit cards/Archive 2

What kinds of link-related edits are you making most often on mobile? Adding new wiklinks? Changing the labels on existing links? Changing where existing links go (read: editing the link target)? How have you found the experience?

📲 Instructions

Please tap this link on your mobile device: http://visualeditor-prototype.wmflabs.org/wiki/Pride_and_Prejudice_5

On your mobile device, please complete the five tasks listed in the next section: “Tasks to test”

In you reply, please fill in your answers to the questions in the “Feedback” section*

*You are also welcome to send feedback via email. Please email Peter Pelberg at ppelbergwikimedia.org

☑️ Tasks to test

You will be working on a test version of Wikipedia. This means any changes you make will not affect actual Wikipedia articles.

Here are the five things we want you to try in the prototype.  Be sure to try these on your mobile device at 📲Edit Cards v3 prototype

1. Add a new link to another Wikipedia article; review and then publish your changes
2. Edit the label of an existing link; publish your changes
3. Change the target of an existing link to another Wikipedia article; publish your changes
4. Change the target of an existing link to an external link; publish your changes

📢 Feedback

In your reply, we are curious to know your answers to the questions below. Of course, if you have other thoughts, we would like to know those too!

1. As you were completing the tasks above, at what points was it not clear what to do next? If all steps were clear, please tell us!
2. As you were completing the tasks above, did anything behave in a way that you did not expect?
3. What are some of your overall impressions of the Edit Cards v3 prototype? Do you find it clear? Confusing? Helpful?
4. Were you *not* able to complete any of the tasks listed above? Please tell us which tasks you were *not* able to complete.
5. How frequently do you edit using the visual editor on desktop and/or mobile?

Tasks

0. Initial loading of test page appeared to hang, but after switching tabs to check the instructions and changing back, the page had eventually rendered. Might be an artefact of the test environment or the device, no biggie. Might repeat this exercise in a sandbox elsewhere if v3 is now live.

1. Adding a wikilink was fine, though I hit several weird/messy VE things unrelated to adding link (formatting, inability to cancel out of workflow and start over). Full-page layout of the search card with separate areas for label, search term, and results was good. Insta-search was disconcerting, probably just because there aren't many pages in the test instance to populate the results and I was just seeing my search term echoed back as a redlink. I accidentally missed the review step because I didn't see the Review Your Changes button (and maybe wasn't reading the instructions closely enough).

2. Edit link label. I found three different ways to do this, one doesn't even involve the Edit Link card. Generally using an on-screen touch keyboard, you have to get used to switching between typing and navigating modalities (i.e. whether or not the keyboard is showing and insertion cursor active), so it's not completely unexpected. Sliding the edit cursor into a link and having the bounding box appear was smooth, I didn't feel unsure about whether my cursor was in or out of the link.

3. Edit link target. I'd already explored, so this was a straightforward exercise of the skills from steps 1 & 2.

4. Finding the selector to switch between Wiki link and External link was easy. Pasted long URL and text box didn't expand. Couldn't scroll text back to start of URL by dragging cursor. After inserting the link, its info card only showed the start of the URL truncated to one line instead of wrapping.

Feedback

1. Tasks clear, except I missed the part about viewing the diff, as mentioned above.

2. Anything unexpected? Different behaviours in typing versus tapping modes was initially a bit WTH? But makes sense after the first time. Tapping Publish consistently resulted in 'Something went wrong | Unknown error, HTTP status 0' though changes often did save. Managed to create an edit conflict with myself at one point.

3. Edit cards generally clear and helpful. Appreciate the change of the first "Publish changes …" button to just the chevron ">". Consistent use and placement of "X" "<" ">" for navigation feels right. Would like URL box to accommodate more text.

4. Apart from error-on-publish mentioned above, was able to complete tasks. Did switch to source mode to fix a formatting problem that couldn't be corrected in visual mode, but this was nothing to do with Edit Cards.

5. Only rarely use Visual Editor on either platform. Adding links and templates is something I find a barrier desktop VE.

A living list of tickets resulting from the feedback below:

- Characters in external link URL field should be lowercase by default: T229845

- Consider ways to make entering an external URL require less manual effort: T229839

📲 Instructions

1. Please tap this link on your mobile device: http://visualeditor-prototype.wmflabs.org/wiki/Pride_and_Prejudice_5
2. On your mobile device, please complete the five tasks listed in the next section: “Tasks to test”
3. In you reply, please fill in your answers to the questions in the “Feedback” section*

*You are also welcome to send feedback via email. Please email Peter Pelberg at ppelbergwikimedia.org

☑️ Tasks to test

You will be working on a test version of Wikipedia. This means any changes you make will not affect actual Wikipedia articles.

Here are the five things we want you to try in the prototype.  Be sure to try these on your mobile device at 📲Edit Cards v2.0 prototype

1. Add a new link to another Wikipedia article; publish your changes
2. Edit the label of an existing link; publish your changes
3. Change the target of an existing link to another Wikipedia article; publish your changes
4. Change the target of an existing link to an external link; publish your changes
5. Remove an existing link; publish your changes

📢 Feedback

In your reply, we are curious to know your answers to the questions below. Of course, if you have other thoughts, we would like to know those too!

1. As you were completing the tasks above, at what points was it not clear what to do next? If all steps were clear, please tell us!

2. As you were completing the tasks above, did anything behave in a way that you did not expect?

3. What are some of your overall impressions of the Edit Cards v2 prototype? Do you find it clear? Confusing? Helpful?

4. Were you *not* able to complete any of the tasks listed above? Please tell us which tasks you were *not* able to complete.

5. How frequently do you edit using the visual editor on desktop and/or mobile?

1. All steps were clear! 2. All behaved as expected! 3. I find it well done and simple to use. 4. I completed all the tasks. 5. I almost always use the visual editor on desktop but usually I don't edit on mobile because the experience wasn't good.

Oh, wow – this is great to hear! Thank you for taking the time to try our the prototype and share your thoughts with us.

Out of curiosity: what do you remember about editing on mobile using the visual editor?

Btw, I'm Peter. I am the product manager for the Editing Team 👋

⚠️ Another thing...

As you test the prototype, please keep in mind that some links might not work, and there may be other quirks. With this said, if and when you encounter something that is not what you expect, please let us know.

1. As you were completing the tasks above, at what points was it not clear what to do next? If all steps were clear, please tell us!

No.

2. As you were completing the tasks above, did anything behave in a way that you did not expect?

Task 4 was unnecessarily difficult when one types a link from scratch. It is hard enough typing a full page name, and so is requiring users to add http or https is unnecessary, it'd suggest adding the drop down to allow the user to choose it instead of requiring them to type those hard to find keys symbols on the keyboard. Also, i'd suggest normalizing the inputted text, and make everything before and including the domain name as lowercase, because the mobile keyboard automatically makes these uppercase which looks odd. Even when pasting, one may grab a link that doesn't include the full url.

3. What are some of your overall impressions of the Edit Cards v2 prototype? Do you find it clear? Confusing? Helpful?

Perhaps put the "remove link icon" in the header, a whole line just for that is overkill.

The image seems to take quite a lot of space, and it is unnecessarily prominent. It would perhaps be better to add the image to the right hand side, so that all text remains properly aligned on the left.

For frequent actions like removing links, or potentially even stuff like removing styling, it might be useful to looking into touchscreen swiping (to the right side), as a quick way to remove these without looking for the unlink button or remove style button.

4. Were you *not* able to complete any of the tasks listed above? Please tell us which tasks you were *not* able to complete.

I completed all tasks.

5. How frequently do you edit using the visual editor on desktop and/or mobile?

Desktop, few times a month, mobile infrequent except quick typos, or using it in Structured Discussions' visualeditor.

This feedback is wonderful. We appreciate you taking the time to go through the prototype!

Now, to the points you mentioned...

1. It seems unnecessary for contributors to have to manually type https:// as they are entering an external link's URL. Typing on mobile is already hard enough.

Good catch. We're thinking through how this might work considering there are a few different protocols the URL field would need to accommodate. One idea that came up is having the URI autocomplete based on what a contributor started to type. See this task for more details: T229839#5394254

2. Some characters of the URL appear as uppercase and others as lowercase...this looks odd.

This is another good observation and this issue should now be fixed! See this task for details: T229845

3. Appearance: the "remove link" icon doesn't seem like it requires its own line. The article thumbnail seems too prominent. It might also be better to have it right justified vs. left justified as it is currently.

Remove link + thumbnail placement and prominence: it could very well be so that the visual appearance of the card needs further refinement so knowing your reaction to these particular elements gives us a good starting point if this proves to be a larger issue.

4. Removing a link is a frequent action. It should be more accessible/prominent.

Interesting. Do you often find yourself removing links? If so, have you noticed any patterns in the links you find yourself needing to remove? Are you removing links that go to the wrong places? Are you removing excessive links from an article? Something else...?

>One idea that came up is having the URI autocomplete based on what a contributor started to type.

Seems good enough.

>Do you often find yourself removing links?

Yes, it is as common as removing styling from text. Often when content is pasted it may come with unnecessary links.

>If so, have you noticed any patterns in the links you find yourself needing to remove?

Yes, external links often need to be removed because they don't need to be within the text, and mostly belong in the references.

>Are you removing links that go to the wrong places?

Yes, mediawiki itself is incredibly lax with external links. Even completely invalid nonsense is allowed, e.g.: en.wikipedia.org/w/index.php?title=Draft:Sandbox&oldid=909941390 . Visualeditor itself is no better, as phabricator.wikimedia.org/T73795 notes.

Also, nowadays, and especially in these discussions I often remove external links using visualeditor (structured discussions) primarily because this wiki blocks anonymous users from adding them even to wikimedia owned sites. I had to remove the links to the two sites above when writing this very post, and it is easier on a desktop device than a mobile because of its placement in the dialog, and because the desktop devices offers an easy way to remove it using a shortcut.

> using a shortcut.

A keyboard shortcut to be exact. No such shortcuts exist for mobile devices due to the limited usability of touchscreen devices. Physical keyboards are simpler.

Ah, needing to remove external links from within the article text and on MediaWiki...that makes sense. I appreciate you explaining these workflows!

Also, we will be posting a link to a new prototype this week that we'd value your feedback on. I'll ping you here once it's up :)

Oh and I forgot to ask: will you be at Wikimania? If you will be and you're up for talking in person, maybe we could coordinate a time over email? My email is listed on my user page.

1. As you were completing the tasks above, at what points was it not clear what to do next? If all steps were clear, please tell us!

That I need not log in. I was not comfortable to make an account or revealing my IP;

the tool was fine;

Do you put the experiment for non-English speakers? If so, changing the order of those test items could help; only changing the label does not use tool buttons, while changing labels is not what I care the most

2. As you were completing the tasks above, did anything behave in a way that you did not expect?

tool was fine.

3. What are some of your overall impressions of the Edit Cards v2 prototype? Do you find it clear? Confusing? Helpful?

I’m afraid I am using CX2 and not impressed with the test at all. It is as helpful as CX2 of course.

4. Were you *not* able to complete any of the tasks listed above? Please tell us which tasks you were *not* able to complete.

nothing. Only did not add citations as wondered if you include citations as test item.

5. How frequently do you edit using the visual editor on desktop and/or mobile?

everyday. Depending on the volume of changes in the article, or the device I work on at particular time, I use:

• desktop in either mobile view on FireFox or Desktop view switching between VE and wikitext edit,
• Safari on iPhone6 with both desktop/mobile view or switching between VE/wikitext,
• or at times wikitext edit on Mobile Wikipedia app to see if my edit is mobile friendly/paragraphs are not too long.

This feedback is helpful...thank you for taking the time to go through the prototype, @Omotecho!

Now, to the comments you shared...

1. It is off-putting to have to log in or reveal your IP address before needing to make an edit.

Do you feel this has to do with where this information is requested (before you begin an edit), the fact that this information is being requested...something else?

2. Consider changing the order of the tasks to test for non-English speakers.

We would like to have non-English speakers try the test! Having the test instructions translated would surely help. Although here, it sounds to me like you are suggesting the order of the tasks might make the test more accessible to non-English speakers. Are you able to explain this in more detail?

3. CX2

CX2 is a wonderful tool and I'm sure @Pginer-WMF would be happy to hear you find it helpful! I would just like to make sure I'm understanding your feedback correctly...are you suggesting that compared to CX2, Edit Cards are not as helpful?

4. Including citations in the test

I'm glad to hear you were able to complete all of the tasks. As for including adding and/or modifying citations as part of the test, that's possible. Although, I wonder: what led you to suggest this? Is there something about citations you would be seeking to learn?

Thank you to take care of my comment. I would mention the following;

> 1. It is off-putting to have to log in or reveal your IP address before needing to make an edit.

> Do you feel this has to do with where this information is requested (before you begin an edit), the fact that this information is being requested...something else?

It would be nice that we are contributing as IP users. I thought I could go around, byt was not able to create account as the system tells me I don't obtain the right; thus how I could contribute is only by IP address, which makes me fee uncomfortable.

> 2. Consider changing the order of the tasks to test for non-English speakers.

> We would like to have non-English speakers try the test! Having the test instructions translated would surely help. Although here, it sounds to me like you are suggesting the order of the tasks might make the test more accessible to non-English speakers. Are you able to explain this in more detail?

Editing existing link would be an easier way to start the process, but I understand you wish to have users try out from zero how to add/edit wikilink.

1. Add a new link to another Wikipedia article; publish your changes
2. Edit the label of an existing link; publish your changes
3. Change the target of an existing link to another Wikipedia article; publish your changes
4. Change the target of an existing link to an external link; publish your changes
5. Remove an existing link; publish your changes

> 3. CX2

> CX2 is a wonderful tool and I'm sure @Pginer-WMF would be happy to hear you find it helpful! I would just like to make sure I'm understanding your feedback correctly...are you suggesting that compared to CX2, Edit Cards are not as helpful?

They are both useful; as I am used to CX2 link editing, I did not find either of them superior to another.

> 4. Including citations in the test

> I'm glad to hear you were able to complete all of the tasks. As for including adding and/or modifying citations as part of the test, that's possible. Although, I wonder: what led you to suggest this? Is there something about citations you would be seeking to learn?

I was curious if I could compare version 2 with CX2; if search function is directly accessible from version 2, then your new function would be perfect for me.

1. All steps wer clear!
2. Yes. Please add a link to an article. Don't close the editor (or publish)! Set the cursor to a position where no word is automaticly selected when tapping the link button. Now tap the link button. Look at the label textbox. It's "prefilled" with the label of the link you've created before. I don't expect that behavior. This label prefill feature doesn't work with external links at all. Is there now a new feature that creates all external links now without label (like )? A feature to add links in this format was missing in visual editor but you might also want to add links like https://example.org that the users can see the adress of the website. When adding an external link, there is also a wrong auto-prefill. Those wrong auto-prefills have nothing to do with the result, they're just confusing.
3. That tool might be better to beginners and makes the editor look better. The only problem is the confusing auto-prefill bug as described above.
4. -
5. For most of my edits I use the desktop version of Wikipedia. Bevore every edit I decide wether I use the visual or the source code editor.

Hi,

I thought of giving some feedback about the prototype some time ago and took some notes for it. Unfortunately, I didn't get the time to refine and post it here. I intend to refine the notes and post some detailed feedback now. Before that I just wanted to know if feedback for the prototype is still considered. Let me know if it is, so that I could post the feedback (which I hope would be helpful :-)

Thanks!

hi, @Kaartic – how thoughtful of you.

We are always considering feedback, so if you have thoughts, we would be keen to see them. With this said, I should be upfront in sharing: for the next month or so, while we await the results of our analysis, our changes to the Edit Cards will likely be limited to minor fixes, provided we don't discover something urgent in the meantime.

So please, if you have the time, we'd value hearing what you have to say ^ _ ^

1. As you were completing the tasks above, at what points was it not clear what to do next? If all steps were clear, please tell us!
   • The points were clear enough to complete the tasks.
2. As you were completing the tasks above, did anything behave in a way that you did not expect?
   • Yeah, a few things. More on that in a below section :-)
3. What are some of your overall impressions of the Edit Cards v2 prototype? Do you find it clear? Confusing? Helpful?
   • Overall, the prototype looks good to me. It's clear and would be very useful to edit links.
4. Were you *not* able to complete any of the tasks listed above? Please tell us which tasks you were *not* able to complete.
   • No, I was able to complete all the tasks.
5. How frequently do you edit using the visual editor on desktop and/or mobile?
   • I don't edit much using the visual editor per se in desktop/mobile. I prefer the wikitext editor. For some time now, I've been using the Visual wikitext editor, though.

Some thoughts & observations

• When undo-ing something there doesn't seem to be any feedback indicating the intended action has been competed. This is especially an issue when the effect of the undo is in a plcae which currently not visible in the screen.

• Given that there's an undo button, the fact that there's no redo button is a bit disturbing. It would be nice to have a redo button to accompany the undo button.

• Tapping back when the link card is shown should dismiss it and shouldn't show "Discard edits" menu. Same applies for "Edit link" overlay which shows up when trying to edit a link.

• When editing a page and I tap on a link, the link card is shown. Then, when I tap on the 'X' mark in the link card I thought it would also exit from link edit mode. But the editor still remains in link edit mode.

• Automatically detecting links to external wiki pages and converting them to inter-wiki links is nice. But when pasting a link to other wiki page in "External link", preview shows it as an external link (presence of external link icon in preview). Though after saving, it is converted into an inter-wiki link (lack of external link icon after publishing). This seems a little confusing as preview and actual behaviour don't match.

Also, when pasting a mobile link to external wiki page, this conversion doesn't seem to be happening.

Overall

• There's an element of lag in the overall user experience. It would be great if the experience was even more faster.

Other

A few general things which are not specific to link card editing:

• In editing mode, when the cursor is in one place it is not possible to scroll to other parts of the page. It automatically scrolls the page back to the top.

• Interestingly, I noticed that using a HTTP link to the prototype automatically redirects to the HTTPS version of the website in desktop. But this does not seem to be happening in mobile. In mobile, the HTTP version of the page just loads. Not specifying this as an issue. Just as an observation.

• In mobile, there is no hint when user tries to edit an old version of an article (by browsing an old version via History and trying to edit it). The fact that it would overwrite current version of the article is not highlighted when publishing the article. Also, after successful edit the page redirects back to old version itself. So, editor doesn't see effect of edit after publishing.

Hope this helps. Let me know in case any clarification is needed. I'll be happy to give more information :-)

📲Instructions to use the prototype

1. Please tap this link on your mobile device: Edit Cards v1.0 prototype

☑️Tasks to test

1. Add a new link
2. Edit the label of an existing link
3. Change the target of an existing link to another Wikipedia article
4. Change the target of an existing link to an external link
5. Remove an existing link

📢Feedback

In your reply, we are curious to know your answers to the questions below. Of course, if you have other thoughts, we would like to know those too!

1. As you were completing the tasks above, at what points was it not clear what to do next? If all steps were clear, please leave this question blank.
2. As you were completing the tasks above, did anything behave in a way that you did not expect?
3. What are some of your overall impressions of the prototype? Do you find it clear? Confusing? Helpful?

1. What happens after I tap "EDIT LABEL"? Nothing happens if the link wasn't longer than two characters.
2. See answer above
3. When does the card appear, when the card? I can't bring up the edit card anymore after I've tapped the link twice that the keyboard appears. See my first answer in this post, too.

@FF-11, we appreciate you taking the time to experiment with the prototype and for coming back to share your experience.

Now, a few questions to help me make sure I've understood all of your feedback as you have intended it...

A. Editing an existing link's label has no effect, "...if the link wasn't longer than two characters."

Question: Does the below accurately describe the issue you experienced and what you expected to happen? If not, are you able to describe them?

Actual behavior:

1. Tap an existing link whose label is < 3 characters long
2. Edit card appears
3. Tap "Edit" link label
4. ⚠️nothing happens

Expected behavior:

1. Tap an existing link (it shouldn't matter how many characters long the label is)
2. Edit card appears
3. Tap "Edit" link label
4. Keyboard appears
5. Edit label text
6. Tap "Done"
7. New label text is shows in the article

B. When does the card appear?

The Edit Card should appear whenever you tap an element within the article that can be "focused." This means elements like links, citations, images, templates, etc.

C. The keyboard, instead of the Edit Card, appears if you tap twice on an existing link

Oh! This is behavior we intended. Although, it sounds like this was surprising and confusing – would I be correct to assume that?

So you are aware of our thinking: we included this "tapping twice" behavior as a shortcut or a way for contributors to be able to edit link labels more quickly. To show the edit card after tapping an existing link twice, tap elsewhere in the article and then tap the link again.

Question: what led you to tap twice on an existing link? What were you trying to do? What did you expect would happen?

D. Last couple things...

• Question: Do you remember what device and browser you were using to test the prototype? I wonder if the configuration might have had an impact on the behavior you experienced.
• Your experience with the visual editor...
  • Question: How familiar are you with it on desktop and mobile?
  • Question: How frequently do you use the visual editor on desktop and mobile?

By the way, hi 👋 My name is Peter. I work as the product manager on the Editing Team

A: That's right

B+C: If you think this isn't to confuseing to beginners, you can leave it as is

D: A Samsung Galaxy J3 with Samsung Internet Browser (Okay, maybe the problem was that I've used an unpopular browser that doesn't have to work with MediaWiki to 100 %)

A. Editing an existing link's label has no effect, "...if the link wasn't longer than two characters."

Thank you for confirming. My first thought, as you mentioned: "I wonder if the Samsung Internet Browser could be the cause here..." Either way, we'll take a look. If in the meantime you have the opportunity to test this on Chrome, we'd be curious to hear what you experience when trying to edit a link label that is less than 3 characters long.

Edit: here is the link to the Phabricator task where we will be looking into this issue: T227673

B. + C. When does the card appear?

"Does the Edit Card show/behave in ways contributors expect it to?" is one of the key questions we are trying to answer through our testing. Ideally, with the more testing we have planned, we'll be able to answer this question with more confidence.

D. Device configuration

Thank you for sharing your device and browser set up. This is helpful for trying to reproduce issues ^ _ ^

What's next? We will publish an anonymized summary of the feedback we've received around Edit Cards v1.0 on the Edit Cards project page and share a link to a prototype of the second iteration.

You have been clear and responsive with all of your feedback – thank you, @FF-11. If you have time to try the Edit Cards v2.0 when they are ready, we'd value your input, but certainly don't expect it.

Alright, that's all on my end for right now ^ _ ^

Also @FF-11, would it be correct for me to assume that you did not have any issues completing the workflows listed below?

1. Add a new link
2. Change the target of an existing link to another Wikipedia article
3. Change the target of an existing link to an external link
4. Remove an existing link

That's right. I don't had any issues with them.

Ok, excellent. Thank you for letting us know.

The prototype works well for me. I noticed that the edit card moved to the bottom in this edition (I think it was at the top in some previous edition), and I don't feel strongly about whether it should go to the top or the bottom.

All the best with the testing!

We appreciate you tapping through it, @Deryck Chan. And more generally, for being open to, and helpful with, our questions around editing on mobile.

I think a part of us was hoping you'd have some critical feedback. Although, it is not the worst thing to know adding and editing links with Edit Cards v1 worked as you expected :)

Now, to your comment about the edit card being moved to the bottom of the page...

Ah, yes. The Edit Card was at the top of the page before. Part of our reason for moving it there is to understand whether contributors are more likely to start modifying links and citations if the actions to edit them are more prominent/visible on the page. This comes – in part – as a response to us noticing in our in-person tests contributors being confused by the previous implementation. I think this gif does a good job illustrating the issue some contributors ran into: File:Link context item (mobile VE).gif

Like I mentioned to FF-11 above, next for us will be:

1) Publishing an anonymized summary of the feedback we've received around Edit Cards v1.0 on the Edit Cards project page and

2) Sharing a link to a prototype of Edit Cards v2