Much of the documentation in this page is applicable to both desktop and mobile, but see Desktop UX Documentation for anything specific to the desktop/webapp app experience.
In-Channel Collapsed Threads
Parent posts only display in the Channel
Parent Posts are sorted chronologically (most recent at the bottom) by date and time of the parent post. Date and time of child messages does not alter the sort order of parent posts or their timestamps.
Child posts display in the Thread View.
Child messages are displayed in Thread View under the parent post to which they are associated (as per current state). Child messages are sorted chronologically within the thread (most recent at the bottom).
Viewing a thread
Clicking on the entire parent post area (visually indicated by the tap state) opens up the post in the Thread View - same functionality as current experience.
New Thread Footer
A new “Thread Footer” component is appended below all other post elements and helps define the purpose, audience and scope of the thread. This new footer is made up of the following elements.
Unread indicator
A blue dot shows if there are unread messages in the thread
Avatars
Avatars of all unique users who contributed to the thread, including bots
Show a maximum of 3 avatars, sorting by order of reply (first reply in position 1, and so-on)
If there are more than 3 participants, add a +N avatar that display the number of participants beyond 3
Tapping on the avatars opens up a bottom page sheet and displays all thread participants (similar to the reactions page sheet that lists all users who reacted)
Number of replies
No longer shows the count in top the top-right of the posts, but shows this count under the post in the thread meta data area
Shows the total replies in the thread reading “3 replies”
This is also a button to view the replies. Clicking this opens up the thread in the RHS
Follow/Following button
Clicking this adds the thread to the Global threads as a followed thread
Toggles between ‘Follow/Following’ states
Timestamp of the most recent reply
Displays on hovering over the message area only
Follows a friendly timestamp format:
“Last reply just now”, for less than 1 minute
“Last reply N minute(s) ago”, if >= 1 minute and < 60 minutes
“Last reply N hour(s) ago”, if >= 1 hour and < 24 hrs
“Last reply yesterday”, if >= 24 hrs and < 48 hrs
“Last reply on Friday”, if >=48 hrs and < 7 days
“Last reply August 10”, if >= 7 days
Parent posts with no replies
If a parent post does not have any replies yet, it is not considered a ‘thread’, but just a 'message'.
Don’t show the thread footer for single parent messages
Only show the ‘following’ indicator if the solo message is being followed.
Thread Participants Bottom Sheet
As noted above, this bottom sheet displays when users tap on the Avatars in the thread footer.
Tapping on a user from this bottom sheet opens up the profile modal for that user
Hover action menu for threads:
Updated items in the ‘•••’ menu:
Add ‘Follow/Unfollow thread’
If the parent post does not yet have replies, update language to “Follow/Unfollow message” since it’s not really a thread yet
Unread parent messages
New parent posts get added to the bottom of the channel, as they do in the current experience
The mention badge on the channel in the sidebar should only reflect the number of unread mentions in parent posts in the channel (not child posts)
The count in the unread messages toast banner should only reflect parent posts showing the center channel and not include child messages
Unreads within threads
In the Center Channel, when a thread has unread messages in it, an unread indicator dot is added to the reply metadata as noted above
When viewing a full thread (in the RHS or in the Global Threads View), the New Messages separator line display above the oldest unread message in the thread
Threads in the RHS
When a thread is opened in the RHS the reply input is focused rather than the main post draft in the center channel.
Opening up a thread in the RHS
When opening up a thread in the RHS, land the user at the oldest unread point in the thread (marked by New Messages separator line). If the entire thread is unread, open up the thread at the very top of it (showing the parent post).
Once a thread has been viewed and then navigated away from, the new message line is removed and the unread status is cleared in the center channel
Following/Follow button in RHS header
If a thread is not yet followed, a ‘Follow’ button appears in the RHS header. Clicking this will follow the thread and add it to the Global Threads view.
If a thread is already followed, a ‘Following’ indicator appears in the RHS header. Clicking this will unfollow the thread
New Messages line
Leveraging the ‘New Messages’ separator line pattern, place this above the oldest unread message within the thread
When new messages are added to a thread…
If scrolled to the bottom of the thread, show that a user is typing a new message on the thread (same as current UX)
If scrolled up higher in the thread, add new messages to the bottom of the thread, but don’t scroll to that point - keep the user scrolled where they are
Date separators
Don’t use date separators within threads. Instead, modify the time stamp on posts to show the date in a friendly format (e.g. 2 days ago, 5 months ago, etc)
Hover action menu items
Add in ‘Follow/Unfollow thread’ to the '•••’ more actions menu for any post within a thread.
‘Mark as unread’ will behave differently in that it will mark the post as unread within the thread and move the ‘New Messages’ separator above the post that is being marked as unread
Marking as unread on a post within a thread will automatically follow that thread if it’s not already followed
‘Pin to channel’ will add the child post to the ‘Pinned Posts’ section, but will not visually show the pin icon on the post in the main center channel if it’s a child post
All other actions will have the same behaviour and actions as current experience.
Threads in search results
When a thread is displayed in search results in the RHS, the title ‘Thread in {Channel Name}’ displays above the result (as in current experience). If a user clicks on a search result to a child post it would open the thread in the RHS scrolled to the message you clicked (and highlighted). As in the current experience, a ‘back’ chevron is added to the RHS header to return to search results.
Permalink to child posts
If a post contains a permalink to another child post, clicking on the permalink would load the linked-to thread in the RHS with the linked post highlighted. As in the current experience, a ‘back’ chevron is added to the RHS header to return the user to the previous child post/thread.
Following/Unfollowing Threads
When a thread is ‘Followed’ it is added to the global ‘Threads’ view
When a thread is ‘Unfollowed’ it is removed from the global ‘Threads’ view (with ability to undo the unfollow action)
How threads are followed:
If the original parent post was created by you, the thread is automatically followed
If you reply to a thread, it is automatically followed
If you are mentioned in a thread, that thread is automatically followed
If you Unfollow a thread, but then are mentioned, the thread is now automatically followed again
Marking as unread on a post within a thread will automatically follow that thread if it’s not already followed
If I explicitly click ‘Follow’ on a thread/message
Followed threads do not appear in Global Threads until there has been a reply
Each thread should also have an ‘Unfollow thread’ button in the ‘more actions’ menu that will remove the thread from the global ‘Threads’ view
Global Threads
Global threads is a view of conversations that the user has been involved in across all their channels, group messages and direct messages. The spirit of Global Threads is to offer a more personalized experience, to ensure replies to threads don’t get missed and to facilitate faster processing of messages by taking them from the many venues (channels, DM, GM) where they canonically reside and consolidating them in one place (less channel switching).
How to access Global Threads
This view is accessible viea a new ‘Threads’ section that appears at the top of the Channel Sidebar above all of the categories
The Thread List
A new pane that shows all threads collected in one place that the user has:
Contributed to (parent or child)
Been mentioned in
Followed
Marked as unread
Viewing ‘All your threads’ or ‘Unreads’
The default view is ‘All your threads which will show all threads by most recent reply, showing most recent at the top
An ‘Unreads’ view which will filter the list to only threads that have unread messages sorted by most recent reply
When a user leaves global threads and returns, remember the state they left
Sorting the List
Changed or new threads appear in the global threads list in real-time:
Resorting the list updates in real-time
If the selected thread in the list gets updated, it bumps to the top of the list, but keeps the thread selected and the list scrolls to the selected item (if needed)
‘New unreads’ banner
If you’re scrolled down to a point where the top of the list is no longer in view and new unreads come in out of view, append a ‘new unreads’ banner fixed to the top of the list view
Tapping this banner will scroll to the top of the list and hide the banner.
Thread List Items
Thread list items display the following
Display name of the user who created the parent post
Most recent reply timestamp in shortform, friendly format (e.g. 5 mins ago)
Post excerpt: originating parent post truncated to two lines
Mentions do not get the highlight colour here to avoid too much visual noise in this area
Avatar of each person who has contributed to the thread (truncated as appropriate)
Always show the original author first
Sorting by order of reply (first reply in position 1, and so-on)
show a max of 3 avatars total with a +N after that
Number of replies in the thread
If there are no unreads, this displays the total number of replies in the thread (e.g. '9 replies')
If there are unreads, this changes to the number of new unread replies (e.g. ‘3 new replies’)
Originating venue tag - i.e. the Channel, DM or GM that it’s from
Unread dot to indicate the thread has unread messages
Mention badge (if the thread has an unread mention in it) - shows in place of the unread dot
Clicking this will jump down to the oldest unread mention in the thread
More actions button (•••) - on hover only - triggers a menu with:
‘Unfollow/Follow thread’
‘Open in channel' - Opens the parent post in the channel it was posted in
‘Mark as unread’ - This option from the list item here, will mark the entire thread as unread
Save (formerly flag)
Copy link
Don’t include ‘Pin to channel’ in this context
Clicking on a Thread Item
loads the full thread in the Full Thread Panel (see details about this panel below) on the right
Full Thread Panel
Works like the RHS, showing all parent and child posts of a thread with a post draft area at the bottom for entering a reply.
Thread Header
Displays “Thread in {Channel Name}” - clicking {Channel Name} links users to the channel and location in the channel where the thread originated
NOTE: this would take users out of the context of the global threads view and in to the context of the channel
Follow/Following button indicator
A toggle to follow or unfollow the thread
Actions menu - a ‘•••’ icon displays in the header which triggers a ‘more actions’ menu - standard thread post actions appear here
‘Follow/Unfollow thread’
‘Open in Channel'
Opens the parent post in the channel it was posted in
‘Mark as unread’
This option from the parent post or from the thread header, will mark the entire thread as unread
Save (formerly flag)
Copy link
Don’t include ‘Pin to channel’ in this context
Scroll position
When opening up a thread, land the user at the oldest unread point in the thread (marked by New Messages separator line). If the entire thread is unread, open up the thread at the very top of it (showing the parent post).
Once a thread has been viewed and then navigated away from, the new message line is removed and the unread status is cleared in the center channel
New Messages line
Leveraging the ‘New Messages’ separator line pattern, place this above the oldest unread message within the thread
Date separators
Don’t use date separators within threads
Instead, modify the time stamp on posts to show the date in a friendly format (e.g. 2 days ago, 5 months ago, etc)
Defaults
When as user clicks on the ‘Threads’ item in the Channel Sidebar (LHS), the default view will be whatever view you may previously have viewed. If you’ve never visited the threads view before, then “All your threads” is the default, which shows all threads you follow sorted by most recent reply at the top
Empty States
An empty state shows in the Full Thread Pane until a thread is clicked
If there are no followed threads or no threads that the user has participated in yet, the inbox list is hidden and the entire main content area is replaced with the empty state describing how threads appear in this view
Impact on unreads, badges and notifications
When collapsed threads is enabled, notifications behave differently - see matrix of scenarios and associated outputs here (full spreadsheet of the chart below)
Other Implications to existing features
Search
Parent posts behave as-is. The ‘Jump’ action in the hover menu opens the parent post in the channel context
Child posts display similarly, but the ‘Jump’ action in the hover menu opens the thread in the RHS scrolled to the child post
Pinned and Flagged posts RHS
Parent posts behave as-is. The ‘Jump’ action in the hover menu opens the parent post in the channel context
Child posts display similarly, but the ‘Jump’ action in the hover menu opens the thread in the RHS scrolled to the child post
Compact Mode
Displays as-is, but shows the new Thread Footer below the post content
Future Proposed Features
Thread names
Threads can be given optional names
Threads displayed in the center channel:
If a thread has been given a name, the thread name displays above the avatar/username
If the thread doesn’t have a name, the fallback name is ‘Thread started by {Display Name}’
If a parent post does not have a name AND it doesn not yet have any replies, don’t show the thread name element at all
Within the “•••” menu of the post hover actions menu on a thread, add in a ‘Name this thread’ (or “Edit thread name” if already named).
Thread viewed in the RHS
Displays the threads name in the new thread header bar and the channel name next to the thread title
If no title is set, displays as ‘‘Thread started by {Display Name}’ in {Channel}’
Add a ‘more actions’ icon in the new thread title bar
Follow thread
Edit thread name
Thread names should be searchable
Thread names should display in search results
Thread names should display in pinned or flagged posts
Contextual search on global threads list
To aid users in finding specific threads, show a search function in the header of the threads list that is scoped to the list only
Global Drafts
Since drafts are difficult to find—even more so within threads—it has been proposed that we explore a global drafts view that collects any posts that have been started and not sent
Channel-Specific Threads
While viewing a channel, open the RHS to a threads view that shows only threads for that channel
Collapsed Post-Draft
As a way to encourage replies vs. ad-hoc posts in the channel, conceal the post draft behind a button to start a new thread. Adds an extra click intentionly.
Will need a keyboard shortcut to trigger this button as well
Maybe configurable by channel
Drag and Drop to re-organize Posts
Some way to fix the error of posting a new parent post vs. posting a reply
Drag a post on to another post to move it as part of the thread