Separate notifications and account options

Currently, the avatar in the top right corner acts as a unified box of various kinds of vastly different items. They’re various kinds of notifications (replies, post notifications, likes, DMs, badges), but also bookmarks and account options. At first I thought “oh clever”, but the longer I use it, the more it actually bugs me. Let’s start with some concrete problems I’m running into:

Problem 1: Notification or account error?

“number in circle overlapping icon” to me means “this thing has a message for me”. The Gmail icon with a 5 is 5 emails, the Discord icon with a 999+ is pings from people I don’t care about - I get that.

But what is a “my face with a circle”? Intuitively - it’s something about me. I keep thinking it’s an account issue - “your free trial has expired”, “please verify your email address”, something among those lines. If the circle didn’t have a number in it, I’d also opt for a “user is online” activity indicator. But never “oh it’s just a notification for a reply on your post”.

Problem 2: “How do I log out?”

This is a question that I’ve seen 3 times this year in my forum. I imagine the users steps are like this:

  1. I’m done with the forum for today. Time to log off
  2. Click on the avatar, the place where I know from ~every other website the logout button to be
  3. Be presented my notifications instead, with no logout button in sight
  4. (get confused and post in the forum how it works)

The source problem here is that the combined notification and account dropdown is monstrously complicated. Here on meta, where I’m essentially a first-time user, I see 20 elements in it - 10 notifications, 8 tabs, 2 actions. It’s completely overwhelming, and looking at it and try to sus out that the logout button is matroska-dolled away (account icon after you click your account icon) takes quite a bit of thinking power.

A proposal

My idea here would be to keep things simple:

  • Have an account button which just contains the account stuff (the avatar)
  • Have a notification button which just contains notification-type stuff (watched post activity, replies, mentions, likes, badges)
  • Have a chat button which just contains chat notifications
  • Have bookmarks as part of the sidebar, where you already have a function to add quasi-bookmarks (custom section)
  • (turn the search icon into a search bar so the icon buildup on the right is reduced - and so that people search before posting more often)

Or to visualize it, behold, my amazing figma skillz! Red circles next to icons or other UI elements (“Chat” widget, “post with reminder” in the sidebar) would be either the notification counts, or in the case of bookmarks, could also be some sort of “scheduled in 1 day” / “overdue since thursday” thing. Big red circle sitting in the blue void is part of your background :stuck_out_tongue:

Aside: What is the difference between a “personal message” (Messages) and a “personal chat” (DMs)?
IMHO, they’re topologically identical, with the main difference being that one is a bit more awkward to operate than the other. Messages have not found a good spot in my design yet (and, for reference - neither do they have one on reddit), and I’d be tempted to merge the two systems, or perhaps call one “legacy DMs” and the other “chat / new DMs” or something

3 Likes

I mostly agree with you! :slight_smile:

It reminds me of the Discourse Central Theme (not released yet) that separates the notifications and account, and it feels more natural. I kind of like it:

image

(On a side note, if you know what you’re doing, the modifications in this theme are explained here and could be used in a theme component for another theme.)

There is also this handy component worth mentioning to add a log-out icon at the bottom of the menu:

As for the search, you might be interested in this component:

5 Likes

Yes, that’s a good decision for that theme and IMHO worth rolling out to many of the other themes as well.

3 Likes

Agree with that as well and hope the setup as in the Central theme will become a default. Also posted about it a while ago already, but if you implement it on your own, you’re just asking for a lot of maintenance considering the pace of change with respect to navigation.

2 Likes

The header is currently being updated to use Ember components rather than our custom widget system, so it should become much easier to move things around soon!

3 Likes

Separating the different aspects of the personal menu seems like a good idea indeed.
And I think the changes in the Central theme that @Arkshine highlighted go into the right direction.
There’s three things I would add:

  1. I think that personal messages should get their separate space, too (well, fundamentally I believe chat and personal messages should be merged into one thing, but that’s another story)
  2. At least for me, even in the Central theme, I still get bookmarks in the notification menu (screenshot below), and I feel they belong either only to the user menu (as proposed by the OP) or to the side bar (if the user menu is to become a “profile/setting only” thing).
  3. While we’re at it: since “replies”, “likes”, “badges”, etc. are effectively filters on the full notification list, they IMO should go to the top of the notification area (or maybe just be discarded completely).

image

1 Like