Mark Uraine 12:58 pm on June 4, 2019
Tags: gutenberg ( 45 ), usability-testing ( 17 )

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 GutenbergGutenberg The 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/. These tests are a way to keep track of Gutenberg’s progress and improvements. It also helps reveal any additional UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. 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.).

Log in.
Create a new post.
Give your post a title and add one sentence.
Add two images side-by-side.
Add a YouTube video (https://www.youtube.com/watch?v=-PcrLWkxZSk).
Add a caption to the video you added.
Swap one of your previously added images with another image.
Add an image on the left and some text on the right and a paragraph below it.
Move the video to the bottom of the content.
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 slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..
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

Mark Uraine 5:38 pm on June 13, 2019

VIDEO 1

01:06 – Reads the TIP. Yay!
02:19 – User initially doesn’t actually add an image to the blockBlock Block 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..
02:42 – Tries to layout the Image block without an image.
03:37 – Can’t get Image blocks on top of each other.
04:04 – Tries to paste YouTube link in an Image block.
04:23 – Ends up adding the link as a text link in a paragraph block.
04:37 – Can’t add a caption to the link… so the next step fails too.
05:22 – After changing to a Heading block, still can’t add a caption.
07:23 – Added an image finally to the Image block so could swap it out with another.
09:03 – Added an image with text on right… kinda. Appears to just be trying to get through the list of tasks.
09:50 – Would like to have a tutorial on how to use GutenbergGutenberg The 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/.
Mark Uraine 6:11 pm on June 13, 2019

VIDEO 2

01:49 – Used WP before, but can’t remember much.
02:36 – Reads the TIP. YAY
03:43 – Thinks the blockBlock Block 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. highlighted is the only interface to add a block.
03:56 – Sorts through the paragraph block to figure out how to add another block.
04:00 – Wants to add a block, and completely doesn’t notice that the “Insert Before” or “Insert After” are referring to blocks.
04:30 – Almost adds a Gallery block, but because the way the test is worded, they only add an Image block.
05:20 – Wants to select two images directly from the Media Library to add side-by-side.
05:36 – Hovering over the transform tool would be a great place to go to create a Gallery and add images side-by-side, but they don’t feel confident clicking it to see the options and moves away.
06:10 – The “Insert Before/After” still don’t register as block inserting.
06:51 – “Why is it so complicated?” when trying to move two images side-by-side.
07:10 – They got really close!
07:28 – Noticed the Transform tool option and got excited.
07:56 – Really likes a way to “drag and drop” these items on the page.
09:45 – Finds the video block and inserts the URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. Yay!
09:56 – Sees the caption spot easily and adds a caption.
12:14 – Doesn’t realize that they have a gallery AND an Image block still in use and floating. So things aren’t lining up.
13:25 – “How can I add text on the right? This is so annoying.”
13:40 – Found Media +Text block!!!
14:21 – Looks in block to try and make text smaller.
14:38 – Transforms the text to a heading instead.
15:39 – Tries to move video block down…
16:59 – Unhappy that the frontend didn’t match GutenbergGutenberg The 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/.
Mark Uraine 6:20 pm on June 13, 2019

VIDEO 3

00:57 – Doesn’t read the TIPS.
01:04 – Clicks immediately on the Inserter icon, but because they don’t see the Title blockBlock Block 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. under the TIP, they’re missing it.
01:38 – After closing the tip, they now see the Title block.
01:50 – Getting rid of the old “heading” was done by just highlighting the text and deleting it. But it didn’t delete the block.
02:09 – Looks into “Featured ImageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts.” to complete the add Image task.
02:37 – Without a consistent Inserter icon, they’re lost on how to add an image or anything else for that matter.
02:45 – Clicking the Inserter icon in the topbar worked for finding an image block.
03:14 – After adding one image, they make way to the block transform tool and sees Tiled Gallery to add another image.
03:28 – They’ve got two images side by side!!! YAY
03:41 – Goes back up to that consistent Inserter icon in the topbar to now add something related to videos.
03:57 – Finds YouTube!!!
04:11 – But link isn’t working.
04:39 – Looks like a problem with the script. I need to include the httpsHTTPS HTTPS is an acronym for Hyper Text Transfer Protocol Secure. HTTPS is the secure version of HTTP, the protocol over which data is sent between your browser and the website that you are connected to. The 'S' at the end of HTTPS stands for 'Secure'. It means all communications between your browser and the website are encrypted. This is especially helpful for protecting sensitive data like banking information. portion of the video link.
05:08 – Finds the caption below the video and adds it. YAY
05:25 – Tries to right-click to swap an image. Didn’t work, so deletes an image before adding another.
06:28 – Can’t quite figure out how to add text next to an image.
06:43 – Floats image and uses paragraph block.
07:00 – Hits “enter” a few times to move the paragraph block down below the image that is floating.
08:04 – Struggling to figure out how to move the video block to the bottom of the post.
08:22 – Finds the arrows to move the block.
Mark Uraine 6:31 pm on June 13, 2019

VIDEO 4

02:32 – Clicks on “posts” to begin editing new post.
03:11 – Chooses an existing post from the list to begin editing.
03:26 – Now sees the “Add New” option for posts.
06:09 – Select “inline image” from blockBlock Block 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. toolbar to insert image.
06:33 – Wants to choose two images for insertion but can’t.
07:05 – By inserting “inline images” they got them side by side quite easily. Unfortunately, they aren’t in their own block.
07:39 – Doesn’t know how to resize the inline images and it’s confusing.
08:41 – Goes back to the block’s toolbar to see if there’s a place to add a video now.
09:09 – Clicks the link icon and that’s as close as they get.
09:25 – Seems afraid to click the “Media” menu item because they know they’ll leave the post.
09:38 – Still doesn’t know how to add a video.
10:05 – Not seeing TIPS may have contributed to this?
10:39 – Really struggles to just copy a link from the instructions.
11:02 – Goes back to the block and clicks the link icon to add the YouTube video link to that popover.
11:12 – It completely jacks up the sentence.
11:28 – “This is a mess.” In reference to the page layout.
12:33 – Because everything is within this one block, they’re completely confused how to do anything else in the instructions.
14:22 – Ended up quitting early because of difficulty.
Mark Uraine 3:45 pm on June 14, 2019

As some of these videos revealed, it’s difficult to identify where to add a new blockBlock Block 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.. Especially if the user is trying to quickly get through some tasks.

A recent enhancement was integrated showing the Inserter icon on the last paragraph, always. This should help surface this action.
Andrea Fercia 7:47 pm on June 25, 2019

Thanks for detailing your fundings. I’d like to have the opportunity to discuss together (design + a11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility)) some of the most evident things emerging from these videos.

To me, one thing that emerges from all the videos is that all the 4 users (worth reminding they’re first-time GutenbergGutenberg The 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/ users) are very focused on the central part of the screen. Their focus is almost exclusively on the blockBlock Block 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.. When they have to find something, they first look in the block UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing., then maybe at the top bar. All of them rarely look at the SidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme..

The most evident case is in Video 2: around min 14:00 user struggles to make the media + text font-size smaller. The UI control for this task is there in the sidebar on the right. User doesn’t see it. The user ends up finding the command to transform text to a heading. The heading text looks smaller thus the user is happy with that. Actual result: a random, non-semantic, hierarchically wrong heading in the content.

Maybe I’m biased, but it’s clear to me the sidebar, which is fully visible there on the right, is often ignored even when users can actually see it. Considering the Sidebar is a huge problem for users with accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) need, I’d tend to think it’s worth re-evaluating the whole idea of sidebar.
- Mark Uraine 10:54 pm on June 25, 2019
  
  Great feedback, Andrea! Thanks for sharing. You definitely raise a good point about the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. here. As you noted most of these users are first-time WP users, and so I’d imagine most of the UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. is unfamiliar.
  
  In the future, I can see expanding the sidebar to contain global styles as well, and in that case, it might conform to “Site”, “Document”, and “BlockBlock Block 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.” as tabs at the top.
  
  I know there’s some discussion going on about this, so hopefully we can find a great solution that helps new and experienced users alike.
Andrea Fercia 6:43 am on June 26, 2019

Thanks for your feedback Mark. To further clarify, I do see the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. as a good place for “global” settings related to Site and Document. Having these settings after the blocks in the source order matches a natural mental model many users have e.g. write post > settings > publish.

Instead, placing the blockBlock Block 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. settings in the sidebar appears to be counterintuitive for these users. And it’s one of the main accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) barriers in GutenbergGutenberg The 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/ as previously outlined in:
https://github.com/WordPress/gutenberg/issues/15314
https://github.com/WordPress/gutenberg/issues/15322
https://make.wordpress.org/accessibility/2018/10/29/report-on-the-accessibility-status-of-gutenberg/
https://github.com/WordPress/gutenberg/issues/5694
https://github.com/WordPress/gutenberg/issues/11581

Welcome

Weekly Meetings (Calendar)

Gutenberg Usability Testing for May 2019

Testing Script

Videos

Feedback

Welcome

Weekly Meetings (Calendar)

Testing Script

Videos

Feedback

Share this:

Site resources