Wow, loving the feedback that came in about the welcome screen. Thanks everyone!
I’ve got another design challenge for ya. What (if anything) can be done for the “add new” buttons?
They don’t really look like buttons to me. I tried simply adding the new default button style, but I wasn’t a fan. Thoughts on how these could be improved?
Mockups welcome… 
Whirl3d, 
Drew Jaynes (DrewAPicture) 4:26 pm on October 12, 2012 Permalink
For reference, here’s what it looks like with .button-secondary applied (and vertically aligned): http://cl.ly/image/2z0s00030a0M
Helen Hou-Sandi 4:27 pm on October 12, 2012 Permalink
They probably shouldn’t be conceived as buttons because it’s really a link to another screen, not an action on the current one.
Andrew Nacin 9:53 pm on October 12, 2012 Permalink
Yes. As MT said elsewhere in this thread, it wasn’t designed to be a button. It’s a glorified link, not an action for the current screen.
Will Norris 4:28 pm on October 12, 2012 Permalink
I think border shown in the screenshot Drew linked to goes a long way to call out that it’s a button. It probably wouldn’t even need to be that dark, unless you’re concerned about not having enough contrast.
esmi 4:28 pm on October 12, 2012 Permalink
Can you re-use the button-primary class? As this is used for logins, publish actions etc. it should feed into the the “this is a button/action” mindset created by the rest if the UI/
saltcod 4:34 pm on October 12, 2012 Permalink
A colour invert doesn’t make it more button-y, but certainly makes it more prominent:
Drew Jaynes (DrewAPicture) 4:42 pm on October 12, 2012 Permalink
I about it being more prominent. I also tried it with a rudamentary + symbol down next to Bulk actions:
Drew Jaynes (DrewAPicture) 4:42 pm on October 12, 2012 Permalink
I accidentally a word there. *agree.
Helen Hou-Sandi 5:01 pm on October 12, 2012 Permalink
“Add new” is neither a bulk action nor filter, and so does not belong in such a place.
Drew Jaynes (DrewAPicture) 7:59 pm on October 12, 2012 Permalink
Just thinking outside the proverbial box a bit hah.
alberrrrt 4:18 am on October 13, 2012 Permalink
Ipstenu (Mika Epstein) 5:09 pm on October 12, 2012 Permalink
This one, unless we have an intermediary blue (tertiary?) css for less bold. I like the blue background better than an icon + words.
JerrySarcastic 4:45 pm on October 12, 2012 Permalink
Why not add one of @saltcod icons? Makes it pretty easy to understand what it does at a glance, without it being *too prominent*
Drew Jaynes (DrewAPicture) 4:46 pm on October 12, 2012 Permalink
It’s an interesting idea but then I feel like the pin icon and the button icon are competing, with ‘Posts’ mashed in between them.
Ben Huson 12:42 pm on October 16, 2012 Permalink
Also, for custom post types the icon may not be appropriate. Think “Add new Podcast” – A document icon probably isn;t as appropriate for that.
saltcod 4:48 pm on October 12, 2012 Permalink
Nice. Like this.
alberrrrt 4:19 am on October 13, 2012 Permalink
So nice
Thanks!
lessbloat 5:03 pm on October 12, 2012 Permalink
One note: I don’t think the change needs to be all that drastic. From a UX perspective, I don’t think the link is broken. People see it, and they click it as is. I just feel like the design feels off somehow (like it’s a leftover artifact from another admin design era).
lessbloat 5:08 pm on October 12, 2012 Permalink
One idea I had was a lighter treatment with a flat background:
Again, this link doesn’t need to command the attention of the user, it just needs to fit in.
Other thoughts?
lessbloat 5:20 pm on October 12, 2012 Permalink
Seems weird that there is semi-button treatment with blue text though…
JerrySarcastic 5:22 pm on October 12, 2012 Permalink
Agree, it should be a button or a link, but probably not styled to look a little like both… You’re right that the change doesn’t need to be huge though; I like this look overall, minus the blue text.
Reji Thomas 6:04 pm on October 12, 2012 Permalink
This treatment seems more in line with the rest of the screen’s workflow.
Daryl Koopersmith 5:22 pm on October 12, 2012 Permalink
These styles were actually was added in the most recent redesign as the style for links in page headers. @iammattthomas would probably remember a bit more about the design decision.
Matt Thomas 9:09 pm on October 12, 2012 Permalink
The idea, more or less, was to make the link stand out a bit more than a standard text link, but we specifically tried not to make it look like a button. as @helenyhou stated above, it’s a link to another screen, not an action. That’s the usability reason; but also visually the primary and secondary button styles seem way too heavy to use here.
Helen Hou-Sandi 9:17 pm on October 12, 2012 Permalink
Thanks for the history, @iammattthomas
I need to spin up some old version installs for more reference – I seem to have lost the ones I had. I hope others will take heed of this being a link and not a button as ideas are explored. Although, I’m impressed at how closely the comments have stuck to the spirit of the prompt!
lessbloat 5:28 pm on October 12, 2012 Permalink
Another take:
Mel Choyce 6:20 pm on October 12, 2012 Permalink
The color on this one feels off — it’s too desaturated. It doesn’t really fit with the other blue we’re using.
Drew Jaynes (DrewAPicture) 8:07 pm on October 12, 2012 Permalink
I think @saltcod’s is the best I’ve seen so far with button-primary. Here are three different screens of it:
Drew Strojny 8:59 pm on October 12, 2012 Permalink
I like the primary action button too. I’d vote for shrinking the text size down to 11px on the button and making the text more descriptive of the action, adding some more space (above the h2 and to the left of the button), and increasing the size of the h2 and lightening it slightly.
(I used a larger screenshot to show it with more context)
saltcod 11:17 pm on October 12, 2012 Permalink
If just ‘fitting in’, as @lessbloat said, is the goal, I think the blue button style is a bit strong. A bit softer is inverting the colours as I mentioned above (swapping font-color and background-color). Perhaps @lessbloat‘s touchup of the original is enough? http://make.wordpress.org/ui/files/2012/10/add-new-mockup.jpg
memuller 2:18 pm on October 13, 2012 Permalink
Agreed; @lessbloat‘s work is enough. Even so, if it can be somehow made to be even more bland, I’d go for it. It really, really, shouldn’t look like a button, since it’s not one in any way.
alberrrrt 4:21 am on October 13, 2012 Permalink
Thanks for deep review of one button
That’s my first attendant on this #BLOG, sounds like wierdo but it’s true 
And deep inspirational came after the first seeing of this conversation at once 
lessbloat 2:55 pm on October 13, 2012 Permalink
What if we just added a smidgen of padding, and a very very faint drop shadow?
Original is on the top for comparison:
Ipstenu (Mika Epstein) 2:28 am on October 14, 2012 Permalink
That’s nice. Subtle and yet I know ‘Click this to make stuff happen’
memuller 12:25 am on October 16, 2012 Permalink
Nice indeed; it draws just the right amount of attention.
Ben Huson 12:47 pm on October 16, 2012 Permalink
I prefer this option so far.
A blue button feels too prominent.
A text-only link does not feel prominent enough.
I am open to the idea of using an icon as long as it is a generic icon like a “+” or something, rather that a document icon etc
@mercime 6:02 am on October 14, 2012 Permalink
What if we add a simple arrow after “Add New” like so: Add New ->
Arrow can represent call to action and new panel. Then hover can be blue with white font and arrow.
[ Sorry, can't do a mockup right now. ]
kingbt 2:02 pm on October 15, 2012 Permalink
Hi. Add New is a very important button and think that it should be blue (like WordPress 3.5 Publish button http://make.wordpress.org/ui/2012/10/12/wow-loving-the-feedback-that-came-in-about/#comment-22500 ) or at least white (with or without icon) like this http://make.wordpress.org/ui/2012/10/12/wow-loving-the-feedback-that-came-in-about/#comment-22486 but not flat.
Isaac Keyet 3:53 am on October 16, 2012 Permalink
To preserve the hierarchy and not use the standard button style, I think it should just be a regular text link that’s made more prominent by association alone. After all, isn’t it confusing to style a link “a little” like a button if it’s clearly not supposed to be one? Having that secondary “in-between” type of navigation item doesn’t resonate so well with me.
This is what I think makes the most sense for a link that is supposed to link to another page as highlighted in the main (sidebar) nav:
This makes the page 8px taller though, not sure if that’s a concern.
Anyone interested can append this CSS to try it:
.wrap .add-new-h2 { background: none; margin-left: 44px; line-height: normal; padding: 0; float: left; clear: left; } .subsubsub { clear:left; }karmatosed 10:14 pm on October 23, 2012 Permalink
I really like this option. I’m not too keen on the blue backgrounds / buttonification of it. It’s not a button so shouldn’t be treated like it.
toscho 5:37 pm on October 16, 2012 Permalink
How about removing the link? We have two other instances on this page and could just make the ‘+ New’ in the admin bar make stand out better.
Sebastian 7:39 am on October 17, 2012 Permalink
What about adding a “+” icon next to a simple text link?
Preview: https://www.dropbox.com/s/u2twyhxblxsrtk2/wp-add-new.png
KentonWebDesign 2:29 am on October 31, 2012 Permalink
Why not maybe direct the button more towards the operation, like so?
https://www.dropbox.com/s/g1w19z8uwsbfp4u/addnew-button-wordpress-v1.jpg
or even use the lighter grayish style taking from the dash color scheme?
https://www.dropbox.com/s/3xoa1nrg47ul4lv/addnew-button-wordpress-v2.jpg
Might work, right?
Whirl3d 10:40 am on October 31, 2012 Permalink
Personally, having used computers since before the internet, I don’t really have a strong memory of button functionality ever being an integrated piece of a section section header (other than maybe a close /min/help buttons). That is certainly not to say that it hasn’t been done or that I don’t see it every day and don’t think of it as such, just that I don’t think to look in my section header for a button unless it is strictly a ui-button that affects the object holding the header (like a close/minimize button). It would just make more sense to revamp the entire grid header for content types to include the basics like ADD, EDIT, LIST and then make them available in one and only one place. But if you are sold on the add new function being added to the header, why not follow most browser tab menus? Put a tab with + Add New tab behind it ghosted until moused over like the + tab in Google Chrome?