Consider chat-bubble design for conversations

[eternaltyro]

Description

Please consider introducing chat-bubble design for conversations where:

1. The sent texts are right aligned, the received texts are left aligned.
2. The sent and received texts are in different color or shades of color.
3. The background is in a different color from the foreground text bubbles.

Some random screenshots of different messengers from the web:
Threema UI: http://lifestyle.us.viettel3grun.com/wp-content/uploads/2017/05/6e9f1f12614966dad8323d4ae325a9b4.jpg
Whatsapp UI: https://www.sketchappsources.com/resources/source-image/whats-app-chat-details-view-gayatriraut.jpg
Signal UI: https://paulciano.org/avox/wp-content/uploads/2015/11/Signal-Interface.png

While it appears as if the bubble design is being copied across applications, the design by itself appears very intuitive to me. It pops the message out and makes it easy for me to keep track of conversations especially when I have a lot of scrolling to do. Others here may disagree. I'm not a designer and this is only my opinion.

The current riot conversation design seems very crammed and is difficult to read through.

[nesretep-anp1]

I am really wondering why there not much more reactions in here.

While our tests of synapse/riot (for evaluating a migration from Mattermost) this is one show stopper named by our (test users). The current designs are simply confusing.

Is this planned/on the roadmap?

[lampholder]

Our assessment has been that the chat bubble design is more closely associated with social chat applications than team collaboration applications. Riot obviously tries to straddle that divide to a degree, but certainly web-based users familiar with Slack (or mattermost I think?) will be familiar with the non-bubble-based layout.

@nesretep-anp1 are you specifically asking for bubbles, or is your issue that you find chat history difficult to follow? And are you specifically thinking of riot web, or also riot mobile?

[nesretep-anp1]

Our assessment has been that the chat bubble design is more closely associated with social chat applications than team collaboration applications. Riot obviously tries to straddle that divide to a degree, but certainly web-based users familiar with Slack (or mattermost I think?) will be familiar with the non-bubble-based layout.

To be honest, the matrix stuff could be used for business/project/team collaboration as well as social chats, right? ;)

I think (and can within our project see) that the matrix stuff could be spreaded wide more if users would " feel home like on WhatsApp (groups) " (well, definitely not my feelings, but definitely my observations.) In many situations - e.g. schools here around me - WhatsApp (groups) is used where something like Mattermost or Matrix stuff would be much, much more secure (etc); simply and mainly because of 2 reasons: 1. Being able to see who has read a message (Mattermost cannot do this; Synapse/Riot can) ; 2. Having the feeling of one is used to (WhatsApp (groups)) (Mattermost and Synapse/Riot cannot offer this).

@nesretep-anp1 are you specifically asking for bubbles, or is your issue that you find chat history difficult to follow? And are you specifically thinking of riot web, or also riot mobile?

Well, in fact I am talking about a design strategy and not an app. ;) I am talking of ALL riot variants!

[gnouts]

Could we imagine an option that change the display type between bubble and non-bubble ?

I was watching this issue for some time now, and I also feel lots of my friends would used Riot mostly for 1:1 chat or small group chat ( <10 people) and I know they would be more comfortable with a WhatsApp-like display.

Also, I know there are other clients than Riot that do bubble chat, they mostly never support as much features as Riot do, like E2EE. Bringing bubble chat to Riot might be easier than waiting for community to support all features. Though, I'm no dev, I might be wrong :)

[nesretep-anp1]

Is there really no reaction on this? Is there really noone seeing/needing this for having matrix/riot step out of the "nerd shadow"?

[nesretep-anp1]

But, if there is a bounty based way to get this done, then we would be ready to discuss!? ;)

[SamCyanide]

I am trying to get my friend group to migrate off facebook messenger, but this is a big point of contention. I really agree with @nesretep-anp1's analogy of the "nerd shadow" - it would be hugely beneficial to have an option so you can have it look either like IRC or modern apps (Messenger, iMessage, heck, even text message apps) - the chat bubbles thing would be a game changer. People don't like change, so you should try and make things familiar if possible. And that's why having it be optional would be so great.

[jwsp1]

I am trying to get my friend group to migrate off facebook messenger, but this is a big point of contention. I really agree with @nesretep-anp1's analogy of the "nerd shadow" - it would be hugely beneficial to have an option so you can have it look either like IRC or modern apps (Messenger, iMessage, heck, even text message apps) - the chat bubbles thing would be a game changer. People don't like change, so you should try and make things familiar if possible. And that's why having it be optional would be so great.

+1 This is the reason why it keeps me from using Riot more often or even recommending it to my friends. They wouldn't like Riot with the current design, because it looks too unfamiliar...

[t3chguy]

@SamCyanide all the app examples you mentioned were primarily for 1:1s where that design makes sense

[dnut]

Some ideas:

• Make it configurable - Everyone has different preferences, and you're trying to appeal to both workplace and personal use so it will be tricky to satisfy everyone without giving them options.
• In the absence of bubbles, allow users to configure unique font colors for themselves versus others.
• Have one color for me and another bubble for everyone else.
• Use one color per person up to some limit (five people?), and switch to the everyone else-bubble layout above that number.

The main advantage to bubble messages is that it is more organized. The entire bundle of words someone said before being interrupted is visually cohesive, independent from other people's messages, and easy to identify because of the color. You can glance at the screen and immediately recognize the flow of the conversation and distinguish who sent which messages. It's easier to scan through and find your place or locate messages without having to read anything.

With one big pile of text, it is more cumbersome. Everyone's messages blur together. You have to search for extra UI elements like names and icons and associate them with the messages just to begin to understand the structure of what you're looking at. It takes a bit more time to work out. It feels more visually noisy and uncomfortable to look at.

@SamCyanide all the app examples you mentioned were primarily for 1:1s where that design makes sense

@t3chguy, I agree that bubbles make the most sense for one-on-one conversations. You can't discount the significance of those conversations though. Even in the workplace, in my experience on slack, about half of the conversations are one-on-one. And if matrix takes off like signal has with personal messaging, then the vast majority of that will be one-on-one.

I also wouldn't discount the utility of bubbles in group chats. I can see realizing the same benefits I already mentioned. What is the problem you foresee? Dozens of bubbles in all different colors flashing on the screen unintelligibly? I agree that would not be ideal, but I have proposed some solutions that would avoid this. Anyway, in my experience, even when there are 50+ people, there are rarely more than 3-4 people actively chatting at a time, and they usually take turns to some degree.

[Leon0402]

Please do this for web/desktop/mobile. I can only agree with what others said in here, matrix should also be for social chats and chat bubbles are a standard for good reason. It makes it really a lot easier to follow the conversation! Currently this is, besides low contrast in the desktop app, the main reason I don't use element.
+1

[Veganizer]

Yep,

inline chats are out since IRC... 20-30 years old design...

Good chats are adopted by design. Matrix has got a perfect protocol. With perfect designed clients it has got chances to get famous like whatsapp or telegram.

So please do bubble chat ... or seperate the messages on another way with better elements.

+1

[ghost]

Agree to @Leon0402 and @Justinizer - bubble chat pls

[su-ex]

I'm maintaining a fork of Element Web/Desktop called SchildiChat which features message bubbles: https://schildi.chat/desktop

The message bubble layout is now properly separated and thus might be ready to extract it and merge it upstream. I don't know if it matches the expectations from upstream though. If somebody from the upstream development team could take a look and guide me to a pull request that has chances of being merged it'd be great.

It's mainly these commits:
SchildiChat/matrix-react-sdk@1daecfb
SchildiChat/matrix-react-sdk@6a22d9b
SchildiChat/matrix-react-sdk@dd50c2a
SchildiChat/matrix-react-sdk@786a677
SchildiChat/matrix-react-sdk@f39adb9
SchildiChat/matrix-react-sdk@3823150

[jwsp1]

The message bubble layout is now properly separated and thus might be ready to extract it and merge it upstream. I don't know if it matches the expectations from upstream though. If somebody from the upstream development team could take a look and guide me to a pull request that has chances of being merged it'd be great.

This is awesome news! I personally would prefer wider bubbles (less line breaks) with rounded corners (more "modern") but it's definitely a good beginning. Are bubbles from SchildiChat-Android also able to get merged by Element? I would prefer a cross-platform-rollout.

[SimonBrandner]

If this were to be implemented, it would be great to make it customizable in a way that the user could use both the "Slack" style and the bubble style at the same time. I for one would like to use the bubble style for 1:1 and keep using the "Slack" style for groups. I'd do this in one of the following ways:

• Add a per room setting.
• Make a separate setting for 1:1 and for groups.

The latter one seems easier to implement to me but I don't know the codebase well enough to be certain.

Note: If this has already been mentioned I am sorry. I've missed it.

[su-ex]

@SimonBrandner

I'd consider these two different things:

1. The implementation of layouts themselves
2. The logic to choose an appropriate layout

Currently I've implemented the bubble layout exactly the same way as the IRC layout and added a radio toggle in the appearance settings like that:

Of course this is a device global setting then but the settings store allows overwriting that with room specific values.
Everything is propagated through from the room view so it can be changed there.

Also I think it would be better to keep only one variable in the state for the layout choice instead of a variable for every layout (again, I've implemented it the same way as the IRC layout which introduced this, I'd have something in mind like setting the layout to Layout.Modern, Layout.ModernCompact, Layout.IRC, Layout.Bubble, Layout.BubbleLeftOnly, Layout.BubbleRightOnly, ...).
This way there could be a smart choice too (1:1 --> Layout.Bubble, members <= 50 --> Layout.Modern, else --> Layout.IRC or whatever a user might set).
With the new spaces it'd be great to have the possibility to inherit some settings from the containing space: Let every room about Matrix use Layout.Modern, let all my private rooms (most of the time not a lot of people) use Layout.Bubble, ...

You see: I think this is not specific to the message bubbles but needs to be solved in a bigger scope. Thus I'd prefer concentrating on the sheer implementation and see the layout choice as a seperate issue (it's definitely not only related to message bubbles).

[su-ex]

@jwsp1

I personally would prefer wider bubbles (less line breaks)

They form depending on their content and can actually get quite wide:

[jwsp1]

I think they just don't went bubbles for some weird reason.

My guess: they want to wait a little longer before merging bubbles (and implementing other things like voice messages) until they have fixed other (more critical) issues. Because normal people (who are used to bubble design like WhatsApp has) will more likely use and recommend Element when it has bubbles.

[SimonBrandner]

I agree the current focus seems to be on other things. But I guess if someone were to open a PR with bubbles they would merge it but it's a bigger feature so it may take some time.

[jryans]

@su-ex It seems like you indeed have a lot of the pieces in place! 😄 I asked our Product team to take a look, and overall we'd like to offer this, and we think your implementation could be a good starting point. We'll likely want to iterate on various visual details and such, but in broad strokes, we'd like to add some version of this feature.

In mainline Element, we would want to hide the feature behind a feature flag until it's sufficiently polished. @SimonBrandner, I know you had expressed some interested in sending PRs to add this to Element... I'll let @su-ex and @SimonBrandner work out who wants to author the changes here. In summary though, we'd be happy to start off with @su-ex's implementation in mainline behind a feature flag, and then we'll work as a community together with the Design team to polish things up so it can become generally available.