Element-web: 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

[Justinizer]

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

[sudoquai]

Agree to @Leon0402 and @Justinizer - bubble chat pls