WordPress Images/Galleries — Usability Test 1

I did a usability test on the recently updated image and gallery features in the editor using WordPress r27502 with a beginner user.

Summary

  • 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)

See more highlight reels after the jump.

#editor, #images, #media, #usability-testing-2

Media Wireframes

Over the past week or so, I’ve worked closely with @lessbloat (Dave), @nacin, and @markjaquith to create a set of media workflows that will hopefully serve as a foundation and guide for the improvements in this releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software.. (This is the fifth version of these wireframes — you can see the first four on Dave’s site.)

The usual disclaimers: None of this is final. These are wireframes, so please focus your feedback on the experience, not the aesthetics. As for scope, we are focusing our changes on improving the modal experience. This focuses on the overall picture; not all of this will necessarily make it into the final release.

So, without further ado…

Wireframes and workflows — fullscreen recommended.

The media library.

The media library, while uploading three files.

The attachment details screen.

Relevant TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. tickets: #21390, #21391.

#3-5, #media

Also, weigh in on what to label the butt…

Also, weigh in on what to label the button for linking an image to the file, the post containing nothing but image, or nothing at all. https://core.trac.wordpress.org/ticket/13544

#labels, #media, #uploader

Is anyone willing to mess with the sprit…

Is anyone willing to mess with the sprite and get ticket https://core.trac.wordpress.org/ticket/8545 fixed within the next day or so? It’s a small background color/image issue that goes lost in the shuffle but probably aggravates every designer here when uploading media.

#image, #media, #patch, #sprite, #trac

When you upload a single image, you can …

When you upload a single image, you can choose what you want the image to link to. Your choices are: any URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org you type in, nothing, file url, or post url. Post URL makes it sound like you’ll be linking to the page you’re on when viewing the blog post, because average users don’t get the who image-as-post-type thing. We should relabel that button in the uploader to be easier to understand for the average user.

“Image URL” sounds like it would do the same thing as “File URL,” so that’s out. “Image Page” is better, but is there something even more appropriate that one of you can think of? Leave suggestions for this button label in the comments below.

#labels, #media