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… 
Needs patch
Ready to commit
Has owner, needs patch
I would like to note here that we encourage plugins for proposals that involve UI changes because not all people (or realistically, the minority of people) know how to apply a patch or have an environment in which to do so. A plugin, whether or not it’s actually in the .org repo, is a better way to get non-coding types to have a go at testing. I think this is sometimes not well communicated or understood and can come across as a brush-off, so I thought I would write it out here again.
I’d like to propose the idea of an official “WordPress UI Advisory Group”.
As you may have already guessed, I’m a big fan of data informed design. You’ll notice that I didn’t say “data driven” design. There is a difference between being data informed and being data driven. If you’re data driven, you are being lazy by allowing the data to make decisions for you (bad). If you are data informed, you are using the data to help you validate your hypotheses and make informed decisions (good).
Simple example
Let’s say your gut says you should move a signup button from the right side of the page to the left. In testing the button on the left, the biggest thing you should be looking for is to ensure that having the button on the left doesn’t completely tank signups. Even if the data tells you that having the button on the right is slightly better, you should trust your gut.
Summing it up
Use your existing knowledge to make a hypothesis. Use user testing as a safety check. As long as your change doesn’t sink the ship, trust your gut. Use data to help you make informed decisions, but don’t let data bully you around.
Core WP provides a unique challenge, in that there isn’t a super easy way to gather usage metrics. We can’t just slap KissMetrics or Google Analytics into core to see how users interact with the software (and for good reason). We’ve got to be a bit more creative.
I’ve been trying to think of a few ways that we could get feedback from users throughout the design process. I’d like to start with a simple email list.
Why would people sign up
I’d like for this email list to be a venue for people to contribute (thus shaping the direction of WordPress) without having to commit to spending any specific amount of time. They’ll simply:
Where would we promote it?
Wherever we can get away with promoting it. 
But to start, we’d just add the subscribe field to the top of this blog (keeping it simple to start things off).
Where will the list live?
I’d likely just set the list up on Campaign Monitor (unless I hear objections to that idea).
Thoughts?
Had talked in the past about having people check a box on their .org profiles to volunteer for user surveys, usability testing etc, along with some extra profile fields to help us get broad feedback sources, we just never got around to adding it. Doing a mailing list based from this blog automatically self-selects for people with a design opinion, vs being generic users, so if we wanted to start out with a mailing list, I would suggest we put the sign up on the support forums rather than the designer blog.
I would suggest we put the sign up on the support forums
Excellent idea!
What if we tried something like this: http://cl.ly/1h3Q061O2b2i020G173M on http://wordpress.org/support/
Thoughts?
cc// @jane, @helenyhou, @nacin
P.S. The max upload file size for this blog is set to 0KB, so until that gets fixed, I’ll just use cloud app to attach images.
Jane mentioned that “UI Feedback Group” sounds better (less corporate). I agree:
I think I like it, although that area is busy and I know I overlook it (but I’m not typical). Might want the text to say “admin interface” rather than “admin UI”. Also perhaps worth a post/sticky/something on the some of the forums – maybe Requests and Feedback along with Alpha/Beta.
And agreed on the “UI Feedback Group” name instead I think the word advisory would be pretty much lost on most users.
Note: I do know that it’s holiday time in the US. However, I think it would be best to have this discussion this week rather than next week on the day before the dev chat so we have some time to absorb and think thoroughly.
In anticipation of the dev chat for 3.5 scoping on July 11, let’s take some time to discuss the findings of the user testing @lessbloat so wonderfully ran and then see what that means in terms of things we can actually accomplish, or “actionable items”, if you will. Not everything we discuss has to be with 3.5 specifically in mind, and they can be both enhancements and dream features, but we should aim to come out of the meeting with some items that we can confidently propose to accomplish within the cycle, or even better, early in the cycle.
We should also take a little time after that discussion to talk about the actual process of iterating designs, the code to power said designs, cross-browser and accessibility issues, code testing and review, and submitting patches for core. For those of you who aren’t comfortable with SVN/patches/the code-y bits, don’t worry one bit. We’ll be talking about how we can combine our collective strengths to get things done together.
P.S. CSS coding standards have not been forgotten. In fact, they are available for you to see and comment on, if so inclined.
Excellent. Thanks for getting this rolling @helenyhou.
Can we start a separate thread for each of these:
1) 3.5 Features discussion – Start with an open dialogue of ideas – leading to a prioritization of all the ideas – and ultimately a pairing down of ideas for 3.5?
2) Better processes for contributors – ways to make contributing to core (on the design and front-end code side) more transparent and straightforward?
It’s summary time.
We’ve run 3 users through the same set of scenarios (via usertesting.com). You can review the results here, here, and here.
Disclaimer
Now… What exactly are we trying to accomplish with all of this?
It’s important to note that we have to think about these discoveries in the context of the typical WP user. But to be honest, I’m not entirely sure I know what the “typical WP user” looks like (but I hope to dig into that over the next couple of months ). Sure, I have assumptions, as I’m sure you do, but my assumptions aren’t backed by any sort of data.
The important thing to keep in mind here is that these 3 people were paid to perform a list of tasks. While we can benefit from watching their interactions (and looking for patterns of complexity/confusion), we need to recognize that the flow they follow is prescribed, and likely different in some ways from an actual user.
Here’s an unfiltered list of observations across all of the tests:
Background
Dashboard
Media Upload
Post Add New
Settings
Toolbar
Twenty Eleven
This is where I need your insight/input.
1) First, is there anything that you noticed that’s not on this list?
2) Next, which of these do you think we should attempt to address (are there any quick wins that would benefit all WP users)?
3) If you had to prioritize your list, what would you tackle first?
I’ll hold off for a day before I post my thoughts. Don’t be shy! I’d love to hear what you think.
1) Something I think that is starkly missing is mention if the seeming importance of the Welcome Screen and the way in which these 3 users relied so heavily on it. The users weren’t dismissing the screen and using the Dashboard so much as returning to it over and over for guidance.
2) I think one quick win would be to revisit the “Add Media” button. I know I’ve seen some discussion on trace of a labeled button or a larger icon. Another option might be something like an idea suggested by @kovshenin for dragging media directly into the editor. On the topic of the ‘site title’ issues, it seems like we’re moving more and more toward consolidating settings and previews into the Customizer. Perhaps some clearer verbiage on the Welcome Screen about what the Customizer is for (and some pointers once you get there) would be more helpful.
3) Not to rehash too much, but I’d say 1) Add Media, 2) Clearer connection between Welcome Screen & Customizer.
Good points, especially on the permanence of the “temporary” welcome screen.
1. Maybe I missed it, but I didn’t see any mention of the featured image/post thumbnail functionality – there are quite a few tickets already about how weird and difficult that workflow is.
2. More prominence for the Customizer and a consolidation of all of those items into the same admin menu rather than spread out between Appearance and Settings seems like a relatively quick win. Or even duplicating menu items. Would also *love* to find a better color picker – Koop and I have discussed this in the past.
3. Besides the featured image thing, which I’ve talked about several times, I’ve been contemplating a reworking of the dashboard to become more useful – I think I called it “more mission control, less info center”. Full editor + post formats (would help with quick posting photos, much like the iOS app does) for Quick Press, better/prettier information about basic site/post metrics (including all other public post types), etc. This would also hopefully roll in the nice things the welcome panel does – a guide to getting things done for first-timers, as well as quickly enabling power users to get where they usually need to go. For instance, I could see items like “Edit the home page” for a site that has a static front page assigned.
1) I think the “Settings” issue can be expanded to an overall organization/delineation between “Settings” and “Appearance” (as @lessbloat mentioned in an earlier user test writeup). It might be worth thinking about doing user tests specific to figuring out which part of the admin users generally look for things like “Site Title” “Header” “Language” etc. Its something I see a lot of people struggle with when setting up a new WordPress site.
2) I second @helenyhou on making the Customiser more prominent. It could also go a long way with giving insight on how to address the problem I mentioned in #1.
3) I would prioritize rehashing the media flow/making it easier to create media-heavy content above everything else. Its what we get criticised for the most and I think its the biggest thing other CMSs have over WordPress.
1) As I alluded to in my disclaimer, the area that I’m most interested in focusing (at the moment) is in gathering more data around who’s using WordPress, and what they’re doing with it. For example, I’d like to figure out the percentage of people who download WP that:
I’m also very interested in figuring out a way to create a benchmark of sorts and a way to chart our peaks and valleys within the app (moments of joy/pain) over time. If we can figure out a way to do that, we can then prioritize the elimination of the biggest valleys, and work on flows that get users to moments of joy quicker and more frequently.
2) A couple of things:
)3) Honestly, these all sound exciting to me. I’ve tried to list them in order (based on impact/time) specifically with the goal of improving this discovery cycle. After we’ve got a few patches pulled together, I’ll apply them to my little testing environment, and rerun this scenario-set with 2 additional users.
I’ll also be working towards getting my hands on some more data. I’ll post more about that to this P2 in the coming weeks.
For #1, I’m deeply fascinated with that question. While .com may have some success in beginning to build those analytics, I have no clue how to proceed on .org driven sites besides surveys. With such a vast ecosystem, how do you get strong data about user roles and behaviors. For example, I’m deeply curious how many users on average have admin level access (even if they don’t need it) vs people in editorial / authorship roles. It truly affects their experience on the back end.
@lessbloat, how were you thinking of exploring?
For the first part of #1, I’d love to start off by running a series of small (one-question) KissInsights polls after people click the download button on http://wordpress.org/download/. It would look something like this: http://cl.ly/0n0y1v3N3Y1m1L0D1X1S
After we get some data, I’ll summarize the results on this P2.
The second part (figuring out a way to measure peaks and valleys over time) is going to take some noodling. I’m all ears if you’ve got any ideas.
+1 for the kiss insight poll. That is a great idea.
With that said, it’s still self-selecting. I have no idea at this point what percentage of users get their WP install from WP.org. I’d also venture to say that those users fall on the outskirts of WP’s 30 million users (on the more advanced side). But, it’s a start, and any data is better than no data IMO, as long as you acknowledge that it’s a bit tainted.
Though @Jane did have a great idea about adding the UI Advisory signup form on the forums, maybe we could get a few KissInsignts tests in there?
Whirl3d, 
lessbloat, and 
Shane Pearlman, 
Drew Jaynes (DrewAPicture) 4:26 pm on October 12, 2012 Permalink | Log in to Reply
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 | Log in to Reply
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 | Log in to Reply
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 | Log in to Reply
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 | Log in to Reply
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 | Log in to Reply
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 | Log in to Reply
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 | Log in to Reply
I accidentally a word there. *agree.
Helen Hou-Sandi 5:01 pm on October 12, 2012 Permalink | Log in to Reply
“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 | Log in to Reply
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 | Log in to Reply
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 | Log in to Reply
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 | Log in to Reply
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 | Log in to Reply
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 | Log in to Reply
Nice. Like this.
alberrrrt 4:19 am on October 13, 2012 Permalink | Log in to Reply
So nice
Thanks!
lessbloat 5:03 pm on October 12, 2012 Permalink | Log in to Reply
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 | Log in to Reply
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 | Log in to Reply
Seems weird that there is semi-button treatment with blue text though…
JerrySarcastic 5:22 pm on October 12, 2012 Permalink | Log in to Reply
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 | Log in to Reply
This treatment seems more in line with the rest of the screen’s workflow.
Daryl Koopersmith 5:22 pm on October 12, 2012 Permalink | Log in to Reply
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 | Log in to Reply
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 | Log in to Reply
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 | Log in to Reply
Another take:
Mel Choyce 6:20 pm on October 12, 2012 Permalink | Log in to Reply
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 | Log in to Reply
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 | Log in to Reply
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 | Log in to Reply
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 | Log in to Reply
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 | Log in to Reply
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 | Log in to Reply
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 | Log in to Reply
That’s nice. Subtle and yet I know ‘Click this to make stuff happen’
memuller 12:25 am on October 16, 2012 Permalink | Log in to Reply
Nice indeed; it draws just the right amount of attention.
Ben Huson 12:47 pm on October 16, 2012 Permalink | Log in to Reply
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 | Log in to Reply
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 | Log in to Reply
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 | Log in to Reply
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 | Log in to Reply
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 | Log in to Reply
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 | Log in to Reply
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 | Log in to Reply
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 | Log in to Reply
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?