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!
curtismchale 8:41 pm on November 20, 2011 Permalink | Log in to Reply
I’m not sure I like the buttons on top for post formats. WordPress already has a nice ‘tab’ interface that you can see for post formats in the post formats UI plugin Alex King released.
http://alexking.org/blog/2011/10/25/wordpress-post-formats-admin-ui
I think it would be better to stick with the UI conventions in place from other areas. Of if we wanted that UI style for post formats change the existing tabs UI to match the new UI we see above.
For the buttons I like the overall idea of but not a fan of the green. Why wouldn’t we stick with using a blue like is currently in the buttons for the text colour?
Zach "The Z Man" 4:21 pm on November 21, 2011 Permalink | Log in to Reply
I agree with the point about bringing the colors more into the grand scheme of the admin (green, red, yellow, etc.) to really tie things together. For those of us who work inside WP all the time, the colors aren’t that big of a deal, but for those people who are brand spanking new to WP (ie: clients, non ‘admin’ literate people (yes they do exist)) colors play a BIG role in know what to do.
Changing the buttons up seems to fit the trend of where things are going on the internet as a whole, but more importantly, echoing the subtle color schemes throughout as well would be a welcomed enhancement.
Ipstenu 4:42 pm on November 22, 2011 Permalink | Log in to Reply
The new button style/shape feels much more ‘modern’ and right away I like it a lot. Not the red/green (too christmassy?) but straight up that looks like a ‘QuickPress’ I’d actually use and not remove from my dash right away. Now if it only had [+ Add Categories]
Ipstenu 6:12 pm on November 22, 2011 Permalink | Log in to Reply
Here’s a lunchbreak GIMP up of the green as a background (and the text bold): http://cl.ly/1x1m1O060Y1l0L3y0I0d
And in context http://cl.ly/360I1c262I0o0K2K2W0c
Mark McWilliams 3:02 am on November 27, 2011 Permalink | Log in to Reply
On the subject of QuickPress for WP.com (sorry it’s straying slightly from the square buttons, which I do actually prefer, they’re not so “in your face” … but that might not always be a good thing) it’s along the same idea of what Alex King coded for the WordPress Admin which can only mean one thing also, it might be something to explore for Post Formats in 3.4 too. But yeah, +1 to square buttons from me, I like what Andy’s done!
Mike Kennedy 5:49 am on December 16, 2011 Permalink | Log in to Reply
That looks pretty awesome, actually! Much like Tumblr
Mamaduka 6:46 pm on December 23, 2011 Permalink | Log in to Reply
Just noticed that new button style of delicious.com look similar to this