This session of usability tests covered blockBlock Block 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. patterns and how to move blocks around in the Editor.

Testing script

Imagine you are building a new website for your personal blog. You want to begin by creating your homepage. WordPress offers a new block editor that provides some great choices of block patterns that you can add for creative layouts. Let’s explore the block patterns to create your page.

1. Log in.
2. Create a new page.
3. Add a title to your page.
4. Keep in mind that the way to add various content to your page is by adding blocks or block patterns. Explore where you might go to add a block or pattern, and add the side-by-side image pattern to your page.
5. Make that pattern full width.
6. Below that, add a two-column layout pattern that also includes a Heading or larger text.
7. Edit the larger text to say something meaningful about your blog.
8. Now add either a Buttons block, or the side-by-side buttons pattern, whichever you prefer. Rename one button to “Learn more” and the other to “Contact us.”
9. Move the buttons above the previous block pattern.
10. Now add a Separator block above and below the Buttons block/pattern.
11. Publish your page.
12. How was this experience?

Videos

Video 1 – May 18

Can I grab this and move it? How do I grab this block?

Basically everything I make is in Elementor, so I haven’t really played around with the new WordPress blocks and the new editing capabilities. This was the first time and I actually really enjoyed it.

Video 2 – May 26

Oh, the arrows are the movers. That’s not very clear. I think that needs to be worked on a bit more.

Video 3 – June 2

Warning: some harsh language

Video 4 – June 19

It was intuitive to locate blocks and patterns.

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 flowFlow Flow 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:

• Join the #research channel in slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..
• You can write a test script that can be usability tested for GutenbergGutenberg The 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.

#gutenberg, #usability-testing

GutenbergGutenberg The 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/ usability testing revolved around the Navigation blockBlock Block 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. for the month of March. The Gutenberg team is looking to push this forward by creating a better UXUX UX 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. 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 menuNavigation Menu A 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!

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 UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. 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 flowFlow Flow 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:

• Join the #research channel in slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..
• 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

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 blockBlock Block 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.

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 flowFlow Flow 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:

• Join the #research channel in slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..
• You can write a test script that can be usability tested for GutenbergGutenberg The 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.

#gutenberg, #usability-testing

July usability testing has completed for GutenbergGutenberg The 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.

1. Log in.
2. Create a new post.
3. Give your post a title.
4. Add a Cover blockBlock Block 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”.
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 flowFlow Flow 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:

• Join the #research channel in slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..
• 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

Continuing the usability tests on GutenbergGutenberg The 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.

1. Log in.
2. Create a new post.
3. Give your post a title.
4. Add a Cover blockBlock Block 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”.
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 flowFlow Flow 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:

• Join the #research channel in slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..
• 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

As noted in last month’s post, I’m conducting a usability test every week on userbrain.net for GutenbergGutenberg The 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 UXUX UX 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.).

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 slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..
• 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