[bubble messages] Subjective insights

[ShadowJonathan]

Some improvements I figured on bubble messages. (Note: all of these are subjective)

---

Avatar icon placement

(From matrix-org/matrix-react-sdk#6291 (comment))

Currently the avatar shows itself to be "just about" touching the top right side of the message, while previously it was offset entirely away from the message, i had some notes on it;

Some alternatives I think would look better could be;

• Align the top of the avatar with the top of the message group vertically.
• Do the same design as the “left side”, and have the user avatar be on the top right corner of the message group
• Flip that last one on its head, and put it on the bottom right corner of the message group (on the last message)
  • This would lend itself to a design language that others are “beaming down” the messages, while you are “beaming up”, so to speak

---

Background colours

The current colour of messages, in dark-mode, is #394049. In my opinion this is way too bright compared to the almost-black background, as it creates too much contrast inbetween the messages and that background.

My suggestion would be to change it to #2e3135, but I saw some dark emojis (such as a black cat) not look well in that.

The colour when hovering over messages (which is currently yellow) turned out to be way too distracting and intrusive to the experience, I don't know a good alternative (even though I suggested #292a2d), but here i'd like to suggest to take after Discord, which only minimally changes the message background when hovering over it;

---

Composer alignment

The composer feels "disaligned" with the message timeline now, I feel it is best described with the following images;

Images

(White & blue: Left side of messages. Green & Sea green: avatars. Also note the avatar sizes are off)

Previous;

---

State messages alignment

Currently, state messages are aligned to the middle of the screen.

This is hard to see in a conversation, but just like #18072, it could be moved closer to the left of the screen, as telegram does in adaptive layout mode;

Wide images

Compared to element;

---

Deleted messages markup

Currently, in my opinion, deleted message indicators look a bit out of place;

Compare this to whatsapp, where messages only get stylised differently with an icon placed in front of it, but keep their "bubble wrapping";

---

Bubble rounded corner "continuity" of short messages

The following image shows that very short messages after eachother can look weird with the discontinuity of rounded corners on one side, and the "bubble"-ness of the message on another;

Note that this problem does not occur in slightly longer messages;

It should also be noted how telegram handle this, with their messages being slightly more verbose in comparison;

The problem isn't big, but I think the design should be able to scale to this size, so I noted it here.

[robintown]

+1 for deleted messages looking weird, in particular it can result in sort of a snowfall effect of your own avatar on the right hand side

[amshakal]

Let me go one by one:

1. Avatar icon placement: I think we plan on fixing this. The idea is to have the same design as the “left side”, and have the user avatar be on the top right corner of the message group. The problem right now was around timestamp. The way to resolve that would be to add extra padding on the right, as we have on the left to accomodate for the timestamp.

2. Background colours: We need to reword the colours for both dark and light themese based on the current design system. Will continue the conversation here #18085 (light) and here #18081 (dark)

3. Composer Alignment: Along with composer alignment, I think we need to also align the header with the rest of the messages.

4. State message alignment: Talking about this issue here #18126

5. Deleted messages: Definitely aware of this issue @gsouquet is already working on it to align it with the username.

6. Bubble rounded corner "continuity": @gsouquet is already working on it

Thanks!
☺️

[ShadowJonathan]

Thank you for the insightful comment! As I see most concerns are addressed or delegated here, I'll close this pre-emptively, to keep it out of the way.