We decided to test bringing the theme locations back out as a meta box (instead of using checkboxes) to figure out if the old layout would work for users.

For this test, I removed theme locations as checkboxes, and added the theme locations metaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way. back in. I also moved the “Automatically add new top-level pages to this menu” option back to it’s old spot, because it looked odd by itself.

Here are the results:

User #17

Here’s the video.

Step 1: Log in

No issues.

Step 2: Go to menus

No issues.

Step 3: Reorganize pages

No issues.

Step 4: Preview changes

No issues.

Step 5: Remove menu item

No issues.

Step 6: Add another menu

2:30 – She doesn’t see the “create a new menu” link. She starts typing in the existing menus name field, thinking she’s creating a new menu.
3:20 – After saving her changes, she realizes that she made a mistake, and changes the menu name back to “Menu 1”.
3:30 – She see’s the “create new menu” link, and is on her way

Step 7: Add links

No issues.

Step 8: Delete menu

No issues.

Observations/Thoughts

• This user was sharp. With that said, having the theme locations metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. box back in the top left corner, revealed two undesirable behaviors. 1) She assumed that the theme location metabox was where she managed her menus. 2) She thought she could create a new menu by editing the existing menus name field, and saving it. We’ve seen both of these behaviors before the last time we tested having the theme locations meta box in the top left corner.
• For the next test, I’m going to try moving the theme locations box below the menu item options.

User #18

Here’s the video.

Step 1: Log in

No issues.

Step 2: Go to menus

No issues.

Step 3: Reorganize pages

No issues.

Step 4: Preview changes

No issues.

Step 5: Remove menu item

No issues.

Step 6: Add another menu

No issues.

Step 7: Add links

No issues.

Step 8: Delete menu

No issues.

Observations/Thoughts

• Overall, the second user succeeded with all of the tasks. She had to look for the “add new” link and the “delete menu” link, but she found them without too much trouble.

Thoughts?

#menus-ux

Here’s the last round of menus usability tests with 23450.6.diff​ applied.

User #15

Here’s the video.

Step 1: Log in

No issues.

Step 2: Go to menus

No issues.

Step 3: Reorganize pages

No issues.

Step 4: Preview changes

No issues.

Step 5: Remove menu item

No issues.

Step 6: Add another menu

No issues.

Step 7: Add links

No issues.

Step 8: Delete menu

No issues.

User #16

Here’s the video.

Step 1: Log in

No issues.

Step 2: Go to menus

No issues.

Step 3: Reorganize pages

No issues.

Step 4: Preview changes

No issues.

Step 5: Remove menu item

4:35 – When she expanded the menu item, the remove link was below the fold, so she did not see it. This caused confusion.

Step 6: Add another menu

No issues.

Step 7: Add links

No issues.

Step 8: Delete menu

No issues.

Observations/Thoughts

Overall, everything worked great. We added a task to delete a menu in there, to double check that users were able to spot it at the bottom, and they both seemed to find the link easily enough.

The second user found a bug. The extra description items (CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site., XFN, Description) were unchecked in screen options, and should not have been showing in the menu item edit screen. Since they were there, the “remove” link was pushed below the fold, which caused her confusion. We’ll need to fix this.

#menus-ux

Here’s round 7 of our menus usability tests with 23119.25.diff applied.

User #13

Here’s the video.

Step 1: Log in

No issues.

Step 2: Go to menus

No issues.

Step 3: Reorganize pages

No issues.

Step 4: Preview changes

No issues.

Step 5: Remove menu item

No issues.

Step 6: Add another menu

3:50 – He struggled to notice the “Add Menu” link. He finds it at 4:10.

Step 7: Add links

No issues.

User #14

Here’s the video.

Step 1: Log in

No issues.

Step 2: Go to menus

No issues.

Step 3: Reorganize pages

No issues.

Step 4: Preview changes

No issues.

Step 5: Remove menu item

No issues.

Step 6: Add another menu

No issues.

Step 7: Add links

No issues.

Observations/Thoughts

• I feel like these speak for themselves. 😉
• The first user had a bit of trouble finding the “Add Menu” link, but I’m okay with that seeing as a) it conforms to the way other “add new” links are done in the admin, and is likely much easier for users who have used WP before to any degree, b) as we’ve discussed adding more than one menu is somewhat of an edge case for the majority of users.

Thoughts?

#menus-ux

I tested two more users on our menus scenarios with 23119.23.diff applied. With the addition of the zero menus state, I had to modify the script a bit, as it eliminated the need to 1) create a menu, 2) add menu items, and 3) assign your first menu to a theme location for first time users.

Continue reading →

#menus-ux

I thought I’d run one more user through testing our current concept of having both a “manage” screen and a “add/edit” screen for menus.

For this test I added a quick little JS hack to visually highlight the “Menus in your theme” metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. box when a user clicks there from the “add/edit” screen success message. You’ll see in the video that my implementation is ugly as sin. 😉 I just wanted to test the concept with the knowledge that if it worked, we could always improve the design.

I also pulled the last step, which asked users to add 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.. While adding a custom menu widget is somewhat related, we likely won’t be addressing anything in widgets for this release.

Here’s the video for user 9 (in our series of menus user tests).

Continue reading →

#menus-ux

Here are the results from user 7 (in our menus user testing series) & user 8 both with the 23119.17.diff patch applied.

Continue reading →

#menus-ux

Two more menus user tests, focusing on this layout concept: User 5 (in the series) & User 6.

Continue reading →

#menus-ux

Last Tuesday we tested two users on some menus scenarios.

On friday I posted a couple hypotheses and patches for potential improvements.

This morning, I tested two additional users with these patches applied: User 3 (in the series) & User 4.

Continue reading →

#menus-ux