I have been using Notion a bunch recently. It's great.

I wrote this post to share my thinking around some small design choices in Notion. My goal was a humble exploration of the incredible nuance and detail involved with crafting a great product.

My suggestions are all tiny and they're not priorities for Notion, nor are they meant to be. I would much rather have the Notion API released a tiny bit sooner than any of these changes made 🙂

This article might be a bit hard to follow if you're not familiar with Notion.

Here's an overview of the different changes I explored

Emojis with a purpose

What's the suggested change?

Collapsed pages in page breadcrumbs should abbreviate to their emoji instead of '...'.

Before

After

Notion breadcrumbs are interesting because they don't utilize the full page width to show the full breadcrumb when possible. The breadcrumbs have a maximum width regardless of the page width or how many pages deep the page is. The '...' symbol can mean the abbreviation of 1 page or more than 1 page. The emoji should only be shown if its 1 page.

It's a smart move to not show more of the path - the visual complexity is probably not worth it. A really elaborate long path is truly a mind-full (like mouthful but for your mind, unlike mindful).

However it is worth considering that Notion pages can be shared externally and that external readers may not know to which page an emoji refers.

<aside> 👉 Why it might be a good change?

1. ****It's nice to power users who know which page an emoji represents

****2. Maybe the change would allow more of the path to be shown? I would guess that it's mostly power users who work with pages that are deeply nested within many other pages.

3. However many pages won't have an emoji and then the ... would still be used. You would still be able to press on the page in order to show the full name.

</aside>

<aside> ⚠️ Why not? We have learned that the '...' means that there's something abbreviated here and that if we hover or click on this it will show what is hidden. However we don't have the same association with an emoji. By making this change users may be less likely to press this page abbreviation to learn what it is an abbreviation for and also be less likely to click it again to navigate to it.

That gets me to the question - what should happen if we press on this emoji abbreviation? The ... currently expands a little popover with the full name and the emoji of the page which can then be pressed to navigate to it, while pressing on a non abbreviated page name will take you straight to that page. I'd say the emoji should act like the ... does now - or else theres no way to clarify which page it is without navigating to it or adding another behaviour (like on hover) which would add mental complexity of learning a new interaction, and a non essential one at that.

People may also have the same emojis for different pages, and with a change like this they might get those pages confused with one another.

Emojis are often colourful and the breadcrumbs are intentionally cut short in order to not draw too much attention or be visually distracting. Replacing '...' with one more emoji comes at a visual and mental cost.

</aside>

<aside> ✅ Make change or not? It's probably a small change for an engineer (a dangerous phrase, I know, but I'm an engineer too) and it won't add much codebase complexity (it's all visual, no data change). It's a small delighter for the users who get a tiny bit of extra utility.

My verdict: Make the change

</aside>

Below is another use of breadcrumbs, this time in the search view. Note how the emojis here are omitted, as otherwise there would be too much color and attention drawn to them on the search view. The breadcrumbs are additionally made a lighter gray and a smaller text size because they are not as important as the page title, emoji or text.