Benchmark of Knowledge Management apps

WIP

The purpose of this benchmark is to help visualize the overall UX of recent collaboration platforms and help keeping us aligned with current industry practices for our product. The main focus here is to document the five first minutes of interactions, what would a new user see and be presented when dealing with these apps for the first time.

For this research, three knowledge management apps were chosen as they share similarities with the proposed feature set of Cristal:

• Notion (released 2016)
• Outline (released 2018)
• Coda (released 2019)

Released in 2016, Notion set the basic UX to what a block level editor could do. It was followed by Outline, an open source app with the same idea, and then Coda. Coda here being the most complex one because it places emphasis on creating apps right from the start. 

It is very important to note that, on a basic level, none of these apps requires prior training to start using them. Coda has very advanced features and this comes with a more complex approach, but as a beginner it is possible to have at least a basic document done very quickly.

Another point of difference between these apps is that Coda has the concept of "Document" and "Pages". While Notion and Outline only have "Pages"

Of course, there are other apps in this category, like Anytype, released as a beta in June 2023. But because it's so new, its feature set is evolving rapidly, so it was opted to be left it out of this first benchmark.

Look and Feel

All of these apps share similarities between their look and feel:

• Prominence of white background and minimalist styles.
  • This is intentional as it helps to bring the user content to prominence. 
• The use of some shade of blue to mark main interactions.
  • But this is done in a very deliberate way, there were rare cases in which two "action" colors were active at the same time
• Use of white space to separate sections and make the interface lighter.
  • Lack of borders of different shades of gray to mark hierarchy.
  • Notion is more "Cramped" in this aspect, featuring less white space than the competition and heavier fonts faces.
• Most do not use any sort of All caps typography in the interface.
  • Only Coda did it to separate sections in an options page.
• A lot of features and interactions are only shown when the mouse is over some control.
  • This has the benefit of cleaning the interface
  • However, this can have an impact on Accessibility and Discoverability
• Centered content on pages was set as default to keep line-breaks under control
  • (feature) All of them allow changing this to utilize all the page width for content.

Layout

• All three apps rely heavily on a single sidebar for content navigation. This bar fills 100% of the viewport height, so there is no "Header" like we do in XWiki Standard.
  • None of the apps allow changing the position OR disposition of the main sidebar. Only user content (pages) is allowed to be reordered;
  • All of them allows hiding the sidebar via a button. Access is then made by closing in the cursor on the left side of the viewport, at this moment the sidebar opens again and the icon to lock it back in place is also presented.
  • 
• Only Coda separates the User icon (to access account and preferences) in a top bar icon, akin to Google Apps.
• None of the apps feature a footer underneath user content. But Notion and Coda place a floating help icon anchored to the bottom right of the viewport. Outline on the other hand, when editing a document, places the Keyboard shortcut help anchored similarly as well.

Notifications

• Notion and Coda show notifications on the top right of the viewport.
• Outline show them in the bottom left.
• All of them rely on a bell icon to represent a notification. However, to show past notifications, Notion uses a clock icon.
  • Subscription status is also represented by a Bell

Onboarding

Here we have different approaches between the apps.

• Notion first asks the user its objectives, after selecting one a workspace is created with common pages to the option. The first page also acts as a "tutorial" of the main features of Notion.
• Outline is even more direct in its approach. After login in for the first time, the user is presented with some pages describing what is the app, how to use it and its integrations. However, this first page is not editable as it is a "Collection" a feature exclusive to Outline to keep documents grouped together.
• Coda features a more convoluted approach. Presenting a long sequence of options and questions until a template screen is presented to the user. After all that, Coda also presents its first document as a help for first use;
  • It's important to note that Coda also utilizes bubbles of help (that can be dismissed) pointing to features on the interface, like navigation. At no moment, more than one bubble is presented in sequence.

Creating a page

• All apps have a "New Page" button in the sidebar.
  • Usually this button is stylized as an icon only button .
  • This button creates a page underneath the clicked element by default. 
  • In coda this creates a new page inside the same Doc
• But all of them also provide a clearly labelled "New Page" in a fixed position on the interface.
  • The default action of this button is to create a new document on the root level of the document tree
  • Notion and Coda position it in the sidebar, Outline on the top bar.
  • When using the top button "New Doc", Outline gives a choice on where to create a new page.
  • The new Doc on the top bar of coda creates a new document, in which the user can then create pages.

Editing content

All apps have editing open as a default.

• Notion and Coda have an option to "lock" the page from changes (in Coda this is a paid feature).
• Outline does not seem to have this option, or it was not immediately visible.

All apps feature a formatting menu when selecting content. This menu is shown above the highlighted content and feature common formatting actions like bolding text, changing paragraph styles and bulleted lists.

Slash menu

The slash menu is featured in all apps. Coda seems to have the more complete menu, with a lot of features not available on its competitors. Outline has the least features and a lot of them are integrations with third party apps.

This menu in Coda is in fact so featured packed that you can pin it to the side of the page where it serves as a menu that you can drag individual components from. It is an interesting solution that could serve well in the future for XS Standard and Cristal.

Page options

Again on all apps the options for each page appears in two places. On the sidebar, with a reduced feature set on Notion and Coda, and also on the page header, similar to what we have in XS.

Templates

All the apps have templating options, with Notion and Coda being very emphatic on using them right from the start.

Conclusions

To keep Cristal aligned with competitors, it would be important to follow the steps described below. Of course, we can opt to differentiate on some topics, but it should be done carefully to have less of an impact on the experience. But if our general UX can be close to these apps, users should have an easier time adapting to Cristal.

Some of these concepts are different from XWiki Standard so, if a user comes from there, maybe more time would be necessary to adapt. The onboarding should make all the difference here.

Important topics
- Keep navigation consistent. Most apps feature a single point for navigating in the whole document/app structure.
- Lean design to keep users content in focus. Colors should be used in a very deliberate manner.
- All apps feature editing content turned on by default. There's less friction to start producing content.
- Controls for formatting text are always shown on demand, by selecting.
- Slash menu is very important, all apps feature it with more or less the same options.
- Block editing is a given.
- Menus available on different places. Sometimes a little bit of redundancy can improve the experience, as we can see in the Page Options described above. This should be done carefully so we do not overload our users with options.
- Onboarding should be slick, only the minimum necessary for the user to start using the app.
- Help text on the first page, let the user edit and play with this page to gain confidence.
- Provide a set of templates for different use cases