Page MenuHomePhabricator

Inconsistent close icon "x" in Wikimedia product interfaces
Closed, ResolvedPublic

Description

The close icon as defined by the WikimediaUI icon principles. OOUI is already featuring the correct icon.

ProductDescriptionCodeScreenshotScreenshot after
OOUIUses the correct icon
Post-Edit Feedback popupUses the Unicode × glyph with hover behaviorExtension:PostEdit outputs CSS generated content × with style rules.
Recent CentralNotice banners"x in a circle" icon, no :hover behaviorExtension:CentralNotice outputs an img tag showing :$wgNoticeCloseButton which defaults to CloseWindow19x19.png
-Visual Editor Feedback dialogAs of 2017-09 not an issue any more => converted to OOUI
ULSThicker stroke “x” SVG, no :hover behaviorExtension:UniversalLanguageSelector custom .uls-icon-close class
Extension:GuidedTourdifferent icon with different size.guider_close
Extension:MultimediaViewerbolder, less contrast; Exempt from amending is the main close icon as it would need a full icon redesign. Will be revisited after T177432
Extension:GettingStarteddifferent icon with different size and lighter grey.mw-gettingstarted-cta-close
Extension:PagePreviewsdifferent icon, bolder and bigger
Extension:TranslateSimilar to ULS, different icon though, as it's minimally smaller in layout.grid .tux-message-editor .close

The differences make WMF wikis feel unpolished.


Original report:
Version: 1.22.0

Details

Reference
bz48067

Event Timeline

bzimport raised the priority of this task from to Low.Nov 22 2014, 1:37 AM
bzimport set Reference to bz48067.
bzimport added a subscriber: Unknown Object (MLST).
Spage created this task.May 4 2013, 3:37 AM
  1. is a design from late 2012.
  1. matches https://www.mediawiki.org/wiki/Wikimedia_Foundation_Design/Agora_Icon_Set#General edits in 2012 which says "Dismiss - an 'X' in a circle."
  1. came from jquery.ui work in 2010.
  1. The Universal Language Selector extension uses its own chunky X icon with no hover behavior. jquery.uls styles icon-close with background of https://bits.wikimedia.org/static-1.22wmf3/extensions/UniversalLanguageSelector/lib/jquery.uls/images/close.svg

5, 6. The Translate and VisualEditor extensions also have close.svg icons for CSS backgrounds, each slightly different.

Related URL: https://gerrit.wikimedia.org/r/62237 (Gerrit Change I0e1703057e45297d6728cb635c58183aa37103da)

There are also currently 2 close window images in core (besides jQuery UI):

  1. https://bits.wikimedia.org/static-1.22wmf3/skins/common/images/closewindow.png
  1. https://bits.wikimedia.org/static-1.22wmf3/skins/common/images/closewindow19x19.png

I don't think #1 is used anywhere any more (but would be worth checking).

I believe #2 is the same image as the one used in CentralNotice and similar to the Agora design.

If we want developers to standardize on one close icon it needs to have the following properties:

  1. Located in core (probably /skins/common/images/)
  2. Works for any background (light, dark, grey, etc.)
  3. Available in a large size and a small size
  4. Conforms to design guidelines

closewindow19x19.png is probably the best bet since it meets 3 of the 4 criteria. All we need to do is create a smaller version for use in small UI elements. Then we can start standardizing everything on that. We can override the jQuery UI close box in resources/jquery.ui/themes/default/.

I checked in a smaller version of the closewindow19x19.png image in change I0e170305.

(In reply to comment #4)

  1. Located in core (probably /skins/common/images/)

In the past I've tried to use core image resources in CSS files together with @embed without success. I think that desperately needs fixing to go onward with the unification.

  1. Available in a large size and a small size

I would consider having SVG version too a must.

  1. Besides #2 (an 'X' in a circle), other fund-raising banners use the plain 7px 'x' image donate/Small-black-close.png for their close iocn, e.g. http://meta.wikimedia.org/w/index.php?title=Main_Page&banner=B13_0725_trn_Cntrl_nd_yyYY&force=1

As Jared added the "easy" keyword to this ticket: What is the prefered approach and expected implementation for a potential new code contributor?
Which specific 'close' icon to use everywhere?
What is the complete list of codebases which are affected?

This ticket got a bit messy so I got lost. Summarizing is highly welcome.

(In reply to Andre Klapper from comment #9)

As Jared added the "easy" keyword to this ticket: What is the prefered
approach and expected implementation for a potential new code contributor?
Which specific 'close' icon to use everywhere?
What is the complete list of codebases which are affected?
This ticket got a bit messy so I got lost. Summarizing is highly welcome.

From what I understand, the current guidance is "never ever ever use an icon for workflow functionality", per user testing outcomes. This is why VE switched over to simple words instead ("Done"/"Cancel"/etc.)

James, there are still many many interfaces especially with smaller dialogs (language switching, fundraising banners, etc) which use icons for dismiss, this is true on mobile as well due to space constraints, I'd prefer to get consistency in these places then we can investigate in which interfaces we should expand beyond just an icon. But for places we're CURRENTLY using an icon, that icon should be consistent.

I am new here and was wondering if I could contribute to resolving this ticket.

I went through the conversation and had a few doubts:

  1. Are we to switch from icons to glyphs, everywhere? Or just make the icons consistent, for now?
  2. Already pointed out, but not answered,

As Jared added the "easy" keyword to this ticket: What is the prefered approach and expected implementation for a potential new code contributor?
Which specific 'close' icon to use everywhere?
What is the complete list of codebases which are affected?

@Galorefitz: Sorry that nobody has replied yet. I've also brought up your question on the mailing list now: https://lists.wikimedia.org/pipermail/design/2015-June/002325.html

This icon is used for all of these instances mentioned above:

https://upload.wikimedia.org/wikipedia/commons/5/56/PEF-1-Cropped.png
https://upload.wikimedia.org/wikipedia/commons/3/37/CentralNotice_banner_2013-05-03.png
https://upload.wikimedia.org/wikipedia/commons/3/37/CentralNotice_banner_2013-05-03.png



This icon is used specifically to clear input fields.


I hope this helps. Let me know if I'm not answering any other questions mentioned. I'll provide info around specs soon.

TheDJ set Security to None.
Restricted Application added a subscriber: TerraCodes. · View Herald TranscriptMay 6 2016, 8:10 PM

Just to give an update

https://www.mediawiki.org/wiki/Wikimedia_Foundation_Design/Agora_icon_set gives a list of places the old icon is used, probably based off of this report, but the page has not been updated for 2 years, so it is likely out of date.

https://doc.wikimedia.org/oojs-ui/master/demos/#icons-apex-ltr gives what I believe to be the most recent icons (using apex). Based on the attached screenshot, that is indeed what Wikipedia uses in the edit feedback

If someone could investigate other places and help to figure out to what extent this is still an issue, that'd be great

Volker_E updated the task description. (Show Details)
Volker_E edited subscribers, added: RHo; removed: violetto, Jaredzimmerman-WMF, wikibugs-l-list.

Change 376648 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/UniversalLanguageSelector@master] Use consistent close icon

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

Change 376648 merged by jenkins-bot:
[mediawiki/extensions/UniversalLanguageSelector@master] Use consistent close icon

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

Change 376851 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/CentralNotice@master] Use consistent close icon

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

Volker_E updated the task description. (Show Details)Sep 9 2017, 12:36 AM
Volker_E updated the task description. (Show Details)Sep 9 2017, 2:08 AM

Change 376869 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/Translate@master] Use standard close icon

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

Volker_E renamed this task from inconsistent close icon "X" in MediaWiki interfaces to Inconsistent close icon "x" in MediaWiki interfaces.Sep 9 2017, 3:41 AM
Volker_E updated the task description. (Show Details)

Change 376873 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] postEdit: Use standard close icon

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

Change 376869 merged by jenkins-bot:
[mediawiki/extensions/Translate@master] Use standard close icon

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

Volker_E updated the task description. (Show Details)Sep 9 2017, 5:51 PM
Volker_E updated the task description. (Show Details)

Change 376873 merged by jenkins-bot:
[mediawiki/core@master] postEdit: Use standard close icon

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

kaldari removed a subscriber: kaldari.Sep 13 2017, 12:12 AM
Volker_E updated the task description. (Show Details)Oct 12 2017, 10:34 PM
Volker_E updated the task description. (Show Details)Oct 13 2017, 4:30 AM

Change 384094 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/GettingStarted@master] Use standard close icon

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

Volker_E updated the task description. (Show Details)Oct 13 2017, 7:45 PM

Change 384191 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/GuidedTour@master] Use standard close icon

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

Change 384191 merged by jenkins-bot:
[mediawiki/extensions/GuidedTour@master] Use standard close icon

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

Change 384094 merged by jenkins-bot:
[mediawiki/extensions/GettingStarted@master] Use standard close icon

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

Pcoombe removed a subscriber: Pcoombe.Oct 14 2017, 1:16 PM
Volker_E updated the task description. (Show Details)Oct 19 2017, 7:35 PM
Volker_E updated the task description. (Show Details)Oct 19 2017, 7:41 PM
Volker_E updated the task description. (Show Details)Oct 19 2017, 8:07 PM

Change 385250 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/Popups@master] Use standard close icon

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

Volker_E updated the task description. (Show Details)Oct 19 2017, 8:21 PM

Change 385250 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Use standard close icon

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

Volker_E updated the task description. (Show Details)Nov 2 2017, 3:02 AM
Volker_E updated the task description. (Show Details)Nov 3 2017, 10:54 PM
Volker_E updated the task description. (Show Details)Nov 6 2017, 6:47 PM

Change 389542 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/MultimediaViewer@master] Remove special color treatment of close icon on confirmation

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

Nikerabbit updated the task description. (Show Details)Nov 7 2017, 7:37 AM

Change 394076 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/core@master] mw.postEdit: Use mw.notify to display message

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

Change 376851 merged by jenkins-bot:
[mediawiki/extensions/CentralNotice@master] Use consistent close icon

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

Volker_E renamed this task from Inconsistent close icon "x" in MediaWiki interfaces to Inconsistent close icon "x" in Wikimedia product interfaces.Jan 30 2018, 1:36 AM
Volker_E closed this task as Resolved.
Volker_E claimed this task.
Volker_E removed a project: Patch-For-Review.
Volker_E updated the task description. (Show Details)

OH from @RHo: “We can finally close the close icon”

Change 389542 merged by jenkins-bot:
[mediawiki/extensions/MultimediaViewer@master] Remove special color treatment of close icon on confirmation

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

Esanders updated the task description. (Show Details)Oct 11 2018, 4:42 PM