Gutenberg Usability Testing for August 2019

August usability testing has come to an end. I ended with 5 videos this month! The script was new and encouraged the users to build a mobile phone landing page. It focused on the Column blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. and Cover blocks.

Testing script

Imagine you work for an industrial design company. The company has just created a new mobile phone. You’ve been assigned to create a beautiful landing page for this new phone. To do this, you will be using WordPress’ new Block Editor. Please make sure to talk through everything out loud as you complete the tasks. Let’s get started.

  1. Log in.
  2. Create a new post.
  3. Give your post a title.
  4. Add an image of a mobile phone. Once the image has been added, set the block to be full width.
  5. Below that add a Heading block with the text, “Features.”
  6. After that, add a Column block with three columns.
  7. Add a feature to each of the columns. You’ll first add an image, then a heading below that and some text below the heading. See the next task for details.
  8. In the first column add an image, under that add a heading that says, “Pixel Perfection Photos”, under which you’ll add the text, “Our camera is packed with pixels. Take beautiful high quality pictures.”
  9. In the middle column add another image, and a heading that reads, “Chrystal Clear Communication” with some text below that reads, “The sound coming from our speakers will leave you feeling like the other person is right there.”
  10. In the last columns, add another image, then add a heading, “Ubiquitous” with text below that reads, “Our phone is offered by all the major carriers.”
  11. Below this Column block, add a Cover block with a background image. On top of the image write, “Order a phone today!” and then add a Button block that says, “Order today”.
  12. Under the Cover block, add a Media + Text block with an image on the right and some text on the left that reads, “This phone is loved by everyone.”
  13. Add one more Cover block with an image, but this time set it to be a fixed background.
  14. Now, let’s add a Paragraph that reads, “Many smartphone makers save their best features for their priciest (and largest) devices. Not us. Our new phone includes great features like solid battery life and excellent performance, which means you don’t have to spend $1,000 to get the best smartphone.”
  15. Finally “Preview” your post and make any necessary changes you think are important.
  16. Once you’re ready, Publish your post.


Video 1 – Aug 1st

Add a heading block? How can I do that? I don’t even know what that means.

[After using the search feature in the Block Library] Oh, here it is, actually. I found it.

Video 2 – Aug 8th

Ooops, I did something wrong. How do I remove this?

This looks really really good. I didn’t expect it to look that good. It was that easy.

Video 3 – Aug 14th

That was quite intuitive. Click on the Heading option obviously from this menu.

This appears to be 3 columns, let’s click on that.

[while clicking through the Block Library accordions] I’m not seeing button so far…

Video 4 – Aug 21st

Things seem to be easy to find.

Video 5 – Aug 28th

To set to full-width, I’m just gonna drag it out.

It’s getting a lot faster now that I’ve done this once. It’s way easier!


As with all the prior videos being shared, please leave some feedback! What are some patterns that pop out to you? What successes do these users have in navigating and creating a post? What challenges become evident in their flowFlow Flow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.

Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context

As a reminder, if you’re interested in helping with usability testing, there’s a number of things you can try:

  • Join the #research channel in slackSlack Slack is a Collaborative Group Chat Platform The WordPress community has its own Slack Channel at
  • You can write a test script that can be usability tested for GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc.
  • Or simply watch the videos and leave some feedback below.

Thanks for watching and contributing anywhere you can.

#gutenberg, #usability-testing