inconsistent close icon "X" in MediaWiki interfaces
OpenPublic

Description
  1. The Post-Edit Feedback popup uses the Unicode × glyph with hover behavior.
  2. Recent CentralNotice banners use an "X in a circle" icon with no hover behavior.
  3. the Visual Editor Review and Save dialog uses a drawn X icon with different hover behavior.

The differences make WMF wikis feel unpolished.

Screenshots:

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

Code:

  1. Extension:PostEdit outputs an <a> tag containing the HTML entity &times; and styles it.
  1. Extension:CentralNotice outputs an img tag showing :$wgNoticeCloseButton which defaults to https://upload.wikimedia.org/wikipedia/foundation/2/20/CloseWindow19x19.png
  1. The VE close box is styled with jquery.ui's .ui-dialog .ui-icon-closethick , which gives it the background https://bits.wikimedia.org/static-1.22wmf3/resources/jquery.ui/themes/vector/images/close.png

Version: 1.22.0
Severity: normal

bzimport added a subscriber: Unknown Object (MLST).
bzimport set Reference to bz48067.
Spage created this task.Via LegacyMay 4 2013, 3:37 AM
Spage added a comment.Via ConduitMay 4 2013, 3:53 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.
Spage added a comment.Via ConduitMay 4 2013, 4:27 AM
  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.

gerritbot added a comment.Via ConduitMay 4 2013, 6:48 PM

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

kaldari added a comment.Via ConduitMay 4 2013, 6:50 PM

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/.

kaldari added a comment.Via ConduitMay 4 2013, 6:51 PM

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

Nikerabbit added a comment.Via ConduitJul 3 2013, 11:17 AM

(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.

Spage added a comment.Via ConduitAug 12 2013, 10:36 PM
  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
Aklapper added a comment.Via ConduitOct 26 2014, 5:25 PM

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.

Jdforrester-WMF added a comment.Via ConduitOct 27 2014, 8:21 PM

(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.)

Jaredzimmerman-WMF added a comment.Via ConduitOct 27 2014, 8:24 PM

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.

Pcoombe added a subscriber: Pcoombe.Via WebJan 31 2015, 1:23 PM
Galorefitz added subscribers: Aklapper, Galorefitz.Via WebMay 14 2015, 8:50 PM

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?

Aklapper added a comment.Via WebTue, Jun 30, 2:24 PM

@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

violetto added a subscriber: violetto.Via WebTue, Jun 30, 4:35 PM

uniE050 - closeInput.svg

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


uniE051 - cross.svg

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.

Add Comment