Skip to content
This repository has been archived by the owner on Jul 21, 2023. It is now read-only.

Unified view of conversations and notifications #339

Open
amyjko opened this issue Aug 17, 2021 · 2 comments
Open

Unified view of conversations and notifications #339

amyjko opened this issue Aug 17, 2021 · 2 comments
Labels
A-chat Area: chat C-enhancement Category: new feature or request D-hard Difficulty: hard, design work or architectural changes needed S-frontend Service: frontend T-social Theme: social T-user-experience Theme: user experience

Comments

@amyjko
Copy link

amyjko commented Aug 17, 2021

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 amyjko added the M-needs-triage Meta: needs triage label Aug 17, 2021
@rossng
Copy link
Member

rossng commented Aug 19, 2021

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 rossng added A-chat Area: chat C-enhancement Category: new feature or request D-hard Difficulty: hard, design work or architectural changes needed S-frontend Service: frontend T-social Theme: social T-user-experience Theme: user experience and removed M-needs-triage Meta: needs triage labels Aug 19, 2021
@amyjko
Copy link
Author

amyjko commented Aug 19, 2021

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
A-chat Area: chat C-enhancement Category: new feature or request D-hard Difficulty: hard, design work or architectural changes needed S-frontend Service: frontend T-social Theme: social T-user-experience Theme: user experience
Development

No branches or pull requests

2 participants