inconsistent close icon "X" in MediaWiki interfaces
Open, LowPublic

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

Details

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

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

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.

TheDJ set Security to None.

Add Comment