User Experience Tests Show Gutenberg’s UI Elements Can Benefit From Better Timing

Over the past few months, reviews for Gutenberg have trended towards a love/hate relationship without much in between. To figure out why this is, Millie Macdonald and Anna Harrison of Ephox, the company behind TinyMCE, analyzed the feedback and concluded that many of the issues likely stem from timing.

“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,” Harrison said. “For example, a user typing in a new paragraph is distracted when the decoration of the previous paragraph turns on.”

A common piece of feedback is that Gutenberg’s UI is clean but also cluttered. Harrison recorded a video of users copying and pasting paragraphs into Gutenberg and Medium.

In the video, toolbars and UI elements are displayed in Gutenberg during the writing process creating a cluttered look and disrupting the writing flow. In Medium, the formatting toolbar doesn’t display until text is highlighted and the + symbol disappears if it’s not interacted with.

Based on user testing, Harrison suggests refining the timing of when visual elements pop up in Gutenberg. “Right now, menus pop up when we are trying to type,” Harrison said. “They ought to pop up when we are trying to do something to words that have already been typed.”

Harrison presented their findings and suggestions to Gutenberg’s development team. Tammie Lister, design lead for Gutenberg, agreed that getting micro-transactions right is important. “I see this as the type of refinement post version 0.9/1 can bring,” Lister said.

“A few things I am slightly obsessed with is having an animation pace, story and consistency to interactions. Just something to throw in when looking at micro-interactions. I’ve also been doing some self thinking about what the ‘feel’ of emotion of Gutenberg should be. The one I keep coming back to is ‘calm’ and ‘supporting’. Just another thing to throw in when looking at these smaller details.”

Developers thanked Harrison and Macdonald for collecting, analyzing, and sharing data with the team. Does Gutenberg feel heavy to you? Let us know what your experience is like writing content in Gutenberg.


23 responses to “User Experience Tests Show Gutenberg’s UI Elements Can Benefit From Better Timing”

  1. The ratio of good reviews vs the horrible ones is almost 1 : 3. This disaster is failing miserably, and yet, it will be shoved our throats no matter what, because they know what is good for us, and we are apparently uneducated idiots, who simply hate progress. The stats on the distraction free writing usage was not a hint for them in what we want and need.

    That said, with all the reasons that were given why we absolutely hate this thing (I refuse to even use it’s name), their reasoning of the total dislike is timing. Timing, we are talking about timing, not the lack of meta boxes, but timing, not the fact that we have to open and close a thousand little buttons to do simple things, but timing. Not the fact that shortcodes are now legacy items, but timing… I can go with this Allen Iverson type rant all day long…

    There is such a hysteria and panic about Medium is pathetic. WordPress is light years ahead and better than Medium. Medium should be chasing WordPress, not the other way around. When you are on top, others do the chasing and trying to catch up to you. This is true in sports, politics, business, and even in this case.

    So I guess, if they fix the “timing” everybody will be happy and Medium will simply shut down – got it!!!

    • Gutenberg is still in its infancy and I think its unfair to call it a disaster that’s failing miserably. Development is happening at a rapid pace and we’re getting to see it come together one version at a time. Of course it’s not ready for prime-time yet.

      Timing isn’t the only reason people dislike Gutenberg, but it’s an issue the TinyMCE folks picked up on as a possible reason for many people feeling the way they do about the editor. It’s something that will be refined and create a better user experience.

      Not everyone will be happy once the timing of UI elements is addressed and Medium isn’t going anywhere. Gutenberg could be perfect and not everyone would be happy simply because it’s different than what people are used too.

      • Jeff I totally agree with you. That said, if we don’t use adjectives, insults like software communism, etc… is the only was to get even little bit of attention to our dislike to this whole matter.

        You are also correct that there is no way to satisfy everyone if they continue on this path (read next paragraph). Also, nobody can give a definitive answer to why the big bad giant and awesome of a CMS like WordPress is panicking over a nothing Medium. How insecure are these people?

        That said, there is ONLY one way to satisfy everyone. Have Gutenberg as an option and not as a TinyMCE replacement. Either in the settings have this thing turn on or off, or during the WordPress installation have the option to install WordPress as it is now, or install it with the new interface. Scrapping this thing, or having it as a TinyMCE and UI replacement will leave many unhappy one way or another.

        The funny thing is that every week we hear new excuses why this thing is hated so much. Last week the excuse was “messaging problem”, as if advertising and promoting it will help, and this week we have “timing”. I can’t wait for next weeks nonsense.

        Data showed that almost no one cared about distraction free writing. As a punishment, we are now forced to get distraction free writing on steroids.

        And you are of course correct that it is in early development stages, but if we don’t push back now, from the early stages, who knows how much worse things can get later on. Shortcodes and Meta boxes as afterthoughts and legacy items… are you kidding me? Unfortunately they are not!

      • …there is ONLY one way to satisfy everyone. Have Gutenberg as an option and not as a TinyMCE replacement.

        I don’t think it can be stressed enough how the tone of the entire discussion would change for the better with this oft repeated and obviously correct solution. To race through production of a new editor simply because one or a few people want it, and then to jam it down the throats of an active, supportive community is just plain wrong.

        I think some answers are owed to the community. Why is it so important to have this as a replacement and not an option or plug-in? Why is Automattic paying employees to develop this at break-neck speed as a core item of WordPress? I keep reading about how separate the two are, but I tend to watch what people do and not what they say when there is a disconnect between the two. It has served me well in life.

        I don’t know what is happening with the head honcho’s ego but we continue to read about decisions made that are contrary and even destructive to the wishes of the very community that keeps WP going. I’ve never met Matt Mullenweg, so I can only go on what I’ve read over the years. There should be NO grey area where Automattic ends and WordPress begins, but I sense that the community is getting more and more up in arms over the murky connection and how decisions over WordPress’ path are being made.

        Finally, I enjoy reading WP Tavern, but no matter what Mr. Chandler has said in the past, I put little to no stock in the objectivity of a site that is owned and financed by the same person who owns Automattic.

        Over the last 4 or 5 years I’ve become more and more concerned over whether I’m giving my clients the best option when I suggest they use WordPress. I don’t want to ever be in the position of having to defend some of these choices, because I simply can’t. Sooner or later a general IT site with a very large readership is going to start investigating the ethics of Automattic and WordPress. You may be at the top of the heap now, but ask IBM and Pan Am how that worked out when people got too puffed up over how important they were. In the end, I like most others want only what’s best for WordPress, and that can only be determined by all stakeholders in the community.

  2. I feel it’s time to rename The Gutenberg editor to the “Frankenstein Editor. The UI is a monster at this point, throwing more into it is just making it worse.

    I’m delighted people are finally doing UX comparisons like this and really hope some one reorients Gutenberg before it sees the same mass revolt that the post formats UI saw upon receiving wider attention. That too could have been great had it seen and taken wider UX feedback and taken it in early.

    I’d love to hear from someone that “loves Gutenberg”. I know a lot of people that love the _concept_, but I can’t think of any I know that likes, let alone loves with passion the reality of using it.

    • Really hoped that the first thing gutenberg will do is to add a structured UI to post formats. This would have been an easy first step for the general framework, but they decided o aim higher…. and the higher you aim, the worse the fall might be :(

      The whole clutter gutenberg brings at this stage just shows that the underlining philosophy of “decisions not options” is a good one, by showing how bad a product that follows “options not decisions” can be.

    • Having spent the better part of 7 months designing this thing you’re calling a monster, I would just note that your critique lands right where it hurts.

      We spent 3 months prototyping, 4 months building, and there are many many months to go before we’d even consider our work ready for a core proposal, which might still be rejected. Motivation to keep building in lieu of feedback like this can be hard to muster. But if you’re going through hell, keep going, right?

      If you have specific feedback, we’d love to hear it. I’m easy to find.

      • I think you are likely making some progress, but that the community does not want React.

        Rewrite it in Vue.js, and have options to keep the metaboxes in similar positions and I think people will like it.

        Maintaining a way to have a non-React version of WordPress that falls back to the old system also seems like critically important.

      • I think some of our reactions are tied to the apparent speed with which the plugin is evolving. It’s at version 0.8 and it’s been incremented quickly which communicates it’s much further along than might actually be the case.

        The other thing is we keep seeing new blocks being tossed in and it doesn’t feel like the core experience is smooth yet. As for gathering feedback… you HAVE to gather it from endusers of various stripes, not developers or other technical folks. None of my clients are technical. They all use WP to run sites and they need a core editing experience that’s intuitive, easy to pick up and that gets out of the way. Most of them don’t use a lot of different things – they mostly add in text, format it and place images.

        Finally, it doesn’t feel like Gutenberg has a clear mission for 1.0. Why are you adding layout things like columns? Columns aren’t content editing – nail the content creation and editing experience. THEN, perhaps, move to layout. Layout blocks like columns open a huge can of worms – what if a client tries to use the column block on a page controlled by my template that uses CSS Grid to lay out the page?

      • many many months to go before we’d even consider our work ready for a core proposal is right Joen. This item looks likes it needs one more extra year and full miss the WordPress 5.0 release.

      • I get that “real people” are on the other side of the internet. People have tried giving feedback and pushing for changes they desire, but it falls on deaf ears.

        Community: We want metaboxes to stay.
        Gutenberg: Fine, but they will be second class citizens and you’ll be encouraged not to use them.
        Community: That’s not what we meant.
        Gutenberg: That sucks for you.

        Community: We don’t want React.
        Gutenberg: But you’re all bad developers and just don’t understand JavaScript. Learn React and you’ll be a real dev.
        Community: ???
        Gutenberg: You heard me.

        (I understand these things weren’t explicitly said, but that’s what it feels like.)

        Sometimes you have to look past other people’s feelings to get your point across. People are tired of having their opinions mean nothing.

      • If there is one thing I have learned in all my years in this industry it is that people with complaints are always more vocal than people without.

        Because of this the negative reviews on the plugin repository do not surprise me at all. People need to stop pointing to them as being definitive. Especially when 70% of them were submitted for versions of Gutenberg older than v0.8.0 and v0.9.0 was just released.

        These people should pump the brakes and be more constructive with their ideas and/or critiques when the Gutenberg team publishes release announcements, etc.

        Speaking of which I commented with my thoughts on the latest v0.9.0 build on the release announcement here:

        Also, I think the version disparity as it relates to active site statistics and reviews on the plugin repository also illustrate how finding a way to prod beta users to keep updated and test with the latest version of Gutenberg might be a good thing. I’m not sure what that would look like though.

      • Joen – I don’t say these things to be malicious. I know you’re a human on the other end of this.

        FYI, I’ve been following and commenimg on Gutenberg since the earliest mock ups on Make. I am not just coming in here at the end and saying “it sucks”.

        From the earliest prototype I and others have been offering constructive criticism that feels like it’s fallen on deaf ears. 1. Arrows to move blocks up/down is confusing and it needs to be drag/drop. 2. Tab behavior is confusing and unnatural, it needs to be a tab for indenting, not moving between blocks. 3. The floating bar is distracting and missing expected formatting tools… the list goes on and this isn’t the place to re-hash it all…

        List editing in particular has recently gotten better, I still find it difficult. I still find the behavior convert a list to paragraph back to a list destructivemand unexpected, but it’s improving. Its not that I don’t see improvement in things through the versions.

        However, every time I open Gutenberg there is _more_ UI clutter more block types I don’t need or want and still no movement on things that are critical like custom meta boxes, like basic UX.

        Saying “If you have specific feedback, we’d love to hear it. I’m easy to find….”, well there is a lot of specific feedback from a lot of people, me included, but I feel it’s been ignored for 6 months. I’ll reach out elsewhere.

    • Well Jon I am in the wait and see camp. Yes the plugin has had many updates over the past couple months and I do like the User interface. The plugin though is going to need a ton more updates just to get right.

      We do even fully know how plugins like Shortcodes Ultimate will even work with Gutenberg.

  3. In my opinion, it is not just a matter of making a more fluid interface, but of making it really work. Although I have to recognize that from version 0.8 to 0.9 have corrected various errors that until now had observed, still today still has some basic flaws or shortcomings, such as:

    – It is not possible to change the slug of the entry: by default gutenberg assigns a permalink and it is not possible to modify it as in the current editor.

    – When you type a bulleted list and give the tab in the new row, it automatically opens a new paragraph, the sub-bullet hierarchy is not followed as it is now.

    -When inserting any link in a block, Gutenberg forces you to write “http: //” in front of each URL. Otherwise you recognize it as wrong. In the current editor that does not happen.

    – Within the cells of the tables only text can be written, which, incidentally, can not even be formatted or assigned a link. Of course, the cells can not be modified with shading, etc … so to tables as they are now, I find no use.

    And remember also that it is virtually impossible to combine one block with another.

    You have to insert all the content in rows, one underneath another … if you want to put two boxes in the same line, the usability is very complicated.

    I hope they continue to improve development if, as it seems, they will impose us to use this editor instead of the current one.

  4. Nice study but it fails to address one point: Simple tasks take twice as long to complete or require twice as much mouse clicks. It’s super simple. Such design is defective as it’s counter productive. What used to require one mouse click now requires at least two. That’s degradation right there. What was possible to achieve without lifting your finger off the keyboard now requires you to reach out for the mouse. That’s degradation. It doesn’t matter how cool Gutenberg might look, until simple usability and productivity are addressed it will fail. There’s a good reason why writing experience didn’t change much over the years. Unless you can improve it, don’t touch it. Much like good old mouse. Touch controls may be cool and everything but for anything that requires serious work there’s currently no substitute for a keyboard and a mouse. Just try working with one of those touch screen computers for 8 hours… And last point. Collecting feedback on Github is a huge mistake. You’ll get responses from developers only and developers are FAR from being your average user.

    • I totally agree with you. Gutenberg is unnecessary, because it does not improve the user experience, but it delays it. It would seem right, to some extent, to leave it as a simple plugin instead of replacing it with the current editor. Perhaps there is excessive hidden interest on the part of Automattic and will seek after the business with “something” that Gutenberg needs? I can not find another explanation for the sudden interest in imposing Gutenberg, when it is a project that has been kept in a drawer 5 years as explained by its main developer …

    • You should see the feedback on Github. It is not flattering, actually quite flattening of Gutenberg.

  5. You know… I have a very simple question. Is there a design document or other high level doc that guides Gutenberg? If so, where is it? What I mean is something that the team uses to answer the WHY of Why Gutenberg but also something that acts as a touchpoint when making decisions on things like whether there should be a Columns block, etc.

  6. I think the problems people have with Gutenberg can be split into two main issues:

    1) The content editing experience. As noted by many, as it is now Gutenberg makes content editing more difficult, slower and unpleasant experience. If you’re typing and creating content you don’t want to pause and have to click on several buttons for every line of text. Or be distracted by UI elements popping up all over the place.
    This issue can be improved, as shown by the useful testing done by Millie and Anna. So it’s great to see some potential improvement there.

    2) The changes to the edit page itself. What is going to happen to custom meta boxes? What about theme code and plugin code related to the edit page, often custom written for clients, which is probably going to break many sites if Gutenberg is added to WP? For example, many themes and plugins create custom meta boxes for meta info, think about WooCommerce or custom fields created for a real estate website. WordPress developers need to be able to fully create a custom interface to input that content. Meta info should stay out of the Gutenberg editor. Meta info and custom meta fields don’t belong in the main content editor. They also don’t fit in the small sidebar to the right.

    So if the content editing experience of Gutenberg can be improved AND a good solution can be found for meta boxes etc, it might actually work out in the end.

  7. It’s funny to me that you mentioned Ghost in a comment, because Ghost and Gutenberg differ in a really fundamental way that highlights the underlying flaws with Gutenberg.

    Ghost stores all posts in a standardized JSON format, called MobileDoc. This means a standardized, parseable, extensible, and unambiguous data structure underlies their posts. It also means that that structured data can be edited by any editor that reimplements the MobileDoc standard (case in point, their WYSIWYG editor and their markdown editor both produce MobileDoc), and it means that all views are rendered from a single “data-first” structure.

    Gutenberg, on the other hand, is using a custom data storage format, based in HTML Comments. This is a fragile system that is ill designed for modern parsers, and relies on a heavily abstracted complicated pile of regular expressions to parse.

    The text editor just gets all this stuff thrown at it raw, and is therefore practically unusable. Not to mention we still have raw html support mishmashed in with wpautop.

    Also, rather than smart rendering from a single structured source, feeds, excerpts, and posts themselves are a weird mishmash of raw and parsed data from this unstructured-structural mishmash.

    Ghost is onto something, and is building a framework that can be easily replaced and improved, with good structural bones. Gutenberg is just throwing things at the wall, and hoping they stick.


Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: