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?

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 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..

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 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. 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 headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. 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 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. headers/widgets using WordPress r27493 with a beginner.

Summary

  • The “Add New Theme” box works wonderfully
  • No trouble adding headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. 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 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 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 imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. 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 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 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