# Real-Time Presence Modeling: Collaborative UX

> Learn to design effective presence indicators (cursors, avatars, activity) so that your users feel they are working together in real-time within your digital product.

*Tags: ux, concept, ui-design, product-design, collaboration*

---


> [!info] Quick Definition
> **Presence Modeling** is the set of visual and functional indicators that communicate to a user who else is with them in the same digital space (e.g., a Notion page or a Figma file) and exactly what they are doing at that precise moment.


## The Magic of Not Being Alone: The Feeling of Presence

A few years ago, applications were lonely: you worked, saved, and closed. Today, product applications are **multiplayer**. Presence modeling is not just an aesthetic ornament; it is a critical communication tool that prevents users from making mistakes (like editing the same object at the same time) and fosters fluid collaboration.

For good presence modeling, a designer must consider three levels of visibility:

## The 3 Levels of Presence Modeling

### 1. Identity Level (Who is here?)
It is usually resolved through an avatar list (Facepile) in the top corner of the interface.
- **Microinteraction:** When clicking the avatar, the system can automatically take you to that user's exact position on the canvas (Follow mode).
- **Feedback:** Indicates if the user is active, away, or in read-only mode.

### 2. Location Level (Where are they?)
Indicates exactly what part of the product each person is working in.
- **Remote Cursors:** The gold standard. Seeing your teammate's cursor moving in real-time creates an instant human connection.
- **Focus Borders:** If someone selects an input or an object, put a border in their assigned color around it. This visually indicates: "This space is reserved, don't touch it."

### 3. Activity or Intent Level (What are they doing?)
It is the most advanced level and helps the team coordinate without speaking.
- **Typing Indicators:** "John is typing...". Prevents two people from responding at once.
- **Action Indicators:** Showing small bubbles or icons next to the cursor (e.g., comment icon, hand icon).
- **Presence as a Navigation Tool:** Being able to jump to the page or section where the team's highest concentration of users is.

## Design Challenges and Best Practices

- **Visual Noise and Performance:** Too many cursors on the screen can be annoying (Cursor Chaos). Consider grouping cursors or fading them if there are more than 10 people on the canvas.
- **User Colors:** Assign a unique color to each person during the session so that cursors and selections are easy to identify. Ensure colors have enough contrast and are distinguishable for people with color blindness.
- **Privacy and Tranquility:** Sometimes the user wants to work alone without being observed. Offer an "Incognito" or "Focus Mode" where their presence is not visible to others.
- **Latency:** If your teammates' cursors jump, the experience feels like poor quality (Jank). Work with engineering to implement interpolation and movement smoothing techniques.

## The Impact on Team Trust

Good presence modeling drastically reduces [edit conflicts](/concepts/conflict-resolution/). If a designer sees that their teammate's cursor is over a payment button, they instinctively won't touch that button. Presence is, in itself, an extremely powerful form of non-verbal communication.

## Mentor's Tips

- **Don't assume, indicate:** If you don't show that someone else is on the page, the user will assume they are alone and will take destructive actions without thinking.
- **Use presence to delight:** Try small micro-animations when a user enters or leaves the room. These details humanize the digital tool.
- **Avatar Consistency:** Make sure the avatar seen in the presence list is the same as the user has on their global app profile to avoid identity confusion.

## Useful Resources and Tools

- **Figma Blog:** [Collaborative Design - Why Presence Matters](https://www.figma.com/blog/how-figmas-multiplayer-technology-works/)
- **Notion Guides:** [Collaborating in Workspace](https://www.notion.so/help/collaboration-and-sharing)
- **Liveblocks:** [Presence and Real-time Collaboration Engine](https://liveblocks.io/)
- **Articles:** [Designing for Multiplayer Apps](https://uxdesign.cc/designing-for-multiplayer-applications-7d3b5e4f9b8c)
---
[[crdt-for-designers]]
[[conflict-resolution]]
[[command-pattern]]
[[mental-models-undo-redo]]


---

Source: https://www.fernandoux.com/en/wiki/concepts/presence-modeling/