If ya wanna click it, ya better put a button on it

How do I upload an image in WordPress?

wp-upload-insert-button

Frequently, clients who are staring at the WordPress content editing screen ask me, “How do I upload an image?” As an experienced WordPress user/designer/developer I used to get blown away by how silly such a question sounded. The button’s right there! But after running in to this problem again and again, I’ve decided the user is not at fault in this case.

The interface is deceptive. Let me explain…

An inconsistent UI design language

The upload/insert text+icon combo is too subtle and actually deceptive UI when you look at the WordPress dashboard overall.

wp-header-upload-similar

The same design language for the page header (icon+text on transparent background) is used for the clickable link (text+icon on transparent background). By that logic the Upload/Insert link looks like a small title or descriptive text. It doesn’t look clickable, but it should look clickable, because it is clickable.

Make clickable things look clickable

So as the user scans for some visual que to capture their attention and say, “Click me to upload your stuff!”, they skim right over the small text that lies outside of the area containing lots of other more obvious buttons.

Even something as simple as what I’ve mocked-up here would be an improvement:

wp-suggestion

Now there is a clear distinction between the rest of the UI and the Upload/Insert button. It doesn’t look like part of the dashboard text anymore. It looks clickable. And it is.

(UPDATE: Since publishing this post I’ve written a plugin that makes the Upload/Insert button look clickable.)

Feedback?

Anybody on the WordPress UI team out there that could respond to this suggestion?

*Special thanks to WordPress and Beyoncé for inspiring this post.

UPDATE: 

WordPress 3.5 took my advice!


Posted

in

,

by

Comments

23 responses to “If ya wanna click it, ya better put a button on it”

  1. Tammy Hart Avatar

    I completely agree with you. Have multiple icons before made it a tiny bit less of a guess. I've also noticed that other plugins follow suit by adding their icons there: Gravity forms, Donation can, off the top of my head.

    1. Paris Vega Avatar

      Yes! I'm not alone.

    2. Tammy Hart Avatar

      Paris Vega have you submitted this comp to them? they take this kind of criticism/request all the time.

    3. Paris Vega Avatar

      Tammy Hart I'm not sure if I submitted it to the right place or not. I hit up their lead UX designer on twitter and submitted a ticket to their tracking system.

  2. […] post is a bit old, but I love Paris Vega’s thinking on the WordPress Upload/Insert button: Frequently, clients who are staring at the WordPress […]

  3. Mark Root-Wiley Avatar
    Mark Root-Wiley

    Paris! This is a great idea! I'm considering turning this into a plugin, but I wanted to ask whether 1) you planned to do that or 2) you know of anyone who has (I can't find anything). If either is the case, then I'll pass, but otherwise, I'd love to get this onto wordpress.org. If people like it, then I think that makes a good case, long-term to integrate it into WordPress.

  4. Mike Schinkel Avatar
    Mike Schinkel

    +1

  5. Tareq Hasan Avatar

    Yeah, it's a usability issue. Agreed.

  6. Ethan Anderson Avatar

    Incredibly good point. So simple, so important. I have clients ask me that often as well but I never thought about how simple the fix could be.

  7. WordPressTrainer Avatar

    I also like to show them how to minimize the left sidebar so as not to get too distracted. Hopefully we see your great suggestion in a WP update soon!

  8. Caroline Moore Avatar
    Caroline Moore

    Yes, yes, yes, 100% yes.

  9. Janet Hall Avatar
    Janet Hall

    Very good point. I also do training and web site developing and this same thing happens over and over again.

  10. Denis Leblanc Avatar
    Denis Leblanc

    I couldn't agree more. Even myself, being and avid user, still find myself squinting to find the uploader.

  11. Ryan Hellyer Avatar

    Thanks for the new UI concept here. I've noticed people get confused with this in the past too, but I wasn't sure how it could be changed to make it more obvious, but your alteration here is an excellent step in the right direction IMO.

  12. Mark Root-Wiley Avatar
    Mark Root-Wiley

    Great idea, Paris. I've had this thought myself before. If you don't have plans to do so, I was thinking I'd turn this into a plugin (probably using a default WordPress button style to best match the UI). I couldn't find any plugins that did this already, and I think a popular plugin would bolster the case for making this change.

  13. Andy Keith Avatar
    Andy Keith

    Couldn't agree more. I always thought this was poor UI design, should be changed.

  14. Sebastian Angelo Cork Avatar
    Sebastian Angelo Cork

    Thank you for developing this wonderful plugin that is based off a brilliant idea!

  15. Ihor Vorotnov Avatar

    You are completely right. This is one of the things which makes me sad about WP. And most of these things are gallery/media related, unfortunately.

  16. Buttons are for clicking – Resources for web site developers

    […] publish is a little bit aged, but I love Paris Vega’s considering on the WordPress Upload/Insert button: Regularly, consumers who are staring at the WordPress […]

  17. Al Ə Ks Avatar
    Al Ə Ks

    its possible to make all *clickable* links on mainsite to buttons? (not only at dashboard).

  18. […] should be much more visible! This improvement has been requested 6 months ago (the requester even wrote an article about it), but didn’t get much traction. I reopened the ticket, and I really hope that action will be […]

  19. Aj Clarke Avatar
    Aj Clarke

    Yes, yes and yes. This is something that definitely needs changing.I can't even tell you how many people have asked me before how to upload media simply because they can't "see" that upload link. It has to be a button!

Leave a Reply

Your email address will not be published. Required fields are marked *