Align notification icons with the icon styleguide
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	Pginer-WMF
	Dec 28 2017, 2:14 PM

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.

notifications-overview@3x.png (1×2 px, 151 KB)

Details

Subject	Repo	Branch	Lines +/-
Update icons to latest WMUI designs	mediawiki/extensions/Echo	master	+32 -26
Icon fixes	mediawiki/extensions/Flow	master	+4 -2
Update icon to latest from OOUI	mediawiki/extensions/Thanks	master	+16 -10
Redraw notification icons based on latest WMUI icon set	mediawiki/extensions/Flow	master	+33 -12
Update notification icon to latest design	mediawiki/extensions/ContentTranslation	master	+2 -6

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Resolved		Esanders	T183749 Align notification icons with the icon styleguide
		Resolved		Volker_E	T161330 Flow: Notification icons point to different directions

Event Timeline

Pginer-WMF created this task.Dec 28 2017, 2:14 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 28 2017, 2:14 PM

Pginer-WMF added projects: UI-Standardization, Notifications (Echo).Dec 28 2017, 2:14 PM

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

Pginer-WMF mentioned this in T161330: Flow: Notification icons point to different directions.Dec 28 2017, 2:19 PM

Pginer-WMF updated the task description. (Show Details)

• Prtksxna subscribed.Dec 29 2017, 1:51 AM

Liuxinyu970226 subscribed.Dec 30 2017, 2:14 AM

• jmatazzoni moved this task from Untriaged to External on the Collaboration-Team-Triage board.Jan 2 2018, 7:50 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 moved this task from Unsorted to Icons standardization on the UI-Standardization board.Mar 19 2018, 5:09 AM

Volker_E triaged this task as High priority.Mar 21 2018, 10:38 PM

Volker_E added subscribers: RHo, cmadeo, • alexhollender_WMF and 2 others.

Esanders added a subtask: T161330: Flow: Notification icons point to different directions.Apr 13 2018, 4:49 PM

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?

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:

In T183749#4133595, @Esanders wrote:

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

In T183749#4135112, @Volker_E wrote:

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:

world-alternatives.png (164×516 px, 11 KB)

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

Screen Shot 2018-04-17 at 11.31.36.png (673×896 px, 49 KB)

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.

In T183749#4133538, @Esanders wrote:

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.

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

ReleaseTaggerBot added a project: MW-1.32-notes (WMF-deploy-2018-04-24 (1.32.0-wmf.1)).Apr 24 2018, 1:00 PM

• alexhollender_WMF unsubscribed.Apr 25 2018, 7:53 PM

Pginer-WMF updated the task description. (Show Details)Apr 30 2018, 3:37 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

ReleaseTaggerBot edited projects, added MW-1.32-notes (WMF-deploy-2018-05-01 (1.32.0-wmf.2)); removed MW-1.32-notes (WMF-deploy-2018-04-24 (1.32.0-wmf.1)).May 1 2018, 12:01 AM

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

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

ReleaseTaggerBot edited projects, added MW-1.32-notes (WMF-deploy-2018-05-08 (1.32.0-wmf.3)); removed MW-1.32-notes (WMF-deploy-2018-05-01 (1.32.0-wmf.2)).May 1 2018, 9:00 PM

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:

Screen Shot 2018-05-10 at 11.15.34 2.png (142×529 px, 23 KB)

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

Screen Shot 2018-05-10 at 11.22.52.png (438×438 px, 11 KB)

@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:

Screen Shot 2018-05-10 at 11.15.34 3.png (352×197 px, 24 KB)

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

ReleaseTaggerBot edited projects, added MW-1.32-notes (WMF-deploy-2018-05-29 (1.32.0-wmf.6)); removed MW-1.32-notes (WMF-deploy-2018-05-08 (1.32.0-wmf.3)).May 23 2018, 10:00 PM

@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

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

Screen Shot 2018-05-28 at 4.19.14 PM.png (346×492 px, 36 KB)

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?

Screen Shot 2018-05-28 at 3.13.01 PM.png (454×537 px, 58 KB)

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

Screen Shot 2018-05-28 at 3.20.36 PM.png (606×653 px, 160 KB)

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

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.

Liuxinyu970226 unsubscribed.Jun 3 2018, 6:25 AM

Etonkovidova closed subtask T161330: Flow: Notification icons point to different directions as Resolved.Feb 12 2019, 10:20 PM

	F18585798: Screen Shot 2018-05-28 at 3.20.36 PM.png
	May 28 2018, 11:21 PM

	F18585808: Screen Shot 2018-05-28 at 4.19.14 PM.png
	May 28 2018, 11:21 PM

	F18585796: Screen Shot 2018-05-28 at 3.13.01 PM.png
	May 28 2018, 11:21 PM

	F18134072: Screen Shot 2018-05-10 at 11.15.34 3.png
	May 10 2018, 9:36 AM

	F18134054: Screen Shot 2018-05-10 at 11.22.52.png
	May 10 2018, 9:27 AM

	F18134026: Screen Shot 2018-05-10 at 11.15.34 2.png
	May 10 2018, 9:27 AM

	F17441032: notifications-overview@3x.png
	Apr 30 2018, 3:41 PM

	F17441017: notifications-overview@3x.png
	Apr 30 2018, 3:37 PM

Align notification icons with the icon styleguideClosed, ResolvedPublicActions

Description

Details

Related ObjectsSearch...

Event Timeline

Align notification icons with the icon styleguide
Closed, ResolvedPublic
Actions

Related Objects
Search...