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

Log in with username demo and password pass037538
Give your post a title and add one sentence.
Add two images side-by-side.
Add a YouTube video.
Click “Preview” to check your work so far.
Go back to editing and add a caption to the video you added before.
Add an image on the left and some text on the right and a paragraph below it.
Move the video or images from one part of the content to another (i.e. from the top to the bottom or vice versa).
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”>

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

Session 1 — VideoPress
Session 2 — VideoPress
Session 3 — VideoPress
Session 4 — VideoPress
Session 5 — VideoPress
Session 6 — VideoPress
Session 7 — VideoPress
Session 8 — VideoPress
Session 9 — VideoPress
Session 10 —VideoPress
Session 1 — VideoPress
Session 2 — VideoPress
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

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:

General demographics: including prior WordPress experience, age and device used. This information will help us to segment findings
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
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?

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?

Question 14: Was the quote added correctly?

Question 15: Was the image added correctly?

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:

Get their hands on a device (laptop, tablet, desktop or mobile device)
Ensure that they know how to do a screen recording on the device
Load up the user test
Follow the instructions in the test
Upload the screen recording to the cloud
Optionally, code the results from the screen recording
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:

You can simply answer all the questions in the test instructions. Remember to upload your screen recording at the end
You can optionally analyse your screen recording footage by answering the optional questions in the final section of the test instructions
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!