Flarum 2.0: Private Messaging UI/UX

Darkle

For some context on this proposal, you can check out the Staff Diary: v2.0 Cycle post about it.

Message cards

I’ve gone through quite a few iterations with the message cards. Currently, I’m leaning towards something simple and compact since the view of the cards will likely be the same on both desktop and mobile. Even so, I'm working on a few more options.

Here are some other cards that have come up during the process.

Split view on desktop

This is one of the aspects I’ve given the most thought and iterations to. I wanted to use the split view as a differentiating factor from discussions and private discussions, but I extended it much more than I would have imagined. The good thing is that it allowed me to try lots of solutions with different configurations, including a vertical split view, without the sideNav, using the sideNav in a horizontal format, and more.

After many trials, I decided to keep the sideNav because otherwise, the page looked somewhat disruptive compared to the rest of the Flarum design, which was definitely not an option.

Even with a total width of only 1070px, I believe the result respects the necessary spacing between elements and doesn’t look cluttered, which was one of my main concerns with this approach.

Message info

From the message details, users will be able to view a modal with some information about the conversation.

Header button for message notifications

Just like notifications, private messages will have their own dropdown for notifications in the header.

I explored the possibility of merging both notifications and messages into a kind of unified tray. However, given the nature of Flarum, I saw that this could complicate things more than necessary if, for example, a user disabled PMs. This potential over-complication seemed unnecessary for this initial version.

Message composer

The composer, obviously inherited from the rest of the application, will include functionality at the top to add recipients and also show those that have already been included at a glance.

UserCard/UserHero dropdown button

Not much to comment on here.

Notes

There are certain functions that will not be introduced in the initial version and are simply a proof of concept for the UI. I've avoided showing these in the images, but maybe I missed something. These were important for me to consider in order to create a scalable UI/UX for the future. For example, multi-selection of recipients (remember that group messages will not be included initially), certain ellipsis buttons that in the initial version will probably not have functionality...

This concludes the initial proposal. I look forward to your comments and suggestions to continue shaping and refining the details of this feature. Thank you 🙂

User31

Darkle

😃 Looks fantastic!

I definitely agree with you regards employing a separate PMs icon from the notifications.
I'm currently trying to figure out how best to attract my former XF forum's members to the Flarum forums I'm hoping to establish and I think that this PM adaption along with it's distinct—and very familiar PMs nav icon—would likely serve proving quite beneficial in this respect.

🙂👍Well done Darkle!

(*One minor query if you don't mind my asking: what exactly is a 'UserHero'?)

luceos

Darkle i really like the designs, well done!

Considering how actively I've seen communities use (and rely on) direct messaging, I'm afraid that just using a summary of the OP will be enough to differentiate between threads with the same recipients.
I would love to see the ability to add tagging or labelling. Especially when you consider that you might want to allow archiving private messages or marking private messages from moderators with higher priority and urgency for instance.

Darkle Just like notifications, private messages will have their own dropdown for notifications in the header

Although I agree with this. I also think we need to be very careful as core to add more element into that space. Extensions like links add more entries here as well. Would a unified bell system which opens a dropdown with tabs be an option, or something like a generic "what's new" modal to replace bell, flags and pm dropdown? Thinking out loud.

SychO

Amazing work! thanks for taking this on.

Darkle Here are some other cards that have come up during the process.

I feel like the card could be more compact, it seems unnecessarily large. Maybe if the ellipsis button was made smaller, then the "last message content" was pushed underneath the username instead.

Not directly related to the mockups, but I've always assumed PMs between user A - user B would always be a single thread. Especially as we are going for a simple implementation that is distinct from private discussions.

Darkle I explored the possibility of merging both notifications and messages into a kind of unified tray. However, given the nature of Flarum, I saw that this could complicate things more than necessary if, for example, a user disabled PMs. This potential over-complication seemed unnecessary for this initial version.

Definitely worth exploring for 2.x versions, even without the PM feature, when extensions add more header dropdowns, it quickly becomes too much. It might be possible to have it auto switch between the tray and the dropdowns depending on the number of active dropdowns.

Darkle There are certain functions that will not be introduced in the initial version and are simply a proof of concept for the UI. I've avoided showing these in the images, but maybe I missed something.

Yes, I will stress this again. Things like group messages and multiple recipients are not gonna be part of the first iteration in 2.0, but will probably be explored in future 2.x minor versions.

The main idea is to get basic messaging between users, that we can then build on top of.

Circa

User31 (*One minor query if you don't mind my asking: what exactly is a 'UserHero'?)

A userhero is what is pictured below where that term is used. UserCard is also another term, just the box that appears when hovering over someone's name or avatar.
<--- Hover mine to see <----

Darkle

User31 Thank you! As Circa mentioned, the UserHero is basically the colorful hero you see when you go to your profile or another user's profile.

luceos The tags/labels thing is very interesting. It seems to me like a more minimalist approach to the classic titles (also more optional?), I like it.

luceos I also think we need to be very careful as core to add more element into that space. Extensions like links add more entries here as well.

I agree, I think sooner or later it would be something to tackle probably to unify it to save some space, I developed it a bit but it came to a stop, as I didn't know if maybe I was moving away from the main focus.

What I proposed was to change the bell icon to a tray and introduce an "Inbox" to handle notifications and messages. If we also add Flags, it would probably make sense to move it to a modal to have more space for additional tabs.

I think both things, if they are feasible (I mean if they fit in with the task time set for the PMs or if there's some room left), could definitely be addressed. We could review this with Sami, sure he can give us some hints.

ernestdefoe

@luceos would I be correct to assume that Realtime will be updated to include functionality for this?

User31

Circa

😄Ok, cool. Thank you for elucidating my ignorance of this near-shibbolethic term.
I've only ever seen this use of 'Hero' around this forum and tbh I wouldn't even know where to find descriptions/explanations for any of this kind of technical stuff.

I encountered a similar hurdle during my time with XF too.

However significantly moreso confoundingly challenging than here, as at XF merely asking a question usually resulted in an astonishing amount of passive aggressive/veiled abuse—and very rarely manifesting any actual answer.

These experiences with XF were generally quite intense, to put it lightly. Even here, now, believe it or not, I am still exceedingly hesitant to ask most of the questions I'd like to.

So I certainly do appreciate your help with this query.
Again, thank you for your help.

EDIT: This is what I see when hovering over any avatars:

gamersea

Looks nice, will it work with dark-mode also?

Darkle

gamersea Yes, there shouldn't be any problem. In fact, @SychO made some magical improvements to the dark mode in 2.0... 🪄 👀

tolgaaaltas That would be quite close to the version with the horizontal sideNav. I'll share it so you have a better idea, and you can tell me what you think.

This is a bit out of scope, but if at some point we consider the possibility of going full page width (in some parts only, for example, header/sideNav), it could make things much easier. I see the benefit of having sideNav present and, for example, jumping directly from your private messages to a tag or other links like the access portal... etc.

Anyway, I'll try to push for a more compact card design to see if it gives a bit more breathing room.

SychO I feel like the card could be more compact, it seems unnecessarily large. Maybe if the ellipsis button was made smaller, then the "last message content" was pushed underneath the username instead.

There is the option to completely remove the ellipsis button on desktop/mobile, since with the split view in the conversation, the button would also be there (image) and on mobile, having the option to use swipe as with discussions. I will definitely work for some more card designs.

SychO Not directly related to the mockups, but I've always assumed PMs between user A - user B would always be a single thread. Especially as we are going for a simple implementation that is distinct from private discussions.

Based on the feature set, I understood it the same way, which is why I didn't really consider the possibility of the same recipients in the list and making the conversations evidently different. I think if it gets more complex later and this scenario becomes a possibility, I have some ideas. For now, we should be fine (I think?).

tolgaaaltas

@Darkle you're killing it! Looks stunning.

First suggestion: I prefer to remove left side bar except New Message Button. I think most of the users pattern is directly return to the all discussions list. So the messaging UI will wider than the concept. Also it will be more white area in UI (which is great).

~~My second suggestion is about message info UI. Is it has to be popup? I think it should be like info area from posts. As you know, Flarum currently using dropdown for this.~~
I see, the selector is already in the dropdown. But IDK it's not looking good.

rafaucau

SychO Things like group messages and multiple recipients are not gonna be part of the first iteration in 2.0

Maybe I could help with the development of this to make it available faster?

Circa

User31
It's a UI design term.
https://www.optimizely.com/optimization-glossary/hero-image/

In my experience with XF its usually a friendly place. The Invision community though, much much worse.

Also, you can't "hover" on mobile, hovering is does with a mouse cursor. Your screenshot shows you that you tapped and held my profile link, whereas on desktop if you hovered with a mouse it would show the user card/hero.

ernestdefoe

@User31 there is a toxic atmosphere over there but things are way different here. People here actually want to help others. It may take time to get a question answered but it usually will get answered.

SychO

Darkle There is the option to completely remove the ellipsis button on desktop/mobile, since with the split view in the conversation, the button would also be there (image) and on mobile, having the option to use swipe as with discussions. I will definitely work for some more card designs.

That makes sense yeah. Seems like it can be dropped for now.

dragsugur

Finallyy, this looks great, thank you for this work. my only input would be that group chat should be optional and we should be able to turn it on and off.

great work team!

Darkle

dragsugur Group messaging will not be included in the first release with version 2.0, but that's a good point, I'll try to bring this back when we address it in the future.

User31

Circa

(···browsed link···)...🤔wait, so a "Hero" is also the header?...

...Or are these actually two distinctly separate features?

luceos

User31 the header contains the user dropdown, the logo, the menu links. The hero contains the discussion title, it's tags. The hero is mostly for desktop computer usage though. The hero in Flarum serves the purpose of bringing attention to something important, you can see it as the container that holds the title of the page (H1) and other information users should have been aware of in the context of the page.

User31

luceos

Omg, in that case I have been possessed of an erroneous belief that the actual 'Header'-(as you've clarified)-was the "Top Nav".

If I'm understanding correctly now, the actual 'Header' is what I'd mistakenly thought was the "Top Nav"...(?)

And so the actual 'Header' consists of the "Top Nav" bit-(where we'll eventually see the Flarum 2.0 PMs icon)-and can optionally also include an image as well...(?)

(*Note: The header image itself was what I'd previously thought was the header.)

Nodeloc

Fantastic. I'd like to know if it can be used in Flarum 1.8.5?