User Testing for Customizer Menus

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” category 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 sidebar.
  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?

Continue reading

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

Usability Testing for WordPress Customizer Theme Switcher Improvements

I did five usability tests for theme switcher and sliding panels in the customizer.

Summary

  • Users found the customizer very user-friendly overall.
  • Expected clicking on a theme thumbnail to open a preview, not the details modal.
  • Difficulty navigating back using the current 4.2-alpha design (pre-31289.diff).
  • Expected clicking the “Save & Activate” button to not kick them to the front end.
  • “Save & Publish” is clicked a lot more often for sliding panels.
  • I asked two users (note small sample size) which navigation style they preferred, both picked accordion.

Full Videos

  1. 1406491a-usertesting.mp4 (17m5s)
  2. 1408362a-usertesting.mp4 (8m53s)
  3. 1408760a-usertesting.mp4 (7m58s)
  4. 1408936a-usertesting.mp4 (11m15s)
  5. 1414874a-usertesting.mp4 (15m35s)

Continue reading

#accordion-vs-sliding-panels, #customizer, #theme-switcher, #usability-testing-2

WordPress Images/Galleries — Usability Test 1

I did a usability test on the recently updated image and gallery features in the editor using WordPress r27502 with a beginner user.

Summary

  • Drag and drop to add an image is not discoverable
  • Resizing an image by dragging is not discoverable
  • Extensive inline help needed to figure out cropping
  • Unable to find “medium” size setting
  • Difficulty replacing an image, but only because she didn’t insert one to start with
  • No trouble rotating, deleting, re-adding images
  • No trouble adding, deleting, or changing columns in a gallery

You can download the full video here: bf80a9a3.mp4 (Length: 19:00)

Points of Confusion

Drag and drop to add an image is not discoverable (Length: 3:01)

Task given was to resize an image (trying to get them to drag the corner), but she scales it instead (Length: 1:05)

Difficulty cropping, had to use inline help to learn how it works (Length: 1:18)

Unable to find the setting to change an image to medium size (Length: 1:41)

Difficulty replacing the image because she never actually inserted it in the first place (Length: 3:22)

See more highlight reels after the jump.

#editor, #images, #media, #usability-testing-2

WordPress Theme Install/Customizer — Usability Test 2

I did a 2nd usability test on theme installs and customizer headers/widgets using WordPress r27502 with an intermediate/advanced user.

Summary

  • Users love the theme install process. Well done!
  • No trouble installing a theme
  • No trouble adding header images
  • Difficulty randomizing headers
  • I’m fascinated about the reasons people give for picking themes. 🙂

You can download the full video here: b692a9a3.mp4.

Successes

No trouble installing a theme: “I love love love how easy you make the whole installation process. You guys have really streamlined that. It’s one of the things I really appreciate about WordPress.” (Length: 0:58)

See more highlight reels after the jump.

#customizer, #customizer-headers, #customizer-widgets, #usability-testing-2

WordPress Theme Install/Customizer — Usability Test 1

I did a usability test on theme installs and customizer headers/widgets using WordPress r27493 with a beginner.

Summary

  • The “Add New Theme” box works wonderfully
  • No trouble adding header images
  • Misses how to install a new theme at first
  • Difficulty randomizing header images
  • Reasons behind picking themes are fascinating 🙂

You can download the full video here: a8d3a9a3.mp4.

Successes

Installs a new theme after search fails and she finds the “Add New Theme” box (Length: 1:05)

No trouble adding header images (Length: 2:06)

Points of Confusion

When asked to “install a new theme” with little other direction, she looked at the installed themes first instead of installing a new one—this clip is where she figures out the mistake (Length: 0:24)

Difficulty randomizing header images (Length: 6:04)

See more highlight reels after the jump.

#customizer, #customizer-headers, #customizer-widgets, #theme-install, #usability-testing-2

WordPress Front-end Editor — Usability Test 2

I did a usability test on the WordPress Front-end Editor 0.8.5 plugin with the Twenty Thirteen theme on WordPress r27243.

Summary

  • No trouble finding the Edit link inline, editing a title, or adding a paragraph
  • Lots of difficulty saving
  • Difficulty adding a new post
  • Featured image area is not clear
  • Back button results in lost edits
  • Difficulty adding a link (back-end editor)
  • Difficulty adding an image (back-end editor)

You can download the full video here: deaea9a3.mp4.

Points of Confusion

Difficulty saving (Length: 1:56)

Difficulty adding a new post on the front end (Length: 0:42)

Featured image area looks like a place you can “write something” (Length: 0:07)

Back button exits the editor without saving and without a prompt (Length: 0:06)

See more highlight reels after the jump.

#front-end-editor, #usability-testing-2

WordPress Front-end Editor — Usability Test 1

I did a usability test on the WordPress Front-end Editor 0.8.4 plugin with the Twenty Twelve theme on WordPress r27162.

Summary

  • Misses the “Edit Post” link in the toolbar completely but finds the inline “Edit” link
  • Struggles to figure out how to save changes
  • Secondary editor functions are hard to find
  • Unable to find the tag icon in the toolbar
  • No trouble adding or modifying content and links

This is a great first look, so I would recommend watching the entire video through. (Length: 8:45)

You can download the full video: c41ea9a3.mp4.

See highlight reels after the jump.

#front-end-editor, #usability-testing-2