Last Tuesday we tested two users on some…

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.

Here’s what I saw:

User #3

Step 1: Log in

No issues.

Step 2: Go to menus

No issues.

Step 3: Add a menu

No issues.

Step 4: Add pages to menu

3:55 – He found the “Pages” section, but with the left menu options now as an accordion (and only one section showing at a time) it seemed to take him longer to discover it than before when the sections were all expanded.

Step 5: Reorganize pages

• 5:30 – He mentions that it might be helpful to have a note there that items can be dragged and dropped.
• 6:20 – He tries to save the menu change that he’s made by clicking “Save” at the bottom (in the “theme locations” section). Oops… This was unintended. We’ll have to find a way around that.
• 7:07 – When he finally did click the “Save Menu” button, he didn’t know if his changes were saved, because the yellow save notification bar was still there from when he had add items to the menu in the previous step. We saw this with a previous user. We need to address this somehow.

Step 6: Set as primary menu

8:14 – He didn’t click “save”. To be fair, I didn’t tell him to in the instructions.

Step 7: Add another menu

9:22 – BUG: After clicking “Add New”, the menu selection drop down should show (if another menu has already been created). That’s my bad.
9:55 – “I’m not seeing a listing of the menus so far”, he says not seeing the “select a menu” drop down on the right.

Step 8: Add links

No issues.

Step 9: Add 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.

16:00 – He gets confused by the “First Front Page Widget Area” and “Second Front Page Widget Area” section. “What does this mean, I don’t understand that?” he says.
17:00 – He’s confused that I didn’t mention where to add the new “custom menu” widget. I should be more descriptive there.

User #4

Step 1: Log in

No issues.

Step 2: Go to menus

No issues.

Step 3: Add a menu

No issues.

Step 4: Add pages to menu

2:55 – He doesn’t see the pages option in the accordion. He eventually finds it, but discoverability for “pages” has taken a hit by moving the left hand options to an accordion.

Step 5: Reorganize pages

No issues.

Step 6: Set as primary menu

• 5:50 – Looks like he thinks the “Delete Menu” link is for the first menu he created (and then deleted). He actually deletes the menu he just saved out of confusion. Oops… I’m starting to think tabs weren’t that bad of a 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. to manage menus… 😉
• 8:00 – He can’t find where to set the “primary menu” – it’s below the fold in his browser.

Step 7: Add another menu

No issues.

Step 8: Add links

No issues.

Step 9: Add custom menu widget

I need to be specific about adding the “custom menu” widget to the “Main 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.”. Everyone is getting hung up because I’m not being specific.

Observations/Thoughts

• Based on observing these two users, my conclusion would be that using an accordion is not the best approach. Both of them struggled to find the “pages” option, whereas the first two users (even though they had to scroll) found it relatively easily, and didn’t really have any complications with it (other than needing to scroll).
• After you add a menu option, it might be helpful to somehow highlight the link that was just added (on the right). User #3 didn’t notice that it had been added on the right. We could test using jQuery UI to momentarily add a visual highlight to newly added menu item divs.
• It might be helpful to add a title attribute on sortable items indicating that they can be dragged. Something like: “Click and drag these items to reorganize them”.
• Moving the “Theme location” area to the bottom appears to be a bust. User #3 tried to save his menu by clicking “Save” at the very bottom of the page (which didn’t work because that save button only applied to the theme locations section). User #4 searched for about a minute to find the section (since it was below the fold on his screen).
• Again, we see with User #3 that it’s hard to know if you’ve actually saved your menu if a yellow notification is already displayed on the page. I think I’ll try adding a jQuery fadeIn effect to the yellow navigation bar on page load.
• Replacing the tabs with a select menu also appears to be a bust. Neither user noticed the “select a menu” drop down”. And both expected to visually see the names of every menu they’d created somewhere on the page (not hidden within a drop down). I’d love to hear your ideas/thoughts here.
• The “First Front Page Widget Area” and “Second Front Page Widget Area” sections came up as being confusing again. But I think this would need to be hidden via the theme (not in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.).
• When you reorganize menu items, and you drop an item in a submenu slot, it might be nice to indicate somehow that the item has in fact become a submenu, and is no longer a main level item. Could be as simple as just adding “submenu” in italic next to the menu item name.

Looks like we got a couple of things right, but several of my assumptions were wrong. That’s the beauty of iterative design though. Next, I’ll revert the patches that didn’t work out, and try again with another round of changes. We’ll do this until we feel like we’ve smoothed out all of the rough edges.

As always, I’d love to hear your thoughts & insights.

#menus-ux