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

How do I upload an image in WordPress?

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.

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, and it should.

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:

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!

Advertisements

Published by

parisvega

Biosphere-dependent life form, living on planet containing only known biosphere within observable Universe.

25 thoughts on “If ya wanna click it, ya better put a button on it”

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

    Like

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

    Like

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

    Like

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

    Like

  5. Pingback: Buttons are for clicking – Resources for web site developers
  6. 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!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s