Create an editing experience people love
Text editors are central to most online apps. While text editors used to be important for Content Management Systems (CMS), they are now an important part of many more tools such as Project Management Systems and CRM systems. Customers are rightfully more demanding when it comes to how they create content.
But building a good editor is bloody hard. You'd expect that this is a solved problem in 2021 yet so many products have a poor writing experience. As a result, content is written off-line, using tools like Google Docs, Microsoft Word or a notes app and then pasted in an inferior editor.
This is a post listing some recommendations for creating a more friendly web-based writing experience:
- Auto-save to avoid losing work
- Awesome linking experience
- Use good typography
- Great support for lists
- Show pasted images inline
- Essential features done right
- Wrap long lines
- Make it fast (speed/performance)
- Support text-correction extensions
- Undo/Redo (with shortcuts)
- Good pasting behaviour
Auto-Save to prevent lost work
If we want to get people away from the 'traditional' editors we need to protect people from losing their work. No internet connection when you hit save? Browser crash?
I can guarantee you that the author will never use your editor the same way ever again if they lost an hour of their work.
Online editors should invest in techniques to make sure this does not happen, the technology is out there. Some ideas:
- Browser Local Storage (client-side)
- Auto-saving in the background (server-side)
- Versioning content (server-side)
Option #2 is the option most web apps will pursue but for CMS systems that allow publishing content, it comes with another challenge which is to know which content has been published which is where option #2 comes in.
Awesome linking experience
Most WYSIWYG editors have ported the Microsoft word linking behaviour to their online counterparts. We're so used to applying a link to an element:
This is a missed opportunity with two big area's of improvement:
Easily link to content in same CMS
Most blog posts refer to previous posts or paragraphs. Forcing editors to visit their blog, find the URL/anchor and paste it as a link is such a waste of time.
A few exceptions (Google Docs, Notion) are helping writers to browse/search for other content but I'm disappointed every time I have to open a new tab to find the URL for something I want to link.
ℹ ​ Bonus points for the ability to link to anchors which I think only Google Docs can do (only within the same document).
Allow different types of links
A link used to be a few underlined words pointing to an external page. In 2021 there are so many more ways to present links (cards, embeds).
Editors could help with 'upgrading' links to an embed or card. Preferably the editor has the ability to specify how the link is displayed.
Highlight (and upgrade) broken links
The web is filled with broken links 😵 Make sure the editor indicates broken links by checking the page in the background and hinting at the status (status code).
While you're at it how about improving/fixing the link? If the server replies with a 302 redirect (for example from http:// to https://) update the link without asking the editor. It does make the web a better place!
ℹ ​ Personally, I prefer not to see the schema in any link. If a user pastes https://www.lifelog.be in your editor you'd like to see it auto-link that phrase to the webpage and at the same time change the link text (or label) to www.lifelog.be.
Use good typography
Many online editors use weird fonts and font sizes. ​ No content creator is going to spend an hour writing content in an editor that makes them squint.
Readability is a big problem on the web with many initiatives and resources to solve that. Learn about the best practices in those projects and apply them to your editor.
The example to follow here is Medium.com where the editing experience equals the reading experience.
Great support for lists
People use lists. A lot. Make sure your editor has good support for it. A list 😎of suggestions:
- support hitting tab to indent lists
- auto-detect lists once a person starts a few (or one line) with -
- allow nested lists
- shift+tab should decrease indenting
- think about how people 'exit' the list (enter+enter?)
- allow people to convert lists from bullets into numbers
Writing this piece in Bear reminds me how important the support for lists really is.
Show pasted images inline
While initially, only some editors allowed you to attach images to your posts it's 2021. People do text -> image -> text.
Regardless if one is writing an article on a blogging platform, sharing feedback on a design in a project management platform or updating an internal document in your intranet please support pasting images!
The ideal flow is that while writing the text you can just hit paste to add an image from the clipboard. Please don't attach it at the bottom of the post (I'm not drafting an email) but add it wherever the cursor is.
ℹ ​ Bonus points for auto-sizing/optimising the image or allowing controls for the editor to size/align the image
Essential Features done right
All the power features you have added to your editor (image wrapping, code editing, advanced text styles or colour picker) do not mean anything if you have not nailed the basics.
Seriously, I don't need font colours or backgrounds if I can't paste an image inline. Start with the basics before you spend time on the advanced stuff.
Wrap long lines
There has been plenty of research that a line longer than 70 characters is hard to read. While this rule is well known in web readability it's often ignored in editing experiences.
This problem is even more noticeable with full-width (focus mode) text experiences.
Use max-width in combination with optimised font size/typography for an editing experience that has good readability. It really does wonders.
Make it fast
This should not even be here but I'm adding it anyway. If your editor is clogging up my browser window (I'm looking at you Confluence) you'll never convince me to use your editor to do the writing.
Spend time on performance! Some people will take 1/10 of the features for 10x the speed.
Support text-correction extensions
How long did it take for google docs to support Grammarly?
There are so many good correction engines (Grammarly, slick write) out there that provide browser extensions to make sure the text correction can be done wherever you write. Surprisingly not all editors support those extensions forcing you to copy/paste your text into Grammarly just to do text corrections 🤯
Also, please don't try to build text correction yourself (maybe unless you are Google) but allow existing solutions to hook into yours.
Undo/Redo (with shortcuts)
For me undo/redo is a solved problem and much expected in any content editor. Surprisingly there are editors that do not support undoing.
Good pasting behaviour
Following the suggestions in this post is not a guarantee that people will stop pasting stuff. Spend time on figuring out what/how they are pasting and make sure it works well.
In our case, we triggered a survey the first time we detected a paste from an unknown source (weird formatting or elements). In that survey, we asked the user where they were pasting from and questions around why they didn't write in Prezly in the first place.
Results of this survey were then used to help us figure out which pasting behaviour (from which source) we needed to prioritise.
Word has been around for a long time. It's unlikely that the tips in this post would mean people trust your editor to be 1:1 alternative. Like it or not, MS Word will continue to be an enormous force behind the content that finds its way online.
However, it's also true that a lot of online editors are super annoying to content authors. While some platforms have a great tech stack and are growing rapidly they oftentimes have poor experience for long writing sessions. So it's little surprise authors actively avoid them to perform their writing.
Maybe this post is one step in the right direction