With software such as Google Docs and Figma now part of the everyday productivity toolkit for millions of people, collaborative features have become mainstream. Thanks, in part, to the boom in distributed teams and remote working, new software is increasingly built from the ground up with realtime collaborative features – and other vendors are looking at how to retrofit multiplayer collaboration to existing products. In fact, research by Gartner shows an increase of 44% in collaboration tool usage amongst digital workers in the US, Europe, and Asia-Pacific region.
If you’re in either position and looking at how to build collaboration functionality into your software, here are ten features you’ll need to implement, and why they’re important.
What do we mean by collaboration tools and software?
For most of computing history, software has been single player. In other words, software applications were designed to be used by one person working alone. If a group of people needed to collaborate on the same piece of work, there were two options:
- One person stopped their work, saved it, and passed it to the next person.
- Or everyone created their own version of a file and then one unlucky person had the job of merging them all back together at the end.
Multiplayer collaboration takes away the messiness of sharing files and allows each person to collaborate in realtime on the same data. An update made by a colleague in San Francisco, for example, can be seen instantly by everyone else working in that document, no matter where they are.
So, what do you need to build if you want to improve collaboration in your apps? Here are the four fundamental characteristics of multiplayer collaboration:
- Realtime updates: A change made by one user must propagate to all other users instantly, or as near to instant as the internet allows.
- Live playback: Each user should be able to watch in realtime precisely what their collaborators’ see on their side, right down to watching each person’s cursor move about the screen.
- Presence and status: An easy way to see who is available to work is key to efficient collaboration.
- Data integrity: With data and changes coming in from multiple people at once, there’s a risk of conflicts. Preventing data loss from conflicts is both a UX and a backend challenge.
Tools built for multiplayer collaboration are having an outsized impact in their categories. But why are they so valuable?
10 features to include in your collaborative experience
The exciting thing about multiplayer collaboration is the variety of applications where it is helping people to deliver more. Multiplayer collaboration tools such as Figma, Webflow, and Miro each bring a unique approach to their particular problem space. However, despite their differences, they all share a core set of features that enable their users to collaborate.
Here are the ten key features needed to deliver a collaborative user experience.
- A shared space: Whether it’s a text document, virtual whiteboard, or graphic design canvas, the focal point of your software’s collaborative experience is the space shared between the users. The technology choices you make, such as choosing WebSockets versus WebRTC and whether you build in-house or buy in an external platform, will determine the costs and difficulty involved.
- Authentication: Tracking each individual user, along with their permissions within the app, is crucial to enabling effective collaboration.
- User avatars: Academic research shows that avatars help players in online games to feel more socially connected to other players. In collaborative work spaces, avatar stacks help orient each person by showing who is connected and providing additional context, such as whether they’re busy or inactive.
- Live location: Just as avatars help put a “face” to each individual collaborating, being able to see their current location both adds another human dimension and makes it easier to understand their likely availability.
- Live cursors: In person, it’s easy to see what other people are doing. Live cursors help replicate that in a virtual environment by showing the location of each person’s mouse pointer, along with a name tag or avatar.
- Typing indicators: Just like live cursors, typing indicators provide context that we take for granted when face to face. If we users know other people are typing, they can wait to respond or pause their own work to avoid a potential clash.
- Field locking: Similarly, it could be easy for users to attempt to edit the same data simultaneously, thereby leading to conflicting edits. Seamless field locking automatically grants the current user exclusive edit rights to a part of the shared space (such as a cell in a spreadsheet) until they click away, thereby helping to avoid conflicts.
- Live updates: Multiplayer collaboration works best when there’s no delay between one person making an edit and every other user seeing it. Streaming changes to each client simultaneously and reliably requires substantial realtime infrastructure.
- Live comments: The rapid iteration that comes from multiplayer collaboration relies on participants being able to quickly communicate with each other. Live comments, updated as the other person is typing, help replace the rapid feedback of an in-person conversation.
- Support for large numbers of concurrent users: Scaling to support many users can be a significant engineering challenge but a successful multiplayer collaboration tool will need to handle realtime data transfer to, from, and between thousands or more users without any degradation in experience.
Examples of multiplayer collaboration tools
Arguably, the biggest software success stories of recent times have taken an established genre of app and shown how much more powerful it can be with the addition of multiplayer collaboration. Let’s look at some of the pioneers.
Figma: Collaborative design
Creativity is fundamentally collaborative. Visual design work, especially, is often an iterative process involving multiple creators, reviewers, and sometimes developers. Figma was the first mainstream design tool built from the ground up to enable online collaboration design features.
Bringing multiple users together to collaborate in realtime has enabled Figma to upend an industry that had been dominated for decades by single player tools, such as Adobe Illustrator. Key to Figma’s success is its underlying realtime infrastructure and has led to the company’s acquisition last year by Adobe for $20 billion.
Webflow: No-code web design and development
No-code website building tools used to be clunky and would generate old fashioned websites. Webflow is part of a generation of website builders that have changed that by enabling non-coders to create fast, modern websites from within their browser.
One feature that sets Webflow apart is the multiplayer Webflow Designer. WebFlow’s online collaboration features improve productivity by enabling designers and content editors to follow their teammates’ work in realtime. Avatars make it easy to see who is working on what, while the ability to take control of a design element momentarily helps to prevent conflicts.
Miro: Whiteboarding
Getting together around a whiteboard is one of the most productive ways for people to collaborate in a room together. Miro recreates that easy collaboration for remote teams with its multiplayer online whiteboards.
Using Miro’s infinite canvas, people can collaborate remotely to sketch out everything from initial ideas to high fidelity product prototypes.
How can you add multiplayer collaboration to your app?
For Adobe, Figma’s multiplayer collaboration was worth a $20 billion acquisition. Demand for realtime live collaboration is stronger than ever, making applications more valuable and driving both customer acquisition and retention.
Retrofitting collaboration platform features to your existing app can require a complete rearchitecture. Let’s look at the engineering implications of some of the features we reviewed above.
In a single player cloud app, the relationship is between the user and the version of the data they’re working on at the moment. Take a visual design application, for example, where a single designer works with their own instance of an image. The system’s architecture can be relatively simple because, unless they make a copy of the image file and share it with someone else, there’s no collaboration.
Now let’s look at the implications of adding just one multiplayer feature to that design tool. Live commenting sounds relatively simple - but adding it to an existing application would require:
- Enabling read-only live access to the image.
- Streaming any changes in realtime to each of the people viewing it.
- A way to send comments from the viewers to the designer and anyone else viewing the image, all while avoiding conflicts if two people try to comment in the same place at the same time.
That means significant development work on the client side and across the entire backend. There’s no longer a simple one-to-one client-server relationship but instead data must flow in realtime between multiple clients and a necessarily more complex backend. And the tolerances for realtime are tight, so performance must scale linearly even as more users join.
The alternative to building in-house is to rely on a realtime platform as a service (PaaS), like Ably, and take advantage of the infrastructure provided. Crucially, buying infrastructure in this way, frees engineering teams to focus on building the project’s strategic functionality.
At Ably, we’ve developed Spaces, an intuitive set of APIs that allow you to build realtime collaboration features such as avatar stacks, live cursors, member location and component locking, in days. Each API is optimized for their specific use-case, reducing integration effort. Find out more, here.
Top comments (1)
Great!
I would like to recommend a collaborative web development tool called ServBay. It enables team collaboration and environment alignment. Very useful!