User Testing for Customizer Menus

  • Feature-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 candidate: Menu Customizer

Following are testing tasks/questions, my initial walkthrough of the plugin at this stage, and some feedback with blockers separated from nitpicks. I will post testing videos in the comments as they come in.

Please reply to each comment with the biggest takeaway you learn from the video if you watch any of them. Thank you!

Tasks

Intro: You have a blog about travel, and you would like to setup a custom menu for your blog.

  1. Log in with username ******* and password *******
  2. Go to Appearance > Customize and then click on Menus.
  3. Add a new menu named “Main Menu.”
  4. Add all of the pages already saved on the site to the menu.
  5. Reverse the order of the menu items.
  6. Set the “Main Menu” as the primary menu so it shows in the live preview.
  7. Add the “Travel” categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. to the menu.
  8. Move “Travel” so it is a child of the first item in the list.
  9. Add a link to Twitter and make it a submenu item next to Travel.
  10. Move Travel and Twitter from the first item so they are submenu items under the About page. Save changes.
  11. Create a new menu for social media with at least one social media link in it and add it 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..
  12. There is a way to use advanced menu settings to enable descriptions for menu items. Try to find it and add a description for the “About” page.

Questions

  • Would you recommend this feature to a friend who needs to create menus on their website?
  • Have you used WordPress before? If yes, have you used the Menus feature inside the WordPress dashboard before?

My Walkthrough (testing the test)

Tested the Menus section in /wp-admin/customize.php with WP 4.3-alpha-32600 and the Menu Customizer 0.4 (6a6fca3) feature-plugin candidate.

Points of Confusion

  • 3:17 – Setting a new menu as the primary menu does not update the live preview.
  • 4:07 – I didn’t notice during the test, but the live preview started showing the menu at this point.
  • 4:38 – Unable to drag a menu item into a child menu item position.
  • 5:53 – No error message or feedback if I try to add a link without Link Text filled in.
  • 6:03 – Adding a new link item destroyed the order I had updated earlier (but hadn’t saved yet).
  • 6:52 – I didn’t expect the submenu item to indent along with its parent, but I see how this could go either way so I think it’s good as is (it just surprised me).
  • 7:38 – submenus are not moved when a parent element is dragged—which is different than how the Menus feature works in wp-admin (not sure if this is intentional).
  • 8:47 – I was surprised my new social menu didn’t show up in the live preview (but I should know better because I didn’t even assign it a location yet!).
  • 9:10 – New menu assigned to a menu location doesn’t show up in the live preview.
  • 9:21 – “Currently set to” doesn’t seem to be updated everywhere it should.

Blockers

  • New menus do not show up in the live preview when they are first assigned a location. (issue 7)
  • After reordering, adding a new menu item should not destroy the customized order. (issue 42)
  • Cannot drag items to the right to create submenus like I can in the main wp-admin Menus page. (issue 4)

Nitpicks

  • On hover/active state, the “Currently set to” text under a menu name turns white on very light gray and is unreadable. (screenshot)
  • On mobile, the tap target areas for the stacked-boxes and arrow icons are not big enough. (screenshot)
  • Trouble deleting a previously active menu in a single customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. session. (49s screencast)
  • If a user has created a “Home” page (common flow when setting a static front pageStatic Front Page A WordPress website can have a dynamic blog-like front page, or a “static front page” which is used to show customized content. Typically this is the first page you see when you visit a site url, like wordpress.org for example. or using a homepage page tdemplate in a theme), then the default home page option seems like a duplicate. Instead of labeling that one “Page” consider labeling it “Front page” or “Custom Link.” (47s screencast)

Questions

  • What is the order of add menu items panel based on (i.e. Links, Posts, Pages, etc.)? Would you be willing to change it so search is first followed by most-used item types? (screenshot)
  • Would it still be clear enough if you shortened “+ Add Links” to “+ Add” or “+ Add New”? (screenshot)
  • Would it still be clear enough if you shortened “Currently set to:” to “Current:”? (screenshot)
  • Would a gear icon be more appropriate than the stacked-boxes icon for advanced settings? (screenshot)
  • In the “Reorder” view, could the indent icons be simpler looking left/right arrows? (screenshot)

Asides

  • In past testing, people said they really liked that the dashed outlines for dropzone target areas (29s screencast)
  • The overall flow for first-time menu setup is something to be aware of. Beginners often try to create a menu before they create content and get stuck. Anything you can do to help them out with that would be cool (might be worth looking at in future iterations if there’s no time now). (32s screencast)
  • As the customizer gets more and more options added to it, I find myself wanting a toggle for switching between the currently published view and the live preview so I can remind myself of what I’ve customized so far.

Here’s a small proposal for updating the text used in the Menus description to try to make it more clear for new users who don’t know they need to publish content first before they can add those items to a menu.

Current:

This panel is used for managing your custom navigation menus. You can add pages, posts, categories, tags, and custom links to your menus.

Menus can be displayed in locations defined by your theme, and also used in sidebars by adding a “Custom Menu” widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. in the Widgets panel.

Suggested:

This panel is used for managing navigation menus for content you have already published on your site. You can create menus and add items for existing content such as pages, posts, categories, tags, formats, or custom links.

Menus can be displayed in locations defined by your theme or in widget areas by adding a “Custom Menu” widget.

#customizer, #menus, #usability-testing-2