Categories
Experiments

Button It Up version 1.2 released

With the release of my first public WordPress plugin last month I received encouraging nods and tweets from the community, as well as some constructive feedback. One user requested a very specific set of changes:

Paris,

Thanks for making this plugin! After reading your article a while ago, I went and wrote this exact plugin but luckily found yours before I submitted it to the repository. No need for more than one of these.

I checked out the plugin and discovered one bug and a few ideas 🙂

The Bug

  • You’re styling the div#wp-content-media-buttons rather than a#content-add_media. That leads to ALL media buttons (like the Gravity forms icon) to show up in one weird integrated “button.” See here: Weird button with Gravity Forms.
  • If you change the element you’re styling to the link instead, you’ll also catch the Quick Press’s “Insert Media” button which is currently unstyled. It’s tempting to style ALL links in that row, but I’d shy away from that on the chance that other plugins style their own buttons.

Some Tweaks

  1. Style-wise, I wish the :hover and :active states more closely matched WordPress’s defaults.
  2. To get really nit-picky, the WordPress admin button’s have a border-radius of 11px.
  3. To make things a little more WordPress friendly, I’d use wp_enqueue_styles() hooked to the admin_enqueue_scripts hook to register the stylesheet.

So thanks again for making the plugin. If you incorporate these changes, I’ll definitely be adding it to all my client sites.

All of these tweaks made sense, so I’ve released version 1.2 with the above changes included. Download Button It Up 1.2 from the WordPress Plugin Repository to try it out, or from within the plugins section of the WordPress dashboard.

I hope these changes make the plugin more useful, usable and even desirable to the WordPress community. I look forward to more feedback.

Categories
Experiments

Button It Up

A better WordPress Upload/Insert button

In response to the positive feedback from my last post about making the WordPress Upload/Insert button look more clickable, I’ve written my first WordPress plugin that’s open to the public. I’m calling it Button It Up*.

All it does, for now, is change the style of the upload insert button to look like an actual button.

Other than creating consistency throughout the UI, the main reason for this tweak is to make the button more find-able for first-time WordPress users. Hopefully this tweak, or a better version of it, will make it into WordPress core.

Until then, you can use this tiny plugin to make the WordPress admin more usable for your clients.

You can download Button It Up directly from the WordPress plugin directory.

Let me know if you guys find any bugs or anything.

*The name “Button It Up” was most definitely influenced by the podcast Back To Work with Merlin Mann & Dan Benjamin

Categories
Ideas

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!

Categories
Inspirations

The world’s simplest phone

I love this.

The world’s simplest phone in a sleek little black box. It’s called John’s Phone. Consider it the anti-iPhone. No apps or hi-res screen. Just a phone with buttons that works really well. A better user experience through LESS experience.

John's Phone, The Anit-iPhone, the simplest phone.

Has anybody used one, or seen it in person?

Categories
Adventures Ideas

An Inconvenient User Experience: Gmail Drafts

Summary

  1. I love Gmail.
  2. If you accidentally discard a draft its gone forever.
  3. I think Gmail should send discarded drafts to trash.
  4. You can vote for that feature here.

I love everything about Gmail except one thing…

Discarded drafts are unrecoverable without warning. I accidentally clicked the Discard Drafts button while scrolling by a different part of the page in Gmail. I also happened to have an important long-winded response selected. After the accidental click, it was “discarded”. Or in Gmail terms, “deleted beyond all recognition, and NOT held in the Trash like deleted messages, you should’ve used Google Docs, and your hair looks funny.”

Me: “Geez Gmail. Settle down. We’re all friends here. I just want my draft back.”

Gmail: “No.”

After googling “accidentally discarded drafts” I found that I’m not the only one whose had this problem. There are Gmail users who have lost drafts of love letters to children, important business responses, and other irreplaceable or inconveniently lost documents.

I should have known better.

The popular answer on Google discussion threads are, “You should have known better. You should have used Google Docs.” …

Should we? The Gmail interface doesn’t explicitly or implicitly say that I will not be able to find discarded drafts in the Trash. There is no confirmation to explain the consequences of this irreversible action. Granted, if you’re in the inbox, when you click Discard, there is a temporary “Undo” period. But user beware the Discard Drafts button in the Drafts section.

No warning when discarding drafts in Gmail

Angry little button

There is nothing about the “Discard Drafts” button that says,

“I will delete the (expletive) out of this draft, son. Do it. I dare you. What! WHAT! (slaps you in the face).”

That’s the message the button should convey visually.

Instead we get,

“Hey bud, I’m a normal button. Grey even. Need a back rub. There. Therrre ya go. That’s it. Shhh…”

The Discard Drafts Button: Accindentally discarded drafts in Gmail
The message is not consistent with the severity of the action it initiates. Glance through the book [amazon_link id=”1592535879″ target=”_blank” container=”” container_class=”” ]The Universal Principles of Design[/amazon_link] and you’ll learn about creating things in such a way that the user can’t fail. I recommend the section on Affordance.

A love letter

Dear Gmail UX/UI Design Team,

You guys are great. You got it 99% right and its only gotten better over the years. Its just that the 1% you missed happened to delete all my junk.  Please send discarded drafts to the Trash so that the click happy-fingers of myself and other Gmail users have a reasonable safe-guard against accidental discardationmentness.

Sincerely,
Paris Vega
AKA Guy whose lunch was stolen by the “Discard Drafts” button.

Yes we can (if there are enough votes to prove users care)

I’m sure Google gets millions of complaints daily. To their credit they have a robust help/support system. After voicing my concerns in Gmail Help they directed me to a place where you can vote on new features for Gmail. Low and behold “Discard drafts to trash” is in the Helpful Additions section.

gmail user experience suggestion

If you are a Gmail user and a decent person, please go there now and vote for this feature.