clowdr icon indicating copy to clipboard operation
clowdr copied to clipboard

Unified view of conversations and notifications

Open amyjko opened this issue 2 years ago • 2 comments

Is your feature request related to a problem? Please describe. The overarching experience of messages and notifications is disjoint: 1) announcements appear for a few seconds and then disappear, with no clear way for attendees to find them; 2) direct messages from other attendees are hard to notice, making it difficult to connect with other attendees; 3) "global" chats and room chats can't be seen at the same time, requiring constant navigation back and forth to bounce between conversations. The result is that people mostly don't converse, because the attentional and navigation overhead is high.

Describe the solution you'd like There are many possible designs that would remedy this. I'd recommend borrowing from conventions widely established in platforms like Discord and Slack: have a single persistent list of active conversations, each with clear indicator of whether there are unread messages, and each easily navigable via click or keyboard. This would address both the navigation and notification confusion, allowing attendees to engage in multiple parallel conversations without heavyweight re-navigation to alternate between conversations.

amyjko avatar Aug 17 '21 23:08 amyjko

Thanks, this is a useful perspective to have.

The main difficulty we have in Clowdr's UI compared to Discord/Slack is that, alongside chat, we also need to display the conference to users (e.g. item page, video chat, livestream). Pure chat applications have enough horizontal space to use the traditional two-pane layout (message list + selected chat contents).

Given how much is already on screen, I think we need to be very careful to avoid overwhelming users with buttons and menus. We have actually deliberately reduced the number of things being shown in the chat sidebar at any given time for this reason.

I'd be really interested to hear about or see a sketch of your 'ideal' chat sidebar layout.

rossng avatar Aug 19 '21 13:08 rossng

The limited real estate is definitely a challenging design constraint. Here's one potential design:

  • Keep the vertical, collapsible chat sidebar on the right, and the rule that there's only ever one chat window open. Make the room name more prominent, so it's clear which chat
  • Instead of the disjoint "chat here" and "chat list" views on the right, and the hard to discover "back to chat list" button, have a single unified list of ongoing chats in a drop down popup at the top of the chat window, allowing quick switching between chats. The drop down bar should show a prominent notification that indicates 1) when there are unread chats, 2) how many unread chats there are, so it's always visible when someone is trying to reach an attendee. When a new notification appears, it might subtly flash. Clicking on the drop down would overlay the chat window, since it's only temporarily visible for the purpose of selecting a different chat. Rooms in the list should be bold if they have unread messages, as a quick visual cue of where the unread messages are.
  • When the chat sidebar is collapsed, the (now single) chat icon in the collapsed sidebar would show similar notification information as the dropdown bar described above (e.g., # of unread messages, as it roughly does now).
  • To ensure accessibility and support user efficiency, include some keyboard shortcuts to navigate to the next and previous chat with unread messages, and perhaps one to navigate to the chat for the currently visible room on the left.

amyjko avatar Aug 19 '21 19:08 amyjko