Live Collaboration for Datawrapper

My first big project at Datawrapper was designing the live collaboration for the form-based UI of our tool (read more in the blog).

Of course, the most important part was designing a visual indicator of the user’s location. We didn’t want to go for the typical multiplayer cursor that many other tools have, because we felt it would be too distracting for our use case. However, this turned out to be a unique challenge for Datawrapper’s form-based UI.

We ended up with a small “presence pin” that can be placed on any control, table, list, preview, etc. The footprint of the pin was designed to be quite small to minimize overlap with the UI.

The presence pin only appears in the UI when another user actively changes the attributes of a visualization. This helps users see that they might want to avoid changing the same options at that moment.

To reduce distraction, each pin only remains visible for just a few seconds until it fades out — or reappears in a different location when the other user changes another option.

Hovering the pin reveals more information about the user(s). Especially important if they chose to “only” have the initial as avatar or if there are multiple users grouped together in certain controls (like disclosure groups, lists, tables, …).

Page Level Indicator

The presence pins only appear on the controls where the change is actually happening. We made this decision to keep users less distracted by only seeing the other user when they are at the same place in the UI — basically to avoid changing the same attributes.

To avoid surprising users with sudden changes, the page-level indicators generally indicate that other users may be present at the same visualization. This also provides a shortcut to jump to the other user’s location.

User Profile Settings

Users can upload a photo as their avatar or use their initials. They can also choose one of 12 colors for their pin.