Gutenberg Usability Testing – Block Patterns

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