Page MenuHomePhabricator

Insert link: As an editor on the iOS app I would like to have an easy way to insert links into an article
Closed, ResolvedPublic

Assigned To
Authored By
cmadeo
Jan 16 2019, 11:14 PM
Referenced Files
F29005466: 202_Edit link.png
May 10 2019, 4:28 PM
F29005469: 203_Edit link.png
May 10 2019, 4:28 PM
F29005461: 201_Edit link.png
May 10 2019, 4:28 PM
F29005474: 205_Edit link.png
May 10 2019, 4:28 PM
F29005459: 200_Insert link.png
May 10 2019, 4:28 PM
F29005472: 204_Edit link.png
May 10 2019, 4:28 PM
F29005455: 100_Insert link .png
May 10 2019, 4:28 PM
F28873456: Group.png
Apr 30 2019, 8:01 PM
Tokens
"100" token, awarded by JMinor.

Description

Why are we doing this?

We would like to create a way for users to insert a link that does not require their knowing the exact name of an article

User story

As an editor on the iOS app I would like to have an easy way to insert links into an article

Mocks + Prototype

Click-through prototype: https://wikimedia.invisionapp.com/share/KPQ0R8D8N5V#/341384077_42_Insert_Link

Event Timeline

Feedback from design:

  • Consider automatically closing the tray after selection
  • Consider having a way to preview a link
  • Show how to insert a link that is not turning text into a link
  • Consider using a dragging element vs. the carrots

Feedback from design has been incorporated into the mocks. This is ready for Needs acceptance criteria whenever there's an appropriate release board 😺

JMinor subscribed.
  • Need more flow clarity around label vs link (does link insert include the | and if so when/how to edit vs actual link/url).
  • Is top toolbar active while the panel is up, ie. can I undo/redo and/or close the edit flow?
  • Need more flow clarity around label vs link (does link insert include the | and if so when/how to edit vs actual link/url).

I can write out some flows next week, but the initial idea I had was that if you highlight text but use a link that has text that is different from the highlighted text then a label is applied.
Example
I highlight the word canine but I select the link for dog then the wikitext would be [canine | dog]

  • Is top toolbar active while the panel is up, ie. can I undo/redo and/or close the edit flow?

Now that we have a different header for Find and replace I can update these mocks to have a similar treatment.

I highlight the word canine but I select the link for dog then the wikitext would be [canine | dog]

@cmadeo Wouldn't it be the other way around? [[canine | dog]] would link to a canine article but show as dog, [[dog | canine]] would link to a dog article but show as canine. So if I select the link for dog but end up with [[canine | dog]], it'll end up linking to the canine article 🤔


+ a couple questions about imperfect selections:

Cursor:

  • When I place the cursor inside a bracket [[ of [[home]], should I still see the wizard searching for home?
  • When I place the cursor inside [[Summer house|home]], for example between mm, should I see the wizard searching for Summer house and end up with a link that has the same old label (home) but a different link?

Selection:

  • If my selection spans across elements with different wikitext, for example if I end up with a selection like this:

|mystery]] and [[comedy]]

should I be allowed to use the old toggle action (toggle brackets) or should the wizard do something special?

  • If my selection is inside an existing link but it’s only applied partly, for example given [[house]], I only select hou. Should I see the wizard searching for hou or house?

@cmadeo Wouldn't it be the other way around? [[canine | dog]] would link to a canine article but show as dog, [[dog | canine]] would link to a dog article but show as canine. So if I select the link for dog but end up with [[canine | dog]], it'll end up linking to the canine article 🤔

@NHarateh_WMF Ah! Yes, you're right, I just got mixed up 😜


  • When I place the cursor inside a bracket [[ of [[home]], should I still see the wizard searching for home?
IMG_3A19B72E0E13-1.jpeg (2×1 px, 664 KB)
IMG_F1523EDCD7E5-1.jpeg (2×1 px, 654 KB)

I'm starting to think that we might want to show a menu off of the cursor to deal with this similar to Google Docs. This would mean that the user would be free to change the text within the link however they please, but also open the squib/wizard when needed via this menu or remove the Wikitext. Do you think this might work? or be easy to implement?


  • When I place the cursor inside [[Summer house|home]], for example between mm, should I see the wizard searching for Summer house and end up with a link that has the same old label (home) but a different link?

Let's maintain the label even if the link changes


  • If my selection spans across elements with different wikitext, for example if I end up with a selection like this:

|mystery]] and [[comedy]]

should I be allowed to use the old toggle action (toggle brackets) or should the wizard do something special?

Hmm, let's not allow for the toggle, I think it might get confusing. So nothing special in this case


  • If my selection is inside an existing link but it’s only applied partly, for example given [[house]], I only select hou. Should I see the wizard searching for hou or house?

You should see the wizard searching for the full word (house)

I'm starting to think that we might want to show a menu off of the cursor to deal with this similar to Google Docs. This would mean that the user would be free to change the text within the link however they please, but also open the squib/wizard when needed via this menu or remove the Wikitext. Do you think this might work? or be easy to implement?

@cmadeo Makes sense - would that menu exist in addition to the toolbar button or would it replace it? The toolbar button appears on all toolbars (default and contextual) so the user can always change the text within the link or open the squib - the availability of those actions would definitely be more apparent if we used a floating menu. The downside could be that it might show up a lot and become annoying - by default, the floating menu shows up only if there's a range selection. Here, It would show up if we're anywhere near a link, right? In Google Docs, it pops up whenever I move the cursor or change my selection.
It'll definitely be a bit less straightforward to implement than sticking with a toolbar button because we'd have to handle toggling and positioning the floating menu manually.

Regardless of whether this wizard can float or only appear modally 🧙‍♀️ I think it answers the original question - it sounds like when we're near a link (in bracket, at the outer edge of any of the brackets - or just the opening one?), the wizard should treat it as a normal link and search for the text between the markup ("house").
So in all the cases below, if opened, the wizard would search for "house" -

Group.png (1×3 px, 323 KB)

correct?

@NHarateh_WMF what I'm trying to work through here is how we can enable folks to edit a link label and also interact with the squib...

Perhaps the context menu is too much. We can simply pop the squib whenever a user has their cursor in a link AND taps on the link icon in the toolbar. That way if you want to add a label, nothing happens and you can type as you please, but if you tap on the link icon while in a link or with a link selected you get access to the squib again. Does this make sense? Regardless, we should turn off the 'active' highlight color on the link icon as it will no longer be a toggle

Finally, I think you're right

It sounds like when we're near a link (in bracket, at the outer edge of any of the brackets - or just the opening one?), the wizard should treat it as a normal link and search for the text between the markup ("house").
So in all the cases below, if opened, the wizard would search for "house" - correct

This sounds and looks right.

Sorry this is so hard for me to wrap my head around!

@cmadeo yup, makes sense! Yes, I know, it's a lot, especially when you have to imagine the interactions 😂 Hopefully it'll be easier to adjust once we can use it!

@NHarateh_WMF thanks for sticking with me on this one! 💪

@NHarateh_WMF Woot this is looks really great so far! Thank you!


Small bugs and tweaks

  • After inserting a new link, I seem to lose my cursor
  • When a link has no label, can we still display the text in the Display text area?

Some user stories to fix:

1. Ensure that displayed text reflects the case of the text in the article

User action
I highlight mandarin duck and link it to the Mandarin duck article

Display in link squib - Edit link view
Display text is mandarin duck
Link target is Mandarin duck

Editing view output
[[mandarin duck]]

2. Retaining display text after a link has been changed

User action
I highlight mandarin duck and link it to the Mandarin duck article
I then edit this link
I change the article link from from Mandarin duck to Duck

Display in link squib - Edit link view
Display text is mandarin duck
Link target is Duck

Editing view output
[[Duck | mandarin duck]]

@cmadeo

Sure! After you insert a new link, do you lose your cursor completely or are you scrolled out of view? Are you on the latest iOS version?

@NHarateh_WMF I'm on the latest beta unfortunately and I just lose the cursor completely :(

@NHarateh_WMF this is looking really good! Thank you for the updates!

I found one more user story where we aren't showing display text:

User input
User taps on link toolbar action without having any of the article text selected
User searches for the article Mandarin duck
User selects Mandarin duck

Expected outcome
Within the link squib:
the label text is set to Mandarin duck
the target article is set to Mandarin duck

Actual outcome
Within the link squib:
the label text is blank
the target article is set to Mandarin duck

Hi @NHarateh_WMF, one more finding from usability testing.

It looks like right now when a user creates a new link by tapping on the link button without any text selected, we're inserting a pipe after the article but no placeholder text. Can we have the placeholder text appear as the article title when they are in the edit link screen, but not show a pipe when they are not in the edit link screen?

Thanks!

cmadeo added a project: Product-QA.

Thanks for the update and all of the amazing work on this feature @NHarateh_WMF !

JMinor awarded a token.