The Gutenberg editor: Success lies in the timing

This post was first published on the TinyMCE blog, where it has received a record number of views and inspired the redesign of the Gutenberg editor

The new editor in WordPress is a brave project. It takes a lot of courage to shake up a well-established tree that is used, and loved by a third of all website creators on the planet. It is natural and expected that shaking this tree would unearth a lot of supporters, and also haters. To a UX designer, both of these categories of users are really valuable, as both positive and negative feedback can help us to make products easier, and more lovable to use.

In this post, I’ll report back on an analysis of Gutenberg reactions reported in GitHub, investigate possible underlying causes for these reactions based on user testing conducted, and make recommendations to correct many of the issues uncovered.

A brief history of writing with keyboards

In the short history of the World Wide Web, the rate at which new products and entire product categories, have evolved is staggering. From shopping for food to shopping for love, the way we do things today has changed dramatically. While technological advances have altered many of our common daily activities, the user experience of What You See Is What You Get (WYSIWYG) editing has remained surprisingly unchanged. The process of content creation today is not that different to what it was in 1984: you click in a window, type some stuff, and click on B, or U buttons to make your writing more stylish.

In 2012, Medium launched a publishing platform designed for long-form content creation. Through a disciplined, multi-year design process, Medium delivered the first truly innovative interaction model for editing since Microsoft’s ribbon. Medium’s pared back, minimalistic set of features, rich “auto-correction” for media embedding and well executed contextual toolbar options unchained us from existing writing paradigms.

Of course, changes to well established user interface paradigms come at a cost. New designs displace existing models for users, imposing a cognitive load while they learn new ways of doing things. The cost of change can escalate quickly for products with millions of users: for example, Salesforce reports that for them, something as benign as moving a button can result in millions of dollars of lost-productivity and user re-training costs. Not surprisingly, the rules of good design caution against changing well-established norms unnecessarily.

Yet without change, we cannot be better.

Analysis of initial reactions to Gutenberg

Since the announcement of the new Gutenberg Editor at WordCamp 2017, there have been over 1,000 editor downloads and installs, and just as many different reactions to this new world of WordPress editing.

“… for most people with experience using a modern word editor or website builder, it is fairly intuitive!”

Showed it to some of my business clients, nobody liked it. Editing is more complicated, takes more mouse actions, navigating with keyboard impossible, bad copy and past experience…”

From an analysis of the feedback collected to date in GitHub (#1550), the following themes have emerged:

  • Users find Gutenberg to have a modern and pleasant aesthetic
  • Users would like to see some old features carried forward to Gutenberg, e.g. tooltips
  • Users find that many common actions take more mouse-clicks to complete in Gutenberg, e.g. adding bold formatting to selected text, or embedding media
  • Users find that lack of keyboard navigation breaks their writing flow. This carries over into poor accessibility, e.g. VoiceOver
  • While users report that the overall UI is modern and clean, they also report that the UI is too cluttered, e.g.  toolbars appearing on previous blocks, or obscuring previous blocks. Users also report that the UI has too few buttons
  • Users express concern about backwards compatibility

If you think that some of this sounds confusing, you are in good company. At face value, the feedback is conflicting and hard to convert into actionable improvements. When this happens, it is often a sign that, as researchers, we have not asked “why” enough times.

Why is Gutenberg reported as being both minimal and cluttered?

It turns out that this question was a good question to ponder. The Gutenberg and Medium blank canvases look remarkably similar:

An empty Gutenberg editorAn empty Medium editor

However, from a usability perspective, users have fewer usability issues with Medium than with Gutenberg. We ran a small UX test to figure out exactly where the differences were: users were asked to copy and paste a couple of paragraphs into Medium, and repeat the same process in Gutenberg. Below is a video of the UX test we ran.

Turns out, it’s all in the timing

Looking at Medium and Gutenberg side-by-side highlighted where the likely causes of friction were originating. In short, the nuances in the micro-interactions and timing of UI elements in Gutenberg are a little out of sync with what the user is doing at a point in time. For example, a user typing in a new paragraph is distracted when the decoration of the previous paragraph turns on.

Overall, our belief is that fine-tuning the timing of when UI elements things pop-up in Gutenberg will go a long way towards mitigating the lukewarm user feedback.

Summary of recommendations

  1. We need to refine the timing of when elements visually pop up in Gutenberg. Right now, menus pop up when we are trying to type. They ought to pop up when we are trying to do something to words that have already been typed
  2. Keyboard navigation is needed to prevent breaks in flow. In particular, ENTER to create a new (default type) block, and tab/arrows to navigate between blocks
  3. When typing in a block, all decorations from previous blocks should disappear. This will reduce the distraction that a user senses when typing
  4. Block decorations should not appear on mouseover, only on block selection. Again, this will reduce the distraction and heaviness that users report right now
  5. Menus should not appear on mouseover or on block selection, only on text selection. A recommendation like this will likely need a wider discussion. Insert menu should appear on a new line (not be permanently visible under the paragraph that is being typed). This is another recommendation that is also up for discussion

Issues in GitHub

A shout-out

Thanks to Millie Macdonald for analyzing the user feedback, and to the Gutenberg community for joining in the conversation on this topic.