I just realized I hadn’t posted the usability testing videos for September yet, so here they are! I tested a new script that was geared around the Table block ease of use and moving blocks around within the page.

Testing script

Imagine you’ve just opened a new flower shop. You’d like to create a beautiful webpage that promotes your business. You should include a Title (Name of your flower shop), some text that talks about it, and some images. Please make sure to talk through everything out loud as you complete the tasks. Let’s get started.

1. Log in with
   username: test
   password: usertest90631
2. Create a new post.
3. Give your post a title.
4. Add a Cover block to your post. Select a background color for it and then add the text, “Amazing floral decorations”. Set the Cover block to be full-width.
5. Add a Paragraph block below and include this text, “Our floral arrangements are beyond compare. We’ve got a wide variety of flowers and trimmings to cater for any occasion. You may select from our in-stock collection or you can place a special order with us. We’re looking forward to serving your needs.”
6. Move this Paragraph block above the Cover block.
7. Back below the Cover block, add a Table block. The Table block should be 3 rows by 3 columns.
8. In the first row of the Table block write, “Small Arrangement”, “Up to 6 flowers”, and “$12.99”. In the second row write, “Medium Arrangement”, “From 7-12 flowers”, and “$18.99”. Finally, in the third row write, “Large Arrangement”, “From 13-24 flowers”, and “$29.99”. Keep each quoted text item assigned to its own table cell.
9. In the Table settings, switch “on” the “Fixed width table cells” option.
10. Now also switch “on” the “Header section” too. Then in the new row write, “Sizes”, “Flowers”, and “Price”.
11. Below the Table block, add a Button block. In the button, type, “Order Now”.
12. Center the button within the block.
13. Below this, add a Gallery block with 5 images of flowers. Make this block full-width.
14. Now move the last image in the gallery to the first position, and then delete the last image from the gallery.
15. Below the Gallery block, add another Paragraph block that says, “From birthday parties to anniversary dinners, floral arrangements full of fresh, beautiful flowers are the perfect complement. Whether you choose to send a bright arrangement of yellow sunflowers, vibrant roses, and colorful lilies, or a flower arrangement with delicate pastels, smiles are sure to follow!”
16. Now add a Heading block that says, “Come visit our location”
17. And below this add a Media+Text block with an image on the left and an address on the right.
    123 Fairytale ln.
    Neverland, CA 90001
    USA
18. Finally “Preview” your post and make any necessary changes you think are important.
19. Once you’re ready, Publish your post.

Videos

Video 1 – September 4

I want this to be the first one. The first one. The first one. The first one. [moving images around in the Gallery block]

Add Paragraph block. Add paragraph. Done. That was easy.

Video 2 – September 18

I just know visually in my mind’s eye what I want, but I don’t know what it’s called though.

[Referring to the sidebar] Everything I have been doing has been over here.

What’s this? Add a block…. ohhhhhh [about 11 mins into test finds the ‘+’ icon]

Video 3 – September 25

It’s all full-width and perfectly aligned. Let’s go. [referring to Gallery block]

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