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

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

Gutenberg Usability Testing for August 2019

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

Gutenberg Usability Testing for July 2019

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

Gutenberg Usability Testing for June 2019

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

WCEU usability test results: part one

During WCEU there were a number of usability tests run. For each test, there was a form to follow through and questions. In this first part, five videos will be shared with the answers, then a second post with another five will be made. Thank you every person that both helped run tests and also took part in them. It’s really important to have opportunities to test like this.

As you watch through have a think about a few things:

  • What bugs or enhancements could be made from this?
  • What insights do you gain in the way people use Gutenberg?
  • Any ideas that spring up from this of ways to make the editor even better for people?

Share anything you have as a comment and part two will be along in a few days.

Continue reading

#gutenberg, #usability-testing, #wceu-usability-testing

Gutenberg Usability Testing for May 2019

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

Gutenberg Usability Testing for April 2019

To keep a steady pulse on the user experience in Gutenberg, the Research Team is conducting weekly usability tests on userbrain.net. These tests are meant to be non-moderated tasks for new and experienced WordPress users. One test per week is given and reviewed to help highlight how people might go about completing tasks within Gutenberg.

The tasks will remain the same for each user over the course of two months. This will help compare a few usability tests within a similar range of time throughout the year.

I’ll gather the results at the end of each month to share.

Each user was new to WordPress, but wasn’t screened for demographic data.

Testing script

Imagine your friend has requested that you build a webpage on their site using excerpts from the novel, Moby Dick. They sent you a mockup of what they’d like you to build. And to help you further, they’ve already uploaded all the media and content you’ll need for this. They’ve also created a draft page for you to design called, “Moby Dick Excerpt.”

  1. In a new tab in your browser, review the mockup at: https://cldup.com/SAtxaMGvA0.png
  2. Now go back to: https://wpuxtesting.com/wp-admin
  3. Log in with
    username: XXXX
    password: XXXX
  4. Find and open the “Moby Dick Excerpt” draft page.
  5. Begin editing the content so that it looks like the mockup. Try to get as close as you can to the mockup’s design before completing. All the assets are already added to the site in the Media Library.
  6. Once you’re done, publish the page.

Please make sure to talk through everything out loud as you complete the tasks.

Videos

Video 1 (April 15, 2019)

Video 2 (April 22, 2019)

Video 3 (April 30, 2019)

Feedback

  1. While watching the above videos, did you have any findings or key takeaways?
  2. Do you have any thoughts on how this script might be improved?
  3. Would you like to create a usability test script? If so, share in the comments below.

Caveat: Because these are non-moderated usability tests, sometimes the people going through the tasks treat them as such – simple tasks they need to finish. This can lead to a lack of creativity and exploration on the part of the user and may not reflect real-life situations when building a site.

#gutenberg, #usability-testing

Call for Testing: Gutenberg 5.0

This release includes two new blocks and a way to change the focal point in a cover image block. It also implements a performance improvement when adding/removing blocks, several enhancements, bug fixes, documentation improvements, tooling updates, and removed PHP code now maintained in Core.

The goal of Gutenberg is to simplify the creation of rich pages and posts in WordPress by replacing old custom HTML, CSS, and shortcodes with native Blocks. The Gutenberg plugin is currently the main focus for the testing group and Gutenberg is the new editing experience in WordPress. To help test, please download gutenberg.zip from the releases page or use the button above, install/activate the plugin, and try testing any of the items listed below. You can also see other options for getting setup for testing in the handbook. When testing, use the latest stable release of WordPress (5.0.3) and the Gutenberg 5.0 plugin (download using the links above). All testing is welcome even if it’s just one or two items!
  1. Add an RSS feed using the new RSS block. (7966)
  2. Find the Amazon instant preview link for your favorite book and embed it into a post. (13510)
  3. Add a Cover block and change the focal point for the image. (10925)
  4. Add several blocks in quick succession (it should feel faster than in the previous release). (13067)
  5. Try to create a reusable block as a contributor (you should not be able to). (12378)
  6. Log in as an admin and create a reusable block. Log in as an author or contributor and try to delete it (you should not be able to). (12378)
  7. Log in as an author and try to edit the reusable block created in the previous step (you should not be able to). (12378)
  8. Add a SmugMug photo or slideshow embed. Check to make sure the embed works on the front-end but you do not see a preview in the editor (12961).
  9. Add a gallery block with 4 images and set the columns to 4 then click the pencil icon in the gallery block toolbar and remove an image. Check that the columns option changes to 3. (13423)
  10. Create a new category with no published posts in it. Start a new post and try to assign the new category to it (you should not be able to). (13549)
  11. Add a columns block with an odd number of columns and check that the margins on the right and left work as expected. Try from different themes. (12199)
  12. Add a list block and use the indent and outdent buttons on various list items in the list. (12667)
  13. Accessibility: using a screen reader, go to the More menu and toggle between the views for Top Toolbar, Spotlight Mode, and Fullscreen Mode and check that the change is announced properly. (13385)
  14. Accessibility: using a screen reader, use the block inserter to search for any block and check that the label “Search for a block” is announced correctly followed by the number of results. (13388)
  15. For more, see pull requests merged in the 5.0 milestone.
If you find a new bug, please file it in gutenberg on GitHub. Thank you! Please join us in #core-test on WordPress Slack any time if you have questions about testing!

#5-0, #call-for-testing, #gutenberg

Call for Testing: Gutenberg 4.9

This release includes a lot of tweaks, bug fixes and performance improvements. It includes a new Async Rendering Mode for blocks so it’s important to test it with custom blocks.

The goal of Gutenberg is to simplify the creation of rich pages and posts in WordPress by replacing old custom HTML, CSS, and shortcodes with native Blocks. The Gutenberg plugin is currently the main focus for the testing group and Gutenberg is the new editing experience in WordPress. To help test, please download gutenberg.zip from the releases page or use the button above, install/activate the plugin, and try testing any of the items listed below. You can also see other options for getting setup for testing in the handbook. When testing, use the latest stable release of WordPress (5.0.3) and the Gutenberg 4.9 plugin (download using the links above). All testing is welcome even if it’s just one or two items!
  1. Open a large document and quickly type a short word. Typing should not feel slow, if it does please note the document size you tested. (13056)
  2. Check custom blocks from many available plugins. (13056)
  3. Mark a post as pending review and check that the publish date still says “immediately”. (13178)
  4. Upload an image with a title in its metadata and check that the title in the media library is the same. (13193)
  5. Try applying background colors for the table block stripes. (10611)
  6. Try using the fullscreen mode in different browsers including Edge and notice that you only have a single scrollbar on long posts. (13327)
  7. Try using the alignment toolbar in the Cover and Categories blocks .
  8. For more, see pull requests merged in the 4.8 milestone.
If you find a new bug, please file it in gutenberg on GitHub. Thank you! Please join us in #core-test on WordPress Slack any time if you have questions about testing! #4-9, #call-for-testing, #gutenberg