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 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 Sidebar 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 Customizer 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 URL 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
You must be logged in to post a comment.