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.

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 Sidebar.” 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 Customizer. 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 URL” 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