This article would like to borrow the language sparrow editor version 4.0 release, exchange, in the online era of paperless office, language Sparrow in the document editing thinking and exploration.

In 2016, a group of Ant engineers became frustrated with the company’s internal documentation tools, so they started working on their own Markdown product, and Chattering was born.

The finch has undergone many changes and developments. Until this year, we launched document editor 4.0. Today, I want to talk with you about how we have explored our way over the years and where we want to go in the future.

The evolution of online documentation

Some time ago, I saw a netizen ridicule: “The current online document products are still copying the experience of Word.”

Word was really designed around desktop publishing. The system is designed to restore the same effect as the print online, so there will be a lot of printing related design and logic.

The system is so well designed and well understood that many online documentation products are still stuck with it.

However, with the development of The Times, especially the epidemic, so that the most traditional enterprises have completed the paperless transformation. Therefore, we imagine that document-centered communication and coordination can be more efficient and simple?

This is what we imagine will characterize the advanced documents of the online age: borderless, interactive, and diverse.

diversification

We understand document diversification as a shift in creative content from text to more diverse forms of expression.

We believe that the essence of human writing is expression, and expression is never just words. Graphics, tables, expressions, visual, auditory… Anything that can assist your presentation can be one of your documents. Currently, the Finch supports 43 different types of cards that can be inserted. But it also creates problems.

Use cost

Designers often face the sad fact that the more features a user wants, the more it costs to use.

There is an interesting theory in psychology called Hick’s Law that explains this phenomenon: as the number of choices a user is presented with increases, the reaction time required increases gradually.

Instruction interaction

In the past, this was inevitable when we tiled most of our functionality onto the toolbar. Even with the introduction of Microsoft’s Ribbon toolbar, the navigation path became longer, which didn’t solve this problem perfectly.

But the command interaction was there. In the new version of the Language editor, typing Command+/ at any location will bring up a slash panel, which, combined with certain commands, allows you to type without even leaving the keyboard.

In the earliest days of human-computer interaction, users had to memorize specific instructions to complete input. This type of input is expensive to learn but very efficient. It wasn’t until 1973, when Xerox designed the earliest GUI interface, that human-computer interaction was accepted by the general public. But as computers become more and more versatile, the cost of using them is also rising. Instruction interaction combines the best of both, making it both efficient and intuitive. In the future we can even open up custom instructions.

No boundary

With the development of The Times, content carrier gradually from paper media to electronic screen. Your creation is no longer limited by physical constraints, the entire width is determined by the screen. You can design your document as if it were a web page.

Traditional documents have all kinds of boundaries. For example, you need to set the paper size in the document, choose the header footer… The relocation of these print-related functions will increase the complexity of the product and limit the user’s content presentation.

We want documents to be more free and comfortable in the future. So we got rid of the paper and let the content be completely determined by the user’s screen. But then designers face a new problem: adaptation.

Core adaptation strategy

Screen sizes are increasingly diverse, ranging from 24-inch 2K hd screens to 16-inch laptops, and even more people are experimenting with split screens.

So how to make users comfortable in all sizes?

The former is a more common fit problem, while the above image is a document specific fit problem. The structure of the language document is very flexible, and users can switch between multiple page structures at any time. Therefore, the above six document structure scenarios should also be considered in adaptation.

This makes our adaptation problem five common container sizes multiplied by six document structures very complicated. To address this complexity, we developed three core adaptation strategies: ● Prioritize important modules; ● always keep the text readable; and ● always keep the text screen centered

Strategy 1: Prioritize important modules

When screens are limited, it’s not realistic to have everything on display. So we set the module priority, and when the container width is detected to reach the critical value, the secondary modules are packed up step by step.

There are four threshold values, each of which is what we think is the most appropriate reading width for the document structure.

Strategy 2: Always keep the text readable

Readability of the text is of Paramount importance. So we did some detailed adaptation strategies. For example, when the right panel opens at different widths, the display strategy is completely different. When wide enough, the right panel squeezes the text to improve screen efficiency. When the width is insufficient, the right panel opens to become a suspension, so as to ensure that the text always has a certain width.

Strategy 3: Always center the text screen

Why such a strategy? In fact, we started with the most traditional column layout. The nice thing about this layout is that the rules are very simple, and most products do it this way.

But after we launched, we received a lot of teasing from users. With a larger screen, users need to turn their heads to see the text. So we adjusted our adaptation strategy, prioritizing keeping the text centered on the screen, and then calculating the width of the sides in real time to determine the layout strategy for the other two columns (table of contents and outline).

As a result, our adaptation rules are very complex, and every time a user opens a web page we are desperately trying to calculate the layout dynamically behind the scenes. But the complex rules do make for a more comfortable reading experience.

Card-level adaptation rules

In addition to the document level adaptation rules, we have refined the adaptation rules to the card level. Why do you do that? I think you’ll get an example. When the width of the text becomes very long, it is actually very easy to read the serial 👇. This means that different content types have different adaptation rules.

For text, we use this fixed-width layout, for images, we use isometric scaling, and for tables, we use extended layout. In the new editor, clicking the ←→ button on the table expands the table without affecting the width of the text.

interactive

In the past, reading paper documents was a one-way process of receiving information, but in the online era, users can not only receive, but also click and input, so as to achieve two-way interaction.

Focus on the scene

In the process of building this interactive capability, we always build the interactive capability of the document around the scene.

Take, for example, the most common production and research scenario for online documentation. Document review is a very important and time consuming process in this scenario, where you can see that the interaction is granular: colleagues will suggest changes to a sentence or even a word. At the same time, everyone in the process is very concerned about the current state: is this document up to date?

So we support granularity to every word, to every element, and even to a certain area of the picture.

And we have launched a review function, through which you can clearly know whether the document is in the review or has been approved.

Rich and varied forms of interaction

In addition to expanding our interaction capabilities by focusing on the scene, we are also exploring more diverse forms of interaction.

For example, you can use punch cards to collect read and unread status, vote cards to collect targeted feedback, and in the future you can even insert data sheet cards into documents for more multidimensional knowledge management.

We will explore more and richer forms of interaction closely around the scene. It helps users achieve more multidimensional knowledge management in documents through feature cards. In the future, this will be a completely new document you can customize, you can build your own document like Lego, rather than the boring code words of the past.

This is the world we envision, a borderless, interactive, and diverse advanced productivity tool.

I’m Suki, thank you 🙏, welcome to try words.