We’ve gradually been updating the UI First the…

We’ve gradually been updating the UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing.. First the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. 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.comWordPress.com An online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. https://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 coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., 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!

#buttons

#17282 – Dashboard Recent Comments “View All” update

The “View All” buttons on the dashboard boxes are weird b/c they are buttons, but they aren’t actions, they are links. Would like to start switching over to a standard where buttons are mostly reserved for action/commitments, not just links to another screen.

Suggestions for Recent Comments box: instead of “View All” button, replace with links to the various views of the comments screen. So:

View All | Pending (24) | Approved | Spam (6) | TrashTrash Trash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days. (3)

…where the link styles are the same as on edit-comments.php

#buttons, #comments, #css, #dashboard-2, #links, #trac