Page MenuHomePhabricator

Evaluate design of notifications inbox (“tray”) icon
Open, Needs TriagePublic

Description

There have been comments about the new inbox (“tray”) icon used in notifications. Benoit summarized some in T140900.

There is comments about the tray icon. Most of time people don't understand the meaning of that icon.

  • on en.wp ("bikini top")
  • on fr.wp ("rear of my car")
  • on de.wp ("subway face")

Meanwhile, in T135114, there were specific comments about the icon style from @RHo. Please evaluate the issues and what steps might remediate.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 9 2016, 6:15 PM
Volker_E renamed this task from Evaluate design of notifications in-box icon to Evaluate design of notifications inbox (“tray”) icon.Aug 9 2016, 9:38 PM
Volker_E updated the task description. (Show Details)
Trizek-WMF edited subscribers, added: Trizek-WMF; removed: Trizek.Aug 10 2016, 7:24 AM

As I mentioned in T135114#2543043, a key aspect is to determine whether the confusion is due to (a) the way the shape is drawn, (b) the metaphor used, and (c) the user expectation of such metaphor in this context. That is:

  • Is the shape not recognisable as an inbox tray? Checking icons for this concept it seems that we didn't diverged much from common representations. We can adopt @RHo proposal (T135114#2472385), but that is not going to help much if the problems are at a deeper level.
  • Can the inbox/notices concept represented in a better way?
  • Is there another concept that better clarifies the distinction of notification types that better fits the user mental model?

Reading the comments it is hard for me to identify at which level the problem is. Once you bring attention to a shape (an icon or a cloud) is is easy to get input on what that may look like to. Some comments seem originated for a confusion on which kind of information may be expected behind that icon, others refer only to the shape itself.

  • Is the shape not recognisable as an inbox tray?

Is that concept common across cultures?

  • Can the inbox/notices concept represented in a better way?

A note pinned?

But the first question is to know if there is a real problem about that icon, broader than some feedback from three wikis, sometimes from active users who don't feel confortable when something change in the interface.

RHo added a comment.Aug 11 2016, 11:11 AM
  • Is the shape not recognisable as an inbox tray? Checking icons for this concept it seems that we didn't diverged much from common representations. We can adopt @RHo proposal (T135114#2472385), but that is not going to help much if the problems are at a deeper level.

I agree that it is not that this is unrecognisable as an inbox tray since it is a commonly used representation (Instagram, Gmail as some key examples used internationally).

  • Is there another concept that better clarifies the distinction of notification types that better fits the user mental model?

More likely it seems that the context could be throwing some people off, since they may not be associating notifications on Wikipedia as something that goes into an Inbox, which is more associated with email messages between the user and other parties.

  • Can the inbox/notices concept represented in a better way?

Based my comment on {T135114#2472385}, below are some alternative suggestions to the tray icon below for distinguishing between less-urgent notifications as being 'notices' or on a 'noticeboard' vs the already established bell for urgent alerts.

  • The first is quite similar to the note-pinned example @Trizek-WMF shared earlier, and the other three noticeboard concepts to convey that these are one-way 'announcements' rather than something necessarily requiring action or response. V1 and V3 try to reference/complement the Alerts bell in order to connect the two notification types better.

    Trizek-WMF added a comment.EditedAug 11 2016, 1:04 PM

    I think v2 or Note ideas may be the best approach. v2 looks like a hanged board, with lines; Note as a small notebook. That's really common and understandable, especially the v1 (my favorite so far) as a note, a menu, a sign.

    V1 is unclear I think. My first feeling was it looks like a framed Christmas tree :)
    I haven't identified v3 to the idea of a note or a board. I didn't managed to recognize it as something I know.

    That's of course personal comments, based on my own culture and my own experience. : )

    The more I use Echo the more confused I am about having 2 panels. I always end up opening both or clicking on one badge quickly, before the page has fully loaded, to go to the special page.

    From what I usually receive, I'm more interested in the new topics on some forum boards (in notices) and less in technews (no offence) on my talk page (in alerts). I guess the metaphor of urgent vs less urgent just doesn't match my own situation.

    However, the grouping by pages on the special page is just wonderful to scan, identify, and navigate to what I care about quickly.

    If I knew how to write a user script, I would write one to disable the panels and always navigate to the special page on click.

    Anyway, my 2 cents.

    The more I use Echo the more confused I am about having 2 panels. I always end up opening both or clicking on one badge quickly, before the page has fully loaded, to go to the special page.

    I often have that problem.

    However, the grouping by pages on the special page is just wonderful to scan, identify, and navigate to what I care about quickly.

    I would love to have filters by notifications type on it to scan even more quicker.

    If I knew how to write a user script, I would write one to disable the panels and always navigate to the special page on click.

    Could it be a feature?

    My two cents: re. RHo's noticeboard design, v2, below: I think this illustrates the difficulty of illustrating this concept, especially at this very small size. I'm not trying to be obtuse, but to me that looks like a shopping bag.

  • I kind of like the "pinned note" ideas Benoit linked to. Among those, this one maybe seems the simplest and clearest. But as above, I don't know how well it will scale.

    If we can find a better solution here, that would be nice. But I'd hate to see us spend too much time on this. Part of the issue may be, as Pau suggests, the overall concept, which is apparently also hitting snags among translators. At this point I don't know if there is a perfect solution to be found conceptually. Different people get different types of notifications, and so their inboxes will have different characters. When we tried to get user input on different systems before, it was difficult. I'm not convinced the research necessary to find the perfect system would be justified, or that we have the bandwidth for it right now unless we see substantial user rejection.

    The more I use Echo the more confused I am about having 2 panels. I always end up opening both or clicking on one badge quickly, before the page has fully loaded, to go to the special page.

    I created a ticket to explore the idea of using a single entry point while still surfacing the urgency: T142981: Provide a single entry point for notification that anticipates the urgency of the notifications received

    This will solve the issues related to the way notifications are split, while still helping users to decide how urgent is to check notifications immediately (which was the underlying issue that motivated the split).

    If I knew how to write a user script, I would write one to disable the panels and always navigate to the special page on click.

    Could it be a feature?

    We could keep the link-like behaviour of the badges where opening them in a new window by shift+click opens the notification page.

    In any case, I understand this as a symptom that should lead us to make the panel more clear, not only provide ways to skip it.