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

skip to the tl;dr

Tasks

First off, here’s the scenario I ran:

Introduction
Imagine you’re a Harry Potter fan making a new website. Pretend you want to include a way on your new website to introduce people to your favorite book series.

#1:
Log in using these credentials:
Username: [user]
Password: [password]

#2:
You want to add a new widget to your β€œBlog 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..” Head over to β€œWidgets” and find where you can control the widgets in your β€œBlog Sidebar.”

#3:
Add a new image widget to your β€œBlog Sidebar.” Once you add the widget, add an image to it. There is an image already uploaded for you to use in your Media Library to use. Have the image point to this custom link: http://amzn.to/2tS2Nz5

#4:
You’ve changed your mind! You actually want to change your custom link to https://www.pottermore.com/ instead. Change your image to point to that link instead. Once you’ve updated the link, save and publish your site.

The first couple steps are a little more explicit than I’d usually give because I wanted to focus on getting folks to the widget, without getting tripped up in other parts of 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.. Everyone managed to get to #3 without any issues (except for some login typos).

Stats

I pulled out some general stats about the tests, and the testers themselves:

  • 5 control tests
    • 3 find β€œlink to” in media modal sidebar
    • 2 don’t find or look for β€œlink to” in media modal sidebar, but find in β€œedit” after adding the image to their widget
    • 2 try to add in β€œInsert from URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org” tab of media modal
    • 3 try to paste into image URL field
    • All were eventually successful in adding a link
    • All three who added a link in task 3 were able to able to edit without issue
  • 5 tests with link exposed
    • 1 finds β€œlink to” in media modal sidebar
    • 4 don’t find or look for β€œlink to” in media modal sidebar, but find in β€œedit” after adding the image to their widget (however, one of those 4 struggles a lot with figuring out how to add a link)
    • 0 in this batch try to add in β€œInsert from URL” tab of media modal
    • 2 try to paste into image URL field
    • All were eventually successful in adding a link
  • 4 testers over 40, 6 testers under 40
  • 7 testers have used WordPress (1 of which has never used widgets), 3 testers haven’t used WordPress

Notes

  • πŸ›Β Customizer bug: I was testing out the image widget, and uploaded a new image to my library after clicking β€œAdd image” in the widget. I decided I didn’t want that image anymore, so I deleted it and then closed the media library. Later, I noticed the because I hadn’t saved either the widget, or my Customizer session, the image hadn’t actually been deleted (despite confirming yes, I want to delete it permanently).
  • πŸ›Β Maybe a starter contentΒ bug: the β€œFind us” default widget text gets a legacy error as of 4.8.1. However, I’m guessing this is only an issue for WordPress sites created before 4.8.1?
  • πŸ›Β The styles on smaller screens (as soon as the preview is hidden behind a toggle) need a lot of small tweaking; spacing and sizing are especially rough.
  • πŸ‘“Β Half of all testers either hovered over for a while, clicked into, or even tried to paste the link into the URL field. (This makes a lot of sense to me β€” it says URL, and a link is a URL.)
  • πŸ’‘Β The Image URL field is automatically focused when you select an image, which immediately draws some attention to it. We could consider reorganizing this sidebar so that that the URL is placed either lower down, or in a different location, and have something like β€œTitle” first.
  • πŸ’‘Β We could also, at the very least, consider updating the Image URL label, maybe even just from β€œURL” to β€œImage URL.”
  • πŸ’‘Β A couple people also went to β€œInsert from URL” to add a link. I’m not sure what to do about this, so suggestions welcome πŸ˜…
  • πŸ’‘Β To assuage fears of your new widget being unsaved, maybe β€œclose” should be say like β€œdone” instead? One person called this out explicitly, and another acted like closing β€œsaved” the widget. If this is a trend, relabeling could help sooth things over for worried people without making any sort of technical change.
  • πŸ‘“Β Several people had trouble finding the β€œadd a widget” button; one specifically suggested it should be moved to the top of the list.
  • πŸ’‘Β We should consider different ways of making this button easier to find, including moving placement, changing to primary, or increasing size (this is my β€œgut” pick).
  • πŸ‘“Β β€œLink to” as a dropdown isn’t a great interaction pattern.
  • πŸ’‘Β In this widget, we should select β€œcustom link” by default and allow people to change if they want.
  • πŸ‘“Β Anecdotally, people with larger screens seem to look at the sidebar more than people with smaller screens.
  • πŸ’‘Β Two people try to click the Β β€œno image selected” placeholder; we should take another look at #34323 in 4.9.
  • πŸ‘“Β There are two types of people in this world: people who immediately reach for adding their image and people who explore the sidebar for settings. We should accommodate both.

Conclusion

Based on these tests and anecdotes from people I’ve chatted with about the image widget, I think we should merge in the exposed version. It creates some duplication, but I think it’s worth it because it’ll catch folks who look at image settings, and folks who go straight to adding their images to the widget.

We can probably merge that in soon, and then consider additional related enhancements to widgets and media throughout 4.9 and future releases.

#image-widget, #widgets