Page MenuHomePhabricator

Review "tray" icon
Closed, ResolvedPublic1 Estimated Story Points

Assigned To
Authored By
Pginer-WMF
May 12 2016, 11:28 AM
Referenced Files
F4463719: Screen Shot 2016-09-13 at 9.32.52 AM.png
Sep 13 2016, 1:36 PM
F4463718: Screen Shot 2016-09-13 at 9.33.23 AM.png
Sep 13 2016, 1:36 PM
F4286116: pasted_file
Jul 18 2016, 7:33 PM
F4286229: pasted_file
Jul 18 2016, 7:33 PM
F4286213: pasted_file
Jul 18 2016, 7:33 PM
F4286226: pasted_file
Jul 18 2016, 7:33 PM
F4286222: pasted_file
Jul 18 2016, 7:33 PM
F4286216: pasted_file
Jul 18 2016, 7:33 PM

Description

As part of the reorganisation of the notification menus (T123018), we need to change the representation of one of the badges. While "alerts" still conveys the idea of the most urgent notifications, "messages" (with the talk bubble icon) no longer works since there will be notifications not related to conversations (e.g., a page being linked).

An inbox tray has been proposed as a generic way to rpresent the non-urgent notifications ( other concepts were explored at F4000095):

tray-example.png (53×67 px, 990 B)

Vector file:

Example in context:

Screen Shot 2016-04-16 at 05.18.16.png (228×578 px, 94 KB)

Integration
If there are no issues, the icon should be integrated to the standard icon repo(s).
In the vector file, I based the spacing around the shape in the "Bell" icon, since it will appear next to it in practice, but please let me know if there is any other consideration I'm missing.

Event Timeline

Change 298030 had a related patch set uploaded (by Jforrester):
icons: Provide a 'tray' icon in alerts pack

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

Jdforrester-WMF triaged this task as High priority.
Jdforrester-WMF added a project: OOUI.
Jdforrester-WMF set the point value for this task to 1.

Comment form gerrit: "The top left and top right rounded corners connect to diagonal lines, but have vertical control points."

pasted_file (424×503 px, 10 KB)

Jdforrester-WMF lowered the priority of this task from High to Medium.Jul 12 2016, 6:37 PM
Jdforrester-WMF moved this task from Backlog to Doing on the OOUI board.
Volker_E renamed this task from Provide a "review tray" icon to Review "tray" icon.Jul 14 2016, 6:15 PM

After talking to @Pginer-WMF this task was meant to get feedback and if there are no further objections, it should be implemented.

Comment form gerrit: "The top left and top right rounded corners connect to diagonal lines, but have vertical control points."

Is that easy to fix? @Pginer-WMF is on vacation now and I'd like to not wait three weeks if possible.

@Catrope Yes, it is. There was one more comment by @RHo on the proposed icon, that I'd suggest to wait for. But after that we should finish this and iterate later if necessary.

Hi, sorry for the late notice but I have two comments.

1. Can we reconsider separating out Urgent notifications from the Alerts icon?
The established mental model for users is that there are 2 types of messaging - Notifications which are system/app-generated alerts or messages, and Messages which are two-way communications between user and other parties.
This can be seen on a number of sites such as AirBnb, Gmail, Facebook, and Twitter to name a few.[1]

My main suggestion is that instead of separating 'urgent' from non-urgent notifications into a separate icon and list, can we list them still under the one list under the alerts bell icon, but indicate the urgent items with say an "!" icon.

If we do decide to continue with separating the urgent notifications as a separate icon, perhaps something that is not an inbox tray, an icon related to messaging which per above is distinct from notifications, such as a Flag or perhaps a bell with an "!" inside.

2. Icon set visual cohesion
If we do end up proceeding with a tray icon regardless, then it would be good to update its visual style. The proposed icon uses a trapezoidal shape to represent the tray, which suggests it is being seen from an angled perspective, whereas virtually all other icons in our set use a flat front- or side-on view.
If we do intend to stick with a tray, we may want to use something more like the inbox icon from Google's Material icon set:

pasted_file (101×76 px, 1 KB)

[1] Some examples of other places with the convention of messages vs notifications
Airbnb

pasted_file (160×340 px, 13 KB)

Gmail
pasted_file (183×709 px, 39 KB)

Facebook
pasted_file (64×425 px, 11 KB)

Twitter
pasted_file (68×397 px, 6 KB)

LinkedIn
pasted_file (89×221 px, 4 KB)

  1. Can we reconsider separating out Urgent notifications from the Alerts icon?

Wasn't that done six months ago?

  1. Can we reconsider separating out Urgent notifications from the Alerts icon?

Wasn't that done six months ago?

Apologies, I wasn't here 6 months ago so do not know the full history that lead to this point, so perhaps am not aware of the original counter-points that resulted in this decision.
However, if this is now deemed "too late", please refer to the rest of my comment about using alternative icons, or at the very least updating the visual style of the tray icon.

  1. Can we reconsider separating out Urgent notifications from the Alerts icon?

Wasn't that done six months ago?

Apologies, I wasn't here 6 months ago so do not know the full history that lead to this point, so perhaps am not aware of the original counter-points that resulted in this decision.

No worries, I was just confused.

The screenshot shown at the top of the task shows that we're already splitting alerts (urgent things) and notices (less urgent things). This task is about replacing the "chat bubbles" icon, as almost none of the things in there involve humans speaking to other humans.

I was concerned that I've missed some part of the discussion. :-)

However, if this is now deemed "too late", please refer to the rest of my comment about using alternative icons, or at the very least updating the visual style of the tray icon.

Sure, I don't particularly mind either way if someone has a better asset to use.

I have feedback on wiki (as well as on IRC) from people who don't understand why they still have the bubble speech icons (aka "messages") for "Notices".

When that icon will be reviewed and deployed?

  1. Can we reconsider separating out Urgent notifications from the Alerts icon?

Wasn't that done six months ago?

Kind of, but not really. The alerts/messages separation as it was done ~9 months ago didn't make much sense. Last week, we finished re-arranging this separation so that things make some sense: urgent notification types are now under "alerts" (the bell icon) and non-urgent ones are now under "messages". This is the first task Pau referred to in the description of this task, T123018: Revise Sorting of Notifications on the Fly-Out Menus. Now that this is done, the name "messages" doesn't make sense any more (so we renamed it to "notices"), but the speech bubble icon also doesn't make sense any more, which is why we want to replace it with this tray icon or something like it.

I have feedback on wiki (as well as on IRC) from people who don't understand why they still have the bubble speech icons (aka "messages") for "Notices".

When that icon will be reviewed and deployed?

If we want @Pginer-WMF to respond to @RHo 's critique/suggestions, then we have to wait for him to be back from vacation on August 10th. Alternatively, we can go with one version now and refine it later.

Roan suggests:

If we want @Pginer-WMF to respond to @RHo 's critique/suggestions, then we have to wait for him to be back from vacation on August 10th. Alternatively, we can go with one version now and refine it later.

To come up with the current plan, we considered many different sorting schemes, consulted the user community and then actually surveyed users. Rita makes some interesting points and I wish she's been around for the discussion, but basically, yes, it's too late to reconsider the logic of the current split.

Re. using an inbox as the icon for "Notices" (not "Messages"), I share the feeling that this is not perfect, but after discussing the question with Pau and Volker I'm pretty sure there is no ideal representation for this concept. Everything we discussed had pros and cons. The inbox conveys the somewhat dull and quotidian nature of "Notices" reasonably well, and I'm content to move forward with it.

As Benoit notes, the current situation is that we're using an icon (chat bubble) that does not match the concept well at all. So I'd like to complete T115845 as soon as possible. If the Design team wants to change the representation of the tray (or even change the icon--though not the concept--to something else), that can easily be accomplished after Pau returns.

@jmatazzoni – that sounds very reasonable, apologies for rehashing discussion. I can follow up with Pau when he returns about potentially improving the tray icon.

I'd like to complete T115845 as soon as possible.

{{strong support}}

@jmatazzoni – that sounds very reasonable, apologies for rehashing discussion. I can follow up with Pau when he returns about potentially improving the tray icon.

Cool, thanks! :)

I mark that task as stalled until @Pginer-WMF is back from vacation.

Trizek-WMF changed the task status from Open to Stalled.Jul 20 2016, 2:49 PM

1. Can we reconsider separating out Urgent notifications from the Alerts icon?

I think that there are different aspects that intersect here. We can consider different alternatives depending on where the problem is (but we need to clearly identify that first):

Organising notifications by urgency.

We identified that in the previous model of alerts vs. messages, users were perceiving alerts to be more "urgent" and there was a mismatch of expectations when users were notified about an alert that was not considere that urgent.

For example, a user sees he alert badge highlighted and thinks that something needing immediate action is needed (e.g., her edit was reverted) and opens the notification panel just to find out that a popular article she created was linked from another page one more time (something that she would have preferred to check later at her own pace, instead of causing interruption).

Given the diversity of notifications, and the need to make an early decision on whether to stop the current activity to check notifications or check them later, I think it makes sense to communicate the urgency in some way to facilitate this decision making process.

How much separation is needed.

Do we need to separate these types of notifications so much as to have two separate panels? Maybe not. That is an approach that was inherited from previous changes and we can definitely explore alternatives. I'm totally for reducing complexity in the user tool bar, and having a single entry point for notifications would help with that.

Having a marker on each notification (e.g., a "!" as in your example) is worth exploring but we need to consider that it requires the user to look for them in when surrounded by the non-urgent ones (which by definition we expect to occur more often and tend to accumulate easily). The main challenge is how to surface such info so that the user can decide whether is worth to check the new notifications or not the early as possible.

In previous explorations we considered the possibility of having a single entry point and using a different color for the badge in case urgent notifications are present (blue if there are only non-urgent notifications; red if there is at least one urgen notification to pay attention to). We can explore more options.

Choosing the right metaphors.

One interesting aspect about urgency is that although most people would consider that it may vary a lot from people to people, when organising our current notifications by priority, the division was quite consistent in the research we did. However, the essential criteria for what's urgent/non-urgent is not easy to express in simple words/shapes:

Notifications that affect very directly the user (the user explicitly mentioned in a conversation, a message in the user talk page) are perceived as requiring immediate action (i.e., "urgent"). Activity that the user is interested in (e.g., conversations that participated and get new replies, or pages that link to the ones the user created) do not deserve immediate context switch and users prefer to check them at their own pace (e.e., non urgent).

This division is not easy to communicate. One model I proposed was to present the less urgent group as the "inbox", as a neutral place where notifications go by default, but the urgent ones get promoted into "alerts".
I explored other concepts for the non-urgent set based on the concept that makes them less urgent such as "activity", "interests", "subscriptions" (and possible visual representations: F4000095).

Finally, the "inbox" term was changed to "notices", which I was not a big fan of since I was not sure that it emphasised the distinction enough (probably influenced by the fact that in my native languages the corresponding word has a meaning too close to "alerts" and "notifications").

2. Icon set visual cohesion

The proposed representation makes sense. We could adopt this approach if we consider it more aligned with the rest of the icons. One interesting thing is that the Material design icon also presented in perspective, but flattened (otherwise you'll see either the front of the drawer if seen from the front; or a square,if seen from top).

What I wonder is how much the confusion captured in T142511 is because (a) the shape itself, (b) the metaphor or (c) how the metaphor matches the user expectations.

FYI that when the tray has 99+ unread notices, the counter basically overlaps with the "Talk" link.

FYI that when the tray has 99+ unread notices, the counter basically overlaps with the "Talk" link.

On which browser?

FYI that when the tray has 99+ unread notices, the counter basically overlaps with the "Talk" link.

On which browser?

Google Chrome/OS X, at least.

MonoBook (with some modifications to shorten the text):

Screen Shot 2016-09-13 at 9.32.52 AM.png (61×1 px, 21 KB)

Vector:

Screen Shot 2016-09-13 at 9.33.23 AM.png (90×1 px, 26 KB)

For what it's worth, I thought the icon was a car windshield. I think using a tray icon for non-urgent notifications is overly clever.

Also Safari with OSX. when Italian is your interface language, it hides a good portion of the first letter of "discussioni".

FYI that when the tray has 99+ unread notices, the counter basically overlaps with the "Talk" link.

This bug is already tracked at T142454: Notices tray icon with 99+ needs more space . Feel free to check the proposed approach and add any related comments/questions.

FWIW typing 99+, with or without quotes, on Phab didn't return any results.