Configurable UX: Divide messages side by side in chat area / Split-View

[dpalic]

We are right now testing if we can switch to nextcloud talk. One major impact is the bad UX for identifying own messages from other messages and the feedback from all testers, is that this is odd and if we could enable split view.

Here the patched nextcloud talk with the split view, which now looks like this

I could improve it a bit more (more width for the messages) but I wanted only to try how complex it would be...

Old - hopefully outdated - decision

After researching here I have seen the issues #902 and #14514 So the feature was rejected, but I want to reopen it because the patch seems to be easy and far away from complex. See my attached patch

Market situation of chat UX optimized views

Also to reopen the discussion I like to discuss on facts and market data. So here a current research about facts and market:

App Name	UI Style	Estimated Total Users
WhatsApp	Split	~2.5 billion
Facebook Messenger	Split	~1.0 billion
WeChat	Split	~1.38 billion
Telegram	Split	~1.0 billion
iMessage	Split	~1.0 billion
Viber	Split	~820 million
Skype	Split	~300 million
Signal	Split	~70 million
Slack	Unified Left	~65 million
Nextcloud Talk	Unified Left	~50 million (estimated)
Microsoft Teams	Unified Left	~320 million
Discord	Unified Left	~200 million
Mattermost	Unified Left	~20 million (estimated)

You can see that the split view (left / right) oriented messaging seems to be far more common and we do not talk about few percent, we talk about powers of 10....

My suggestion - allow users to decide with a configuration

So my suggestion would be to allow the users in the profile to select their way of chat visualization. But I am also willing to get into bets, which variant will win the user's preference ;-)

My patch

very simple, see my commit

Improvements to my patch recommended

• it requires a better output of the HTML to have some better identification of my and other messages, e.g. by adding some css classes to the sections.
• it is required to allow the user to configure the setting to have both parties, the unified view as the most deciders here and the UX optimized view the split view
• enable split view also in nextcloud talk desktop app

I would require for the above cases some developer adivces where to take a look into the code. My provided patch was a quick hack as a POC to be able ask my testers, if they expect it like this. And guess what they answered with a smile in the face ;-)

Maybe my approach is not perfect, but it is focusing on the mass in the market and on the best UX for the users to decide.

Hope with my factual restating and the simple patch, here are the deciders about this issue reconsidering their former decision taken. My suggestion is to implement the split view as configurable user's option

[Antreesy]

Hi, thanks for raising it! As was mentioned before in other issues / PR suggestions, we don't have this on the current roadmap or in plans, also a lot of correlated topic and engineering/design decisions must be addressed.

I'd say, the best chance at the moment to see it in future releases - is to make a contribution to this repo. We would be happy to assist you with reviewing at this.

Backend

For configurable user's option you can take a look at https://github.com/nextcloud/spreed/pull/13994 - should be the same code, but for conversations_chat_style => unified|split

Frontend

All components to be styled should be there https://github.com/nextcloud/spreed/tree/main/src/components/MessagesList The only requirement is to have max-width of the message text not exceed 750px, rest can be discussed with design team upon request

[dpalic]

@Antreesy thank you for the update, but simply to close the issue without having an option to discuss does not leave a good feeling and an assumed intention to willingness to take over the patches provided. The immediate close lets feel the contributors: "we are not interested in your contribution".

From my experience leaving the issue open and tag it "contributionRequired" gives a clear feedback to the potential contributors and the issues are not getting lost/dropped.

i am willing to contribute, but only if I know my time is not kicked away - like it seems - as the issue was closed. Usually developers/contributers get a feedback to their work, and if it is not matching the issue is getting thrown away (closed).

So can you plz clarify. Would the patch be taken over into a next version if it was contributed fully working? Also would like to know what the expectations are to ensure that the first delivery is having a high chance to be taken over?

Also can you point me to the desktop app, what and where to modify to have the view up and running in the same way?

[Antreesy]

Sorry for leaving a bad impression; we marked all duplicated issues like this. It has nothing to do with your case specifically, people just like to complain without even trying to search for it 🤷‍♂

It's closed, but not discarded. I've read you feedback and checked the styles patch - it looks neat, although would need some design adjustments (see my CSS mock below). Unfortunately, we can not take over the suggested patch as-is and make something out of it - we simply don't have time to fully work on this from scratch... As you might see, a lot of stuff should be considered (like system messages, quotes, link integrations, file shares, code-boxes, e.t.c.)

Patch	Draft

But as I said, for a complete feature PR - we would be more to happy to see it, review and get it merged into the following release. Feel free to design it how you see it. Depends on the design input, overall quality, and if time would allow - we might be able to take it over and finish before the release.

For Desktop client - all server styles are shipped with the app, so you would need to comile the app by yourself - see https://github.com/nextcloud/talk-desktop#build-binaries-for-production

P.S. We discussed internally and decided to leave your issue open for references (as original one is quite old and outdated). Thanks again for raising this up!

[nickvergessen]

Just as a general comment:

Microsoft Teams - Unified Left - ~320 million

This is currently our point of reference, but the recent teams overhaul changed that (with many complaints online)

[dpalic]

thank you for re-opening and taking my feedback for improvement.

My next words are NOT to complain, I am more than happy that you reopened the issue. Here only my viewpoint: I suggest also to use a new tag "newContributionReqiured" or "contributorWanted", so readers of the issues can see that you are open for new contributors. Also try not to close the issues without letting know users that they are highly appreciated to contribute. In the given case it was a close on a potential contributor and a refer to a closed / rejected issue.

help? Is there a way to get more in depth help for the contribution (mailinglist, chat, or something else)? I will else flood the issue here with nextcloud development questions instead of reducing to issue related discussion only

color About your used blueish background color, is it a scss variable? I did not find a matching color, so used the WA greenish color to have a visible pending clearance

[nickvergessen]

Is there a way to get more in depth help for the contribution (mailinglist, chat, or something else)?

there is a chat link on the readme, but it seems to have moved into a subsection by accident: https://github.com/nextcloud/spreed?tab=readme-ov-file#%EF%B8%8F-faster-frontend-developing-with-hmr

I suggest also to use a new tag "newContributionReqiured" or "contributorWanted", so readers of the issues can see that you are open for new contributors.

Anything that is open and not assigned to anyone is "contributor wanted" :P So adding a label feels duplicated

[RubensRainelli]

There's a small error in the reference table. Telegram is not 100% split view, the split view depends mostly on the size of the text, space in the window. You can check easily opening a group and resizing the window till it gets in a non split view.

As I can see, on Spreed Android it's a split view... So IDK if it had been yet implemented or simply it's just Android client to have the split view.

[neo0381]

Hello. If possible, it would be great to add highlighting of your messages from messages of your interlocutors. For example, when someone writes me a message, it will be displayed on the left, and when I reply, it will either be highlighted or displayed on the right.

[nimishavijay]

Tried out a few versions and something like this looks like it could work

Browser/desktop:

https://github.com/user-attachments/assets/c029c8c8-6e53-4be5-ad2d-653a23212d62

For all messages:

• [ ] Add a container around the message with
  • [x] 600px max-width
  • [ ] 900px max-width for large screens (increase the width of the entire message area to 1200px)
  • [x] 2 * --default-grid-baseline padding on all sides
  • [x] --border-radius-large border radius on "free" corners (corners where there are no adjacent messages or avatar or name)
  • [x] --border-radius-small border radius on corners where there are adjacent messages
  • [x] normal "raised button" style border (1px 1px 2px 1px)
  • [x] --color-primary-light fill + --color-primary-light-hover border for user's own messages
  • [x] --color-primary-extra-light fill + --color-primary-extra-light-hover border for others' messages
  • [x] No name for user's own messages
• [x] Timestamp, edited indicator and read receipt
  • [x] --font-size-small timestamp and edited indicator
  • [x] 14px read receipt
  • [x] if there are reactions or replies, the timestamp+edited+read receipt can be on the same row as the reactions/replies center aligned with them
  • [x] if there is only a message, the timestamp+edited+read receipt is on the same row as the message, but slightly lower than the last line of the message
• [x] Reactions and reply button
  • [x] --color-primary-extra-light fill + --color-primary-extra-light-hover border for your own message (as the bg is primary-light)
  • [x] --color-primary-light fill + --color-primary-light-hover border for others' message (as the bg is primary-extra-light)
• [x] Hover menu
  • [x] Tbh unsure about the placement still, I couldn't think of an elegant solution that blocks minimally for messages of different lengths, so I have placed it completely outside the messages
  • [x] when it's outside, any shadow or outline looks very imposing so they are all just simple tertiary buttons

During calls/mobile view:

https://github.com/user-attachments/assets/a4dbd01c-7bbe-45e2-bd7f-17953e18bda2

Styling stays the same, changes:

• [x] Show user's own name (tried without and didn't look separate enough from the previous messages by others) instead of avatar to save horizontal space
• [ ] Others' avatar size is reduced to 24px
• [ ] Hover menu placement is always at the bottom right corner.
  • [x] The exact position is aligned such that the right edge of the hover menu is 4px away from the right edge of the message and the bottom edge of the hover menu is 4px away from the bottom edge of the message.
  • [ ] For very short messages ("ok", "ty") it would be outside the message box to maintain consistent position

[jancborchardt]

Also updated the table to reflect that Microsoft Teams uses split view. Considering the mass of people who are used to split view from all those solutions, it would make sense to move default behavior over to split.

[DorraJaouad]

Suggestion:

• show edited by an icon (add a shield/crown icon to reflect it was edited by a moderator) to use less space near the timestamp

[nimishavijay]

Updates to design after design team and Talk team review:

• [x] The order of hover actions for own messages should flipped in large view (idea is that reaction button should be the closest to the message always)
• [ ] The font size of the author names should be reduced to small font size in call/mobile view
• [ ] @nimishavijay to do: what should it look like of message is edited by moderator?
• [ ] @nimishavijay to do: try with different color for your own message (possibly calculate a new colour from theme that's between primary and primary-light)
• [ ] Ideal to have option to switch between unified or split view
• [ ] Nice-to-have/Follow up: show avatars instead of number for emoji reactions

[nimishavijay]

Update: talked to Dorra about

• [x] remove the "Show all reactions" ("heart" button) on the reactions row, it is accessible from the tooltip anyway, and a separate button for that is not shown in Teams or Slack (both just show a list of all the reactors even if it is 15+)
• [x] reserve space for the one remaining "Add reaction" button as it is shown only on hover
• [x] reduce padding for the reactions to 4px instead of 8px

to do: what should it look like of message is edited by moderator?

We can show the avatar if edited by someone who is not the author

I tried some versions using "edited" and just an icon. I am in favour of using just the icon but I am not sure if this is violating some GPDR rule about showing clearly the message was edited with words.

to do: try with different color for your own message (possibly calculate a new colour from theme that's between primary and primary-light)

I tried but it seems like primary-light is the minimum colour that text-maxcontrast has a passable contrast ratio. primary-light is (approxiamately) a mix of primary with 10% opacity even primary with 15% opacity fails

The other path is using light text and a very strong background

Tbh I don't think this is the worst, but it is still tricky to define a colour that fits within our theme but still passes the contrast ratio. The bg colour here is primary with 80% and fg is white, but it still fails.

So I think the best course of action is to stick to primary-light and primary-extra-light

[nimishavijay]

• [x] Own messages need padding inside container
• [ ] Short message + long reply block can have timestamp on same row as message
• [ ] Widgets and link previews should span entire width
• [ ] System messages: move timestamp to the same row, use middle dot separator ( · )