Author Archives: designsimply

designsimply 4:13 pm on May 27, 2015
Tags: , ,   

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

designsimply 6:25 pm on March 15, 2015
Tags: accordion vs sliding panels, , ,   

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

designsimply 11:58 pm on March 26, 2014
Tags: , , ,   

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

designsimply 11:44 pm on March 25, 2014
Tags: , customizer headers, customizer widgets,   

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

designsimply 1:38 pm on March 23, 2014
Tags: , customizer headers, customizer widgets, ,   

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

designsimply 11:09 pm on March 5, 2014
Tags: ,   

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

designsimply 8:40 pm on February 27, 2014
Tags: ,   

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

designsimply 2:08 pm on February 20, 2014
Tags: ,   

I’ve tested the Widget Customizer 0.14 plugin with…

I’ve tested the Widget Customizer 0.14 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 Fourteen theme on WordPress r27060.

Summary

  • No trouble adding, rearranging, or removing widgets
  • Widgets can be tough to spot if they are added “below the fold”
  • Widgets that require extra prep are easily dismissed

Continue reading →

#user-testing, #widgets

designsimply 2:25 pm on January 31, 2014
Tags: ,   

User Testing the Widget Customizer 0.13 Plugin I’ve…

User Testing the 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. 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. 0.13 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

I’ve tested the Widget Customizer 0.13 plugin with the Twenty Fourteen theme on WordPress r26863.

Summary

  • No problems adding, reordering, or removing widgets
  • Content and Primary labels for widget locations weren’t clear to the user
  • Trouble with scrolling the slide-out, but it could have been a one-time user error</
  • Widgets can get a little lost if you add one to an already long list
  • ”Find widgets” search seems to obscure the last widget description
  • Feels messy to see all the widget controls stay open
  • Its not clear, at first, how to exit the customizer

Successes

No trouble adding a text widget. She clicks “Save & Pubilsh” a lot—seems to assume it’s needed to see the changes. (0:23)

No trouble reordering widgets, but again hesitates when looking for right vs left 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.. (0:56)

No trouble removing widgets. (1:01)

Points of Confusion

She has no idea what sidebar is which. The quick red glow seems to have helped a bit. (0:31)

Scrollbar jumps back to the top, not sure what she did to trigger that. (0:12)

She expected the new widgets to be added to the top. (0:18)

Has some trouble reading the “Twenty Fourteen Ephemera” widget description at the bottom of the slide-out panel. (0:17)

Other Insights

It doesn’t seem to bother her that all the widget controls stay open — but boy does it feel messy. (0:19)

Its not clear, at first, how to exit the customizer. But she gets it eventually. (0:33)

If you’d like to see the full video, you can download it here: 2b86a9a1.mp4 (9:25)

(For Reference) Tasks Used in the Test

  • Go to Appearance > Customize Add some text in a new widget at the top of the left sidebar.
  • Look through the widgets and pick two that you like. Add both of them to the sidebar and say why you picked them.
  • Rearrange the widgets so the bio appears at the bottom of the right sidebar.
  • Remove all of the widgets from the left sidebar except the text you added before and one other widget you think is the most important to keep.
  • Verify that the updates you’ve made are visible on the site separate from the live preview in the dashboard.

User’s Computer Info

  • Operating System: Windows 7 6.1
  • Browser: Windows Firefox 26.0
  • Display: 1920

Next up: a couple more tests with version 0.14 of this plugin.

#user-testing, #widgets

designsimply 4:32 pm on November 20, 2013
Tags: ,   

User Testing the Better Widgets 0.1 Plugin

Let’s keep going with the work on widgets! I’ve tested the Better Widgets 0.1 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 Eleven theme on WordPress 3.7.1 and there is some interesting stuff in the results.

Summary

  • No problem at all rearranging or deleting widgets
  • Had trouble with the drag-and-drop target area at first
  • Suggests adding a way to add new widgets directly from the Widgets page
  • Uses the wrong 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. area, completely misses the pre-expanded “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.”
  • 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. is slow

Successes

No problem rearranging widgets:

No problem deleting widgets:

Points of Confusion

Unsure where to go when asked to add a bio to the sidebar:

Drag-and-drop misfires:

Completely misses the pre-expanded “main sidebar” widgets (longest clip at 4:11):

Other Insights

Wants to know how to add more widgets from the Widgets screen:

Reasons for picking search and calendar widgets:

Unrelated to Widgets

Slow customizer is slow, takes ~24s for this user to load it up:

If you’d like to see the full video, you can download it here: Better Widgets v0.1

(For Reference) Tasks Used in the Test

  • Add a bio to the bottom of the sidebar.
  • Look through the widgets and pick two that you like. Add both of them to the sidebar and say why you picked them.
  • Rearrange the widgets so the bio appears at the top of the sidebar.
  • Remove all of the widgets except the bio and one other widget you think is the most important to keep.
  • The test website is using the Twenty Eleven theme. It has a widget area called “Showcase Sidebar.” What do you think that’s for, and how would you go about figuring out how to set it up?

User’s Computer Info

  • Operating System: Windows NT (unknown) 6.2
  • Browser: Windows Chrome 30.0.1599.101
  • Display: 1366

My Observations & Suggestions

  • The drag-and-drop misses in this video are interesting, makes me wonder if having widget areas side-by-side is good or not—or perhaps arranging them more masonry style instead of in a grid would be better
  • Interesting that she didn’t connect “sidebar” and “widgets” right away, but getting into that label is tricky business and I’d like to watch that area with more users in order to spot trends
  • Love the suggestion to have an “Add New” button on the widgets page
  • Different sidebar areas for themes is tough, I think it’s pretty hard to tell what in the world the “Showcase Sidebar” is for if you’re not familiar with Twenty Eleven
  • It’d be great to focus on customizer performance speed

Next up: same test, except run it on WP 3.8 trunk. What specifics are you interested in finding out from tests like these?

#user-testing, #widgets