Image Widget Link Usability Testing

Hey folks 👋

We’ve gotten some general feedback that the context switch makes it feel different from adding an image to a page or a post, so people are having some trouble finding where in the image widget to add a link. I ran a couple usability tests on the existing image widget, as well as this PR from @timmydcrawford to expose the link within the widget itself. We wanted to compare both versions and see which one was easier.

I want to share the test details, some stats, and finally some conclusions I found from testing, which I’ve summarized into a list organized by 👓 observations, 💡 ideas, and 🐛 bugs.

If you’re interested, you can view all the videos in this Cloudup gallery. They’re very short! Almost all of them are between five and eight minutes long, with one longer outlier of 11 minutes.

Continue reading

#image-widget, #widgets

I’ve tested the Widget Customizer 0.14 plugin with…

I’ve tested the Widget Customizer 0.14 plugin 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

User Testing the Widget Customizer 0.13 Plugin I’ve…

User Testing the Widget Customizer 0.13 Plugin

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

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 plugin 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 widget area, completely misses the pre-expanded “Main Sidebar”
  • Customizer 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

User Testing Widgets+MP6 v1 Layout

I’ve analyzed user testing for two videos shaunandrews kicked off for v1 of Widgets + MP6. The clips represent the main points of interest and user confusion from the tests and range from 12 to 49 seconds, so they should be quick and easy to watch.

Expects clicking “Save” will close the widget:

Troubles with drag and drop:

  • Windows 7 6.1
  • Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36
  • 1920 x 1080

Hover tip proves useful when figuring out the Meta widget:

No trouble with drag and drop to add a widget:

Expects widget to close after saving:

  • Windows Vista 6.0
  • Mozilla/5.0 (Windows NT 6.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36
  • 1280 x 800

If you’d like to see the full videos, you can download them here: Widgets+MP6 001, Widgets+MP6 002.

Key Observations

  • One user spotted the hover tips and the other didn’t
  • Both users said they expected the widget to close after saving
  • May need to increase sensitivity of the widget drop area, check Chrome 30 on Win7 for issues

Just because a couple users mention they’d like to see a widget area close after saving doesn’t necessarily mean you should do that. Additional testing in situations where someone is working for a longer time with one particular widget and may want to save periodically would be good. Adding some other visual indicator to show when saving is finished might be sufficient, as opposed to closing the widget on save.

#user-testing, #widgets

Widgets Update

Howdy!

The widgets team has been working hard! We’ve spent some time working with (and joining) the MP6 team to get a redesigned widgets screen into the latest version of MP6. If you haven’t seen it yet, download (or update) MP6, and you’ll get this beauty:

We’ve also created a new plugin named Widget Area Chooser, which lets you click to add a widget to any of your sidebars:

We’ve also made some great progress on the Widget Customizer plugin, which lets you manage your widgets from within the customizer:

How can you help?
This week, we’ll be focusing on getting the Widget Customizer plugin updated to let you add new widgets. If you want to join in, you can head over to GitHub and submit some patches, do some testing and add an issue, or just drop your ideas/thoughts. Or, you can just post a comment below and we’ll add you to our group Skype chat.

Also, we’d love some code review on the Widget Area Chooser plugin.

We’ll be meeting next week in #wordpress-ui at our normal time, October 28 @ 20:00 UTC.

#widgets

Widgets Sept 23 Chat Notes

We had our weekly chat yesterday. If you weren’t there, you can always check out those cool log things.

A few highlights:

  • We adopted the Widget Customizer plugin as our customizer prototype
  • I tossed out the idea of a “mission control” view for the tabbed prototype, which would let you see all your sidebars at once. The goal with this is to make it easier to move (and maybe copy) widgets between sidebars. Check out the video of this concept in action.
  • We pondered the question “Can the tabbed prototype and the customizer prototype coexist?” Turns out every one seems to agree that both interfaces can coexist. The tabbed prototype lends itself to more advanced functionality with lots of widgets, while the customizer plugin makes it super simple to edit (and perhaps add) widgets to the areas that are currently visible in the preview.
  • I brought up the idea of a way to preview widgets from the tabbed prototype. Turns out this is difficult (and maybe impossible) to accomplish since we won’t know what page the sidebar lives on, or if it even exists. I’d love to find a way to make this possible.
  • Weston got his temporary hooks included in 25580 — yay! This opens up a lot of possibilities for the customizer plugin.
  • We discussed a few ideas for how to add widgets from the customizer. I whipped up a quick sketch showing an extension to the customizer bar.
  • We discussed cleaning up the list of available widgets. The tabbed prototype has renamed a few widgets, and removed the descriptions.
  • Weston brought up the idea of preview thumbnails for widgets. The thumbnails would show a preview of how that widget would look in the current theme. This would require that all widgets have some “dummy” content. Perhaps we could extend this to existing widgets, as well. Having a preview of each widget in the tabbed prototype may help solidify the connection to their location on the front-end. Super cool idea.
  • We discussed the menu-like prototype briefly. I’ve chatted with jtsternburg about his progress. He and his his wife recently welcomed their third child (and future blogger) into the world — congrats! As his time is limited, he’s unable to continue work on the menu-like prototype. He’ll be sharing his code soon, so we can pick it up and get it to a testable stage.

Our next steps:

  • Continued work on the customizer plugin, and lots more user testing.
  • Connect with the front-end team to see how we can collaborate with widget editing.
  • Pickup the menu-like prototype and get it to a testable stage.
  • Follow @lessbloat‘s lead and create a planning spreadsheet to help define tasks and roles.

I’ll be out of town next week. While I encourage everyone to meet in IRC, our next official meeting will be in two weeks on October 7th, 2013 @ 20:00 UTC.

#widgets

Widgets, Sept 16 Chat Notes

We had our weekly widgets chat in #wordpress-ui on Monday, check the logs for the full transcript.

  • More work on the tabbed prototype, with some more user testing.
  • RichardTape is feeling better, and ready to get to work on his prototype.
  • jtsternberg has the foundation for the menu-like prototype ready, and plans to make more progress this week.
  • Discussed the Widget Customizer plugin, and pinged the developers to join us. (Hi Weston and John!)

Short and sweet. Lets keep the conversation going on the comments here, in skype, and in IRC. See you next week. Same bat time; Same bat channel.

#widgets

Widgets Chat Today

Hi everyone — I’ll be in the middle of some in-person user testing today, and won’t be available for our chat this afternoon. Please feel free to meet without me, and I can catch up via the logs. I’ll be testing the tabbed prototype today, along with the existing widgets UI. If you can’t (or don’t want to) make it to IRC this afternoon, please leave any notes you have as a comment below. I’d love to hear how things are coming along with the other prototypes. Thanks!

#widgets

Widgets, Sept 2 Chat Notes

The Widgets team had a short chat yesterday: IRC logs

bobravo2 shared his research into Joomla’s handling of “widgets:” https://docs.google.com/presentation/d/1u7NXNNNdU7dt1jE1GA4bjnfz9BQymIlavRd2PUHI95E/edit?usp=sharing

PaalJoachim shared another mockup for a more visual way of managing widgets: http://easywebdesigntutorials.com/wp-content/uploads/Widgets-area.jpg

Work continues on the four prototypes described in the previous meeting, with the goal of having them all ready for user testing (hopefully) in the next week or so.

In Attendance:

  • shaunandrews
  • bobbravo2
  • helen
  • PaalJoachim

#widgets