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:
- I’m done with the forum for today. Time to log off
- Click on the avatar, the place where I know from ~every other website the logout button to be
- Be presented my notifications instead, with no logout button in sight
- (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
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