I did a usability test on the recently updated image and gallery features in the editor using WordPress r27502 with a beginner user.
- 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)
No trouble rotating, deleting, re-adding images. No trouble adding, deleting, or changing columns in a gallery (Length: 3:08)
- Have you used WordPress before? If yes, would you consider yourself a beginner, intermediate, or advanced WordPress user?
I have played around with WordPress a little, however i would consider myself to be a definite beginner.
- What worked well for you?
The ‘edit’ functionality was very user-friendly and easy to use.
- Did anything frustrate you?
Found the aspect of trying to re-add the gallery a little frustrating as it wasn’t too clear as to how one would go about doing that step.
(For Reference) Tasks Used in the Test
Introduction: You have a travel website setup using WordPress. You would like to add some new images and galleries using recently updated media features. You will need to have at least one image saved to your computer that you can upload during the test. Please download this one by opening it in your browser and right-clicking on it to save: https://wptestervids.files.wordpress.com/2014/03/img_0668_rotated.jpg Please sign in before you start the test:
- Open any post for editing. See if you can figure out how to add an image to the post from your computer without clicking the Add Media button—think about what might be an easy way to add a new image.
- Explanation step: no worries if you didn’t figure out how to add a new image without using the Add Media button in the last task! The solution is to drag and drop an image directly onto the editor area. If you didn’t figure it out in the last step, try it out now!
- Resize the image you just added so it’s a little bit smaller.
- Rotate the image 90 degrees clockwise.
- Crop the image to get rid of the left half.
- Change the image size to medium.
- Replace the image with a new one from the media library.
- Delete the image from the post.
- Re-add the image.
- Insert a gallery with at least 4 images (you can use images from the media library or upload them from your computer if you’d like).
- Delete the gallery.
- Re-add the gallery and add one more image to it.
- Change the number of columns for the gallery to 2.
- Save the post and view it.
User’s Computer Info
- Operating System: Windows 7 6.1
- Browser: Windows Firefox 27.0
- Display: 1366
- I purposely asked the tester to “re-add” an image because I think some people tend to accidentally delete images and galleries and need to re-add them back again. I could have said “re-create a gallery” to make it a little more clear, but I like not using the exact same words that are in the interface for something where I really want to learn more about the interaction and because users also might not be using those same words.
- Noticed double clicking, especially in the Edit Image screen.
- This tester doesn’t seem to scroll at all in the media modal, which is just interesting to note.
The following suggestions are based on this test only.
- Drag and drop needs to be taught, consider adding a pointer to the Add Media button until the user either demonstrates they understand how to add an image or they dismiss the pointer
- Consider adding a pointer to the first image they insert after upgrading to explain dragging to resize until they either demonstrate the action or dismiss the pointer
- Make the crop button clickable as a first step, then drag, then re-click to set
- Try to fit the most important actions in media into an area a user doesn’t have to scroll to get to
I plan to do at least one more test on images/galleries in the editor. Let me know if you have any suggestions or requests about the tasks.