Make WordPress Design

Tagged: images Toggle Comment Threads | Keyboard Shortcuts

  • designsimply 11:58 pm on March 26, 2014 Permalink
    Tags: , images, ,   

    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.


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

  • Jen 1:33 pm on January 6, 2011 Permalink
    Tags: backgrounds, , images,   

    Ticket #15860 Problem: If a graphic file… 

    Ticket #15860

    Problem: If a graphic file is white in color AND has transparent background, as often a case with PNG and GIF files, there is no chance for it to be visible as icon in Media Library. It will always be white on white.

    Need to figure out best approach to solve this problem while not introducing bloat for displaying images that don’t have this issue. Brainstorm in the comments.

    • Peter Kahoun 2:50 pm on January 6, 2011 Permalink | Log in to Reply

      When it sounds like super-rare case, is it really needed to try to solve it? (Sorry, this may not be the kind of brainstorming you asked for… 🙂

      (This form has eaten my comment when email was invalid. @Safari)

    • Matthew McGarity 4:51 am on January 7, 2011 Permalink | Log in to Reply

      Not entirely accurate to say it’s always white on white. Alternating rows have a slightly grey color.

      The login page’s display illustrates a good example: add a shadow to the image, like the one seen when visiting /wp-admin/. On white, it will be dramatic and obvious; on any other image, the shadow would be rarely (if at all) noticed.

    • Will Haynes 12:21 am on January 11, 2011 Permalink | Log in to Reply

      Probably an obvious suggestion. But something like a photoshop grid background?

      At least you’d be able to tell that it was an image, and not blank.

    • Luke Gedeon 3:02 am on January 14, 2011 Permalink | Log in to Reply

      I would hate to introduce the bloat that is needed to handle rare situations like this one, but if we are going to chase this at all, we might as well go with the industry standard of placing the images on a grey and white checkered background. Absolute position the image on top of a div with the checkered background.

    • Tracy Cannon 4:28 am on January 14, 2011 Permalink | Log in to Reply

      Why not take the best of all the above suggestions and use the alternating row colors for a checked css background-image on “.media-icon img”? (Well… that only works in the list view… but you get the idea.)

    • JohnONolan 8:29 pm on January 18, 2011 Permalink | Log in to Reply

      OSX (and to my knowledge, Windows too) don’t bother to address this issue – so I’m inclined to say that we don’t need a specific way to handle this.

    • Chelsea Otakan 8:59 pm on March 29, 2011 Permalink | Log in to Reply

      I’m behind the checkered grey and white background. I don’t think it would be that much bloat (a two-color image pattern and a line or two of CSS).

compose new post
next post/next comment
previous post/previous comment
show/hide comments
go to top
go to login
show/hide help
shift + esc
Skip to toolbar