Page MenuHomePhabricator

Add "✔️" into link modal
Open, Needs TriagePublic

Details

Related Gerrit Patches:
mediawiki/extensions/VisualEditor : masterUpdate VE core submodule to master (ce4a16063)
VisualEditor/VisualEditor : masterui.FragmentWindow: override action widget config on mobile for done actions
mediawiki/extensions/VisualEditor : masterMWLinkAnnotationInspector: check icon for done on mobile

Event Timeline

As discussed, this would be done as part of the toolbar work, otherwise we will have two ticks with different meanings.

yes, so this should be moved to the backlog

cc @JTannerWMF

JTannerWMF moved this task from To Triage to Q1 on the VisualEditor board.Aug 8 2019, 4:32 PM

Hey @iamjessklein I know you're working on toolbar work now.

This work should happen in conjunction with the toolbar v1 release @DLynch

ppelberg added a comment.EditedAug 30 2019, 12:35 AM

This work should happen in conjunction with the toolbar v1 release @DLynch

@iamjessklein thinking about this some more, I do not think this particular task should block the release of toolbar v1.

My thinking: while this particular task depended on v1 of the toolbar being completed [1], I do not think the toolbar worked depends on it. Therefore, I do not think this work should block the toolbar being released. With this said, I do think this work should be included as part of our next edit cards release.

I've reflected this thinking by including this task in the task description of T231342: Edit Cards: deploy v4 to all wikis


  1. Dependency on toolbar v1: We decided it would not make sense to replace "Done" in the link dialog with "✔️" before replacing the "✔️" in the toolbar with ">" so as to avoid the same icon being used in two different contexts, each serving different purposes, simultaneously. Also see Ed's comment above in: T228230#5340679

Edit: adding Ed's comment from July.

Is this a mobile-only change?

Is this a mobile-only change?

@iamjessklein what do you think? Should this change be applied to desktop dialogs as well or should it be limited to mobile?

My thinking...

I'd assumed this change would be extended to desktop as well so as to keep a consistent visual language between the two.

Although, one argument I can see for having the two diverge: Volker has expressed [1] that icons should be used cautiously. In which case, perhaps it makes sense to keep the text-based buttons on desktop where space is less scarce.


  1. @Volker_E please correct me if I'm misrepresenting this thought. I recall you, Jess and I having a conversation about this in the context of replacing "Publish" in the save dialog with an icon, but there is a chance I could be misremembering this conversation.

On mobile:

On desktop:

Actually, more extensive question: should this be just the link modal, or should this be all inspectors? If we're invoking a consistent visual language, after all...

Change 533366 had a related patch set uploaded (by DLynch; owner: DLynch):
[mediawiki/extensions/VisualEditor@master] MWLinkAnnotationInspector: check icon for done on mobile

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

That patch is the most-limited version of this: it's just on mobile, and it's also just the mediawiki link inspector. If greater scope is desired, I can adjust this.

Actually, more extensive question: should this be just the link modal, or should this be all inspectors? If we're invoking a consistent visual language, after all...

This is heating up...good question, David.

My instinct: the actions in all inspector "headers" on mobile should be consistent and the same goes for all inspector "headers" on desktop. Tho, I defer to Jess here.

So @iamjessklein, two questions for you courtesy of David:

  • 1) Should these changes be applied to mobile or should they be extended to desktop as well?
  • 2) Should these changes be applied to all inspectors?

I agree and think this should be at a minimum in all the mobile dialogs (I'm less sure about desktop but can loop back and check).
To make sure this doesn't break anything, I will bring it up in the style guide meeting next week.

+1, we should treat the link inspector differently. Should be at least all mobile inspectors and dialogs (except publish/save dialog).

ppelberg added a comment.EditedAug 30 2019, 4:51 PM

@iamjessklein + @Esanders: great.

So to summarize the conclusion...

two questions for you courtesy of David:

  • 1) Should these changes be applied to mobile or should they be extended to desktop as well?

Changing "Done" to "✔" should apply to mobile dialogs only.

  • 2) Should these changes be applied to all inspectors?

Yes, changing "Done" to "✔" should apply to all dialogs except the "Save your changes" dialog where the "finish" action should remain "Publish"

In technical terms this would be anything that uses ve.ui.FragmentWindow

Change 533612 had a related patch set uploaded (by DLynch; owner: DLynch):
[VisualEditor/VisualEditor@master] ui.FragmentWindow: override action widget config on mobile for done actions

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

Change 533366 abandoned by DLynch:
MWLinkAnnotationInspector: check icon for done on mobile

Reason:
Supplanted by Ie7101496d11e28bf1c510bf7c6bb96b883d42027

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

DLynch claimed this task.Aug 31 2019, 12:01 AM
DLynch edited projects, added VisualEditor (Current work); removed VisualEditor.
DLynch moved this task from Incoming to Code review on the VisualEditor (Current work) board.

Change 533612 merged by jenkins-bot:
[VisualEditor/VisualEditor@master] ui.FragmentWindow: override action widget config on mobile for done actions

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

Change 533954 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (ce4a16063)

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

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

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

Volker_E added a subscriber: Nikerabbit.EditedSep 5 2019, 10:43 PM

Is this a mobile-only change?

@iamjessklein what do you think? Should this change be applied to desktop dialogs as well or should it be limited to mobile?
My thinking...
I'd assumed this change would be extended to desktop as well so as to keep a consistent visual language between the two.

Although, one argument I can see for having the two diverge: Volker has expressed [1] that icons should be used cautiously. In which case, perhaps it makes sense to keep the text-based buttons on desktop where space is less scarce.

  1. @Volker_E please correct me if I'm misrepresenting this thought. I recall you, Jess and I having a conversation about this in the context of replacing "Publish" in the save dialog with an icon, but there is a chance I could be misremembering this conversation.

While the checkmark is widely used and understood, Wikipedia provides us some insights, which we need to verify that universal recognition of it is true. Specifically Finnish, Japanese and Korean seem to be places where we need to be cautious.
Asking @Nikerabbit for Finnish treatment.

Also, I agree that the icon treatment is favorable as long as we even out the possible i18n edge cases. (^ Above is a Phab formatting issue)

In my experience, in Finnish the use of checkmark to mean wrong is limited to school exams. There is hardly any chance for confusion as people are used to seeing the checkmark used as affirmative symbol all over the places.

While the checkmark is widely used and understood, Wikipedia provides us some insights, which we need to verify that universal recognition of it is true. Specifically Finnish, Japanese and Korean seem to be places where we need to be cautious.
Asking @Nikerabbit for Finnish treatment.

In my experience, in Finnish the use of checkmark to mean wrong is limited to school exams. There is hardly any chance for confusion as people are used to seeing the checkmark used as affirmative symbol all over the places.

Good spot, @Volker_E and thank you for confirming this, @Nikerabbit.

It sounds like we are still wondering: What do native Japanese and Korean speakers think the effect would be of tapping the checkmark (✔️) in the screenshot below? Would they perceive it as an affirmative action?

@Whatamidoing-WMF, can you think of any contributors working in Japanese who might be able to help us answer this question?

@JTannerWMF, as for contributors working in Korean, are you able to ask one of the Korean ambassadors who work with the Growth Team what effect they think tapping the checkmark (✔️) in the screenshot below would have? Would they perceive it as an affirmative action?

@I_JethroBT: Do you have any recommendations for Japanese?

IJethroBT-WMF added a subscriber: IJethroBT-WMF.EditedSep 22 2019, 6:47 PM

@Whatamidoing-WMF (Responding using my newish staff account for phab):

I don't have as much UX Design background for Japanese audiences as I'd like to, but I can offer a few comments here based on my experience using Japanese apps and some brief research:

  • Checkmarks do have some usage in Japanese UX interfaces, but I don't think this specific usage is typical in other apps. See the lefthand side of this screenshot from Iichi, an e-commerce service, and this broader Google search for checkmarks in Japanese UX. It appears that checkmarks are more typically used in the context of checkboxes for addressing things like user settings or parameters in search. It therefore seems plausible that Japanese users would think this indicates some options or setting to be turned on or off.
  • The symbol most strongly associated with something correct or complete would be (◯) in Japanese, called "marujirushi." Its opposite would be (✕), called "batsujirushi" for something wrong/incomplete. If the checkmark is being used in this manner like I think it is, I'd recommend using ◯ and ✕ symbols for mobile dialogues for Japanese.
JTannerWMF reassigned this task from DLynch to iamjessklein.Oct 30 2019, 7:14 PM
JTannerWMF moved this task from 👀 Needs PM Input to 📐 Doing on the Editing Design board.

re localization: @Esanders is it possible to have the check icon by default and then tweak for outliers?

Yes, OOUI icons are localisable. However if the checkmark is deemed to not be universal it should be fixed upstream in OOUI as it would apply to every use of it, not just in VE, so would be out of scope for this ticket.

I also suspect that this would be a case of over-localisation. In the past we have backed out translations of B/I/U icons because local users had never seen them translated before. I suspect this would be the case with ticks, given their prevalence in software.

For me the question remains, if the context for using the 'check' icon is sufficient as metaphor for Publish in Japanese or Korean. In contrast to a checkbox, this use case seems to have the potential to be confusing. I'd defer to a quick user test in affected languages.