Page MenuHomePhabricator

Decide on a nice logo for Echo notifications
Closed, ResolvedPublic

Assigned To
None
Authored By
matej_suchanek
Aug 4 2016, 4:39 PM
Referenced Files
F7925723: pasted_file
May 5 2017, 8:48 AM
F7795306: pasted_file
Apr 27 2017, 6:15 PM
F7753449: WB_Favicon_30.svg
Apr 25 2017, 12:32 PM
F7753448: WB_Favicon_blue16.svg
Apr 25 2017, 12:32 PM
F7752588: pasted_file
Apr 25 2017, 12:03 PM
F7751646: WD_Favicon_blue.svg
Apr 25 2017, 11:06 AM
F7750606: Wikidata Echo notification icon blue.svg
Apr 25 2017, 8:59 AM
F7748955: pasted_file
Apr 25 2017, 5:48 AM
Tokens
"Love" token, awarded by matej_suchanek.

Description

We need a logo for Echo notifications for both:

  • Generic Wikibase installations
  • Wikimedia Wikibase installation.

Note that this involves changing $wgWBClientSettings['repoIcon'] on clients.

Speaking of the screenshot, something just popped-up in my mind: are you going to use the Wikidata logo as an icon?
Collaboration team preferred not to do that for cross-wiki notifications. What is your rationale behind that logo use?

I think the Wikidata logo is fine to use for now (or forever).
In the future (and a separate task) it could potentially be tweaked to something else.

(I believe we didn't use project logos for cross-wiki notifications, because we decided to only use text (language/project-name) to indicate which other wikis the cross-wiki notifications are coming from.)

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

*facepalm* that I didn't have the idea to involve WMDE guys. Thanks for help!

Thanks for adding us! I have several very rough ideas what this is about . If someone could briefly describe the context of this issue (in particular from a user's perspective) it would enable us to work on this.

thiemowmde triaged this task as Lowest priority.Sep 5 2016, 2:31 PM
thiemowmde subscribed.

I believe this is about being notified when something on wikidata.org changed that might affect a local article you are watching. With this in mind, here are some possible icon ideas:

  • A puzzle piece would be nice, because what changed is literally one of the pieces the article is made of. But puzzle piece icons are used way to often.
  • Just a "D" for data.
  • Meta data is often visualized with a label or badge.
  • When searching for "piece" I find chess pieces as well as a piece of cheese and cake. Might be an idea.

I like the puzzle piece idea, since it is easy to visualize and has a meaningful metaphor.

I wonder: Is there anything speaking against using a small Wikidata logo? That is probably what most people associate with Wikidata.

I believe a puzzle piece is a no-go in our environment:

Hm, I wonder how a Wikidata puzzle would look like? Sounds like a Beer & Cake project. https://commons.wikimedia.org/wiki/Category:Wikidata_logo_proposals contains some inspiration.

During yesterdays WMDE tech team event I created a series of icons for Wikidata notifications. Personally I like the third column with the speaking Wikidata logo the most.

Wikidata Echo notification icons.png (200×200 px, 1 KB)

During yesterdays WMDE tech team event I created a series of icons for Wikidata notifications. Personally I like the third column with the speaking Wikidata logo the most.

I have to say I dislike the "speaking" ones (either the WD symbol speaking of the implied speaking of the others). :D Besides my aesthetic opinion, we're just sending a notification, not attempting to 'speak' to a user.

If I had a choice, it would be the Wikidata logo, colored, without the text. So row 1 column 1 without text.

I agree with the above regarding non-use of a puzzle piece.

@thiemowmde Thanks for showing the designs! Is the above image the size it is intended to be used in or would the icons-in-use be smaller?

The icons in-use are 30px by 30px, which is a bit bigger than the images above. (Identical size in special:notifications, and the panel (flyout), and the email).

I respected the 30x30 canvas and used a screenshot as a background while constructing my icons. They are very carefully aligned to be pixel-perfect. You could resize them, but you will lose these alignments.

The problem with just using the Wikidata logo is the use on 3rd party installations. They have their own Wikibase install with their own logo.

The problem with just using the Wikidata logo is the use on 3rd party installations. They have their own Wikibase install with their own logo.

Then basically all of the logos thiemowmde are "bad" if that's an evaluation criterion--all of them invoke that symbol (I am surprised that concern would not have been voiced at the tech team event, but since I'm not privy to the details of those ongoings... :) ). If that's a great concern, shouldn't we make the icon customizable local to a Wikibase install, with some sane default icon?

I think that is the way to go yeah.

@Izno @Lydia_Pintscher

They have their own Wikibase install with their own logo.

If the intention was to provide a logo to be used in connection to the Wikidata-Project, using Wikidata’s logo makes sense to me. If @thiemowmde’s suggestions would be the standard-icon for all installs, this would indeed be a problem and a not-project-bound logo would do better imho.

Criticizing others work is easy. Where are you guys proposals?

I played around with the puzzle piece idea, the piece of cheese and cake ideas as well as several others, but nothing turned our to make much sense, except the Wikidata logo, so I decided to visualize this so we can all see and talk about it.

I believe a good candidate could be a lego brick, a socketed microchip (like the Wikidata logo proposal https://commons.wikimedia.org/wiki/File:WikiData_logo_candidate_1_icon.svg) or simply the Wikibase logo (https://commons.wikimedia.org/wiki/File:Wikidata_logo_proposal_variation_3.svg).

thiemowmde raised the priority of this task from Lowest to Medium.Sep 12 2016, 12:19 PM

Criticizing others work is easy. Where are you guys proposals?

Careful--please remember the rules of Phabricator. (Aside: We are under no requirement to provide proposals.) That said, I definitely did already--just without the pretty visualization. I trust, if you wanted to, you could make the same using one of the already-provided icons fairly trivially.

I believe a good candidate could be a lego brick, a socketed microchip (like the Wikidata logo proposal https://commons.wikimedia.org/wiki/File:WikiData_logo_candidate_1_icon.svg) or simply the Wikibase logo (https://commons.wikimedia.org/wiki/File:Wikidata_logo_proposal_variation_3.svg).

That's the Wikibase logo? o.o

Maybe a better way, instead of attempting to throw spaghetti at the wall and see what sticks, is to lay out some acceptance criteria for a notification icon. Some thoughts:

  • Intelligible -- the icon should be understandable at 30px
    • Don't have to get close to the monitor to understand the logo
    • Don't need to read anything
  • Distinction
    • The "elementary" shapes used have a meaning and preferably only one meaning
  • Evokes -- the composite shape/icon should evoke some_value, where some_value may be (depending on scope of this task; or possibly multiple):
    • Event type e.g. addition of an interwiki link, addition of a statement, editing of an item
    • Wikidata
    • Wikibase
    • Another as agreed to in this task
  • Evoke only something from the above list
    • E.g. as I suggested above, why a speech bubble when we are not doing any sort of speaking, and notifications already have their own symbol(s)

Others appreciated.

Another idea from me would be the hub and spoke design (1 hub, center, with n spokes) of e.g. the main page lead image. Would this fit the criteria above?

Lydia wrote:

They have their own Wikibase install with their own logo.

If the intention was to provide a logo to be used in connection to the Wikidata-Project, using Wikidata’s logo makes sense to me. If @thiemowmde’s suggestions would be the standard-icon for all installs, this would indeed be a problem and a not-project-bound logo would do better imho.

Lydia's reply actually confused me, because it seemed to me that this task was specifically about the Wikimedia use case, not the 3rd party use case. If we all agree this is about Wikimedia use case, maybe @Lydia_Pintscher should open a task for the generic case.

Thiemo and I discussed this a bit more today. Decision: we will use a generic icon and overwrite it in Wikimedia with a Wikidata specific icon.

Thiemo and I discussed this a bit more today. Decision: we will use a generic icon and overwrite it in Wikimedia with a Wikidata specific icon.

So, is the task scope the generic need or the Wikimedia need? :D (Consider updating the description in response.)

It is both. I don't think it makes sense to separate them but if needed we can.

I meant this task to be Wikimedia specific as the default one is the default Echo one (but don't say it should stay so).

But we'd like to have a more specific icon than the default echo icon as well, no?

echoDatabaseIcon.png (227×219 px, 7 KB)

What about a generic database icon in Wikimedia colors?

This was an actual Wikidata logo proposal: https://commons.wikimedia.org/wiki/Category:Wikidata_logo_proposals. I think the 3D effect is a bad thing for the small icon size we are talking about here, so yes, your proposal above is perfect, I believe.

I made two patches for this:

Once we are done with these. We can proceed to enabling it in test wikis.

Change 349411 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] Change client setting 'repoIcon' to 'echoIcon'

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

Update after short discussion with Charlie and Amir: We will use the Wikidata Logo without text for the installation in Wikimedia and Charlie will create one for the 3rd party installations. The latest one still has Wikimedia colors which is probably not a good idea for the 3rd party installs.

Given that gerritbot still hates me. This patch adds the echo icon into the wikimedia config repository:

Change 349412 abandoned by Ladsgroup:
Add echoIcon.png to client assets

Reason:
In favor of Ic72eb62e166f34607fad517072b6ca86d738ae1f

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

That's strange. For me, it's like this:

pasted_file (392×434 px, 17 KB)

Also Inkescape and firefox:

pasted_file (1×1 px, 366 KB)

And chrome:

pasted_file (137×1 px, 14 KB)

Can you double check (or check on someone else's computer?)

I've checked the image on my computer. In browsers and inkscape it looks fine. But it in gimp, and ubuntu's "image viewer" it looks broken in a way that Thiemo reported. I guess we should care most of browsers, but still might try to remove some SVGO option, and have a slightly bigger file but with less risk that the icon will be looking wrong.

@Ladsgroup: Here is a blue Wikidata logo using the #36c color from the current Wikimedia style guide. Extracted from what I posted in T142104#2618898. Made to be pixel perfect in 30 by 30 pixels. Already optimized using SVGOMG.

That's perfect. Thanks. I added it.

hey @thiemowmde and @Ladsgroup thanks for your work on the icon.

Lydia and I had discussed to use the favicon instead of the full Wikidata logo since on a small scale it starts looking kinda fuzzy with all the tiny lines. Using only blue is a good idea I think because it then matches all other notifications which are kept in one of 3 colors (one of which is the blue you used).

Here's the favicon icon i suggest we use:

For the 3rd party installations notification I'll think of smth in the next hour since we decided not to use the Wikimedia-colored database icon since it's not going to be used in a Wikimedia context.

It will look like this when implemented:

pasted_file (156×693 px, 14 KB)

(I used inspect to get this working, no backend magic)

@Ladsgroup do you know how many pixels are dedicated to the icon? or what range (depending ons screensize)? It seems larger than I thought.

Per CSS, it's 30px by 30px:

.mw-echo-ui-notificationItemWidget-icon img {
    height: 30px;
    width: 30px;
}

@Ladsgroup

If it is that large (I'd say starting from 50x50px) we can safely use @thiemowmde 's version. No need for a favicon in that case. If it will be shown smaller on smaller screens I suggest sticking with the favicon.

For the 3rd party installations I've made a favicon of the wikibase logo. I've made two versions.

One is suited better up until 25px (which I suggest we should use in the tab on wikiba.se because currently it's just a blue smudge)

and one which is useful when the icon is 30px or larger which we can use for the echo notification.

Per CSS, it's 30px by 30px:

thanks! then I say let's stick with the favicon :)

Uhm, pals. I already went through all this when I created T142104#2618898. It makes me sad to see multiple (!) people going through all the same already solved issues again. Don't you think it would be worth it to avoid this somehow?

There is a 30px by 30px canvas for the icons reserved in the Echo CSS. But no existing icon is using this full canvas. All have a 2px or 3px padding. I considered this when I created all the versions I uploaded here, including the last one. Just scaling an image to 30px by 30px will most probably lead to one that looks like it is to big. The scaling should be done on a screenshot (which is what I did), to be able to see how it will look together with other Echo icons.

Hey @thiemowmde I didn't know about the padding issues etc. I didn't even know there were any. Mentioning this would have probably been helpful in avoiding this.

How to resolve this: I still think we need to use a favicon because of the aforementioned reasons. If I add a padding of 2 or 3px to the favicon, will that solve the issue in your opinion?

I'm sorry if this has disgruntled you. I would like to see this solved in the best way possible just as much as you do probably :)

While I was working on T142104#2618898 I remember some frustration because the full-res Wikidata logo barely fits into the space the Echo extension gives us, and becomes fuzzy and blurry almost all the time. So I agree it's a very good idea to use the simplified favicon shape. I suggest to do so.

I'm just not sure if it should be blue or use the original colors. I'm also not absolutely sure if a 2px or 3px padding is best. I would make a screenshot, put it into Inkscape and draw on top of it to find the best size.

So the problem is that the icons should have some build-into-the-image padding and we don't know what the padding specifically is, so we need to review existing icons to approximate some distance? If that is the problem we might want to talk to frontend standardization to get it specified somewhere (or maybe there is a standard for all icons)

This sound overly complicated. Just look at the existing icons, take a screenshot, and start drawing on it. There is no standard applied on the existing icons. It's just that some look very big, and are scaled down a bit to look better when close to other icons that look smaller. That's all.

I have a suggestion. Let's deploy it in beta cluster with the current icon (favicon without padding) and then we see what's going on and apply the padding as needed. Changing an icon (before the deployment in prod) is as easy as a mediawiki-config patch.

I have a suggestion. Let's deploy it in beta cluster with the current icon (favicon without padding) and then we see what's going on and apply the padding as needed. Changing an icon (before the deployment in prod) is as easy as a mediawiki-config patch.

Sounds good to me. So the icon to be used would be the favicon, last touched by @Charlie_WMDE. The icon would be used at beta and there we can see how it looks like without breaking anything.

@Ladsgroup: Can you make this happen?

Change 349984 merged by jenkins-bot:
[operations/mediawiki-config@master] Enable echo notification for wikibase clients in beta cluster

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

Mentioned in SAL (#wikimedia-operations) [2017-04-26T10:45:54Z] <ladsgroup@naos> Synchronized static/images/wikibase/echoIcon.svg: T142104, part I (duration: 01m 04s)

Mentioned in SAL (#wikimedia-operations) [2017-04-26T10:47:25Z] <ladsgroup@naos> Synchronized wmf-config/Wikibase-labs.php: T142104, part II (duration: 00m 56s)

We actually have a patch (waiting for SWAT today)

Change 350584 had a related patch set uploaded (by Ladsgroup; owner: Amir Sarabadani):
[operations/mediawiki-config@master] Fix echoIcon for wikibase in testwikis

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

Change 350584 merged by jenkins-bot:
[operations/mediawiki-config@master] Fix echoIcon for wikibase in testwikis

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

This is the new results:

pasted_file (533×720 px, 72 KB)

What do you think?

In my opinion it looks much more like an abstract icon, and much more in place in this context, in contrast to my proposals, which all had a lot of small details. I like it very much, actually much more than all my proposals. Good job. I would say: keep it as it is. No extra padding necessary.

Ladsgroup moved this task from Backlog to Done on the Wikidata-Former-Sprint-Board board.

Hey,

I'm glad to see everything worked out and everyone is happy :)

Would it be possible to also check how the 3rd party installation icon will look? @Ladsgroup I would like this to be closed for all points of the ticket.

Thanks!

Sorry for late response. I actually had made a patch a day before you made this comment: https://gerrit.wikimedia.org/r/#/c/351168/

No worries :)

Could you post a screenshot here again when it is ready?