UX Spec: Multi-Window UX
Overview
This design spec outlines the enhancements to Mattermost's desktop and web application to allow users to open multiple windows for channels, threads, and other functions, facilitating improved multitasking and monitoring capabilities. This enables users to engage in multiple conversations simultaneously without losing context, thereby enhancing operational efficiency and collaboration
Opening channels in new windows
Users can open any channel in a separate window via an "Open in New Window" option accessible from the channel menu and the left sidebar. When a channel is opened in its own window, it opens in an isolated view without all the other navigation surrounding it.
There are a few ways to do this:
From the left sidebar | From the channel menu | From the channel header |
---|---|---|
Command/CTRL-click a channel to open a new window
From the LHS channel list, users can also use Command/CTRL click to open a new window
Question: what about opening in a new tab? What shortcut for that?
Window specifications
Default size: 920px x 640px
Title that displays in title bar: {Channel name} - {Team name}
To start, we will use the native window bar
Navigation within a channel window
Within a channel window, users can:
Threads → open the RHS in the active channel window
Once a thread is open in the RHS, it can also be popped out in to its own window
Channel or thread links external to the active channel → open in the main window (bringing focus to that window)
RHS panels for pinned messages, files, members, info, etc → all open in the RHS in the active channel window
Opening threads in new windows
Users can also open any thread in a separate window via an "Open in New Window" option accessible from the RHS header button or Thread inbox view. When a thread is opened in its own window, it opens in an isolated view without all the other navigation surrounding it.
There are a few ways to do this:
Thread RHS header button | Threads header context menu | Threads header button | Threads list context menu |
---|---|---|---|
Changes to the RHS Header
The new window button replaces the expand button in the RHS.
The new window button is hidden when the thread is viewed in the popout window
The close button is also hidden in the header when viewed in the popout window
In the Threads view a new window button is added next to the ••• button
Window specifications
Default size: 840px x 720px
Title that displays in title bar: Thread: {Channel name} - {Team name}
To start, we will use the native window bar
Navigation within a thread window
Within a thread window, users can:
No navigation within the thread window. Links external to the active thread → open in the main window (bringing focus to that window)
Opening RHS plugin content in new windows
To start, we’re thinking of allow Playbook Runs and Copilot to be opened up in new windows.
Window specifications
Default size: 920px x 640px
To start, we will use the native window bar
Changes to the tab behavior in the desktop app
Coming soon…
Changes to the server menu in the desktop app
Coming soon…
Considerations
Notifications
Prevent notification if the thread or channel is actively focused in a window
If a window is open for the thread or channel that is to receive a notification, but is in the background (not focused), then notify the user. The notification should take the user to the open window and focus it
Prevent duplicate notifications due to multiple windows
Window Limits
How many windows should we allow?
Window tiling/snapping/tabbing/closing…
Synchronization
Read/unread states
Resources
PRD (Coming soon)