FSE Program Custom 404 Page Testing Summary

The fourth call for testing is already underway so join #fse-outreach-experiment in slack and/or subscribe to this Make blog and stay tuned for more. 

This post is a summary of the third call for testing for the experimental FSE outreach program. Thank you to everyone who participated, whether through testing directly or sharing the call for testing with others. It all helps! Special thanks to the following people:

How far can one go in creating a custom 404 page? 

The following is a screenshot of the very fun, custom 404 page that @critterverse made solely using the FSE experience and her amazing design skills. While not all of us have the knack for design that she does, it’s exciting to see what’s possible without touching code:

Image showing a customized 404 page with an arctic theme with penguins, a shipwreck, and an iceberg.

High-Level Feedback

Here’s what a few folks had to say about the overall experience that’s important to keep in mind as you read the rest of this post:

I didn’t encounter anything that was broken, though several aspects of it could be significantly improved. Everything outlined in the testing 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
seems to work as it should, if users can ever find it. It is going to be a real challenge to make the interface spectacularly simple enough for ordinary users to feel comfortable knowing when and how to create their own template parts.

Sarah Gooding from this WP Tavern article.

In my head, I know that we are inserting blocks to things other than the contents that goes into 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. editor, but in reality, my instinct still tells me to look for something specific to do things, rather than inserting a block. Mainly I think because you need a time to get used to. But starting to feel that there are no visual feedbacks (e.g. different border colour, diffrent panel colour, different look on 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. panel) within the editor to distinguish which are the content blocks, and which are FSE specific blocks (like template part block).

@toru in this comment.

To sum it up, most of the difficulties I had during the test are the same ones I still experience when using 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/ pretty much daily. First and foremost, getting often lost without any visual reference over layout structure, hierarchy, or block boundaries. These range from “it’s all white, where am I?” to “what block am I really editing now?”. Also, I still find it rather annoying that when I want to add a new block below an existing one I have to do a bit of treasure hunting to find the exact point where the magic [+] will appear, opening a new world of possibilities, or just the next block.

@piermario in this comment.

The things that were most confusing in early tests are becoming more comfortable. The thing that remains still a little confusing is the plus icons for adding elements. There seems to be a pattern to which types are used and where they are placed, but I have trouble seeing what that pattern is.

@chanthaboune in this comment.

These last two comments underscore a high-level usability item that, if improved in either the block editor or site editor, would make a big difference across the collective experience. For now, I encourage those interested in confusion around the + button to follow or chime in on this relevant and comprehensive GitHub issue.

Repeated Feedback: Improving saving & enable the option to preview

These are two big themes that have been carried over from every single test that’s been done with the Outreach Program resulting in a feature on the High Level Feedback post. To better highlight how they’ve been repeated, they have been merged into this section with only new issues or enhancement requests shared below:

Once the design is saved, there is no confirmation but the button is no longer operable. The interface could communicate this better…Unfortunately, the preview looked nothing like the display on the frontend, but I assume that is still in progress. After trying multiple sources, I found that embeds didn’t work and some of the block styles were off.

Sarah Gooding from this WP Tavern article.

It was a little confusing when it asked if I wanted to save individual parts of my work. I think at that point, I did a little thinking through the experience and landed on “oh this is like changing the slide vs slide template in Keynote”. It’s hard to know how many people will get to that conclusion.

@chanthaboune in this comment.

Template Part Creation Improvements

Because this call for testing required one to remove and then create a new Template Part, this became a focal point for a variety of feedback items. For example, the current experience doesn’t make it clear how to set a name for a new Template Part after one is created causing some testers to create multiple template parts without realizing what was happening. Tied to this, the new Template Part name doesn’t propagate across the rest of the interface after being named making it a particularly confusing experience to know if a part has actually been created. The following issues capture this collective feedback into distinct areas:

Finally, there was general feedback around how it’s necessarily clear that one entering a true context shift as the current experience editing and creating Template Parts is almost too seamless. Making this context switch clear has been flagged during other calls for testing and is being explored in this previously opened issue

The experience of editing a Template Part really does feel a bit like popping the hood, which is something a dramatic context shift could help emphasize even further. The concept of a context shift could eventually be applied to the experience of switching between editing regular content and a Template as well.

@critterverse in this post.

It seemed like you should be able to add a new Template Part in the same way that you can add a new Template, directly from the FSE sidebar.

@critterverse in this post.

When adding a new title I would expect to see some kind of dynamic change so that I see the new name in the toolbar even without updating the design.

@paaljoachim in this comment.

When adding and naming the Template part, I can’t tell if the part has been saved and has the new name as there is no visual sign that a part of the template is there at all. That can be very confusing. I ended up with four Parts of template blocks, all stacked up and pretty much overlapping.

@piermario in this comment.

One aspect of it that could be improved is that new Template Parts don’t save until you click “Update Design.” If you move away from the block and continue other parts of the design, it appears that it hasn’t saved and you may be tempted to create it again, as I was.

Sarah Gooding from this WP Tavern article.

List View enhancements

Thus far, the List View is proving to be a helpful navigation tool for making one’s way around the editor. It’s also proving to be a point of confusion mainly due to missing expected functionality, including the ability to drag & drop and remove items directly from the view. Thankfully, expanding the capabilities of the List view is being explored in this issue already including the ability to drag & drop

The List View was confusing to me, there were Template Parts I thought hadn’t saved properly that suddenly appeared there, they look like duplicates and it didn’t seem possible to delete them.

@lmurillom in this comment.

Quick sidenote about the list view: it would be great if this view had the 3 dots menu for quick actions on items, and if it would allow you to reorder or drag blocks.

@piermario in this comment.

The List view is awesome – so useful for Navigating and visualising. Needs power features including a re-order and delete feature for each block.

@get_dave in this comment.

Navigation Block

Thanks to this test calling for deeper usage of the Navigation Block, there was lots of great feedback gathered around both current pain points and feature requests to make it an even more robust block: 

Some of what was brought up also relates to overall work around improving the Link 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., which is currently in the process of going through a lovely design iteration

Navigation Block – the two placeholder options don’t look like call to action buttons elsewhere in the UI. I understand they need to be in keeping with the Nav items style but it wasn’t clear they were options without actually reading the text. Could we improve this?

@get_dave in this comment.

Usability

This round of feedback uncovered further areas of usability improvements while touching on current known issues including this issue on distinguishing template parts, this issue on how best to create a pattern of interaction for editing template parts in different editing contexts, and this issue discussing how hard it is to tell the difference between what one is editing. With these being known areas to improve, what follows are generally new areas or issues to be aware of:

Now that there are starting to be many possible configurations of toggled sidebar states with the addition of Full Site Editing, I can imagine wanting to revisit some keyboard shortcuts to make the open/closing behavior of all the sidebars possible through similar, easy-to-remember shortcuts.

@critterverse in this post.

I lost track of the Settings sidebar a couple of times when I had been editing Global Styles because the advanced block controls that usually appear in the sidebar weren’t automatically shown when a block was selected.

@critterverse in this post.

The overlap between template parts and reusable blocks might cause users to have trouble differentiating them.

@priethor in this comment.

The “Navigation Toggle” refers to the WordPress icon in the top left corner of the page, but as a new user I would expect that to take me back to the dashboard. The naming doesn’t seem clear and I had to look up what was meant by Navigation Toggle.  

Sarah Gooding from this WP Tavern article.

General enhancements & feature requests 

As with every call for testing, it’s not just for finding bugs! It’s also important to hear about features that people reach for and find are missing. This section is a “catch-all” to cover all additional features that were reported that didn’t nicely correspond with a particular block or categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.

While trying to build something for the test (but also when I currently use Gutenberg ) I often find myself hovering on the block icon several times, in order to double-check what kind of block I’m interacting with. In this case, the tooltip says “change block type or style”, which makes sense, but doesn’t help in immediately identifying a block type. Has there ever been an option for a visible label near blocks?

@piermario in this comment.

I would have expected to be able to save a Template Part independently of the Update Design button (top right). I’ve been conditioned by Gutenberg to see this as the main “update” / “save” button and I’d expect that to save my whole page (including changes to Template Parts). But I’d expect the Template Part to have it’s own “Save” UI.

@get_dave in this comment.

Site Editor Crashing

It’s worth noting that two people ran into a still open bug report that causes the Site Editor to crash when selecting a template part after selecting the navigation block

When I was clicking around the newly saved Template Part, the editor suddenly went white but afterwards I wasn’t able to reproduce.  

@lmurillom in this comment.

#fse-outreach-program, #fse-testing-summary, #full-site-editing, #usability-testing

FSE Program Testing Call #3: Create a fun & custom 404 page

This is the third call for testing as part of the Full Site Editing Outreach Program. For more information about this experimental program, please review this FAQ for helpful details. To properly join the fun, please head to #fse-outreach-experiment in Make Slack for future testing announcements, helpful posts, and more will be shared there. 

Feature Overview

Have you ever experienced a particularly delightful 404 page? Maybe it made you laugh or it was built in a way that made it super easy to find your way back to where you needed to be on the site. Currently, this is a part of one’s site that can only be altered with code and provided by the theme causing many of us to be unable to add some extra joy into the universe with helpful, fun 404 pages. 

With Full Site Editing though, this is now within our grasps to make our own. This test explores doing exactly that with the option to build a simple 404 page through template editing or to really dive in to make something unique. If you choose to get super creative, please share a screenshot in your comment so we can all marvel at what you’ve made. For inspiration, here’s an example I made:

Image showing a silly 404 page that says, "Oh no! 404. Where'd you go? I miss you so" with some additional emojis and a search field.

Testing Environment 

While there’s more information below to ensure you get everything set up properly, here are the key aspects to have in place with your testing environment: 

  • Use a test site. Do not use a production/live site. You can follow these instructions to set up a local installLocal Install A local install of WordPress is a way to create a staging environment by installing a LAMP or LEMP stack on your local computer. or use a tool like this to set up a development site
  • Use WordPress 5.7 (downloadable here).
  • Use the TT1 Blocks Theme. If you followed the first call for testing, you’ll need to double-check to make sure you’re using this theme!
  • 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/ 10.1.1 (latest version). 

Testing 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

Here’s a basic flow to follow when testing this specific feature. If anything doesn’t make sense, just comment below!

Important Note: 

While this call for testing is focused on testing a specific feature, you’ll likely find other bugs in the process of testing with such a betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. feature! Please know any bugs you find are welcome in your report for testing, even if they aren’t directly applicable to the tested feature. 

Setup Instructions: 

  1. Have a test site using WordPress 5.7. It’s important this is not a production/live site. 
  2. Install the TT1 Blocks theme by going to Appearances > Themes > Add New. Once installed, activate the theme. 
  3. Go to the website’s admin.
  4. Install and activate the Gutenberg pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party from Plugins > Add New. If you already have it installed, make sure you are using at least Gutenberg 10.1.1.
  5. You should now see a navigation item titled “Site Editor (beta).” If you don’t see that in your 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., you aren’t correctly using the Site Editing experiment. 


Testing Instructions:

Helpful Hint: As you go through this test, you might find the List View helpful while navigating between content.

Exploring the 404 template

  1. Navigate to the “Site Editor (beta)” view. This will automatically open the site editor to the template powering your homepage. 
  2. Open the Navigation Toggle and head to Templates > 404. This will take you to your site’s 404 page template.
  3. Using the List View, select the HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. Template Part and, using the three-dot toolbar menu, select “Remove 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 delete this.  
  4. From there, select the default Header Block that says “Nothing Here” and, using the three-dot toolbar menu, use the “Insert Before” option to add a block above. 
  5. Using your preferred method to insert a block, insert a Template Part Block and select the “New Template Part” option.
  6. Open the Block Settings for the new Template Part block and, under Advanced > “Title”, add in a custom title. For example, “404 Header”.
  7. When you’re done making the changes you want, select “Update Design” and go through the saving flow to save all changes. This should cause the new Template Part to reflect the title you chose.

Adding navigation and getting creative

  1. From there, make sure your focus is still within the new Template Part and add in a Navigation Block. You can choose whether to create a new menu or re-use a previous one.
  2. Add a few links including a link to a page that doesn’t currently exist. To do this, just start typing a title that doesn’t currently exist on your site. For example, “Help”. You’ll then see an option to create a draft page. Do this for at least one menu item. Remember to have fun with this! 
  3. Outside of the Navigation Block, add any additional blocks you’d like to in this new Template Part. For example, you can use the Social Icons Block, Search Block, Site Title, and more. Try to add anything that would help orient someone who got lost on your site.
  4. From there, edit the “Nothing Found” Header Block and Search Block to whatever you’d like. You can then add in anything you’d like including images, GIFs, etc. 
  5. When you’re done making the changes you want, select “Update Design” and go through the saving flow to save all changes.
  6. View your 404 page on your site by going to yoursiteurl.com/404 (replace yoursiteurl.com with your test site URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org). Notice that any items you added to the Navigation Block that are page drafts appear but are broken links. You should be able to still view the drafts since you are logged in as an admin. Note: this has been logged as a bug
  7. Return to the Site Editor and open the Navigation Toggle > Dashboard to view your wp-admin dashboard. Note: there’s a current bug that makes it so you can’t view Page Drafts meaning in the future this will be easier. 

Publish, review, and share

  1. Head to Page > All Pages and publish any that need to be. 
  2. Once more, View your 404 page on your site by going to yoursiteurl.com/404 and confirm any prior draft Pages now show up properly with correct permalinks.
  3. Share your experience in the comments below or in GitHub directly. You’re welcome to run through the experience multiple times to capture any additional feedback!

If you want to take this further, here are some extra items to explore:

  • Try adding in columns to your content! Columns are a powerful tool and it would be helpful to get feedback on the experience of using them in a real life scenario with site building.
  • Create a custom footer template part to replicate the process of creating a custom header template part.
  • Deeply customize the appearance of the page with custom colors, font sizes, and more. Here’s a quick video demonstrating some of what you can try.

Testing Video:

This video shows the testing flow after the initial testing setup is in place. Of note, this video purposefully does not go into depth in building out a 404 page in order to keep it concise. Don’t let this stop you from getting creative though when you’re testing!

What to notice:

Remember to share a screenshot of what you created if you’re up for it!

  • Did the experience crash at any point?
  • Did the saving experience work properly? 
  • Did the saving experience make sense when making changes to the Template Part vs the general content? 
  • What did you find particularly confusing or frustrating about the experience?
  • What did you especially enjoy or appreciate about the experience? 
  • Did you find that what you created in the Site Editor matched what you saw when you viewed your 404 page? 
  • Did it work using Keyboard only?
  • Did it work using a screen reader?

Leave Feedback by March 23rd, 2021

Please leave feedback in the comments of this post. If you’d prefer, you’re always welcome to create issues in this GitHub repo directly for Gutenberg and in this GitHub repo for TT1 Blocks. If you leave feedback in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, please do still comment below with the link. If you see that someone else has already reported a problem, please still note your experience with it below, as it’ll help give those working on this experience more well-rounded insight into what to improve. 

#core-editor, #fse-outreach-program, #fse-testing-call, #full-site-editing, #gutenberg, #usability-testing

Gutenberg Usability Testing – Block Patterns

This session of usability tests covered 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. patterns and how to move blocks around in the Editor.

Testing script

Imagine you are building a new website for your personal blog. You want to begin by creating your homepage. WordPress offers a new block editor that provides some great choices of block patterns that you can add for creative layouts. Let’s explore the block patterns to create your page.

  1. Log in.
  2. Create a new page.
  3. Add a title to your page.
  4. Keep in mind that the way to add various content to your page is by adding blocks or block patterns. Explore where you might go to add a block or pattern, and add the side-by-side image pattern to your page.
  5. Make that pattern full width.
  6. Below that, add a two-column layout pattern that also includes a Heading or larger text.
  7. Edit the larger text to say something meaningful about your blog.
  8. Now add either a Buttons block, or the side-by-side buttons pattern, whichever you prefer. Rename one button to “Learn more” and the other to “Contact us.”
  9. Move the buttons above the previous block pattern.
  10. Now add a Separator block above and below the Buttons block/pattern.
  11. Publish your page.
  12. How was this experience?

Videos

Video 1 – May 18

Can I grab this and move it? How do I grab this block?

Basically everything I make is in Elementor, so I haven’t really played around with the new WordPress blocks and the new editing capabilities. This was the first time and I actually really enjoyed it.

Video 2 – May 26

Oh, the arrows are the movers. That’s not very clear. I think that needs to be worked on a bit more.

Video 3 – June 2

Warning: some harsh language

Video 4 – June 19

It was intuitive to locate blocks and patterns.

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 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
?

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 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/.
  • 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 March 2020

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/ usability testing revolved around the Navigation 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. for the month of March. The Gutenberg team is looking to push this forward by creating a better 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. and including it as a proper block in the block library.

Testing script

Imagine you’re building a new website using WordPress. WordPress now offers a Navigation block within the new block editor. This is what you’ll focus on for this usability test. Let’s create a Navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. using this new block!

  1. Log in.
  2. Create a new post.
  3. Add a title to your post.
  4. Keep in mind that the way to add various content to your post is by adding blocks. Explore where you might go to add a block, and add the Navigation block to your post.
  5. Click the “Create from all top-level pages” option in the block. We’re going to pre-fill this Navigation menu with the site’s top level pages.
  6. First, delete the “Moby Dick” menu item.
  7. Next, move the “About” menu item so that it comes just after “Home.”
  8. Move “Blog” to the right of “Services.”
  9. Next, we’re going to add sub-menu items under the “About” menu item.
  10. The first sub-menu item should be “Mission.” Add a sub-menu item that links to the Mission page.
  11. Now add a second sub-menu item and link it to the “Team” page.
  12. Let’s add some color. Set a background color on this Navigation block and then change the color of the text in the menu items to something you like.
  13. Preview your post.
  14. How was this experience?

Videos

Video 1 – February 12 (I know this is Feb, but I missed a few that month)

I’m getting confused here. Here’s the link to the Team page. I think that’s a link.

[adding background color to Nav block] I’m just not seeing this.

NOTES:

  • The user tried to delete a nav item by clicking into the text and hitting the Delete key on the keyboard. This only deletes the text, but not the item.
  • Selecting the Navigation block parent proved too difficult. The user got frustrated which caused them not to see other 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. parts creating a compounded affect.

Video 2 – March 10

I’m not quite sure how to change the color.

NOTES:

  • This user also tried deleting a nav item by highlighting the text and hitting the Delete key on the keyboard.

Video 3 – March 17

NOTES:

  • Finding the block’s background color proved difficult again, but he eventually found it.

Video 4 – March 24

I’m still trying to find the Navigation block.

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 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
?

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

Gutenberg Usability Testing for January 2020

I know this is a bit late, but I’ve got several usability tests to share from January 2020. I spent that month looking into the Columns 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. 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 Gutenberg Team has been making several changes to help the experience and these videos can help continue the improvements.

This particular test proved to be quite difficult and long due to the nature of the Columns block. Next time around I’ll be sure to limit the set of tasks.


Testing script

Imagine you’ve just been tasked with creating a webpage about pies. WordPress offers a Columns block in its new block-based editor. This is what you’ll focus on during this usability test. Let’s create a webpage about pies using the Columns block!

  1. Log in.
  2. Create a new post.
  3. Add a title to your post.
  4. Under the title add a Separator block. Once it is added, make sure you set it to “wide.”
  5. Next, add a Columns block to the page, and choose the 3-column setting.
  6. In the left column, add an Image block and set the image to be a pie.
  7. In the middle column, add this text:
    1. Key lime pie withdrawal
    2. Not as easy as it sounds
    3. Especially if you are totally addicted.
    4. I can walk past pumpkin all day long
    5. And not dig into it with a tablespoon.
    6. If it has whipped cream, I might take a bite.
    7. Who am I kidding?
    8. Let’s put it where it lives.
    9. If it has sugar, it is mine.
    10. And get out of the way!
  8. In the right column, add another Image block with another picture of a pie.
  9. Set the right column’s width to 20%.
  10. Set the left column’s width to 40%.
  11. Did you notice anything change when you did that? Check the right column again and readjust the width to 20% if needed.
  12. In this right column, change it so the image aligns to the bottom of the column.
  13. Below this Columns block, add a Cover block.
  14. Set the background image to be another picture of a pie.
  15. Add a Columns block inside this Cover block, and choose the 2-column setting.
  16. Make the left column width 70%.
  17. In the right column, add the text “PIES” and change the font to be “Large.”
  18. Below the Cover block, add another Columns block with 2 columns.
  19. In the left column, add the text, “When Alice’s Aunt Polly, the Pie Queen of Ipswitch, passes away, she takes with her the secret to her world-famous pie-crust recipe. Or does she? In her will, Polly leaves the recipe to her extraordinarily fat, remarkably disagreeable cat, Lardo . . . and then leaves Lardo in the care of Alice.”
  20. In the right column, add the text, “Suddenly, the whole town is wondering how you leave a recipe to a cat. Everyone wants to be the next big pie-contest winner, and it’s making them pie-crazy. It’s up to Alice and her friend Charlie to put the pieces together and discover the not-so-secret recipe for happiness: Friendship. Family. And the pleasure of doing something for the right reason.”
  21. Preview your post, and then publish it.

Videos

Video 1 (Jan 8)

The change sign (block transform icon) made me think I was restarting something.

[looking at the multiple + icons everywhere] “It looks like I have multiple columns now. I don’t know what went wrong with this.”

The user struggled with adjusting the width of a single column. It was not clear how to do that.

It’s really hard to find how to adjust the width of this.

Video 2 (Jan 15)

[trying to select the single column block] How do you stop selecting the image?

To me it’s not clear. How do I select the column?

Video 3 (Jan 22)

I’ve never used this software before and I’m not sure how to set the column width.

Up to this point, everyone who has tried to add a Cover block below the Columns block has just added the block inside one of the Columns under the image. At this point things start falling apart because it’s just too many blocks inside a narrow space.

Video 4 (Jan 29)

I can’t find where I can do this. [setting column width]

The instructions were very hard to follow. It’s hard to know where to look and what to click on.


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 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
?

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

Gutenberg Usability Testing for Nov-Dec 2019

Hey there! 👋 I seemed to have missed November’s post, so I’m combining November and December on this one. I have 3 for November and 3 for December.

November focused on the last bit of side-by-side testing. I was trying to understand how users might go about adding elements 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/ side-by-side. And then inform them about a 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.-based way to do it and see how that affected their experience.

I also began testing around the List block. This is a natural block when writing up recipe posts, etc. I had an amazing group during WCUS this year help write up this particular script which is shared further below.

In December I wanted to focus on the Navigation block in the Gutenberg pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party.


Side-by-side script for November

Try out the new Block Editor in WordPress! There are a few tasks below. Please talk through them out loud so we might better understand how people think through these actions. Don’t worry, there are no right answers. Thank you.

  1. Log in.
  2. Create a new post.
  3. In the post, add two images side-by-side. How was this experience?
  4. If you haven’t already clicked the “+” icon in the top toolbar to add a block, try that now and add a Gallery block. Now add two images to the Gallery block. How was this experience?
  5. With these various blocks in mind, try adding an image and text side-by-side in your post.
  6. Did you find the Media+Text block or did you solve step 5 by some other way?
  7. If you didn’t use the Media+Text block, try adding it now. Once you’ve added an image and text to this block, flip it so that the image is on the right of the text. How did you like this block?
  8. Next, create some text that is side-by-side. How was this experience?
  9. If you didn’t use the Columns block, please try adding that block to show text side-by-side. How did that go?
  10. Now that you’ve become more experienced with blocks, how intuitive does this interface feel?

Pie recipe script for November

Imagine you’ve created a perfect pie recipe and want to share it with the world! You’ve gathered your notes and are ready to create this new post on your site.

  1. Log in.
  2. Create a new post.
  3. Title the post: “Gutenberg Recipe”.
  4. Add a paragraph describing the recipe: “This is a test recipe of a delicious pie. We love pies as they are tart and sweet at the same time.”
  5. Add an Image block and select a photo of a pie. Make the image full-width.
  6. Add a Columns block with two columns for the ingredients.
  7. In the first column, add a Heading block and type “Crust”.
  8. In the same column, add a bulleted list:
    • 1 ½ cup cookie crumbs
    • ¼ cup sugar
  9. In the second column, add a Heading block and type “Curd”.
  10. And in this column, add a bulleted list:
    • 1 (12 ounce) package of cranberries
    • 1/2 cup Sugar
    • 1 orange, zested
  11. Below the Columns block, add a Heading block titled “Directions”.
  12. Now add a List block and change it to a numbered list.
  13. Add each of these to the numbered list:
    1. Preheat oven to 350 degrees F.
    2. Spray a 9-inch two-piece tart pan with cooking spray.
    3. In a medium bowl, stir together cookie crumbs, sugar, stevia, salt, and butter.
    4. Press mixture evenly in bottom and up sides of tart pan.
    5. Bake until set, about 15 minutes.
    6. In a medium saucepan, combine cranberries, sugar, stevia, and orange zest and juice.
    7. Bring to a simmer over medium-high heat and cook until cranberries burst, about 8 minutes.
  14. Preview your post and make any corrections to the layout that you’d like.
  15. Publish your post!

Navigation block script for December

Imagine you’re building a new website using WordPress. WordPress now offers a Navigation block within the new block editor. This is what you’ll focus on for this usability test. Let’s create a Navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. using this new block!

  1. Log in.
  2. Create a new post.
  3. Add a title to your post.
  4. Keep in mind that the way to add various content to your post is by adding blocks. Explore where you might go to add a block, and add the Navigation block to your post.
  5. Click the “Create empty” option in the block. We’re going to create a whole new Navigation menu.
  6. Like all good navigations, make “Home” the first item in the menu and make sure it’s linked to the Home page.
  7. Next, add another item labeled “About” and make sure it’s linked to the About page.
  8. Add a submenu item under the About item. Label it “Team” and ensure it’s linked to the right page.
  9. Next, add another top-level item labeled “Services”.
  10. Then add two more items; one labeled “Blog” and the other labeled “Contact”.
  11. Go back and delete the “Services” item from your Navigation block.
  12. Now change the link for the “Contact” item by linking it to the “Happy Flowers” post.
  13. Change the “Blog” item to say “Archive” instead, but keep it linked to the same page.
  14. Preview your post.
  15. How was this experience?

Videos

Video 1 – Side-by-side (Nov 6)

I’m not able to get them side-by-side.

Gallery block – So would we be able to add more than one picture? Cool. This was easy!

Video 2 – Pie recipe (Nov 20)

The only thing I would add to this I want to be able to do is to change the font and color.

Video 3 – Pie recipe (Nov 27)

This is a little bit complicated.

Okay, we’re getting somewhere finally!

Video 4 – Navigation block (Dec 4)

I’m not absolutely sure how to add a block. So it doesn’t seem to actually be done here (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. block settings).

It did take a little while, but we did get there in the end.

In truthful a little confusing. It became clearer as I went on, but I’m unsure if I’ve done all the tasks as requested.

Video 5 – Navigation block (Dec 11)

About 9 minutes in and the user gives up. They can’t quite figure out how to add a Navigation block. About 8 minutes in they searched the Block Library but were unsuccessful because they didn’t look through every accordion, and they ended up searching for “empty” instead of “Navigation”.

Video 6 – Navigation block (Dec 18)

I expected to see a list of blocks. (referring to the Block tab in the sidebar)

Submenus are proving to be difficult in these usability tests. I know it’s a design problem we’re aiming to solve.


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 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
?

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

Gutenberg Usability Testing for October 2019

I had three usability tests for October. One tested the same “Flower shop” script from the month of September while the other two tested a “Side-by-side” script for October. The goal was to test how people placed various items side-by-side 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. editor.

Testing script

Try out the new Block Editor in WordPress! There are a few tasks below. Please talk through them out loud so we might better understand how people think through these actions. Don’t worry, there are no right answers. Thank you.

  1. Log in.
  2. Create a new post.
  3. In the post, add two images side-by-side. How was this experience?
  4. If you haven’t already clicked the “+” icon in the top toolbar to add a block, try that now and add a Gallery block. Now add two images to the Gallery block. How was this experience?
  5. With these various blocks in mind, try adding an image and text side-by-side in your post.
  6. Did you find the Media+Text block or did you solve step 5 by some other way?
  7. If you didn’t use the Media+Text block, try adding it now. Once you’ve added an image and text to this block, flip it so that the image is on the right of the text. How did you like this block?
  8. Next, create some text that is side-by-side. How was this experience?
  9. If you didn’t use the Columns block, please try adding that block to show text side-by-side. How did that go?
  10. Now that you’ve become more experienced with blocks, how intuitive does this interface feel?

Videos

Video 1 – October 2 (Used Sept’s Flower script)

Is there an option for ‘fit to screen’? Looking for a ‘fit’ option that just automatically detects the size you got and fits the text to full-screen.

“Is there a way to do this more simply?” Uses the arrows movers because drag and drop didn’t work when moving the blocks.

Maybe it would be better to make the column lines locked in place at first?

Video 2 – October 16

No audio.

Video 3 – October 23

I’m not finding anything with just text itself.

I just went to inline image and found that way was easier than the Media+Text block.

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 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
?

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 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/.
  • Or simply watch the videos and leave some feedback below.

Thanks for watching and contributing anywhere you can.

#gutenberg

WCUS 2019 Contributor Day

The Test Team gathered at the table for Contributor DayContributor Day Contributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/ https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/. at WCUS 2019. We talked about the various ways people can test and where to go to test things out. After this, we split into groups and wrote usability testing scripts. Once scripts were written, we took some time to install a local WordPress setup and began testing 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/ issues labeled with needs-testing.

The team included

Test table at WCUS 2019 Contributor Day

@dll416, @suziwilson, @dickmoomaw, Allie Brock, @brezocordero, @chrisp, @c3zh, @christopher-pollock, @royho, @mapk, @jg-visual

Issues/PRs that were tested

Scripts created for usability testing

  1. Create a new post.
  2. Title the post: “Gutenberg Recipe”
  3. Add a text 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. describing the recipe:
    “This is a test recipe of a delicious pie. We love pies as they are tart and sweet at the same time.”
  4. Add a two-column block for the ingredients.
  5. In the first column, type “Crust”. Then add a bulleted list:
    • 1 ½ cup cookie crumbs
    • ¼ cup sugar
  6. In the second column, type “Curd”. Then add a bulleted list:
    • 1 (12 ounce) package of cranberries
    • 1/2 cup Sugar
    • 1 orange, zested
  7. Add a single-column block titled “Directions”
  8. In the block add a numbered list:
    1. Preheat oven to 350 degrees F. Spray a 9-inch two-piece tart pan with cooking spray.
    2. In a medium bowl, stir together cookie crumbs, sugar, stevia, salt, and butter. Press mixture evenly in bottom and up sides of tart pan. Bake until set, about 15 minutes.
    3. In a medium saucepan, combine cranberries, sugar, stevia, and orange zest and juice. Bring to a simmer over medium-high heat and cook until cranberries burst, about 8 minutes.

  1. Go to Posts->Add New
  2. Add a title to the post
  3. Click + to add a 3 columns block
  4. On the first column add a headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. block and an image block
  5. On the second column, add an image
  6. On the third column add text
  7. Resize the image on the second column to make it larger (any size)
  8. Add a fourth column by clicking the Block Navigation icon on the upper left of the editing page.
  9. Add a slideshow in the fourth column.
  10. Click Preview to see how your post appears
  11. Publish the post (private if you want)

These scripts will be used in future usability testing scenarios that help inform the design and development direction in Gutenberg.

Thank you, everyone, for your wonderful contributions today! Keep testing all the things!

#contributors, #wcus

Gutenberg Usability Testing for September 2019

I just realized I hadn’t posted the usability testing videos for September yet, so here they are! I tested a new script that was geared around the Table 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. ease of use and moving blocks around within the page.

Testing script

Imagine you’ve just opened a new flower shop. You’d like to create a beautiful webpage that promotes your business. You should include a Title (Name of your flower shop), some text that talks about it, and some images. Please make sure to talk through everything out loud as you complete the tasks. Let’s get started.

  1. Log in with
    username: test
    password: usertest90631
  2. Create a new post.
  3. Give your post a title.
  4. Add a Cover block to your post. Select a background color for it and then add the text, “Amazing floral decorations”. Set the Cover block to be full-width.
  5. Add a Paragraph block below and include this text, “Our floral arrangements are beyond compare. We’ve got a wide variety of flowers and trimmings to cater for any occasion. You may select from our in-stock collection or you can place a special order with us. We’re looking forward to serving your needs.”
  6. Move this Paragraph block above the Cover block.
  7. Back below the Cover block, add a Table block. The Table block should be 3 rows by 3 columns.
  8. In the first row of the Table block write, “Small Arrangement”, “Up to 6 flowers”, and “$12.99”. In the second row write, “Medium Arrangement”, “From 7-12 flowers”, and “$18.99”. Finally, in the third row write, “Large Arrangement”, “From 13-24 flowers”, and “$29.99”. Keep each quoted text item assigned to its own table cell.
  9. In the Table settings, switch “on” the “Fixed width table cells” option.
  10. Now also switch “on” the “HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. section” too. Then in the new row write, “Sizes”, “Flowers”, and “Price”.
  11. Below the Table block, add a Button block. In the button, type, “Order Now”.
  12. Center the button within the block.
  13. Below this, add a Gallery block with 5 images of flowers. Make this block full-width.
  14. Now move the last image in the gallery to the first position, and then delete the last image from the gallery.
  15. Below the Gallery block, add another Paragraph block that says, “From birthday parties to anniversary dinners, floral arrangements full of fresh, beautiful flowers are the perfect complement. Whether you choose to send a bright arrangement of yellow sunflowers, vibrant roses, and colorful lilies, or a flower arrangement with delicate pastels, smiles are sure to follow!”
  16. Now add a Heading block that says, “Come visit our location”
  17. And below this add a Media+Text block with an image on the left and an address on the right.
    123 Fairytale ln.
    Neverland, CA 90001
    USA
  18. Finally “Preview” your post and make any necessary changes you think are important.
  19. Once you’re ready, Publish your post.

Videos

Video 1 – September 4

I want this to be the first one. The first one. The first one. The first one. [moving images around in the Gallery block]

Add Paragraph block. Add paragraph. Done. That was easy.

Video 2 – September 18

I just know visually in my mind’s eye what I want, but I don’t know what it’s called though.

[Referring to 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.] Everything I have been doing has been over here.

What’s this? Add a block…. ohhhhhh [about 11 mins into test finds the ‘+’ icon]

Video 3 – September 25

It’s all full-width and perfectly aligned. Let’s go. [referring to Gallery block]

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 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
?

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 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/.
  • Or simply watch the videos and leave some feedback below.

Thanks for watching and contributing anywhere you can.

#gutenberg

Gutenberg Usability Testing for August 2019

August usability testing has come to an end. I ended with 5 videos this month! The script was new and encouraged the users to build a mobile phone landing page. It focused on 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. and Cover blocks.

Testing script

Imagine you work for an industrial design company. The company has just created a new mobile phone. You’ve been assigned to create a beautiful landing page for this new phone. To do this, you will be using WordPress’ new Block Editor. 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 an image of a mobile phone. Once the image has been added, set the block to be full width.
  5. Below that add a Heading block with the text, “Features.”
  6. After that, add a Column block with three columns.
  7. Add a feature to each of the columns. You’ll first add an image, then a heading below that and some text below the heading. See the next task for details.
  8. In the first column add an image, under that add a heading that says, “Pixel Perfection Photos”, under which you’ll add the text, “Our camera is packed with pixels. Take beautiful high quality pictures.”
  9. In the middle column add another image, and a heading that reads, “Chrystal Clear Communication” with some text below that reads, “The sound coming from our speakers will leave you feeling like the other person is right there.”
  10. In the last columns, add another image, then add a heading, “Ubiquitous” with text below that reads, “Our phone is offered by all the major carriers.”
  11. Below this Column block, add a Cover block with a background image. On top of the image write, “Order a phone today!” and then add a Button block that says, “Order today”.
  12. Under the Cover block, add a Media + Text block with an image on the right and some text on the left that reads, “This phone is loved by everyone.”
  13. Add one more Cover block with an image, but this time set it to be a fixed background.
  14. Now, let’s add a Paragraph that reads, “Many smartphone makers save their best features for their priciest (and largest) devices. Not us. Our new phone includes great features like solid battery life and excellent performance, which means you don’t have to spend $1,000 to get the best smartphone.”
  15. Finally “Preview” your post and make any necessary changes you think are important.
  16. Once you’re ready, Publish your post.

Videos

Video 1 – Aug 1st

Add a heading block? How can I do that? I don’t even know what that means.

[After using the search feature in the Block Library] Oh, here it is, actually. I found it.

Video 2 – Aug 8th

Ooops, I did something wrong. How do I remove this?

This looks really really good. I didn’t expect it to look that good. It was that easy.

Video 3 – Aug 14th

That was quite intuitive. Click on the Heading option obviously from this menu.

This appears to be 3 columns, let’s click on that.

[while clicking through the Block Library accordions] I’m not seeing button so far…

Video 4 – Aug 21st

Things seem to be easy to find.

Video 5 – Aug 28th

To set to full-width, I’m just gonna drag it out.

It’s getting a lot faster now that I’ve done this once. It’s way easier!

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 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
?

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 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/.
  • Or simply watch the videos and leave some feedback below.

Thanks for watching and contributing anywhere you can.

#gutenberg, #usability-testing