Conflict Resolution in Collaboration: UI and UX

Learn how to design interfaces and user flows that elegantly manage editing conflicts when multiple users work simultaneously on the same product.

info Quick Definition
Conflict Resolution occurs when two or more users attempt to perform contradictory actions on the same object at the same time (e.g., one deletes a paragraph while the other is editing it). In collaborative product design, our goal is for the user never to see a “Sync Error” notification if we can avoid it.

The Challenge of Multi-user Applications

In modern applications like Google Docs, Figma, or Notion, real-time collaboration is a basic feature. However, behind the magic lies extremely complex conflict resolution logic. If two people save different versions, who wins? Is anyone’s work lost?

Poor conflict resolution design breaks user trust in the tool and creates a sense of insecurity and constant uncertainty.

Resolution Strategies: Who Wins the Conflict?

There are three main approaches to managing these critical moments:

1. Last Write Wins (LWW)

It is technically the simplest model: the last change to reach the server overwrites the previous ones.

  • LWW UX: It is frustrating. User A spends 5 minutes writing, and User B (who arrived a millisecond later) accidentally deletes everything. It should only be used for non-critical data.

2. Manual Resolution (The Big Modal)

If the system detects a conflict, it stops everything and asks the user: “Which version do you want to keep, yours or the server’s?”.

  • Manual UX: It blocks the workflow and generates a lot of anxiety. The user has to compare texts or designs under pressure and choose. It can cause serious data loss errors if the user doesn’t fully understand the options.

3. Automatic Resolution (Smart Merge)

The system attempts to merge the changes from both users logically (e.g., User A changed the color and User B changed the size; the system applies BOTH).

  • Merge UX: This is the best possible experience because the user doesn’t have to intervene. It is based on techniques like CRDT or Operational Transformation (OT). The conflict “disappears” from the user’s view.

How to Prevent Conflict through Design

Before resolving a conflict, the smartest thing is to prevent it from happening. To do this, we use several design patterns:

  • Presence Indicators: Show who is on the page and their remote cursors. If I see someone editing a paragraph, my brain tells me not to touch it.
  • Visual Locking: If a user enters to edit a table cell, put a colored border around it and disable editing for others. Clearly indicate: “User X is editing this.”
  • Version History: Allows the user to go back in time to recover something someone else accidentally deleted. “Fear of loss” is mitigated if there is always a backup.
  • Change Granularity: If changes are saved every millisecond (instead of every time Save is pressed), conflicts are much smaller and easier to resolve automatically.

Mentor’s Tips

  • Don’t scare the user: Avoid “Version Conflict” messages if the system can resolve it. The magic of real-time is that everything seems to “just work.”
  • Transparency above all: If the system makes a decision for the user (e.g., deletes a conflicting change), notify them via a small notification or a “Toast” so they are aware of the change.
  • Design for Offline: What happens if a user loses Wifi and keeps working? Upon reconnecting, you’ll have many more conflicts to resolve at once. Prepare your interface to show a clear “Syncing…” status.

Useful Resources and Tools

crdt-for-designers presence-modeling command-pattern offline-first-flows