The Test team patrols, curates, and tests the WordPress experience. We use a QA mindset to do visual records, using, observing, user research, manual testing, and user testing. We also document and triage top flows.
Gutenberg Usability Testing for June 2019
Continuing the usability tests on 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 block 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 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.