Gutenberg Usability Testing for March 2020

Gutenberg usability testing revolved around the Navigation block for the month of March. The Gutenberg team is looking to push this forward by creating a better UX and including it as a proper block in the block library.

Testing script

Imagine you’re building a new website using WordPress. WordPress now offers a Navigation block within the new block editor. This is what you’ll focus on for this usability test. Let’s create a Navigation menu using this new block!

  1. Log in.
  2. Create a new post.
  3. Add a title to your post.
  4. Keep in mind that the way to add various content to your post is by adding blocks. Explore where you might go to add a block, and add the Navigation block to your post.
  5. Click the “Create from all top-level pages” option in the block. We’re going to pre-fill this Navigation menu with the site’s top level pages.
  6. First, delete the “Moby Dick” menu item.
  7. Next, move the “About” menu item so that it comes just after “Home.”
  8. Move “Blog” to the right of “Services.”
  9. Next, we’re going to add sub-menu items under the “About” menu item.
  10. The first sub-menu item should be “Mission.” Add a sub-menu item that links to the Mission page.
  11. Now add a second sub-menu item and link it to the “Team” page.
  12. Let’s add some color. Set a background color on this Navigation block and then change the color of the text in the menu items to something you like.
  13. Preview your post.
  14. How was this experience?

Videos

Video 1 – February 12 (I know this is Feb, but I missed a few that month)

I’m getting confused here. Here’s the link to the Team page. I think that’s a link.

[adding background color to Nav block] I’m just not seeing this.

NOTES:

  • The user tried to delete a nav item by clicking into the text and hitting the Delete key on the keyboard. This only deletes the text, but not the item.
  • Selecting the Navigation block parent proved too difficult. The user got frustrated which caused them not to see other UI parts creating a compounded affect.

Video 2 – March 10

I’m not quite sure how to change the color.

NOTES:

  • This user also tried deleting a nav item by highlighting the text and hitting the Delete key on the keyboard.

Video 3 – March 17

NOTES:

  • Finding the block’s background color proved difficult again, but he eventually found it.

Video 4 – March 24

I’m still trying to find the Navigation 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, #usability-testing

Help testing WordPress Auto-updates Feature Plugin – version 0.4 🌹

WordPress Auto-updates feature plugin aims to provide automatic updates for plugins and themes feature as an opt-in feature.

The development takes place on this GitHub repository.

WordPress developers are welcome to contribute to this project by testing the feature plugin. Our goal is to ship the feature in WordPress 5.5.

We are particularly looking for design, copy or accessibility review, as well as UI/UX feedback.

Websites owners testing

If you want to contribute to this feature by testing the beta plugin, please install the feature plugin:

Plugins screen

Then, you are invited to navigate to the WP-Admin Plugins screen. The following actions are available for websites administrators:

  • Set up auto-updates on a plugin-by-plugin basis. Use the last column of the list table to se up plugins auto-updates.
  • Filter plugins that are set up for auto-updates or not. Use the filters available on the top of the screen to filter plugins.
  • Bulk Edit. Using the first column’s checkboxes, bulk enable or disable plugins autoupdates.

Themes screen

Then, you can go through the WP-Admin Themes screen:

  • Set up auto-updates on a theme-by-theme basis. Open the theme modal and enable auto-updates for the selected theme.

Updates screen

Once you have tested the above features, please navigate to Dashboard > Updates admin screen. If you previously enabled auto-updates on some plugins or themes and if they are still not updated, the next scheduled update will appear.

Email notifications

Once a plugin or a theme is automatically updated, you’ll receive an email notification. Example:

Multisite installations

This plugin aims to support multisite installations. It pretty the same, except concerning Themes updates, because the themes screen is slightly different for multisites. Please test everything works properly.

Themes screen on multisite:

Plugins authors

Please report any compatibility issue.

We are particularly interested by feedback from plugins that already handle themes and plugins automatic updates.


Please share your thoughts by commenting this Post or on the GitHub repository.

All contributions will be properly credited.

Thanks! ♥️

#auto-updates, #feature-plugin, #wp-auto-updates

Gutenberg Usability Testing for January 2020

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

X-post: Get Involved Table at WordCamp Asia 2020

X-post from +make.wordpress.org/community: Get Involved Table at WordCamp Asia 2020

X-post: WCEU 2020 – Leave no Contributor Behind

X-comment from +make.wordpress.org/updates: Comment on WCEU 2020 – Leave no Contributor Behind

Gutenberg Usability Testing for Nov-Dec 2019

Hey there! 👋 I seemed to have missed November’s post, so I’m combining November and December on this one. I have 3 for November and 3 for December.

November focused on the last bit of side-by-side testing. I was trying to understand how users might go about adding elements in Gutenberg side-by-side. And then inform them about a block-based way to do it and see how that affected their experience.

I also began testing around the List block. This is a natural block when writing up recipe posts, etc. I had an amazing group during WCUS this year help write up this particular script which is shared further below.

In December I wanted to focus on the Navigation block in the Gutenberg plugin.


Side-by-side script for November

Try out the new Block Editor in WordPress! There are a few tasks below. Please talk through them out loud so we might better understand how people think through these actions. Don’t worry, there are no right answers. Thank you.

  1. Log in.
  2. Create a new post.
  3. In the post, add two images side-by-side. How was this experience?
  4. If you haven’t already clicked the “+” icon in the top toolbar to add a block, try that now and add a Gallery block. Now add two images to the Gallery block. How was this experience?
  5. With these various blocks in mind, try adding an image and text side-by-side in your post.
  6. Did you find the Media+Text block or did you solve step 5 by some other way?
  7. If you didn’t use the Media+Text block, try adding it now. Once you’ve added an image and text to this block, flip it so that the image is on the right of the text. How did you like this block?
  8. Next, create some text that is side-by-side. How was this experience?
  9. If you didn’t use the Columns block, please try adding that block to show text side-by-side. How did that go?
  10. Now that you’ve become more experienced with blocks, how intuitive does this interface feel?

Pie recipe script for November

Imagine you’ve created a perfect pie recipe and want to share it with the world! You’ve gathered your notes and are ready to create this new post on your site.

  1. Log in.
  2. Create a new post.
  3. Title the post: “Gutenberg Recipe”.
  4. Add a paragraph describing the recipe: “This is a test recipe of a delicious pie. We love pies as they are tart and sweet at the same time.”
  5. Add an Image block and select a photo of a pie. Make the image full-width.
  6. Add a Columns block with two columns for the ingredients.
  7. In the first column, add a Heading block and type “Crust”.
  8. In the same column, add a bulleted list:
    • 1 ½ cup cookie crumbs
    • ¼ cup sugar
  9. In the second column, add a Heading block and type “Curd”.
  10. And in this column, add a bulleted list:
    • 1 (12 ounce) package of cranberries
    • 1/2 cup Sugar
    • 1 orange, zested
  11. Below the Columns block, add a Heading block titled “Directions”.
  12. Now add a List block and change it to a numbered list.
  13. Add each of these to the numbered list:
    1. Preheat oven to 350 degrees F.
    2. Spray a 9-inch two-piece tart pan with cooking spray.
    3. In a medium bowl, stir together cookie crumbs, sugar, stevia, salt, and butter.
    4. Press mixture evenly in bottom and up sides of tart pan.
    5. Bake until set, about 15 minutes.
    6. In a medium saucepan, combine cranberries, sugar, stevia, and orange zest and juice.
    7. Bring to a simmer over medium-high heat and cook until cranberries burst, about 8 minutes.
  14. Preview your post and make any corrections to the layout that you’d like.
  15. Publish your post!

Navigation block script for December

Imagine you’re building a new website using WordPress. WordPress now offers a Navigation block within the new block editor. This is what you’ll focus on for this usability test. Let’s create a Navigation menu using this new block!

  1. Log in.
  2. Create a new post.
  3. Add a title to your post.
  4. Keep in mind that the way to add various content to your post is by adding blocks. Explore where you might go to add a block, and add the Navigation block to your post.
  5. Click the “Create empty” option in the block. We’re going to create a whole new Navigation menu.
  6. Like all good navigations, make “Home” the first item in the menu and make sure it’s linked to the Home page.
  7. Next, add another item labeled “About” and make sure it’s linked to the About page.
  8. Add a submenu item under the About item. Label it “Team” and ensure it’s linked to the right page.
  9. Next, add another top-level item labeled “Services”.
  10. Then add two more items; one labeled “Blog” and the other labeled “Contact”.
  11. Go back and delete the “Services” item from your Navigation block.
  12. Now change the link for the “Contact” item by linking it to the “Happy Flowers” post.
  13. Change the “Blog” item to say “Archive” instead, but keep it linked to the same page.
  14. Preview your post.
  15. How was this experience?

Videos

Video 1 – Side-by-side (Nov 6)

I’m not able to get them side-by-side.

Gallery block – So would we be able to add more than one picture? Cool. This was easy!

Video 2 – Pie recipe (Nov 20)

The only thing I would add to this I want to be able to do is to change the font and color.

Video 3 – Pie recipe (Nov 27)

This is a little bit complicated.

Okay, we’re getting somewhere finally!

Video 4 – Navigation block (Dec 4)

I’m not absolutely sure how to add a block. So it doesn’t seem to actually be done here (sidebar block settings).

It did take a little while, but we did get there in the end.

In truthful a little confusing. It became clearer as I went on, but I’m unsure if I’ve done all the tasks as requested.

Video 5 – Navigation block (Dec 11)

About 9 minutes in and the user gives up. They can’t quite figure out how to add a Navigation block. About 8 minutes in they searched the Block Library but were unsuccessful because they didn’t look through every accordion, and they ended up searching for “empty” instead of “Navigation”.

Video 6 – Navigation block (Dec 18)

I expected to see a list of blocks. (referring to the Block tab in the sidebar)

Submenus are proving to be difficult in these usability tests. I know it’s a design problem we’re aiming to solve.


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

Gutenberg Usability Testing for October 2019

I had three usability tests for October. One tested the same “Flower shop” script from the month of September while the other two tested a “Side-by-side” script for October. The goal was to test how people placed various items side-by-side in the block editor.

Testing script

Try out the new Block Editor in WordPress! There are a few tasks below. Please talk through them out loud so we might better understand how people think through these actions. Don’t worry, there are no right answers. Thank you.

  1. Log in.
  2. Create a new post.
  3. In the post, add two images side-by-side. How was this experience?
  4. If you haven’t already clicked the “+” icon in the top toolbar to add a block, try that now and add a Gallery block. Now add two images to the Gallery block. How was this experience?
  5. With these various blocks in mind, try adding an image and text side-by-side in your post.
  6. Did you find the Media+Text block or did you solve step 5 by some other way?
  7. If you didn’t use the Media+Text block, try adding it now. Once you’ve added an image and text to this block, flip it so that the image is on the right of the text. How did you like this block?
  8. Next, create some text that is side-by-side. How was this experience?
  9. If you didn’t use the Columns block, please try adding that block to show text side-by-side. How did that go?
  10. Now that you’ve become more experienced with blocks, how intuitive does this interface feel?

Videos

Video 1 – October 2 (Used Sept’s Flower script)

Is there an option for ‘fit to screen’? Looking for a ‘fit’ option that just automatically detects the size you got and fits the text to full-screen.

“Is there a way to do this more simply?” Uses the arrows movers because drag and drop didn’t work when moving the blocks.

Maybe it would be better to make the column lines locked in place at first?

Video 2 – October 16

No audio.

Video 3 – October 23

I’m not finding anything with just text itself.

I just went to inline image and found that way was easier than the Media+Text 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

WCUS 2019 Contributor Day

The Test Team gathered at the table for Contributor Day at WCUS 2019. We talked about the various ways people can test and where to go to test things out. After this, we split into groups and wrote usability testing scripts. Once scripts were written, we took some time to install a local WordPress setup and began testing Gutenberg issues labeled with needs-testing.

The team included

Test table at WCUS 2019 Contributor Day

@dll416, @suziwilson, @dickmoomaw, Allie Brock, @brezocordero, @chrisp, @c3zh, @christopher-pollock, @royho, @mapk, @jg-visual

Issues/PRs that were tested

Scripts created for usability testing

  1. Create a new post.
  2. Title the post: “Gutenberg Recipe”
  3. Add a text block describing the recipe:
    “This is a test recipe of a delicious pie. We love pies as they are tart and sweet at the same time.”
  4. Add a two-column block for the ingredients.
  5. In the first column, type “Crust”. Then add a bulleted list:
    • 1 ½ cup cookie crumbs
    • ¼ cup sugar
  6. In the second column, type “Curd”. Then add a bulleted list:
    • 1 (12 ounce) package of cranberries
    • 1/2 cup Sugar
    • 1 orange, zested
  7. Add a single-column block titled “Directions”
  8. In the block add a numbered list:
    1. Preheat oven to 350 degrees F. Spray a 9-inch two-piece tart pan with cooking spray.
    2. In a medium bowl, stir together cookie crumbs, sugar, stevia, salt, and butter. Press mixture evenly in bottom and up sides of tart pan. Bake until set, about 15 minutes.
    3. In a medium saucepan, combine cranberries, sugar, stevia, and orange zest and juice. Bring to a simmer over medium-high heat and cook until cranberries burst, about 8 minutes.

  1. Go to Posts->Add New
  2. Add a title to the post
  3. Click + to add a 3 columns block
  4. On the first column add a header block and an image block
  5. On the second column, add an image
  6. On the third column add text
  7. Resize the image on the second column to make it larger (any size)
  8. Add a fourth column by clicking the Block Navigation icon on the upper left of the editing page.
  9. Add a slideshow in the fourth column.
  10. Click Preview to see how your post appears
  11. Publish the post (private if you want)

These scripts will be used in future usability testing scenarios that help inform the design and development direction in Gutenberg.

Thank you, everyone, for your wonderful contributions today! Keep testing all the things!

#contributors, #wcus

Gutenberg Usability Testing for September 2019

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

Calling all testing plugins

You might have noticed a new section on this site’s sidebar for ‘testing plugins’. The idea is to feature all the testing plugins used throughout the WordPress project.

Current testing plugins:

Did I miss any plugins? If you know any please leave a comment and we can add them to the list in the sidebar.

#testing-plugins