Title: Gutenberg Usability Testing for March 2020 Author: Mark Uraine Published: April 2, 2020 Last modified: December 19, 2023 --- [ ](https://profiles.wordpress.org/mapk/) [Mark Uraine](https://profiles.wordpress.org/mapk/) 1:30 am _on_ April 2, 2020 Tags: [gutenberg ( 74 )](https://make.wordpress.org/test/tag/gutenberg/), [usability-testing ( 17 )](https://make.wordpress.org/test/tag/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/](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.? As a reminder, if you’re interested in helping with usability testing, there’s a number of things you can try: * Join the [#research](https://wordpress.slack.com/messages/CE0RFTLP8/) channel in slackSlack Slack is a Collaborative Group Chat Platform [https://slack.com/](https://slack.com/). The WordPress community has its own Slack Channel at [https://make.wordpress.org/chat/](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](https://make.wordpress.org/test/tag/gutenberg/), [#usability-testing](https://make.wordpress.org/test/tag/usability-testing/) ### Share this: * [ Threads ](https://make.wordpress.org/test/2020/04/02/gutenberg-usability-testing-for-march-2020/?share=threads) * [ Mastodon ](https://make.wordpress.org/test/2020/04/02/gutenberg-usability-testing-for-march-2020/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/test/2020/04/02/gutenberg-usability-testing-for-march-2020/?share=bluesky) * [ X ](https://make.wordpress.org/test/2020/04/02/gutenberg-usability-testing-for-march-2020/?share=x) * [ Facebook ](https://make.wordpress.org/test/2020/04/02/gutenberg-usability-testing-for-march-2020/?share=facebook) * [ LinkedIn ](https://make.wordpress.org/test/2020/04/02/gutenberg-usability-testing-for-march-2020/?share=linkedin) * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Ftest%2F2020%2F04%2F02%2Fgutenberg-usability-testing-for-march-2020%2F%23respond&locale=en_US) ### Like this: Like Loading… ### Leave a Reply 󠀁[Cancel reply](https://make.wordpress.org/test/2020/04/02/gutenberg-usability-testing-for-march-2020/?output_format=md#respond)󠁿 You must be [logged in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Ftest%2F2020%2F04%2F02%2Fgutenberg-usability-testing-for-march-2020%2F&locale=en_US) to post a comment. # Post navigation [← Help testing WordPress Auto-updates Feature Plugin – version 0.4 🌹](https://make.wordpress.org/test/2020/04/01/help-testing-wordpress-auto-updates-feature-plugin-version-0-4/) [Gutenberg Usability Testing – Block Patterns →](https://make.wordpress.org/test/2020/06/19/gutenberg-usability-testing-block-patterns/)