Designing Synced Blocks

Having coined terms like hypertext and hyperlinks, the ideas of computer pioneer Ted Nelson helped define the web as we know it today. At the core of his beliefs was the desire for computers to go beyond paper — if you think about it, a word processor isn’t much different than a typewriter. The way he saw it, computers should extend our capabilities.

计算机先驱泰德 · 尼尔森创造了超文本和超链接等术语,帮助定义了我们今天所熟知的网络。他信仰的核心是希望计算机超越纸张ーー如果你仔细想想,文字处理机和打字机没什么不同。在他看来,计算机应该扩展我们的能力。

But many of Ted’s ideas never came to fruition. One of those was transclusion, which was supposed to be part of Project Xanadu, his hypertext model founded in 1960.

但是泰德的许多想法都没有实现。其中之一就是 transclusion,它被认为是 Xanadu 项目的一部分,该项目是他于1960年创建的超文本模型。

When we interviewed Nelson for our Pioneers series, he described the concept this way: “Transclusion means that part of one thing is included in another and brought from the original. In the Xanadu method, the transcluded portion has a path back to the original that you can follow.” You can see the original mockup below, and a more recent prototype of what he had in mind here.

当我们为我们的先锋系列采访尼尔森时,他是这样描述这个概念的: “Transclusion 意味着一个事物的一部分被包含在另一个事物中,并从原始事物中带来。在 Xanadu 方法中,Transclusion 部分有一条回到原始状态的路径,你可以沿着这条路走下去。”你可以在下面看到原始模型,以及更近的原型,他有什么想法在这里。

Theodor H. Nelson, “As We Will Think." Proceedings of Online 72 Conference, Bruanel University, Uxbridge, England, 1972 

西奥多 · h · 尼尔森,《我们将如何思考》 ,《72年在线会议论文集》 ,布鲁内尔大学,阿克斯布里奇,1972年
Theodor H. Nelson, “As We Will Think." Proceedings of Online 72 Conference, Bruanel University, Uxbridge, England, 1972  西奥多 · h · 尼尔森,《我们将如何思考》 ,《72年在线会议论文集》 ,布鲁内尔大学,阿克斯布里奇,1972年

This inspired what we’re launching today: Synced Blocks. The feature is new. The idea isn’t.

这启发了我们今天推出的: Synced Blocks。这个功能是新的。这个想法不是。

What if the exact same information could live and breathe in multiple places? For example, if your company’s process for requesting time off changes, you’d probably have to find all the pages that mention the policy and manually update each of them.

如果完全相同的信息可以在多个地方存在和呼吸会怎样?例如,如果您的公司请求休假更改的流程,你可能必须找到所有提到相关内容的页面,并手动更新每个页面。

Synced Blocks changes that. Instead of going through and updating the process to request time off in every page it’s referenced, turning it into a Synced Block allows you to update it once and have those changes reflected everywhere. Even though it’s a simple idea, it opens up many possibilities for how information can be structured and shared.

同步模块改变了这一点。与其在每个被引用的页面上更新休假流程,不如将其转换成 Synced Block,这样你就可以一次性更新它,并且这些更改可以立即反馈到任何地方。尽管这是一个简单的想法,但它为如何构建和共享信息提供了许多可能性。

Ready to learn how to use Synced Blocks? Here’s how. 

准备好学习如何使用 Synced 块了吗

It’s long been a dream of ours to bring this to users. And as a designer, it’s been a dream of mine to bring it to you in a way that feels intuitive and natural so that anyone can get the most power out of Notion.

把它带给用户是我们长久以来的梦想。作为一个设计师,我的梦想就是以一种直观和自然的方式把它带给你,这样任何人都可以从 Notion 中得到最大的力量。

Drawing inspiration from transclusion | 从 transclusion 吸取灵感

To implement Nelson’s full vision for transclusion, we realized we’d basically need to change the internet — having every piece of content cross-referenced and traceable. (He really doesn’t like the internet as it stands. “I don’t want to talk about the web today,” he said, during our interview. “I hate it.”)

为了实现尼尔森的全面视野转换,我们意识到我们基本上需要改变互联网ーー让每一段内容互相参照和可追踪。(他真的不喜欢现在的互联网。“我今天不想谈网络,”他在我们的采访中说。“我讨厌它。”)

image

Instead, we decided to take another approach. You can sync blocks on public pages and between workspaces, like our own little version of Nelson’s hypertext web. We hope he would like that this is making a comeback.

相反,我们决定采取另一种方法。你可以在公共页面和工作区之间同步块,就像我们自己的小版本的 Nelson 的超文本网页。我们希望他会喜欢这种方案。

So, what similarities exist between transclusions and Notion’s Synced Blocks?

那么,transclusions 和 Notion 的 Synced Blocks 之间有什么相似之处呢?

We tried to maintain that bi-directional concept at the sentence or paragraph level — in our case, the block level. We also show the paths to other places where the content is used (as Nelson might have suggested), but not in an unfamiliar or complex visual way, just in a simple list that takes you to the right place.

我们试图在句子或段落层面上保持双向概念ーー在我们的例子中是块层面。我们还展示了其他使用内容的地方的路径(正如 Nelson 可能建议的那样) ,但不是以一种陌生或复杂的视觉方式,而是以一个简单的列表将您带到正确的位置。

A comparison browser based on transpointing windows. Image from xanadu.net.
A comparison browser based on transpointing windows. Image from xanadu.net.
How Synced Blocks shows the path back to the original block. 如何同步块显示路径回到原来的块
How Synced Blocks shows the path back to the original block. 如何同步块显示路径回到原来的块

What makes Synced Blocks possible in the first place is Notion’s block-based data model — where the block is the smallest atomic unit that can be moved, transformed, or linked to other content — giving you flexibility to organize your information. In fact, Notion has always supported the ability to show an “alias” of an individual block (some of our users figured out a workaround, which you can see here).

首先使 Synced Blocks 成为可能的是 Notion 的基于块的数据模型,其中块是可以移动、转换或链接到其他内容的最小原子单元,这使您可以灵活地组织您的信息。实际上,Notion 一直支持显示单个块的“别名”的能力(我们的一些用户找到了一个解决方案,您可以在这里看到)。

Before Synced Blocks, you could jump between Notion pages through the sidebar and breadcrumbs. You could also use links and backlinks, both for pages and for specific blocks. But these links only served as a tool for navigating between pieces of information. Now, you can transclude one or multiple blocks anywhere.

在 Synced Blocks 之前,你可以在 Notion 页面之间跳过侧边栏和面包屑。您还可以为页面和特定块使用链接和反向链接。但是这些链接只是作为在信息片段之间导航的工具。现在,您可以在任何地方输入一个或多个块。

In order to bring the concept of transclusion to a popular audience (and make it really useful for everyone), we knew our solution had to be both intuitive and simple.

为了把迁移的概念带给大众(并使其对每个人都有用) ,我们知道我们的解决方案必须既直观又简单。

Our design approach | 我们的设计方法

You’ve probably used links before inside Notion, outside Notion — they’re everywhere!

你可能已经使用过 Notion 内部和 Notion 外部的链接---- 它们无处不在!

Links usually go one way, pointing to a destination and taking you there. As Ted Nelson said about the internet, this creates, “a tangle of ever-breaking one-way links, breaking whenever documents are moved or modified.”

链接通常是单向的,指向一个目的地并带你去那里。正如泰德 · 纳尔逊(tednelson)谈到互联网时所说,这造成了“不断断开的单向链接的混乱,每当文档被移动或修改时就会断开。”

To me, a link is simply a relationship between objects. One-click, one-way hyperlinks are the most obvious and popular, so they’re everywhere. Less obvious, more complicated concepts like backlinks and transclusions never caught up. We wanted to fix that.

对我来说,链接仅仅是对象之间的关系。单击、单向超链接是最明显和最流行的,因此它们无处不在。不那么明显的,更复杂的概念,如反向链接和 transclusions ,从来大规模普及。我们想解决这个问题。

Simplifying the complex | 简化复杂的东西

The simplest solution takes the most time to create. When the first iPhone launched, Copy and Paste was absent until Apple got the interactions to feel right two years later. They had to make sure the feature was fit to the medium so people could use it without thinking or learning too much.

最简单的解决方案需要最多的时间来创建。当第一代 iPhone 发布的时候,直到两年后苹果的交互感觉良好之前,复制和粘贴是不存在的。他们必须确保这个功能适合媒体,这样人们就可以使用它而不必思考或学习太多。

For Synced Blocks, the biggest design challenge was making sure anyone, no matter how technical, could naturally discover the concept and immediately understand it while using Notion.

对于 Synced Blocks 来说,最大的设计挑战是确保任何人,无论多么技术化,都能在使用 Notion 时自然地发现这个概念并立即理解它。

The primary path to discover Synced Blocks is by copying blocks from a page and pasting them into another, a concept created by Larry Tesler at Xerox Parc. When it comes to text editing, most of us can’t live without Copy and Paste. It’s simple and intuitive because it traces back to how people used to do things in physical space — and that entry point changed how people interact with text in virtual space forever.

发现 Synced Blocks 的主要途径是从一个页面复制块并将它们粘贴到另一个页面,这是施乐帕洛阿尔托研究中心的 Larry Tesler 创建的概念。说到文本编辑,我们大多数人都离不开复制和粘贴。它简单而直观,因为它可以追溯到人们过去在物理空间做事的方式,而且这个切入点永远地改变了人们在虚拟空间与文本互动的方式。

In this 1970s photo provided by Xerox PARC, Larry Tesler uses the Xerox Parc Alto early personal computer system. Photo via The New York Times. 
在这张上世纪70年代由施乐帕洛阿尔托研究中心提供的照片中,Larry Tesler 使用了 Xerox PARC Alto 早期的个人电脑系统。图片来源: 纽约时报
In this 1970s photo provided by Xerox PARC, Larry Tesler uses the Xerox Parc Alto early personal computer system. Photo via The New York Times. 在这张上世纪70年代由施乐帕洛阿尔托研究中心提供的照片中,Larry Tesler 使用了 Xerox PARC Alto 早期的个人电脑系统。图片来源: 纽约时报

Ted Nelson might disagree, as he thinks the computer world is, “built on crude traditional models,” including, “paper metaphors.” But the thing is, not everyone will immediately understand a new way to do things. This reminds me a lot of A Pattern Language — in order to make a complex concept easily understood, we needed to build on simpler, more well-known ideas and patterns.

泰德 · 尼尔森可能不同意,因为他认为计算机世界是“建立在粗糙的传统模型之上”,包括“纸质隐喻”但问题是,并不是每个人都能立即理解一种新的做事方式。这让我想起了 a Pattern Language (模式语言)ーー为了让复杂的概念更容易理解,我们需要建立在更简单、更广为人知的想法和模式之上。

So we borrowed the existing idea of Copy and Paste as a common mechanism to make Synced Blocks intuitive and accessible the first time someone discovers it.

因此,我们借鉴了复制和粘贴的现有概念,作为一种常见的机制,使 Synced Blocks 在第一次有人发现的时候直观易懂。

I also knew the packaging of Synced Blocks needed to entice discovery.

我也知道 Synced Blocks 的包装需要吸引发现。

Making the simple attractive | 让简单的事物变得有吸引力

When starting work on Synced Blocks, I thought about making a hammer — it was once a new tool that is now ubiquitous, feels perfect in your hand, and is used for many purposes.

当我开始制作 Synced Blocks 时,我考虑过制作一把锤子ーー它曾经是一种新工具,现在已经无处不在,在你手中感觉非常完美,而且用途广泛。

For Synced Blocks, the ergonomic problem was making it feel like part of the page when viewing, while also making it clear to editors that changes would affect other places. Plus, a Synced Block is really only a container for blocks, adding to complexity in display, structure, and block-level interactions.

对于 Synced Blocks 来说,人机交互的问题在于让它在浏览时感觉像是页面的一部分,同时也让编辑们清楚地知道变化会影响其他地方。此外,Synced Blocks 实际上只是块的容器,增加了显示、结构和块级交互的复杂性。

To make it feel comfortable in the hand, we iterated constantly.

为了让它在手上感觉舒服,我们不断地迭代。

The first version felt too separate from the rest of the blocks on the page, which then resulted in some layout difficulty (extra spacing around the container, positioning of the overlay, etc.).

第一个版本感觉与页面上的其他块过于分离,这导致了一些布局困难(容器周围的额外空间,叠加的定位,等等)。

Our original design for Synced Blocks. 我们的原始设计为同步块
Our original design for Synced Blocks. 我们的原始设计为同步块

To eliminate the layout problem, we built a prototype of the sync container by incorporating padding and controls inside the Synced Block when editing. That resulted in problems with narrow columns, and it felt a bit clumsy with the repositioning of the text when moving in and out of edit mode.

为了消除布局问题,我们在编辑时在 Synced 块中加入了填充和控件,从而构建了一个同步容器的原型。这导致了列较窄的问题,而且在进入和退出编辑模式时文本的重新定位让人感觉有点笨拙。

An early prototype we built and tested internally. 我们制作并在内部测试了一个早期的原型

image

After testing the prototype internally, we felt it wasn’t good enough, so we tried more ideas and iterated. We then granted access to Synced Blocks to a group of Notion power users, seeing some of the real-world issues they faced when using the feature, like alerting Synced Block editors of permission mismatches.

在内部测试了原型之后,我们觉得它还不够好,所以我们尝试了更多的想法并进行了迭代。然后,我们将 Synced Blocks 的访问权限授予一组 Notion 的高级用户,看到他们在使用该功能时面临的一些现实问题,比如向 Synced Block 编辑提出权限不匹配的警告。

A mockup of the permission aid menu. 权限辅助菜单的模型
A mockup of the permission aid menu. 权限辅助菜单的模型

Eventually, we landed on something much lighter — a halo around the Synced Block that wakes as you near it, and gets brighter when editing affects other pages. New users should notice something’s different with these Synced Blocks as they pop up inside their workspaces. I thought a lot on how to get people discover this naturally when they move their cursor through content, finding a Synced Block, trying it, and understanding what it is. That’s also why the menu is so streamlined, showing only what’s necessary to viewers and editors.

最终,我们降落在一个更轻的东西上ーー Synced Block 周围的边框,当你靠近它时它会醒来,当编辑影响其他页面时,它会变得更明亮。新用户应该注意到这些同步块在他们的工作空间中弹出的不同之处。我想了很多关于如何让人们自然地发现这一点,当他们移动光标通过内容,找到一个同步块,尝试它,并了解它是什么。这也是为什么菜单如此精简,只向观众和编辑显示必要内容的原因。

Edit a Synced Block anywhere, and updates will be reflected. 在任何地方编辑同步块,更新将被反映出来

To end up at the final version, we needed to feel the feature. Were the light aspects — like seeing a Synced Block the first time — intuitive and delightful? Were the heavy aspects — like surfacing warnings on edit and deletion — supposed to feel this heavy?

为了最终得到最终版本,我们需要感受这个功能。光线方面---- 比如第一次看到 Synced Block---- 是否直观和令人愉快?那些沉重的方面---- 比如编辑和删除上的表面警告---- 是否应该感到沉重呢?

What started as a high-level concept needed rounds of use and iteration before whittling it down to only what was necessary, making that as simple as possible, and polishing what was left.

一个高层次的概念需要多轮的使用和迭代,然后才能精简到必要的部分,使之尽可能简单,并完善剩下的部分。

New ways to connect information now, and moving forward | 连接信息的新方法,并向前推进

This version of Synced Blocks isn’t yet in its final form, what it can be, what it will become. We hope to develop more functionality for our users to transform information at different densities.

这个版本的同步模块还没有最终形式,它可以是什么,它将成为什么。我们希望为我们的用户开发更多的功能,以转换不同密度的信息。

But for now, teams and individuals can use Synced Blocks to tie threads between their pages, or build entire pages made out of Synced Blocks. Imagine your project update as a Synced Block — when you update it, it’s updated in every document and objective where it’s referenced. Or a sophisticated company internal site with navigation and announcements that are shared across pages. When one thing changes, Synced Block updates all of its copies.

但是现在,团队和个人可以使用 Synced block 在他们的页面之间绑定线程,或者用 Synced Blocks 创建整个页面。把你的项目更新想象成一个同步块ーー当你更新它时,它会在每个文档和目标中被引用。或者是一个复杂的公司内部网站,它有跨页面共享的导航和公告。当一件事情发生变化,同步块更新所有的副本。

We believe if every business and person can tailor software to their problems, the world will be better at solving its problems. Our mission is to make this a ubiquitous reality. Features like this give you more power to customize information, taking steps to realize what early pioneers thought computing could be — breaking out of the mold of physical tools to better augment human intelligence. Small steps, but at least we’re on the way.

我们相信,如果每个企业和个人都能够针对自己的问题定制软件,世界将更好地解决自己的问题。我们的任务就是让这成为无处不在的现实。这样的特性使你能够更好地定制信息,逐步实现早期先驱者所认为的计算能力ーー打破物理工具的模式,更好地增强人类的智能。一小步一小步,但至少我们已经在路上了。