Make WordPress Core

Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#20033 closed enhancement (fixed)

Flip Admin Bar search icon horizontally?

Reported by: ericlewis Owned by: azaozz
Milestone: 3.5 Priority: normal
Severity: normal Version:
Component: UI Keywords: commit
Focuses: Cc:


This is a relatively minor style decision, but iconography is important.

The admin bar search icon is currently a magnifying glass that has the handle coming down to the left. However, as far as I've ever seen magnifying glasses as icons, they've been represented as the opposite, with the handle coming down to the right.

A quick google search will prove the point, with about 80% of graphic results coming in with the handle dropping to the right.

Attachments (6)

admin-bar-sprite.png (7.0 KB) - added by ericlewis 6 years ago.
magnifying glass flipped horizontally.
admin-bar-sprite.2.png (2.7 KB) - added by empireoflight 6 years ago.
Same thing, dunklefied™
admin-bar-sprite.3.png (2.7 KB) - added by empireoflight 6 years ago.
hmm, why did the trans get removed? Let's try this one
admin-bar-sprite.4.png (3.9 KB) - added by empireoflight 6 years ago.
admin-bar-sprite-2x.png (61.9 KB) - added by lessbloat 6 years ago.
20033.patch (2.6 KB) - added by ocean90 6 years ago.

Download all attachments as: .zip

Change History (20)

6 years ago

magnifying glass flipped horizontally.

#1 @nacin
6 years ago

As a left-handed individual, I'm used to living in a right-handed world, but this is just ridiculous, ridiculous I say!

WordPress.com is already using a flipped icon. Curious how deliberate of a decision that was. We should probably match what they're doing.

#2 @scribu
6 years ago

  • Keywords close added

I'm sorry, but this has to be the closest equivalent to "What color do we paint the bike shed?" I've seen so far.

#3 @nacin
6 years ago

  • Keywords close removed

I disagree. The original icon came from Twenty Eleven and was made without particular regard for conventions taken into consideration when designing icons for the best possible user experience and recognition. Shapes play a huge role there, and, yes, the angle of the magnifying glass is actually something that we could consider. We considered like ten different designs of the flag on the new feature pointers, down to the number of waves and the exact angle of the flagstaff.

I'm marking this for ui-feedback, and will reach out to the people who normally tend to our icons and discreet UI elements. Icon usability is a very particular subject.

I specifically suggested to ericlewis in IRC that if something is perceived to be a UI bug, then there is no harm in making a ticket. Let's not scare away contributors so easily.

Last edited 6 years ago by nacin (previous) (diff)

#4 @nacin
6 years ago

  • Keywords ui-feedback added

#5 @scribu
6 years ago

I guess you're right. The correct bikeshed color equivalent for WP would be what syrup to put on the [pancakes http://wordpress.org/extend/plugins/pancakes/].

Version 0, edited 6 years ago by scribu (next)

6 years ago

Same thing, dunklefied™

#6 @iammattthomas
6 years ago

The difference between WordPress.com and core was a side-effect of Koop and I developing them more or less at the same time. I just never got around to copying his newer icon over to dotcom. I hadn't put much thought into it before, but I do prefer the way the right-handed icon fits in the space. That's just a subjective opinion though; I don't have any data to back that up.

I like Ben's admin-bar-sprite.3.png above -- though we need it re-saved on a transparent background.

6 years ago

hmm, why did the trans get removed? Let's try this one

#7 @lessbloat
6 years ago

  • Keywords ui-feedback removed

This one looks to be good to go.

#8 @nacin
6 years ago

  • Milestone changed from Awaiting Review to 3.5

It's the little things.

#9 @helenyhou
6 years ago

Needs the following:

  • A 2x version (one went into 3.4, but the magnifying glass wasn't flipped then)
  • Source file

Since it went into 3.4, no patching necessary, just testing to confirm positioning. Will mark for commit once we have what we need.

#10 @lessbloat
6 years ago

This one looks good to go.

#11 @helenyhou
6 years ago

  • Keywords commit added

#12 @azaozz
6 years ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

In [21676]:

Flip Admin Bar search icon, props empireoflight and lessbloat, fixes #20033

6 years ago

#13 @azaozz
6 years ago

In [21677]:

Update the query strings to refresh the toolbar sprites, props ocean90, see #20033

#14 @helenyhou
6 years ago

Committed 2x png to the design repo. Would love a PSD/source file if one existed.

Note: See TracTickets for help on using tickets.