July usability testing has completed for Gutenberg. I kept the same testing script as last month to be able to make a comparison over the course of these last two months. The users were mostly new to WordPress so expect a novice level of interaction.

Testing script

Imagine you’re writing a blog post about your favorite bakery. Your blog should have a title, some images of desserts, and a couple content sections. 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 a Cover block to your post with a message overlaying the image that reads, “The sweetest place on earth”.
5. Make the Cover block full-width.
6. Add a paragraph below that reads, “This bakery is committed to using the finest ingredients from all over the world ensuring that quality remains the cornerstone of their business. In fact, quality is the number one ingredient in everything they do.”
7. Now add a heading for the cupcakes section.
8. In this section, add an image of cupcakes with some text along the right side of it.
9. Add a sentence or two below to finish off the cupcake section.
10. Add a new heading about cookies.
11. In this section, add a Media+Text block with an image of cookies on the right, and some text on the left side. Make this area full width.
12. Below that, add a gallery of 5 more images.
13. Now add a quote you heard someone say about this bakery. Maybe something like, “This bakery is almost as good as Grandma’s house!”
14. At the bottom, add a horizontal divider.
15. Finally, include a link to the bakery site. Type the bakery name, and then link it to a website (any website is fine).
16. Publish your post.

Videos

Video 1 (July 4)

[User adds a Cover block] Okay, now I’m just going to begin typing in it. [completely skips the Cover block’s instructions in the placeholder]

The hardest part was having to figure out what part to click on to add the text.

I’m not really sure how I can add [a block at the bottom of the page]

Video 2 (July 10)

Oh, the text is here. I couldn’t even tell. I wish there was an indication. [referring to where to add text in the page]

So it’s kinda like a puzzle. I can move these elements around.

Video 3 (July 17)

I’m afraid you’re using terminology that doesn’t mean that much to me.

I’m going to give up on this. [referring to the Media Library and adding items to gallery]

This isn’t obvious or intuitive at all.

Video 4 (July 24)

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 flow?

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 slack.
• 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, #usability-testing

Continuing the usability tests on Gutenberg, here’s three from the month of June. The insights found in these videos help inform decisions going forward with Gutenberg. Keep in mind that due to the platform being used for these videos, many of the users might be completely new to WordPress.

This month focused on a test similar to the WCEU usability tests that were run. You can read up on those from WCEU here: part one and part two. It focused on building a post using common blocks including media + text, headings, etc.

Testing script

Imagine you’re writing a blog post about your favorite bakery. Your blog should have a title, some images of desserts, and a couple content sections. 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 a Cover block to your post with a message overlaying the image that reads, “The sweetest place on earth”.
5. Make the Cover block full-width.
6. Add a paragraph below that reads, “This bakery is committed to using the finest ingredients from all over the world ensuring that quality remains the cornerstone of their business. In fact, quality is the number one ingredient in everything they do.”
7. Now add a heading for the cupcakes section.
8. In this section, add an image of cupcakes with some text along the right side of it.
9. Add a sentence or two below to finish off the cupcake section.
10. Add a new heading about cookies.
11. In this section, add a Media+Text block with an image of cookies on the right, and some text on the left side. Make this area full width.
12. Below that, add a gallery of 5 more images.
13. Now add a quote you heard someone say about this bakery. Maybe something like, “This bakery is almost as good as Grandma’s house!”
14. At the bottom, add a horizontal divider.
15. Finally, include a link to the bakery site. Type the bakery name, and then link it to a website (any website is fine).
16. Publish your post.

Videos

Video 1 (June 5, 2019)

I’m not sure how I’m supposed to make it go on the right.

I want to add a paragraph so I’ll just write some lines.

Video 2 (June 13, 2019)

I’m not sure how to do that but I’m going to give it a try.

I cannot figure out for the life of me how to get the writing exactly right next to it.

Video 3 (June 25, 2019)

This looks good!

How do I add an image?

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 flow?

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 slack.
• 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, #usability-testing

As noted in last month’s post, I’m conducting a usability test every week on userbrain.net for Gutenberg. These tests are a way to keep track of Gutenberg’s progress and improvements. It also helps reveal any additional UX issues that may not have been evident.

This month focused on image and video blocks. It also involved editing content in relation to those blocks like moving them up and down in the post, and adding captions.

Testing Script

Imagine you are on assignment to write an article for a new travel blog. Luckily, they are sending you to your favorite vacation spot! Your instructions are to choose a topic you think will get people as excited as you are about this place. It’s up to you to pick a focus (food, activities, lodging, etc.).

1. Log in.
2. Create a new post.
3. Give your post a title and add one sentence.
4. Add two images side-by-side.
5. Add a YouTube video (https://www.youtube.com/watch?v=-PcrLWkxZSk).
6. Add a caption to the video you added.
7. Swap one of your previously added images with another image.
8. Add an image on the left and some text on the right and a paragraph below it.
9. Move the video to the bottom of the content.
10. Once you’re done, publish the post.

Videos

Video 1 (May 6, 2019)

Video 2 (May 13, 2019)

Video 3 (May 20, 2019)

Video 4 (May 28, 2019)

Feedback

Please watch the videos and comment on anything you noticed particularly interesting about how these users used Gutenberg. It would be great to call out points of struggle which can be connected to opportunities, or even points of success that can be positive indicators of improvements.

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 slack.
• 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, #usability-testing