Gutenberg Usability Testing for Nov-Dec 2019

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

November focused on the last bit of side-by-side testing. I was trying to understand how users might go about adding elements in 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/ side-by-side. And then inform them about a 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.-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 pluginPlugin A 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.

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

---

Pie recipe script for November

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

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

---

Navigation block script for December

Imagine you’re building a new website using WordPress. WordPress now offers a Navigation block within the new block editor. This is what you’ll focus on for this usability test. Let’s create a Navigation 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 empty” option in the block. We’re going to create a whole new Navigation menu.
6. Like all good navigations, make “Home” the first item in the menu and make sure it’s linked to the Home page.
7. Next, add another item labeled “About” and make sure it’s linked to the About page.
8. Add a submenu item under the About item. Label it “Team” and ensure it’s linked to the right page.
9. Next, add another top-level item labeled “Services”.
10. Then add two more items; one labeled “Blog” and the other labeled “Contact”.
11. Go back and delete the “Services” item from your Navigation block.
12. Now change the link for the “Contact” item by linking it to the “Happy Flowers” post.
13. Change the “Blog” item to say “Archive” instead, but keep it linked to the same page.
14. Preview your post.
15. How was this experience?

---

Videos

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

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

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

Video 2 – Pie recipe (Nov 20)

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

Video 3 – Pie recipe (Nov 27)

This is a little bit complicated.

Okay, we’re getting somewhere finally!

Video 4 – Navigation block (Dec 4)

I’m not absolutely sure how to add a block. So it doesn’t seem to actually be done here (sidebarSidebar A 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 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