Mark Uraine 12:22 am on May 8, 2019
Tags: gutenberg ( 45 ), usability-testing ( 17 )

Gutenberg Usability Testing for April 2019

To keep a steady pulse on the user experience 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/, 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 ExcerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox..”

In a new tab in your browser, review the mockup at: https://cldup.com/SAtxaMGvA0.png
Now go back to: https://wpuxtesting.com/wp-admin
Log in with
username: XXXX
password: XXXX
Find and open the “Moby Dick Excerpt” draft page.
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.
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

While watching the above videos, did you have any findings or key takeaways?
Do you have any thoughts on how this script might be improved?
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

andraganescu 12:06 pm on May 10, 2019
These videos are great @mapk , having them monthly is an amazing feedback loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop.! Here are my few notes:

1st notable thing, I’d say, allign wide and allign full are a mistery, I loved how once a user thought the allign full button in 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. toolbar is for positioning the current block to the top of the page, because the icon does look like it’s doing that if you’re in a certain mindset.
- the main problem, i’d say, is that these concepts do not exist in word processors as desktop publihing has constantly been about resizeable boxes, less about floats, e.g. I can obtain the same effect in google docs by using the ‘break text’ wrapping option for the image, resizing the image by its handles and then changing the page right and left indents.
2nd, when trying to figure out columns a notable attempt was to drag a paragraph on top of another to create columns – that would actually be cool, as well as the ability to select multiple blocks and transform them into columns

3rd, I feel like the less savy the more they wanted drag and drop
- from this small batch it seems that tech enabled people do handle the GTB ui good, while the less computer acclimatized struggle with the minimalistic approach 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., by that I mean:
- less tech enabled get the “contextual” part of the UI harder
- in these 3 videos, it looks like the most confusing part is that actions on the same item are spread all over the screen (block toolbar and block inspector)
Mark Uraine 4:07 pm on May 10, 2019
Sharing some of my observations.
- Dragging and dropping is a common experience people rely on when moving content around in the editor.
- Adding images or text side-by-side requires some creative thinking. The Column 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. isn’t always the obvious solution.
- Adding background color behind text blocks beyond just the Paragraph block is desired.
- Two of the three users completely skipped the tips at the beginning of 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/. The one who read the tip ignored all others.
Tips often get in the way of completing tasks when running through a usability test, so unfortunately, that’s expected in these videos.
Mark Uraine 6:39 pm on May 10, 2019

VIDEO 1

07:25 – User attempts to drag two paragraphs next to each other to create columns.
09:06 – It was obvious to click the + icon between blocks to add media.
09:13 – Clicking the Media Library button opened the upload tab, and not the actual media library. This could cause confusion.
10:04 – Wanting to add two images side-by-side and ends up using the Column 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. to make it happen.
10:45 – It’s not immediately clear what to do after adding the column block. Just a blinking cursor. How does one add an image? The nested block borders PR will help remedy this.
11:58 – Getting the hang of the forward slash shortcut!
12:29 – User goes back to the 2 columns of text and inserts a new Column block. Perfect!
12:48 – Begins changing the background color and text color of the paragraph first. It appears easy to do.
13:52 – Adds a new Column block for the text now.
15:22 – Because the content is centered in the mockup, user thinks they need to center each block, but shows confusion because the actual block can’t be centered, just the text within it.
16:45 – A lot of text placeholders keep showing up which causes some unwanted spacing and confusion.
Mark Uraine 6:41 pm on May 10, 2019

VIDEO 2

02:50 – This video was created before cleaning up the existing page to start the user fresh. Unfortunately, the user already has all the content in place from the last user test. It was still interesting to watch.
04:10 – After looking at the mockup, the user attempts to move the title over rather than making the image wider.
04:22 – User wants to make the two side-by-side images bigger and begins to expand each one instead of making 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. wider.
04:52 – User feels the text 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/ is too big and doesn’t match the mockups, so they decrease the font size.
05:00 – Looks for the font size adjustment in the block toolbar.
05:41 – Wants to make the Paragraph block narrower instead of making the images and other elements wider.
07:36 – “It would be nice to expand the text boxes themselves.” User wants to drag the block wider or narrower.
09:15 – User is unclear how to add a Paragraph block with a background color. Doesn’t know if it’s a Heading block, a Quote block, an Image block, or what.
10:25 – Wants to change the font-size of a Heading, but doesn’t see the option because they’re looking for a setting similar to the Paragraph block. In the Heading block, you just change the H1, H2, etc. selections.
10:40 – Because the user chose a Heading block for this, they cannot add a colored background.
11:09 – Referring to the Heading block… “I’d like it to be easier to add a colored background.”
Mark Uraine 6:42 pm on May 10, 2019

VIDEO 3

03:13 – While reviewing the media in the Media Library the user is confused about how to add these to the page. This is because they’ve exited the page and are now in the Media Library instead.
03:57 – Chooses to use a Gallery 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. to add the single images to the page.
04:38 – User doesn’t see how to move an image block up to the top.
06:08 – Doesn’t know how to split a paragraph block so that they can add images between the text.
07:47 – Dragging and dropping isn’t working either for them. But here’s another case where the user wants to drag and drop content.
08:24 – Tries to figure out how to place two images side-by-side.
08:43 – User struggling to resize an image.
09:36 – Doesn’t see a resizer in the corner of an image in a Gallery block, and would like one.
09:50 – BUG: Interesting effect that has an image z-indexed above the toolbar of a block below it.
11:02 – The user struggles to place text side-by-side. User is hoping there is a block setting that allows this, but it requires creating a new Column block instead.
arzofars 3:09 pm on May 26, 2019

nice work. thank you mark. please after update send a notification for the WordPress user. we have us in بلاگ پین‌ورک

Welcome

Weekly Meetings (Calendar)

Gutenberg Usability Testing for April 2019

Testing script

Videos

Feedback

Welcome

Weekly Meetings (Calendar)

Testing script

Videos

Feedback

Share this: