UX Patterns Guide
My learning 0 of 20 lessons complete
Start lesson 1 →
12 documented entries

Collaboration And Social Interaction

Comments, mentions, presence, feeds, handoffs, shared attention, and team workflow.

Browse all problem families
Learn the family

How do people understand shared work and each other's actions?

Collaborative interfaces show who changed what, where attention is needed, and how a person can respond. Shared state needs clear ownership and timing.

Use this method

  1. Name the shared object and the people who can act on it.
  2. Show authorship, timing, and status for meaningful changes.
  3. Choose a notification or handoff for the next responsible person.
  4. Test simultaneous edits and a return after absence.

Compare the outcome

Strong: A reviewer sees the latest document change, its author, an unresolved comment, and the action needed before approval.

Weak: A reviewer sees a changed document and an activity feed with vague entries, then asks teammates which version needs approval.

Try it: Follow one shared object through an edit, comment, handoff, and decision; record which person needs which information at each point.

Read these patterns first

  1. CommentsFeedback must preserve author, timestamp, reply, resolution, assignment, or moderation context.
  2. Activity feedUsers need to catch up on recent collaboration, app, repository, channel, project, meeting, reminder, or task activity.
  3. Handoff summaryResponsibility, context, or conversation control transfers to another person, team, queue, shift, AI agent, live agent, or system.

Build the foundation

Build consistent components around behavior →

Follow the evidence

Complete study route · 12 entries

Work through the family in order

Begin with the core behavior, apply it in different contexts, then review cases that reveal the quality boundary. Open each entry for its decision rule, states, example, and source trail.

0 of 12 studies complete

Start this family →
6 entries

Build the foundation

Learn the shared task and the core interaction choices.

Lesson 01 / 12

Share dialog

A user needs to share one object or a small set of selected objects with people, groups, domains, links, or device targets.

Type
UI-UX
Sources
7
Trail checked
establishedObject-level sharing control for recipients, link scope, roles, delivery, copy-link, native share, and access management
Test in lab
Lesson 02 / 12

Invite user

An authorized user needs to bring another person into a workspace, organization, project, channel, repository, team, tenant, or shared object.

Type
UI-UX
Sources
5
Trail checked
establishedInvitation lifecycle for granting another person access
Test in lab
Lesson 03 / 12

Comments

Feedback must preserve author, timestamp, reply, resolution, assignment, or moderation context.

Type
UI-UX
Sources
4
Trail checked
establishedObject-attached comment composer and comment list with authorship, replies, state, permissions, and moderation
Test in lab
Lesson 04 / 12

Mentions

Composed content needs to target people or groups inline.

Type
UI-UX
Sources
6
Trail checked
establishedInline recipient reference with autocomplete, stable recipient identity, notification routing, access checks, and broad-audience safeguards
Test in lab
Lesson 05 / 12

Activity feed

Users need to catch up on recent collaboration, app, repository, channel, project, meeting, reminder, or task activity.

Type
UI-UX
Sources
6
Trail checked
establishedCatch-up stream of recent collaboration and work events with actor, verb, object, type, destination, and triage controls
Test in lab
Lesson 06 / 12

Handoff summary

Responsibility, context, or conversation control transfers to another person, team, queue, shift, AI agent, live agent, or system.

Type
UI-UX
Sources
6
Trail checked
establishedConcise transfer packet for responsibility, conversation, case, or task context
Test in lab
6 entries

Apply the patterns

Choose a specialized form for the context and follow its complete behavior.

Lesson 07 / 12

Threaded discussion

A topic or parent message can generate multiple reply branches that users need to follow over time.

Type
UI-UX
Sources
3
Trail checked
establishedTopic-centered conversation with parent post, reply branches, unread participation state, and thread-level controls
Test in lab
Lesson 08 / 12

Reactions

Users need quick, lightweight feedback on an existing message, comment, issue, document selection, or work item.

Type
UI-UX
Sources
5
Trail checked
establishedLightweight emoji feedback control anchored to an existing message, comment, issue, document selection, or work item
Test in lab
Lesson 09 / 12

Follow / subscribe

Users need future updates from a specific object, thread, channel, space, repository, topic, saved view, or query.

Type
UI-UX
Sources
8
Trail checked
establishedPer-object opt-in control for future updates from a thread, page, channel, space, repository, saved view, or topic
Test in lab
Lesson 10 / 12

Presence

Users need to understand current or recent availability before messaging, calling, assigning, routing, or joining.

Type
UI-UX
Sources
6
Trail checked
establishedPerson or group availability signal with status label, recency, source, privacy boundary, and action-aware affordances
Test in lab
Lesson 11 / 12

Live cursors

Collaborators need real-time spatial awareness in a shared visual or text surface.

Type
UI-UX
Sources
7
Trail checked
establishedEphemeral collaborator pointer and selection awareness with identity, color, recency, privacy, visibility controls, and stale-state handling
Test in lab
Lesson 12 / 12

Change review

Users inspect and decide on proposed edits, tracked changes, code suggestions, file diffs, or document redlines.

Type
UI-UX
Sources
6
Trail checked
establishedReview surface for proposed edits, diffs, tracked changes, or suggestions before they become accepted content
Test in lab

Saved items