The Test Team helps manage testing and triage across the WordPress ecosystem. They focus on user testing of the editing experience and WordPress dashboard, replicating and documenting bug reports, and supporting a culture of review and triage across the project.
Please drop by any time in SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. with questions or to help out.
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 blockBlockBlock 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.
Log in.
Create a new post.
Give your post a title.
Add an image of a mobile phone. Once the image has been added, set the block to be full width.
Below that add a Heading block with the text, “Features.”
After that, add a Column block with three columns.
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.
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.”
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.”
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.”
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”.
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.”
Add one more Cover block with an image, but this time set it to be a fixed background.
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.”
Finally “Preview” your post and make any necessary changes you think are important.
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 flowFlowFlow 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:
You can write a test script that can be usability tested for GutenbergGutenbergThe 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.
