Page MenuHomePhabricator

Design Edit Cards "v2.0"
Closed, ResolvedPublic

Description

Task overview

For now, this task is intended to be a place to collect ideas, questions and feedback that will inform the the next iteration (v2.0) of the links Edit Cards.

Contributor story

When I tap on an existing link
...I want to see all of the attributes/properties of that link and the edit actions associated with them
...so I know what attributes I can edit and how to edit them

When I modify an existing link
...I want to see the changes I just made and the edit actions associated with them
...so I can determine whether I have been successful in making the changes I intended and correct them if I have not been successful

Context

These changes are limited to:

  • Platform: mobile
  • Editing interface: VE
  • Wikis: limited to wikipedia this needs to be clarified

Open questions

  • After a contributor lands back on the card after having made a change, is it clear to contributors their changes have been made successfully? Context: T225629#5255712

Ideas

  • T225629#5254487
  • Introduce a "form approach" to editing link labels, similar to what is shown in T220385#5207030.
    • This could help contributors editing in Cantonese, Classical Chinese or Japanese where link labels can be single characters. See @deryckchan's comment here for more context: T220385#5223068

"Done"

  • Edit card information hierarchy: "Label" should appear above "Link" in the link Edit Card
  • It is clear how to edit an existing link's label
  • It is clear how to edit an existing link's target
  • It is clear how to remove an existing link
  • It is clear how to close/dismiss the edit card
  • It is clear how to close/dismiss the edit card while preserving the changes you just made

Details

Related Gerrit Patches:
mediawiki/extensions/VisualEditor : masterUpdate VE core submodule to master (681aa3fbc)
VisualEditor/VisualEditor : masterUse 'unLink' icon for unlinking

Related Objects

Event Timeline

ppelberg created this task.Jun 13 2019, 2:09 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 13 2019, 2:09 PM
ppelberg updated the task description. (Show Details)Jun 13 2019, 2:12 PM
ppelberg renamed this task from Edit cards: wireframe user flow for new and edited links v2.0 to Design Edit Cards "v2.0".Jun 13 2019, 6:49 PM
ppelberg updated the task description. (Show Details)Jun 13 2019, 6:53 PM
ppelberg updated the task description. (Show Details)Jun 14 2019, 2:32 AM
ppelberg updated the task description. (Show Details)
ppelberg updated the task description. (Show Details)Jun 14 2019, 2:38 AM
ppelberg updated the task description. (Show Details)
ppelberg updated the task description. (Show Details)Jun 14 2019, 2:56 AM

Here is the latest freehand for you to add comments and feedback. High level feedback should get synthesized and put here in phabricator.

@Volker_E what is the current thinking on "un-" icons, I know we still have a few (unBlock, unFlag, unTrash). Were we trying to move away from these, or is it okay to add an "unLink"?

Based on the current template for "un-" icons, "unLink" would look like this:

100%400%

On the grid:

iamjessklein added a comment.EditedJun 14 2019, 5:21 PM

Based on the current template for "un-" icons, "unLink" would look like this:

+1 - I believe Unlink makes the most sense here.

here's the link in context on [[ zpl.io/amMMO99 | zeplin]]

There has been some discussion around the pros and cons of a special 'unlink' icon starting at T192341#4138487

Volker_E added a comment.EditedJun 17 2019, 11:36 PM

tl;dr if the user tests way back have resulted in confusion when using 'trash' icon, the 'unlink' approach seems fine.
Two nitpicks:

  • The icon has some issues: recognizing it is hard with strike-trough, also the paths where line is connecting with chain have artefacts.
  • And in the card: 'Unlink' needs to be bold

Hey @iamjessklein are the designs ready on this task? If it isn't can you move this to design doing column if it is probably best to remove your tag so engineering can start building

@JTannerWMF the designs are still in progress (and discussion).

@Volker_E - this icon has a different purpose than a trash can. The trash can connotes that all information is being "thrown away" whereas the unlink icon separates the label from the current link, thus changing it to plain text. Google does the same thing (see screenshot). What's the best protocol for working specifically on the icon? Should I file a separate ticket so it doesn't prevent the rest of this one from shipping?

Chipping in: I agree that we should use "unlink" icon rather than "rubbish
bin" icon for removing a hyperlink.

iamjessklein added a comment.EditedJun 19 2019, 4:42 PM

I tweaked the Edit label flow to now include the form edit input. This is in Invision and here for review.
I am continuing to work on the Add a link flow separately.

iamjessklein added a comment.EditedJun 20 2019, 1:42 PM

Update:

This Invision freehand has a proposal for V2 flows that contain the edit card feature. This version of the mockup shows changes that I’m proposing for the second release and covers the following flows:

  • Turning text into a link
  • Changing the link label
  • Changing the link target to a Wikipedia link
  • Changing the link target to an external link
  • Removing a link

Turning text into a link

Changing the link label

Changing the link target to a Wikipedia link

Changing the link target to an external link

Removing a link

After conversations with @Esanders @ppelberg @DLynch @dchan @matmarex - we decided the following features are out of scope for V2:

  • Auto summaries
  • Animated text as feedback and confirmation
  • External link summary cards
  • Within link wizard, preview page links popups

In addition to the scope changes, I made the following changes to the "Add a link" flow (updated on Invision) :

  • after a user taps the link button they are taken into the wikilink search wizard
  • changed the button to "add changes"

I cleaned up the 5 flows in Invision . This includes the following adjustments:

  • making iconography consistent
  • adding apply changes button
  • identifying when undo appears clickable

I cleaned up the 5 flows in Invision.

These look great, @iamjessklein. I left a few minor comments in Invision (also below). I think we are good to move on from these designs.

Comments

Turning text into a link

  • "Add a link" dialog: we use "Apply Changes" for the confirm button in this flow and "Apply" in others – why are these not consistent throughout?

Edit the Label

  • "Edit Label" dialog: we are using both "Display" and "Label" in the dialog – why we not using one word consistently?

"Add a link" dialog: we use "Apply Changes" for the confirm button in this flow and "Apply" in others – why are these not consistent throughout?

this is an oversight, nice catch. I fixed on the mockups.

"Edit Label" dialog: we are using both "Display" and "Label" in the dialog – why we not using one word consistently?

@ppelberg Are you referring to the explanatory copy that says "Provide new display text"? If so, the intention here was to explain what label text is, not call it by its name. With that framing, I can see how that could seem inconsistent. Perhaps the explanatory text is not needed at all?

"Add a link" dialog: we use "Apply Changes" for the confirm button in this flow and "Apply" in others – why are these not consistent throughout?

this is an oversight, nice catch. I fixed on the mockups.

Awesome.

"Edit Label" dialog: we are using both "Display" and "Label" in the dialog – why we not using one word consistently?

@ppelberg Are you referring to the explanatory copy that says "Provide new display text"? If so, the intention here was to explain what label text is, not call it by its name. With that framing, I can see how that could seem inconsistent. Perhaps the explanatory text is not needed at all?

Ah, ok – this thinking makes sense to me.

As for whether we need the explanatory text: whatever you think is best.

I would like us to change the "Unlink" label to "Remove link", because:

  • It feels like a jargon word, appropriate for us to use internally (e.g. in the name of the icon :) ), but not in the interface intended for people with varying degrees of experience
  • We do not use "link" as a verb elsewhere in the interface, only as a noun, e.g. "Add a link" not "Link"
  • I think it would encourage poor translations that feel even more jargony
  • We have more than enough space in the interface, so we do not need the brevity
  • I am not sure if "unlink" in this meaning is a real word in English. I checked a few dictionaries online and if they defined "unlink" at all, the definition is only about detaching physical things, not about hyperlinks (while the "link" verb has a separate definition for hyperlinks on the web)

@matmarex thanks for your feedback here re:

I would like us to change the "Unlink" label to "Remove link", because:

I created a new ticket to directly address copy changes, so let's discuss it in T226511


Re: apply changes "check icon": A related conversation to ours is happening over in T226045 regarding the OOUI mobile layout. As per the convo in that thread @Esanders and I think that we should adjust the layout for the dialog to the version below which has two icons and a centered title. That said, we should implement this based on the outcome of that ticket.

Re: the application of the design.
I see this design being easily translatable to other contexts. Here is what it will look like for a citation (also added to freehand). @Esanders has pointed out that this wouldn't be a perfect 1:1 fit for some contexts which don't have a description such as gallery and math. I will work on thinking those through next.

iamjessklein updated the task description. (Show Details)Jun 26 2019, 5:00 PM
ppelberg closed this task as Resolved.EditedJun 26 2019, 10:56 PM

Update

We have decided to de-scope the form approach to editing link labels (see screenshot below) from Edit Cards v2.0. We decided this for the following reasons:

  • The user tests we have done so far suggest contributors are comfortable with the current, non-form based, implementation of link label editing. [1]
  • Not implementing a form approach to editing link labels at this stage means we will be able to start getting feedback on Edit Cards v2.0 ~twice as fast as we could were we to implement a form-based approach

With the above in mind, the design work on Edit Cards v2.0 is now complete. Implementation has already started. That progress will be tracked in: T226679


Form approach to label editing:

Notes

  1. Caveat to form-based label editing feedback: In T220385#5223068 @deryckchan raised the idea that the form-based approach could be helpful to contributors editing in sinitic languages where link labels can be single characters. This is something we are going to be mindful of in our testing. See: T221298

Change 519663 had a related patch set uploaded (by Jforrester; owner: Esanders):
[VisualEditor/VisualEditor@master] Use 'unLink' icon for unlinking

https://gerrit.wikimedia.org/r/519663

Change 519663 merged by jenkins-bot:
[VisualEditor/VisualEditor@master] Use 'unLink' icon for unlinking

https://gerrit.wikimedia.org/r/519663

Change 519712 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (681aa3fbc)

https://gerrit.wikimedia.org/r/519712

Change 519712 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (681aa3fbc)

https://gerrit.wikimedia.org/r/519712