The Test Team helps manage testing and triage across the WordPress ecosystem. They focus on user testing of the editing experience and WordPress dashboard, replicating and documenting bug reports, and supporting a culture of review and triage across the project.
Please drop by any time in SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. with questions or to help out.
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 GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ side-by-side. And then inform them about a blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.-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 pluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party.
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.
Log in.
Create a new post.
In the post, add two images side-by-side. How was this experience?
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?
With these various blocks in mind, try adding an image and text side-by-side in your post.
Did you find the Media+Text block or did you solve step 5 by some other way?
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?
Next, create some text that is side-by-side. How was this experience?
If you didn’t use the Columns block, please try adding that block to show text side-by-side. How did that go?
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.
Log in.
Create a new post.
Title the post: “Gutenberg Recipe”.
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.”
Add an Image block and select a photo of a pie. Make the image full-width.
Add a Columns block with two columns for the ingredients.
In the first column, add a Heading block and type “Crust”.
In the same column, add a bulleted list: • 1 ½ cup cookie crumbs • ¼ cup sugar
In the second column, add a Heading block and type “Curd”.
And in this column, add a bulleted list: • 1 (12 ounce) package of cranberries • 1/2 cup Sugar • 1 orange, zested
Below the Columns block, add a Heading block titled “Directions”.
Now add a List block and change it to a numbered list.
Add each of these to the numbered list:
Preheat oven to 350 degrees F.
Spray a 9-inch two-piece tart pan with cooking spray.
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.
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.
Preview your post and make any corrections to the layout that you’d like.
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 menuNavigation MenuA theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. using this new block!
Log in.
Create a new post.
Add a title to your post.
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.
Click the “Create empty” option in the block. We’re going to create a whole new Navigation menu.
Like all good navigations, make “Home” the first item in the menu and make sure it’s linked to the Home page.
Next, add another item labeled “About” and make sure it’s linked to the About page.
Add a submenu item under the About item. Label it “Team” and ensure it’s linked to the right page.
Next, add another top-level item labeled “Services”.
Then add two more items; one labeled “Blog” and the other labeled “Contact”.
Go back and delete the “Services” item from your Navigation block.
Now change the link for the “Contact” item by linking it to the “Happy Flowers” post.
Change the “Blog” item to say “Archive” instead, but keep it linked to the same page.
Preview your post.
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 (sidebarSidebarA sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. 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 flowFlowFlow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.
Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context
?
As a reminder, if you’re interested in helping with usability testing, there’s a number of things you can try:
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 blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. 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.
Log in.
Create a new post.
In the post, add two images side-by-side. How was this experience?
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?
With these various blocks in mind, try adding an image and text side-by-side in your post.
Did you find the Media+Text block or did you solve step 5 by some other way?
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?
Next, create some text that is side-by-side. How was this experience?
If you didn’t use the Columns block, please try adding that block to show text side-by-side. How did that go?
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 flowFlowFlow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.
Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context
?
As a reminder, if you’re interested in helping with usability testing, there’s a number of things you can try:
You can write a test script that can be usability tested for GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/.
Or simply watch the videos and leave some feedback below.
Thanks for watching and contributing anywhere you can.
The Test Team gathered at the table for Contributor DayContributor DayContributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-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 GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ issues labeled with needs-testing.
Add a text blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. 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.”
Add a two-column block for the ingredients.
In the first column, type “Crust”. Then add a bulleted list: • 1 ½ cup cookie crumbs • ¼ cup sugar
In the second column, type “Curd”. Then add a bulleted list: • 1 (12 ounce) package of cranberries • 1/2 cup Sugar • 1 orange, zested
Add a single-column block titled “Directions”
In the block add a numbered list:
Preheat oven to 350 degrees F. Spray a 9-inch two-piece tart pan with cooking spray.
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.
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.
Go to Posts->Add New
Add a title to the post
Click + to add a 3 columns block
On the first column add a headerHeaderThe header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. block and an image block
On the second column, add an image
On the third column add text
Resize the image on the second column to make it larger (any size)
Add a fourth column by clicking the Block Navigation icon on the upper left of the editing page.
Add a slideshow in the fourth column.
Click Preview to see how your post appears
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!
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 blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. 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.
Log in with username: test password: usertest90631
Create a new post.
Give your post a title.
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.
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.”
Move this Paragraph block above the Cover block.
Back below the Cover block, add a Table block. The Table block should be 3 rows by 3 columns.
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.
In the Table settings, switch “on” the “Fixed width table cells” option.
Now also switch “on” the “HeaderHeaderThe header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. section” too. Then in the new row write, “Sizes”, “Flowers”, and “Price”.
Below the Table block, add a Button block. In the button, type, “Order Now”.
Center the button within the block.
Below this, add a Gallery block with 5 images of flowers. Make this block full-width.
Now move the last image in the gallery to the first position, and then delete the last image from the gallery.
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!”
Now add a Heading block that says, “Come visit our location”
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
Finally “Preview” your post and make any necessary changes you think are important.
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 sidebarSidebarA sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.] 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 flowFlowFlow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.
Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context
?
As a reminder, if you’re interested in helping with usability testing, there’s a number of things you can try:
You can write a test script that can be usability tested for GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/.
Or simply watch the videos and leave some feedback below.
Thanks for watching and contributing anywhere you can.
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 blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. 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.
Log in.
Create a new post.
Give your post a title.
Add an image of a mobile phone. Once the image has been added, set the block to be full width.
Below that add a Heading block with the text, “Features.”
After that, add a Column block with three columns.
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.
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.”
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.”
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.”
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”.
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.”
Add one more Cover block with an image, but this time set it to be a fixed background.
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.”
Finally “Preview” your post and make any necessary changes you think are important.
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 flowFlowFlow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.
Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context
?
As a reminder, if you’re interested in helping with usability testing, there’s a number of things you can try:
You can write a test script that can be usability tested for GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/.
Or simply watch the videos and leave some feedback below.
Thanks for watching and contributing anywhere you can.
July usability testing has completed for GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/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.
Log in.
Create a new post.
Give your post a title.
Add a Cover blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. to your post with a message overlaying the image that reads, “The sweetest place on earth”.
Make the Cover block full-width.
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.”
Now add a heading for the cupcakes section.
In this section, add an image of cupcakes with some text along the right side of it.
Add a sentence or two below to finish off the cupcake section.
Add a new heading about cookies.
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.
Below that, add a gallery of 5 more images.
Now add a quote you heard someone say about this bakery. Maybe
something like, “This bakery is almost as good as Grandma’s house!”
At the bottom, add a horizontal divider.
Finally, include a link to the bakery site. Type the bakery name, and then link it to a website (any website is fine).
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 flowFlowFlow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.
Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context
?
As a reminder, if you’re interested in helping with usability testing, there’s a number of things you can try:
Continuing the usability tests on GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/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.
Log in.
Create a new post.
Give your post a title.
Add a Cover blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. to your post with a message overlaying the image that reads, “The sweetest place on earth”.
Make the Cover block full-width.
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.”
Now add a heading for the cupcakes section.
In this section, add an image of cupcakes with some text along the right side of it.
Add a sentence or two below to finish off the cupcake section.
Add a new heading about cookies.
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.
Below that, add a gallery of 5 more images.
Now add a quote you heard someone say about this bakery. Maybe something like, “This bakery is almost as good as Grandma’s house!”
At the bottom, add a horizontal divider.
Finally, include a link to the bakery site. Type the bakery name, and then link it to a website (any website is fine).
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 flowFlowFlow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.
Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context
?
As a reminder, if you’re interested in helping with usability testing, there’s a number of things you can try:
As noted in last month’s post, I’m conducting a usability test every week on userbrain.net for GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/. These tests are a way to keep track of Gutenberg’s progress and improvements. It also helps reveal any additional UXUXUX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. 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.).
Log in.
Create a new post.
Give your post a title and add one sentence.
Add two images side-by-side.
Add a YouTube video (https://www.youtube.com/watch?v=-PcrLWkxZSk).
Add a caption to the video you added.
Swap one of your previously added images with another image.
Add an image on the left and some text on the right and a paragraph below it.
Move the video to the bottom of the content.
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:
To keep a steady pulse on the user experience in GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/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 ExcerptExcerptAn excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox..”
In a new tab in your browser, review the mockup at: https://cldup.com/SAtxaMGvA0.png
Now go back to: https://wpuxtesting.com/wp-admin
Log in with username: XXXX password: XXXX
Find and open the “Moby Dick Excerpt” draft page.
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.
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
While watching the above videos, did you have any findings or key takeaways?
Do you have any thoughts on how this script might be improved?
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.
Some videos of people using the Classic Editor were shown in the State of the WordState of the WordThis is the annual report given by Matt Mullenweg, founder of WordPress at WordCamp US. It looks at what we’ve done, what we’re doing, and the future of WordPress. https://wordpress.tv/tag/state-of-the-word/. 2018. These videos illustrate some of the pain points found in past usability testing, studies, surveys, and feedback. We added a few tests of GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ with same tasks and are sharing them here.
Demographics
Classic Editor: 10 participants (6 female, 4 male), 3 countries, age range: 20-39, web expertise: average or advanced, WP experience: novice or average, NPS: 6.4.
Gutenberg: 3 participants (2 female, 1 male), 2 countries, age range: 19-36, web expertise: average or advanced, WP experience: novice or average, NPS: 8.3.
Tasks
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.). Start at https://plastic-fox.jurassic.ninja/wp-admin/post-new.php
Log in with username demo and password pass037538
Give your post a title and add one sentence.
Add two images side-by-side.
Add a YouTube video.
Click “Preview” to check your work so far.
Go back to editing and add a caption to the video you added before.
Add an image on the left and some text on the right and a paragraph below it.
Move the video or images from one part of the content to another (i.e. from the top to the bottom or vice versa).
You love to close each article with the same snippet. Open the following link, copy the HTMLHTMLHTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites., and add it to the end of your post.
We asked, “based on your experience today, how likely are you to recommend this editor to a friend or colleague? (0=Not at all likely, and 10=Very Likely)?” after each test. Users rated the Classic Editor experience at an average of 6.4 and the Gutenberg experience 8.3.
Session 3 — VideoPress (One task was modified here accidentally: “Add two images side-by-side in a gallery” and this little bit helped the user discover how to complete the task.)
You must be logged in to post a comment.