UX patterns to use in collaborative interfaces

Image credit: rikkiprince

Working with multiple people online on the same document or project has become a daily matter nowadays that everything is in the cloud. So how do you design a successful experience for collaborating live?

In this article I will outline the interaction patterns which you can use to address the challenges of working together online.

Identify participants

When you are working on a file together with other people, it comes in handy to be aware of:

  • who is working on the file right now as well
  • what these people are editing
  • who is online in general and is ‘watching’
  • who else has the rights to edit/view this document.

Not all of these elements have to be prominently visible all the time, but it is nice to have this info easily accessible and transparent. For example, a full list of people who have access to the document can be accessed through some menu item, and is not necessarily an essential information to occupy the main view of the screen.

Examples of participants’ identities in samepage.io (left), Google docs (middle) and inVision (right)

Annotation and comments

Collaboration online is about not only about creating and editing content together, but also about reviewing it. Being able to point to a specific item which you are commenting on saves a lot of time

  • for the commenter: no need to describe the context of the comment — ‘Next to the ‘OK’ button on page 2, there is a liability statement. Can you revise the second sentence?’
  • for the recipient: no second-guessing what the feedback is about, no wasted time on clarifying which exact page you are talking about.

The most popular ways to indicate the context of the comment seem to be hotspots and highlighted overlays on the content in question.

Example of using hotspots by inVision (left)to provide context to the comment, and highlighted overlay in MS Word (right)

Changes log and selective undos

When more than one person are working on a document, it is hard to follow all the changes that are happening at the same time. It is a useful feature to be able to look through a log of changes that were done by the contributors to get an insight in how the document evolved, and at which point the decisions were made. It can be useful for such scenarios to be able to view snapshots of the document in its previous states or even revert the whole thing to an earlier state. For example, when new knowledge influences the work done in the past day, it can be useful to revert all changes done in the past day.

Through discussion of the document the participants can arrive to decision to remove, edit or abandon certain items. For such scenarios is is handy to be able to undo or revert a certain change selectively, without necessarily undoing the other changes that happened afterwards.

Changes log in Mural

Rights and permissions

The expression ‘Everybody is equal, but some are more equal than others’ applies quite well to this pattern. In many cases, there are various stakeholders involved in interacting with a shared document. For various reasons the participants might want to restrict editing permissions to some users (to prevent accidental edits; to use the document only to share information, etc.). Such access management also implies that certain users should not only be able to view and/or edit the document, but also grant such permissions to others. It is thus important to think through thoroughly which access rights structure is the best for the tool you are designing.

Managing access rights in Dropbox (left) and Google drive (right)

Built-in communication channel

In some cases, it is handy to be able to chat or have a conference call from within the tool itself, in order to avoid switching between tabs or windows. However, depending on the nature of the collaboration, it may be not feasible or necessary to do so. Consider designing a built-in live communication channels for tools in which the content is being co-created, rather than where participants are interacting in a more passive way, such as mostly providing feedback, or making infrequent incremental changes.

These are, in my opinion, the most important and common features / design patterns found in collaborative interfaces. Something missing or requires further discussion? Let me know in the comments.




Thoughts and musings on product and UX

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Firefox Brand Evolution

New UK passport “likely to become a defining symbol of Britain’s new identity”

British passport design makes national identity

Animal Project Pt.2: Illustration

Spatial Experiences

The importance of colour. A brief look into the colour psychology of everyday life.

What kind of adoption process would benefit both the animal and their human?

What is Product Design?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
UX Alpaca

UX Alpaca

Thoughts and musings on product and UX

More from Medium

Bake Digital Accessibility Practice into Product Development process

Picture of “Web Accessibility benefits everyone”

Design Fundamentals for Developers

Breaking the Architecture, Design, System, Concept, Theorem, Algorithm, Product and Notion

Technique to ace your next User Journey Map