I know this is a bit late, but Iā€™ve got several usability tests to share from January 2020. I spent that month looking into the Columns 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. in 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. https://wordpress.org/gutenberg/. The Gutenberg Team has been making several changes to help the experience and these videos can help continue the improvements.

This particular test proved to be quite difficult and long due to the nature of the Columns block. Next time around Iā€™ll be sure to limit the set of tasks.

Testing script

Imagine youā€™ve just been tasked with creating a webpage about pies. WordPress offers a Columns block in its new block-based editor. This is what youā€™ll focus on during this usability test. Letā€™s create a webpage about pies using the Columns block!

1. Log in.
2. Create a new post.
3. Add a title to your post.
4. Under the title add a Separator block. Once it is added, make sure you set it to ā€œwide.ā€
5. Next, add a Columns block to the page, and choose the 3-column setting.
6. In the left column, add an Image block and set the image to be a pie.
7. In the middle column, add this text:
   1. Key lime pie withdrawal
   2. Not as easy as it sounds
   3. Especially if you are totally addicted.
   4. I can walk past pumpkin all day long
   5. And not dig into it with a tablespoon.
   6. If it has whipped cream, I might take a bite.
   7. Who am I kidding?
   8. Letā€™s put it where it lives.
   9. If it has sugar, it is mine.
   10. And get out of the way!
8. In the right column, add another Image block with another picture of a pie.
9. Set the right columnā€™s width to 20%.
10. Set the left columnā€™s width to 40%.
11. Did you notice anything change when you did that? Check the right column again and readjust the width to 20% if needed.
12. In this right column, change it so the image aligns to the bottom of the column.
13. Below this Columns block, add a Cover block.
14. Set the background image to be another picture of a pie.
15. Add a Columns block inside this Cover block, and choose the 2-column setting.
16. Make the left column width 70%.
17. In the right column, add the text ā€œPIESā€ and change the font to be ā€œLarge.ā€
18. Below the Cover block, add another Columns block with 2 columns.
19. In the left column, add the text, ā€œWhen Aliceā€™s Aunt Polly, the Pie Queen of Ipswitch, passes away, she takes with her the secret to her world-famous pie-crust recipe. Or does she? In her will, Polly leaves the recipe to her extraordinarily fat, remarkably disagreeable cat, Lardo . . . and then leaves Lardo in the care of Alice.ā€
20. In the right column, add the text, ā€œSuddenly, the whole town is wondering how you leave a recipe to a cat. Everyone wants to be the next big pie-contest winner, and itā€™s making them pie-crazy. Itā€™s up to Alice and her friend Charlie to put the pieces together and discover the not-so-secret recipe for happiness: Friendship. Family. And the pleasure of doing something for the right reason.ā€
21. Preview your post, and then publish it.

Videos

Video 1 (Jan 8)

The change sign (block transform icon) made me think I was restarting something.

[looking at the multiple + icons everywhere] ā€œIt looks like I have multiple columns now. I donā€™t know what went wrong with this.ā€

The user struggled with adjusting the width of a single column. It was not clear how to do that.

Itā€™s really hard to find how to adjust the width of this.

Video 2 (Jan 15)

[trying to select the single column block] How do you stop selecting the image?

To me itā€™s not clear. How do I select the column?

Video 3 (Jan 22)

Iā€™ve never used this software before and Iā€™m not sure how to set the column width.

Up to this point, everyone who has tried to add a Cover block below the Columns block has just added the block inside one of the Columns under the image. At this point things start falling apart because itā€™s just too many blocks inside a narrow space.

Video 4 (Jan 29)

I canā€™t find where I can do this. [setting column width]

The instructions were very hard to follow. Itā€™s hard to know where to look and what to click on.

Feedback

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 https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..
• You can write a test script that can be usability tested for Gutenberg.
• Or simply watch the videos and leave some feedback below.

Thanks for watching and contributing anywhere you can.

#gutenberg