This session of usability tests covered block 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.
- Log in.
- Create a new page.
- Add a title to your page.
- 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.
- Make that pattern full width.
- Below that, add a two-column layout pattern that also includes a Heading or larger text.
- Edit the larger text to say something meaningful about your blog.
- 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.”
- Move the buttons above the previous block pattern.
- Now add a Separator block above and below the Buttons block/pattern.
- Publish your page.
- 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 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.