Desktop/Webapp User Experience

Much of the documentation in this page is applicable to both the Desktop and Mobile experience, but see Mobile UX Documentation for anything specific to the mobile app experience.

Important Links

In-Channel Collapsed Threads

Open

Parent posts only display in Center Panel

• 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 within the RHS 

• Child messages are displayed in the RHS 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 in the RHS

• Clicking on the entire post area (visually indicated by the hover state) opens up the post in the RHS

  • NOTE: We still need to be able to select text in a post to copy it or to click links. So, if a click and drag is detected or a link within is clicked, don’t open up the RHS.

New Thread Footer

Open

The 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

• The Unread dot shows if there are unread messages in the thread (only if you follow it)

• Hovering over the dot shows the count of unread messages in the thread in a tooltip (e.g. “5 unread messages”)

Avatars

• Displays avatars of all unique users who contributed to the thread, including bots - these are considered ‘participants’

• Participants include any user who has replied to the thread excluding the original root post. The original author is only included in the participants list if they reply to their own root post.

• Show a maximum of 3 avatars

• Sort by order of most recent reply (latest 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

• Hovering over each avatar shows a tooltip with the users display name.

• Hovering over the +N avatar displays a tooltip of the remaining participants (similar to the reactions tooltip)

• Clicking an avatar opens that user’s profile pop-over 

Number of replies

• No longer shows the count in the top-right of the posts, but shows this count under the post in the thread footer 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 threads inbox 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 Friday”, if >=48 hrs and < 7 days

  • “Last reply August 10”, if >= 7 days

Thread footer for 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

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 thread footer as noted above (only for followed posts)

• When viewing a full thread (in the RHS or in the Threads inbox viewer), the New Messages separator line display above the oldest unread message in the thread

Compact mode display

Compact mode will display as it currently does, but the thread footer will simply display below the post content (see below).

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.

RHS Thread View

• 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). Do not show a new messages line in this case.

• Once a thread has been viewed it is marked as read and the unread dot or badge is cleared in the center channel or threads list view. The new messages line remains until the user navigates away from 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 (same as current UX)

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 threads inbox view.

• If a thread is already followed, a ‘Following’ indicator appears in the RHS header. Clicking this will unfollow 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)

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

  • NOTE: Marking as unread on a root post in the channel context will NOT autofollow the thread

• ‘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.

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 in the center channel

• Parent posts with no replies that have mentions are automatically followed and display as Following

• A reply on a parent post will make it a true thread (appear in the threads inbox view)

• Any mentions or unreads for a parent post appear on the channel LHS item, not on the Threads LHS sidebar item. Mentions or unreads in reply posts will appear on the Threads LHS item

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.

NOTE: as an added improvement, we could add a ‘back’ chevron when opening permalinked reply posts from the RHS so users can get back to the previous thread if needed. This can be a later improvement.

Deleting a root post

If a root post with replies gets deleted, the rest of the thread stays intact, but the root post displays as a deleted message with a thread footer. See design

Following/Unfollowing Threads

1. When a thread is ‘Followed’ it is added to the Threads inbox view. If a parent post is explicitly followed, do not add it to the Threads inbox view

2. When a thread is ‘Unfollowed’ it is removed from the Threads inbox view (with ability to undo the unfollow action)

3. How threads are followed:

   1. If the original parent post was created by you, the thread is automatically followed

   2. If you reply to a thread, it is automatically followed

   3. If you are mentioned in a thread, that thread is automatically followed

      1. NOTE: a single parent message is not considered a ‘thread' and is not automatically ‘followed’ until the thread has replies.

   4. If you Unfollow a thread, but then are mentioned, the thread is now automatically followed again

   5. Marking as unread on a post within a thread will automatically follow that thread if it’s not already followed

   6. If I explicitly click ‘Follow’ on a thread/message

   7. Followed threads do not appear in Threads inbox view until there has been a reply

4. Each thread should also have an ‘Unfollow thread’ button in the ‘more actions’ menu that will remove the thread from the Threads inbox view

Threads Inbox

The Threads inbox view is a view of conversations that the user has been involved in across all their channels, group messages and direct messages in the current team. The spirit of the threads inbox 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). 

“Threads” in the sidebar is only available when the collapsed threads feature is turned on.

How to access Threads Inbox

This view is accessible via a new ‘Threads’ item that appears at the top of the Channel Sidebar above all of the categories. This item scrolls with the rest of the sidebar

The Thread List

A new pane that shows all followed threads (see above for how a thread is followed):

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 threads inbox and returns, remember the state they left ('All your threads' or ‘Unreads’)

Sorting the List

Changed or new threads appear in the 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 that are 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

  • Markdown formatting is not displayed in this context and any markdown formatting characters should be stripped out. See Gmail as an example for how text formatting is treated in the inbox view

    • If there are bulleted lists or line breaks in the preview text, strip out line breaks

    • May be able to reference push notification formatting logic

• Avatar of each person who has contributed to the thread (truncated as appropriate)

  • Always show the original author first

  • Then sort by order of most recent reply (latest 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 parent post or from the thread header, will mark the oldest reply in the 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 thread viewer (see details about this viewer below) on the right

Thread Viewer

Works like the RHS, showing all parent and child posts of a thread with a message draft area at the bottom for entering a reply.

Thread Header

1. 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 threads inbox view and in to the context of the channel

2. Follow/Following button indicator

   • A toggle to follow or unfollow the thread

3. 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 oldest reply in the 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).

1. Once a thread has been viewed, the unread dot is removed from the thread list but the new message line remains until the user navigates to a different 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

Responsive Layouts for Threads Inbox

769-1020 Thread List View

769-1020 Thread View

1021-1679 Layout

In this view the Thread List is 400px wide.

1680+ Layout

In this layout, the Threads List is 500px wide.