Page MenuHomePhabricator

Align notification icons with the icon styleguide
Closed, ResolvedPublic

Description

There is an initiative in progress to update the general icon set (M229) to better align to the design guidelines.
Since the icons used for notifications, reuse several of the concepts defined in the general icons, we need to update the notification icons to match the new style. That will also solve the current inconsistency where icons based on the speech bubble shape point to different directions (T161330).

An initial proposal for adjustment is shown below. Icons marked as "reused" are existing icons from the general repo.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 28 2017, 2:14 PM
Restricted Application added a project: Collaboration-Team-Triage. · View Herald TranscriptDec 28 2017, 2:14 PM

@Pginer-WMF can you provide links to updated icons here?

@Rammanojpotla For now there's a Gerrit patch with the overhauled icons at https://gerrit.wikimedia.org/r/#/c/400091/
We're also planning on making the icons downloadable as SVGs in the https://wikimedia.github.io/WikimediaUI-Style-Guide/ in near future after the patch got merged.

Volker_E triaged this task as High priority.Mar 21 2018, 10:38 PM
Volker_E added subscribers: RHo, cmadeo, alexhollender and 2 others.

Change 426122 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/Thanks@master] Update icon to latest from OOUI

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

Change 426123 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/Echo@master] Update icons to latest WMUI designs

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

Change 426124 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/Flow@master] Redraw notification icons based on latest WMUI icon set

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

Pginer-WMF updated the task description. (Show Details)Apr 16 2018, 9:00 AM

I adjusted several of the icons based on feedback, and updated the image in the ticket description.

Pginer-WMF updated the task description. (Show Details)Apr 16 2018, 9:10 AM

Can you attach SVGs?

Esanders added a comment.EditedApr 16 2018, 1:57 PM

I think the new cog icon is little harder to read at smaller sizes, the old version was clearer:


30x30


20x20

@Pginer-WMF Few comments:

  • user rights: I agree with Ed, the cog on user rights is really hard to identify, even in a 30x30 canvas
  • global: As I've added in a different channel, I think the globe's inner latitudes could be centered a tad more, similar to Firefox mobile's globe. (We should also rename the icon to 'globe')
  • edit-user-talk/flow-mention/flow-post-edited Old representation has advantage of emphasizing more people have been involved in action, newer has advantage of featuring less detail. No strong preference in one or other direction from my side…
  • flow-post-edited and changes still feature “old” pencil
Pginer-WMF updated the task description. (Show Details)Apr 17 2018, 10:29 AM

Thanks @Esanders and @Volker_E for your feedback. My comments below:

I think the new cog icon is little harder to read at smaller sizes, the old version was clearer:

  • user rights: I agree with Ed, the cog on user rights is really hard to identify, even in a 30x30 canvas

I tried to apply the guideline of having the modifiers inside the main shape, as opposed to having multiple shapes. However, unlike the article shape, the user icon does not provide much surface to be used as a canvas. I think it makes sense to go with the old approach and have separate shapes (human + cog) for this case unless/until anyone has a better suggestion for integrating them. I've updated it.

  • global: As I've added in a different channel, I think the globe's inner latitudes could be centered a tad more, similar to Firefox mobile's globe. (We should also rename the icon to 'globe')

I already adjusted it with respect to the previous version. Bringing the latitudes together make it look a bit more dense to me, but I added the comparison between previous, current, and the one you suggested (as I interpreted it):

At 1x:

At 4x:

As a reference, the current one has their lines separated at regular intervals:

  • edit-user-talk/flow-mention/flow-post-edited Old representation has advantage of emphasizing more people have been involved in action, newer has advantage of featuring less detail. No strong preference in one or other direction from my side…

Yes. Both have pros and cons. I have a slightly preference for the new representation (with less elements and bigger shapes), but decided to keep the current one as the default since the change also involves using the same symbol for "flow-post-edited" and "flow-topic-renamed". So I opted for being conservative and consider the merging of symbols later once there is stronger support for the alternate symbols.

  • flow-post-edited and changes still feature “old” pencil

Good catch. The simplified version was useful for small sizes when the main pencil shape was more complex. With the new one there is no need for it. I've updated it.

Can you attach SVGs?

I created the icons in an illustrator file, my idea was to let @Volker_E to export them as SVGs since he may do some SVG optimization and cleanup.

Volker_E added a comment.EditedApr 17 2018, 9:36 PM

There seems to be a small misunderstanding, which globe I was referring to – I was referring to the alternative with just two inner latitudes on the right of your proposal.
As comparison the Firefox Mobile one, that I think is working very well:

Change 428155 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/ContentTranslation@master] Update notification icon to latest design

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

The only icon in the repo not updated by this is 'mention-failure':

Change 428155 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Update notification icon to latest design

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

Pginer-WMF updated the task description. (Show Details)Apr 30 2018, 3:37 PM
Pginer-WMF updated the task description. (Show Details)Apr 30 2018, 3:41 PM

I updated the "globe" and "mention-failure" icons. Thanks for the feedback @Volker_E and @Esanders

Looks good to me!

Change 426124 merged by jenkins-bot:
[mediawiki/extensions/Flow@master] Redraw notification icons based on latest WMUI icon set

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

Change 426122 merged by jenkins-bot:
[mediawiki/extensions/Thanks@master] Update icon to latest from OOUI

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

I got a "flow-topic-renamed" notification, and the icon looks different than expected. The pencil seems too close to the bottom edge of the speech bubble:

This is a zoomed version of the reference icon in the design document, where a larger padding is used:

@Volker_E, do you know if this may be due to some export issue?

Another inconsistency I noticed is that the speech bubble size for "flow-new-topic" and "flow-topic-renamed" is different:

Change 434765 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/Flow@master] Icon fixes

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

Change 434765 merged by jenkins-bot:
[mediawiki/extensions/Flow@master] Icon fixes

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

Volker_E removed a project: Patch-For-Review.
Volker_E added a subscriber: Etonkovidova.

@Etonkovidova Please sign-off!

Change 426123 merged by jenkins-bot:
[mediawiki/extensions/Echo@master] Update icons to latest WMUI designs

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

Etonkovidova added a comment.EditedMay 28 2018, 11:21 PM

As per @Pginer-WMF noticed

the speech bubble size for "flow-new-topic" and "flow-topic-renamed" is different

I checked the sizes for those icons - they have the same sizes - 30x30

But I agree with the following @Pginer-WMF comment:

"flow-topic-renamed" notification [...] the icon looks different than expected. The pencil seems too close to the bottom edge of the speech bubble

I checked the icons in betalabs (also checked them for IE and mobile (MinervaNeue)) - they look consistent across browsers/skins. Two very minor things:

  • the size of icons seems a little bit too big?

  • the globe icon has only one latitudinal line - is it ok?


@Volker - if all above seem to you ok, you may close the ticket.

Volker_E closed this task as Resolved.May 28 2018, 11:37 PM

Thanks @Etonkovidova, 'globe' was intended to feature such simplification. I don't see the other things as problematic or stoppers here. Let's resolve this and file follow-ups if other users see any issues.