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 block 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.

Videos

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!

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