We’ve gradually been updating the UI First the…

We’ve gradually been updating the UI. First the header went lighter, then the whole thing got a facelift, and in 3.3 the admin bar + header = toolbar. What’s the next style up for grabs? Let’s talk about buttons. In 2008, man did we love those pill-shaped buttons. We were all Apple-cool. Primaries in dark blue with white text, secondaries in gray with black text. Is it time to push a little on the button design? It’s been 3 years, so I’m thinking… probably, yeah.

Over on the WordPress.com home page, Andy Peatling introduced a new posting form, a la QuickPress, on the main page for logged in users. If you haven’t seen it yet, here’s the new form:

There’s a lot to like about this (post formats integration, single uploader access point), but the thing I want to point out here is the button styling. Different shape, different colors, different text. I’m not saying these should be transported wholesale into core, but it gives us something to think about.

The secondary button (Add Tags) looks a little too much like a Windows desktop toolbar item for me b/c it blends into the background ┬áso much, but that primary button (Publish Post) grabbed me right away. In 2.7 we introduced colors in the Dashboard Right Now box — green, orange/yellow, and red — to indicate different statuses.* We always meant to integrate those colors into the rest of the wp-admin design, but never really got around to it beyond coloring delete links red and pending links yellow. ‘Green means go’ is a pretty universal metaphor, thanks to traffic lights around the world. This button is a little too subtle to stand out as the primary action on an action-packed screen like┬ápost-new.php, but maybe with bold text and an outline (or maybe an actual green button, or maybe something else) we could consider a shift to using green in the primary buttons.

We stuck with blue back in 2008 using the logic that the submit would take you to a new screen, similar to the way a link would. Since then, however, it’s been an uphill battle to get people to use buttons for submit actions and links for links. Maybe separating them by color would make the difference (subtly) more clear.

If anyone is interested in experimenting, post button comps in the comments. Probably won’t devote much attention to this until 3.3 is out, but if we have stuff in progress, maybe we could get it in early in 3.4.

 

  • Coincidentally, Andy Peatling helped choose those colors!