WCEU usability test results: part two

This is the second and final batch of usability tests from WCEU. You can catch up on the first five here.

As you watch through have a think about a few things:

• What bugs or enhancements could be made from this?
• What insights do you gain in the way people 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/?
• Any ideas come up to make the editing experience even more useful?

Share anything you have as a comment and part two will be along in a few days.

Test six

Notes:
This was originally identified as an 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) test, but it’s unclear if it is from watching the test.

What role would you say matches you (you can say more than one

Small business owner

How often do you use WordPress

Daily

Go to “Posts -> Add New” to create a new post. Once the new editing experience shows, what are your first impressions?

I’m familiar with post edition

Add a Cover 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 your post, include a background image, and a message overlaying the image that reads, “The sweetest place on earth”. What was the experience like?

Quite easy, I wished there were more settings available to that block

Make the Cover block full-width. How was that?

The control are above the block, some users might search for that full-width and wide icons in the settings on the right. However I found them

Add an intro 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.” What was adding that text like?

Easy as paste

Now add a heading for the cupcakes section. What was adding a heading like?

Easy, as I can transform simple paragraph to heading

Under the Cupcake heading, add an image of cupcakes with some text along the right side of it. What was the experience of this like?

Easy as I already knew the Media and Text block

Add a sentence or two below to finish off the cupcake section. How was adding the sentences?

Just type and paragraph block appears magically

Add a new heading about cookies. How was adding a heading?

Easy, transform the text block to heading, and also nice that it is H2 by default

Under the Cookie heading, add a Media+Text block with an image of cookies on the right, and some text on the left side. What was that like?

Easy to switch side, with the icon controls, pretty straightforward

Below the Media+Text block, add a quote you heard someone say about this bakery. Maybe something like, “This bakery is almost as good as Grandma’s house!” How was adding a quote?

This doesn’t look like a citation, especially adding the name of the person who said it

At the bottom, add a horizontal divider. What was adding a divider like?

easy, I typed divider and it found it even though it’s called a separator. good job

Finally, include a link to the bakery site. Type the bakery name, and then link it to any website. How was the experience of adding a link?

Easy, if you know… the link icon is easily recognisable

Now, publish your post. What was the experience of publishing like?

I find it strange that we have to hit publish twice, even though I understand the need for confirmation. It already happened to me in the past, to believe I had published and find out hours later that my post wasn’t published, and the screen still on confirmation step.

Thank you for taking part in this test. Is there anything you’d like to share about the experience of creating content with Gutenberg?

I use regularly the block editor, with some adding (additional blocks), some of my clients even said it’s more intuitive than the classic editor. However, I cannot do “anything” with it and sometimes have to find workarounds, such as add sections with a builder such as elementor and then insert that part with the elementor block. Plain Gutenberg is a bit too basic for now, let’s what’s in the future

Is there any feature you’d love to see added you didn’t see?

I’m happy I learned yesterday at Matt’s Q&A about nested blocks. Too many things to list here, but basically drag and drop to move blocks around is functioning intuitively for now in my opinion.

Did the experience leave you wanting to use Gutenberg again?

I already use it every day

Test seven

Notes: Experienced as works on Gutenberg mobile editor.

What role would you say matches you (you can say more than one

Developer

How often do you use WordPress

Daily

Go to “Posts -> Add New” to create a new post. Once the new editing experience shows, what are your first impressions?

Looks clean and easy to understand where should I start adding content.

Add a Cover block to your post, include a background image, and a message overlaying the image that reads, “The sweetest place on earth”. What was the experience like?

Slightly weird that the cover block was added to the middle of the post. I think I’d expect it at the top.

Make the Cover block full-width. How was that?

Was easy and effective. The image did get full width.

Add an intro 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.” What was adding that text like?

Straightforward. I placed the mouse where I wanted the text to be added and noticed that there was this placeholder/box that was invited to start typing. And copy/paste worked fine even though I didn’t quite expected the text to be bold. I guess it was bold to start with from the form I copied it from.

Now add a heading for the cupcakes section. What was adding a heading like?

Kinda easy although I wasn’t sure how to stop editing in the paragraph block I added before. I ended up trying to click outside the block to lose the input focus. I expected the click below the paragraph block to introduce that placeholder again, like before.

Under the Cupcake heading, add an image of cupcakes with some text along the right side of it. What was the experience of this like?

It was OK I guess even though from the instructions it wasn’t super easy to know that this is actually a different block, unless you know about the “Media & Text” block already.

Add a sentence or two below to finish off the cupcake section. How was adding the sentences?

That was super easy, placed the mouse underneath the image+text box and clicked and started writing. Very intuitive.

Add a new heading about cookies. How was adding a heading?

I knew the drill from before, I had to add a heading block from the “+” button at the top left.

Under the Cookie heading, add a Media+Text block with an image of cookies on the right, and some text on the left side. What was that like?

It was easy. My eye went to that format toolbar at the top of the block and the icon about which goes first (image or text) was quite intuitive and it worked.

Below the Media+Text block, add a quote you heard someone say about this bakery. Maybe something like, “This bakery is almost as good as Grandma’s house!” How was adding a quote?

Pasted text into a paragraph and it is already bold and yeah, not sure how to make it look like a quote.

At the bottom, add a horizontal divider. What was adding a divider like?

Was OK, adding a block for it.

Finally, include a link to the bakery site. Type the bakery name, and then link it to any website. How was the experience of adding a link?

Kinda OK I guess, It was not easy to get the website URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. I ended up copying it from the preview tab address and edit it to remove all the stuff at the end of the URL.

Now, publish your post. What was the experience of publishing like?

Straightforward, I guess. I actually just updated the post because I had published it at the first step.

Thank you for taking part in this test. Is there anything you’d like to share about the experience of creating content with Gutenberg?

No, thanks.

Is there any feature you’d love to see added you didn’t see?

Placeholder box under all blocks.

Did the experience leave you wanting to use Gutenberg again?

Yeap, would like to use it again.

Test eight

Notes: Recording starts part way through the test

What role would you say matches you (you can say more than one

Small business owner

How often do you use WordPress

Daily

Go to “Posts -> Add New” to create a new post. Once the new editing experience shows, what are your first impressions?

It’s a mostly clear screen, immediately there is a tooltip appearing to guide my next interaction. It’s self explanatory; the words used are clear, unambiguous and in plain English. 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 familiar anyway 😉

Add a Cover block to your post, include a background image, and a message overlaying the image that reads, “The sweetest place on earth”. What was the experience like?

Very straight forward. The previous tooltip makes it obvious where to find the ‘add new block’ functionality. The editor is very intuitive (whether that’s because of previous use of WordPress or because of general understandability of the icons used within it).

Make the Cover block full-width. How was that?

As a newbie to blocks, it took a few seconds to find the correct option. The one I initially chose (Wide Width) was slightly confusing – but only because I hadn’t hovered over the next option of full width. I’d call that user error 😉

Add an intro 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.” What was adding that text like?

Easy. Again, the iconography is simple to understand and the naming conventions used for blocks is easy to understand.

Now add a heading for the cupcakes section. What was adding a heading like?

Again, easy. Being able to search for blocks (when you know what block you want to use) makes this an easy task – to follow and complete.

Under the Cupcake heading, add an image of cupcakes with some text along the right side of it. What was the experience of this like?

Not as straight forward this time, as I rushed into adding an image without realising that a specific block type exists for this particular scenario. Although when searching for an image block the one I required did get displayed, it was me rushing and not actually looking at what was on offer.

Add a sentence or two below to finish off the cupcake section. How was adding the sentences?

That was easy to do, although the three icons to the right of the screen didn’t offer me a paragraph block (or at least I don’t recall being offered one), so I had to search for it. It makes me wonder what decides/dictates which blocks are in the ‘quick access’ area.

Add a new heading about cookies. How was adding a heading?

Easy. Using the quick-access icons makes it faster.

Under the Cookie heading, add a Media+Text block with an image of cookies on the right, and some text on the left side. What was that like?

Having used the media & text block once before, this was now an easier exercise to do; and the icons to change the layout made it really obvious about how to do this.

Below the Media+Text block, add a quote you heard someone say about this bakery. Maybe something like, “This bakery is almost as good as Grandma’s house!” How was adding a quote?

Fine, no problems – easy, logical.

At the bottom, add a horizontal divider. What was adding a divider like?

Straight forward to achieve. Using blocks a few times now helps reinforce the iconography used and the additional options that are provided in the right-hand panel. The consistency of layout helps massively.

Finally, include a link to the bakery site. Type the bakery name, and then link it to any website. How was the experience of adding a link?

I probably was overcomplicating things here, looking for a specific block rather than simply adding text and hyperlinking to the website.

Now, publish your post. What was the experience of publishing like?

No problems, seamless, guided through (but accept that I could turn off the pre-checks). Simple to do and achieved.

Thank you for taking part in this test. Is there anything you’d like to share about the experience of creating content with Gutenberg?

As a first time Gutenberg user, the blocks are simpler to use than I was expecting. As I use Divi more than the block editor for my websites I was apprehensive about using them – but I think that was unfounded, as they’re clearly simpler to use (although not simple in their functionality) than I was expecting.

Is there any feature you’d love to see added you didn’t see?

Nothing that I can think of at this time.

Did the experience leave you wanting to use Gutenberg again?

Yes, absolutely. I need to explore Gutenberg more and become more familiar with it.

Test nine

What role would you say matches you (you can say more than one

QA

How often do you use WordPress

Never used before

Go to “Posts -> Add New” to create a new post. Once the new editing experience shows, what are your first impressions?

Tutorial is nice Easy

Add a Cover block to your post, include a background image, and a message overlaying the image that reads, “The sweetest place on earth”. What was the experience like?

Quite easy to find and straightforward.

Make the Cover block full-width. How was that?

Quite easy again was not hard to find even through I had no idea where it is

Add an intro 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.” What was adding that text like?

Intuitive

Now add a heading for the cupcakes section. What was adding a heading like?

very very easy

Under the Cupcake heading, add an image of cupcakes with some text along the right side of it. What was the experience of this like?

good

Add a sentence or two below to finish off the cupcake section. How was adding the sentences?

not good but check video & audio

Add a new heading about cookies. How was adding a heading?

easy

Under the Cookie heading, add a Media+Text block with an image of cookies on the right, and some text on the left side. What was that like?

it was harder to find at first but once I found it it was very easy

Below the Media+Text block, add a quote you heard someone say about this bakery. Maybe something like, “This bakery is almost as good as Grandma’s house!” How was adding a quote?

in this block with the citation when I click enter i new line while in the other blocks they get saved

At the bottom, add a horizontal divider. What was adding a divider like?

not sure if I added what was wanted here

Finally, include a link to the bakery site. Type the bakery name, and then link it to any website. How was the experience of adding a link?

Easy

Now, publish your post. What was the experience of publishing like?

great

Thank you for taking part in this test. Is there anything you’d like to share about the experience of creating content with Gutenberg?

It was very easy but sometimes I had to look for stuff a bit longer. Maybe because I had never used it before.

Is there any feature you’d love to see added you didn’t see?

No

Did the experience leave you wanting to use Gutenberg again?

Yes

Test ten

Notes: Not much talking by user in this video

What role would you say matches you (you can say more than one

Developer

How often do you use WordPress

Weekly

Go to “Posts -> Add New” to create a new post. Once the new editing experience shows, what are your first impressions?

Nice and clean look.

Add a Cover block to your post, include a background image, and a message overlaying the image that reads, “The sweetest place on earth”. What was the experience like?

Quite a natural flowFlow Flow 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

of adding a background image text with text

Make the Cover block full-width. How was that?

Not too great. I find it hard to find the right button to make the block full-width. Especially when the focus is on the text inside the Cover block. Also the popover from the top of the page was blocking the full-width button

Add an intro 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.” What was adding that text like?

Good. Easy.

Now add a heading for the cupcakes section. What was adding a heading like?

Slightly confusing when trying to add a Heading to the bottom of the page

Under the Cupcake heading, add an image of cupcakes with some text along the right side of it. What was the experience of this like?

When selecting for a right block, I thought I can use the Image block to have some text on the right side. And then I realised that I might need to find another block to achieve that.

Add a sentence or two below to finish off the cupcake section. How was adding the sentences?

Not too bad.

Add a new heading about cookies. How was adding a heading?

OK. Not too bad.

Under the Cookie heading, add a Media+Text block with an image of cookies on the right, and some text on the left side. What was that like?

Not too bad. But was wondering whether alignment setting is on the side panel or on the popover of the block

Below the Media+Text block, add a quote you heard someone say about this bakery. Maybe something like, “This bakery is almost as good as Grandma’s house!” How was adding a quote?

Not too bad now that I learned that the best way to add a block at the bottom is to press Enter

At the bottom, add a horizontal divider. What was adding a divider like?

It was OK. But was wondering about why the divider/separator was so short by default.

Finally, include a link to the bakery site. Type the bakery name, and then link it to any website. How was the experience of adding a link?

Not too bad!

Now, publish your post. What was the experience of publishing like?

Nice and intuitive.

Thank you for taking part in this test. Is there anything you’d like to share about the experience of creating content with Gutenberg?

It wasn’t too bad. There are some quirks, but I guess we can get used to it.

Is there any feature you’d love to see added you didn’t see?

I find that buttons/panels that only shows when mouse hovers over can be confusing. I would suggest to have a mode that shows all possible buttons on the editor that we can toggle on and off might be helpful.

Did the experience leave you wanting to use Gutenberg again?

Yes.

#wceu-usability-testing #usability-testing #gutenberg