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.

  1. Log in.
  2. Create a new post.
  3. Give your post a title.
  4. Add a Cover block to your post with a message overlaying the image that reads, “The sweetest place on earth”.
  5. Make the Cover block full-width.
  6. 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.”
  7. Now add a heading for the cupcakes section.
  8. In this section, add an image of cupcakes with some text along the right side of it.
  9. Add a sentence or two below to finish off the cupcake section.
  10. Add a new heading about cookies.
  11. 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.
  12. Below that, add a gallery of 5 more images.
  13. Now add a quote you heard someone say about this bakery. Maybe something like, “This bakery is almost as good as Grandma’s house!”
  14. At the bottom, add a horizontal divider.
  15. Finally, include a link to the bakery site. Type the bakery name, and then link it to a website (any website is fine).
  16. 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.

#gutenberg, #usability-testing

Gutenberg Usability Testing for May 2019

As noted in last month’s post, I’m conducting a usability test every week on userbrain.net for Gutenberg. These tests are a way to keep track of Gutenberg’s progress and improvements. It also helps reveal any additional UX issues that may not have been evident.

This month focused on image and video blocks. It also involved editing content in relation to those blocks like moving them up and down in the post, and adding captions.

Testing Script

Imagine you are on assignment to write an article for a new travel blog. Luckily, they are sending you to your favorite vacation spot! Your instructions are to choose a topic you think will get people as excited as you are about this place. It’s up to you to pick a focus (food, activities, lodging, etc.).

  1. Log in.
  2. Create a new post.
  3. Give your post a title and add one sentence.
  4. Add two images side-by-side.
  5. Add a YouTube video (https://www.youtube.com/watch?v=-PcrLWkxZSk).
  6. Add a caption to the video you added.
  7. Swap one of your previously added images with another image.
  8. Add an image on the left and some text on the right and a paragraph below it.
  9. Move the video to the bottom of the content.
  10. Once you’re done, publish the post.

Videos

Video 1 (May 6, 2019)

Video 2 (May 13, 2019)

Video 3 (May 20, 2019)

Video 4 (May 28, 2019)

Feedback

Please watch the videos and comment on anything you noticed particularly interesting about how these users used Gutenberg. It would be great to call out points of struggle which can be connected to opportunities, or even points of success that can be positive indicators of improvements.

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.

#gutenberg, #usability-testing

Gutenberg Usability Testing for April 2019

To keep a steady pulse on the user experience in Gutenberg, the Research Team is conducting weekly usability tests on userbrain.net. These tests are meant to be non-moderated tasks for new and experienced WordPress users. One test per week is given and reviewed to help highlight how people might go about completing tasks within Gutenberg.

The tasks will remain the same for each user over the course of two months. This will help compare a few usability tests within a similar range of time throughout the year.

I’ll gather the results at the end of each month to share.

Each user was new to WordPress, but wasn’t screened for demographic data.

Testing script

Imagine your friend has requested that you build a webpage on their site using excerpts from the novel, Moby Dick. They sent you a mockup of what they’d like you to build. And to help you further, they’ve already uploaded all the media and content you’ll need for this. They’ve also created a draft page for you to design called, “Moby Dick Excerpt.”

  1. In a new tab in your browser, review the mockup at: https://cldup.com/SAtxaMGvA0.png
  2. Now go back to: https://wpuxtesting.com/wp-admin
  3. Log in with
    username: XXXX
    password: XXXX
  4. Find and open the “Moby Dick Excerpt” draft page.
  5. Begin editing the content so that it looks like the mockup. Try to get as close as you can to the mockup’s design before completing. All the assets are already added to the site in the Media Library.
  6. Once you’re done, publish the page.

Please make sure to talk through everything out loud as you complete the tasks.

Videos

Video 1 (April 15, 2019)

Video 2 (April 22, 2019)

Video 3 (April 30, 2019)

Feedback

  1. While watching the above videos, did you have any findings or key takeaways?
  2. Do you have any thoughts on how this script might be improved?
  3. Would you like to create a usability test script? If so, share in the comments below.

Caveat: Because these are non-moderated usability tests, sometimes the people going through the tasks treat them as such – simple tasks they need to finish. This can lead to a lack of creativity and exploration on the part of the user and may not reflect real-life situations when building a site.

#gutenberg, #usability-testing

Comparing the Classic Editor and Gutenberg

Some videos of people using the Classic Editor were shown in the State of the Word 2018. These videos illustrate some of the pain points found in past usability testing, studies, surveys, and feedback. We added a few tests of Gutenberg with same tasks and are sharing them here.

Demographics

  • Classic Editor: 10 participants (6 female, 4 male), 3 countries, age range: 20-39, web expertise: average or advanced, WP experience: novice or average, NPS: 6.4.
  • Gutenberg: 3 participants (2 female, 1 male), 2 countries, age range: 19-36, web expertise: average or advanced, WP experience: novice or average, NPS: 8.3.

Tasks

  • You are on assignment to write an article for a new travel blog. Luckily, they are sending you to your favorite vacation spot! Your instructions are to choose a topic you think will get people as excited as you are about this place. It’s up to you to pick a focus (food, activities, lodging, etc.). Start at https://plastic-fox.jurassic.ninja/wp-admin/post-new.php
  1. Log in with username demo and password pass037538
  2. Give your post a title and add one sentence.
  3. Add two images side-by-side. 
  4. Add a YouTube video.
  5. Click “Preview” to check your work so far.
  6. Go back to editing and add a caption to the video you added before.
  7. Add an image on the left and some text on the right and a paragraph below it.
  8. Move the video or images from one part of the content to another (i.e. from the top to the bottom or vice versa).
  9. You love to close each article with the same snippet. Open the following link, copy the HTML, and add it to the end of your post.
1 <img draggable=”false” class=”emoji” alt=”<img draggable=”false” class=”emoji” alt=”” src=”https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/svg/1f44b.svg”>” src=”https://s.w.org/images/core/emoji/2.3/svg/1f44b.svg”>
  1. Publish the post!

Classic Editor Highlight Reels

Gutenberg Highlight Reels

Although the questions were initially created for the Classic Editor, the same tasks in Gutenberg were compared.

Net Promoter Score (NPS)

We asked, “based on your experience today, how likely are you to recommend this editor to a friend or colleague? (0=Not at all likely, and 10=Very Likely)?” after each test. Users rated the Classic Editor experience at an average of 6.4 and the Gutenberg experience 8.3.

Links to Full Videos

  1. Session 1 — VideoPress
  2. Session 2 — VideoPress
  3. Session 3 — VideoPress
  4. Session 4 — VideoPress
  5. Session 5 — VideoPress
  6. Session 6 — VideoPress
  7. Session 7 — VideoPress
  8. Session 8 — VideoPress
  9. Session 9 — VideoPress
  10. Session 10 —VideoPress
  11. Session 1 — VideoPress
  12. Session 2 — VideoPress
  13. Session 3 — VideoPress
    (One task was modified here accidentally: “Add two images side-by-side in a gallery” and this little bit helped the user discover how to complete the task.)

There’s More!

A sitebuilding study is under way, and you can volunteer to get involved or follow along on the Make WordPress Design blog.

#gutenberg, #usability-testing

WCUS Gutenberg Testing: Volunteer Feedback

During WCUS, we had a ton of volunteers staff the Gutenberg testing booth (affectionately called the “Gutenbooth.”) A huge thank you to everyone who volunteered their time and ran tests throughout the weekend!

At the end of the weekend, we asked volunteers for some feedback about common trends they saw, along with recommendations for improving the testing process. Here’s the feedback we received:

Did you see any issues come up repeatedly while you were watching people test?

  • Aligning caption citation, converting paragraphs to list, changing block type when clicking into “Write your story”.
  • Typing the quote into the paragraph block, then trying to format it to match. The ability to change the block type was surprising info, as was the quote block having different styles available.
  • People couldn’t find the second quote style.
  • Right aligning quote blocks instead of changing the quote style.
  • People didn’t realize they should use the quote block type.
  • People didn’t know there were two quote styles.
  • May be more issues of the test itself, but most often people didn’t think to make the text style a quote block. They would be looking for font controls. If they did discover blocks sometimes they wouldn’t see the quote block.
  • No one really noticed the second quote style. They were more likely to find the Block settings, so maybe we move the quote style options to the quote > Block > Settings for easier discoverability.
  • People often missed the existence of the Quote block and used two Paragraph blocks instead, and when they did find the Quote block, they often didn’t know they could select different quote styles.
  • It feels like there are too many places for block settings. The icon for the second quote style was unclear. Some people didn’t know it was a quote and made paragraphs and styled those. Developers added inline CSS to make it match the design.
  • Insert block and then edit was not default mindset (at this point). Discovery of the ability to transform wasn’t strong.
  • There were plenty of issues with people not finding block creation or navigation intuitive. block controls cover up the previous block bottom line of text. If it’s a short line of text you might not see it at all. People sometimes got confused thinking their text was gone.
  • Undo/Redo is not intuitively discovered.
  • It wasn’t obvious what was behind the three vertical dots.
  • /slash commands could be interesting to search and use. We may consider a walk-thru wizard for new users to get them acquainted with now the new blocks can work.
  • Some tech glitches.
  • Mostly related to the test setup (e.g. not knowing to switch tabs to Gutenberg / switch tabs back to finish survey).

tl;dr: The two separate quote styles were the biggest pain point, followed by trouble learning the editor and block interface, particularly switching blocks, the ••• menu, and block controls.

Is there anything you think we should change about the test?

  • I suspect part of the issue with caption alignment was due to the task of the test to be imitation, not creation, so I think it leads people to think in terms of alignment, not necessarily style.
  • Make the screenshot not achievable using Gutenberg / Provide people with content and let them do much more free-form style.
  • Maybe written instructions instead of asking people to “mimic” output, because it this is not the way people write content in general, they do not “copy” something.
  • I’d have the sample printed out and set next to the laptop to keep the user from having to swap between windows.
  • Automate screen recording start/stop, one-button reset for survey etc.
  • Yes. I think expecting people to know they should be recreating a block quote without telling them that is what it is, skews the test results a bit. We need to try to replicate a more natural publishing process somehow.
  • No, this was a good example to make people search for options and solutions.

tl;dr: Imitating an existing design make people focus too much on the details and not as much on the editing experience, we need to print out whatever instructions we provide, and better automation.

If you attended WCUS and ran through the Gutenberg usability test, we’d also love your feedback with how you think the test can be improved!

#gutenberg, #wcus

WordCamp Milano testing the Gutenberg tests

At WordCamp Milano contribution day the tests recently written about here. Thank you to everyone that helped. @emanuelblagonic gets a shout out for helping co-lead on the day.

So, what happened? Well we started by running the tests. They were self run by people who hadn’t done the tests before. We had about 3-4 people doing this. From there others split into testing on another person and also into even testing on mobile.

It’s worth noting this is a brief overview, as the tests are run through bugs will be reported and enhancements made. However, it’s good to report early as this was a test of the tests.

The stats:

  • Task C: 2 tests
  • Task B: 4 tests
  • Task A: 3 tests

Videos collected: we have 9 videos collected from the testing. These are still being processed. One test was on mobile, the rest desktop.

The test changes

Based on the feedback we got a few things were changed:

  • Wording was made more explicit.
  • The image to make up itself was changed and copy provided as this was big piece of feedback as an issue.
  • Task B was easier than task A so we modified this.
  • Video uploading was an issue and we now have a Google drive to use.
  • The age range was better at 50-60 and then 60+

Gutenberg changes from test

One major thing was adjusted, the block toolbar was put back by the block, over being fixed. This was something previous tests had suggested worked, but in testing it really didn’t. We still have the switch and more A/B testing needs to happen with a wider audience.

Interesting feedback

One ‘food for thought’ feedback was this that when saying ‘make this image’ one user looked for a block that looked like that. It is important to note and see if this is common. We could direct more, but we maybe can hold this to review.

Thanks to everyone that helped run the tests, your work counts and by testing we make Gutenberg a better product.

Don’t forget there is going to be testing happening at WordCamp US. If you are attending, please sign up to help with the tests or come along and discover Gutenberg for yourself. We’ll be sure to post here the findings.

Gutenberg Usability Testing at WordCamp US

Hello folks! We’re going to be running a Gutenberg usability testing station at WordCamp US, and are looking for volunteers to help staff the testing booth throughout the conference.

Volunteers will:

  • Welcome people interested in testing Gutenberg.
  • Set up testers with the Gutenberg test survey, the Gutenberg testing site, and start the provided screen recording app.
  • After the test is complete, save the test recording and reset everything.
  • Chat with testers about their experiences and their thoughts on Gutenberg, taking notes where possible.

Shifts are a half-hour each and you can sign up for as many as you think you can commit to. If you’re interested and available, you can sign up here:

https://docs.google.com/spreadsheets/d/1GxtoZT3ztCf3NzpXbcGEP8zfWczwvceW-tpEDSVZ0Go/edit?usp=sharing

We’ll be using pre-set tests. Folks will have limited time and attention, so we want to get them in and out of the booth in a timely manner. For more information, check out these previous posts from @annaharrison:

Hope to see you there!

+make.wordpress.org/core
+make.wordpress.org/design
+make.wordpress.org/community

#gutenberg, #wcus

Testing Flow in Gutenberg: Instructions for how to contribute to usability testing

The new editing experience is now ready to be tested! In this round of usability testing, we invite anyone from the WordPress community to either complete a test, or moderate an observational usability testing session. We have worked hard to make the tests simple to administer, so you can contribute even if you have zero usability testing experience.

How you can help!

  1. Run through one of the three usability tests yourself (A, B C)
  2. Help others run through one of the three usability tests
  3. Recruit your [mother | sister | partner | grandfather | child | puppy | entire social media network] to run though one of the three user tests

What feedback are we looking for?

We welcome all kinds of feedback (our doors are always open, join the conversation in #core-editor on the core WordPress Slack). To make sure we get a diverse range of perspectives, our key focus is to deploy the user tests to a wide, global audience. In particular, we are really keen to reach participants outside of the WordPress community.

About the test

There are three usability tests that you can choose from. The tests are almost identical, except for the complexity of the task that you will be asked to complete. Each test scales in time to take and difficulty. You are free to complete any of these tests, irrespective of whether you have prior WordPress experience or not.

Each usability test consist of three sections:

  1. Part 1 asks you some general questions about your experience with using WordPress
  2. Part 2 asks you to complete a task using the Gutenberg editor
  3. Part 3 asks some questions about your editing experience. You also have the option to upload your screen recording and answer some questions about the video footage in this section

Running the usability test

If you are new to usability testing, please have a quick look at our Guide to observational usability testing. There are some handy tips that will help you run a fun usability testing session. We also have a quick Guide to screen recordings for those who have not done that before.

In order to complete the usability test, you will need to set up a few things:

  1. Get your hands on a device (laptop, tablet, desktop or mobile device)
  2. Ensure that you are familiar with the process for how to run a usability test
  3. Ensure that you know how to do a screen recording on your device
  4. Open two browser windows, one with the test instructions (either A, B or C) and one with the Gutenberg editor loaded with the Twenty Seventeen theme. Example setup here.
  5. Follow the instructions in the test
  6. Optionally, upload your screen recording
  7. Optionally, write up a blog post about your observations*

How to report your results

There are three ways in which you can report back your user test results:

  1. You can simply answer all the questions in the test instructions
  2. You can optionally analyse your screen recording footage by answering the video coding questions in Part 3 of the test instructions
  3. In addition, you are welcome to write up your test results in a blog post like this one. Share your link with us in the comments below and in #core-editor on the core WordPress Slack

If you are new to usability testing, you may find it confusing to figure out how to provide feedback. A really easy rule to follow is to articulate what the user did when they hit an obstacle. A common mistake for new user testers is to jump straight into solution or resolution mode. While we all love to solve problems (us too!!), doing this during the testing phase is likely to cloud our ability to uncover the underlying causes of the friction. For this reason, we prefer to keep identifying the friction separate from fixing the friction.

Get Involved

Run through one of the three tests yourself, set up a user testing session or join one at a WordCamp near you.

Gutenberg Usability Testing Plan – Feedback Needed

We are getting ready to roll out a new round of usability tests for Gutenberg mid-November. In this next round, we will focus on testing writing flow. We are also very keen to widen the net for participant feedback, including testing with participants who are not current WordPress users.

In order to make this happen we have drafted a usability testing plan – and we need your feedback and suggestions (in the comments below) before the next meeting in #core-flow on Thursday 9 Nov at 18:00 UTC. The next steps will be to test the user test on a small sample set (week of Nov 10th), refine at the #core-meeting on  Tuesday 14 Nov 17:00 UTC, and roll out to a wider audience starting from 15th Nov.

We will also have a usability testing section at WCUS, so if you are attending please drop by the and join in!

Proposed Usability Tests

To test the flow of writing, we propose to construct a three part usability test:

  1. General demographics:  including prior WordPress experience, age and device used. This information will help us to segment findings
  2. The main task: participants will be asked to re-create the post shown in an image. There will be three images to select from, mapping roughly to a beginner, intermediate and advanced level
  3. Follow up questions: a few questions about the experience of re-creating the post

Participants will be optionally invited to upload their screen recording, and answer a few questions about their video footage.

Testing Script

Question 1: Do you currently use WordPress?

  • Yes
  • No

Question 2: Would you describe yourself mostly as a…

  • Developer
  • Designer
  • Blogger
  • Business Owner
  • Other: ________

Question 3 (optional): How old are you?

  • Under 18
  • 18 – 30
  • 31 – 40
  • 41 – 50
  • 50 – 60
  • Over 60

Question 4: What device are you using?

  • Mobile phone
  • Tablet
  • Laptop
  • Desktop

Question 5: Let’s get set up!

Check that you have the following items ready as you will need them to complete the task

  • Open Gutenberg editor in a new browser window
  • Ensure that you have the Twenty Seventeen theme selected
  • Open the task image in a new window [ beginner | intermediate | advanced ]
  • Start a screen recording
  • Remember to talk out loud as you complete the task

Your task is to re-create the page that you see in the image using the Gutenberg editor. Remember to start your screen recorder, and talk out loud as you complete the task! When you are finished, continue on to answer a few questions about your editing experience.

Question 6:  Did the task take long or shorter than you expected?

  • It took longer than I expected
  • It took about the amount of time that I expected
  • It took less time than I expected

Question 7: Can you tell us why?

Question 8: Was the task easier or harder than you expected?

  • It was harder than I expected
  • It was about what I expected
  • It was easier than I expected

Question 9: Can you tell us why?

Question 10: Are you more or less likely to use the Gutenberg editor in the future?

  • I am not likely to use Gutenberg in the future
  • I am unsure
  • I am likely to use Gutenberg in the future

Optional section: screen recording analysis

It would help us out a lot if you could upload your screen recording and answer a few questions about your recording

Question 11:  Save your screen recording, and upload your file here…

Question 12: How long did it take to complete the task?

Question 13: Was the title added correctly?

  • Yes
  • No

Question 14: Was the quote added correctly?

  • Yes
  • No

Question 15: Was the image added correctly?

  • Yes
  • No

Question 16: Where were the main sources of friction?

Thank you so much for your help!

If you would like to be kept in the loop with the progress of Gutenberg testing, please leave us your email below and we will add you to the Make.WordPress user testing mailing list

Test Setup

The test can be completed by a participant, or used as a run sheet for an observational research session.

In order to complete the test, participants will need to:

  1. Get their hands on a device (laptop, tablet, desktop or mobile device)
  2. Ensure that they know how to do a screen recording on the device
  3. Load up the user test
  4. Follow the instructions in the test
  5. Upload the screen recording to the cloud
  6. Optionally, code the results from the screen recording
  7. Optionally, write up a blog post and tell us what you found

Reporting usability test results

There are three ways in which you can report back your user test results:

  1. You can simply answer all the questions in the test instructions. Remember to upload your screen recording at the end
  2. You can optionally analyse your screen recording footage by answering the optional questions in the final section of the test instructions
  3. In addition, you are welcome to write up your test results in a blog post

Get Involved

Have an idea on how to improve the usability testing plan? Have your say in the comments below before the next meeting in #core-flow on Thursday 9 Nov at 18:00 UTC. Once we have collected all feedback we will post a link to the test script and open the call for user testing!

 

#gutenberg, #usability-testing