As you know part of the scope for 3.3 was a revised admin bar that would reduce duplication in the admin header. The first draft of it has been posted to Trac.
It needs a color refresh, some optimization, some decisions about which links going where, etc, but is the starting point we are using. Would like to get it back toward the lighter gray we used in the header before, but with some border maybe so it doesn’t look like browser chrome. Fiddling with the links and stuff will happen on Trac, but if anyone wants to mock up some color variations, we have until Sunday.
Not quite loving the metabox h3 style. The title of the box doesn’t stand out enough. Played around with some CSS gradients as a background, which was promising. But I’m sure someone else can mock up something quicker than I can. Not looking for a big change here, just something subtle so that the title doesn’t blend into the metabox text so much. Any ideas?
This thread is for suggestions/questions about the UI decisions in the 3.2 style update, so the trac ticket can be kept clean for ‘this needs to be done’ tasks identified by leads and/or bug reports related to the style code.
Storage Space 100MB Space Allowed 0MB (0%) Space Used
…and “Space Used” is green by default. It should be gray since it doesn’t denote an action has applied a positive status. Gray until the ‘almost near limit’ color kicks in.
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) | Trash (3)
…where the link styles are the same as on edit-comments.php
3.2 feature freeze is this weekend, with final post-testing/usability review UI freeze about a week later, and beta starting on May 11. With this tight of a timeline, it’s entirely likely that it is too late to do a style update for this release, and it will wind up in 3.3. That said, sometimes everything just comes together in a perfect storm of creativity and collaboration, and things can happen faster than normally are possible. Maybe this will be one of those times.
Just over a week ago, I was talking with Matt, and we were discussing two things:
1. What’s the UI equivalent of the performance improvements that are forming the bulk of the 3.2 release.
2. Every platform and its brother seems to have copied the WordPress admin UI, and what was once lauded as amazing and a huge step forward is now kind of looking like everything else (through no fault of our own, other than the ‘fault’ of being awesome). Maybe it’s time for us to update the style a little bit and start the next wave.
To that end, I posted here on April 20 posing the question, “What if?” regarding our admin styles, making it clear I was not talking about a structural redesign, but a style update. @chexee did a comp. I made a comment. @ryanimel did a follow-up comp. Collaboration in action!
Since @chexee is entering her exam period (graduation soon, yay!), I asked Ryan if he’d like to do another iteration combining some menu styling updates, and he said yes (new contributor, yay!). I sent him a PSD of the menu/header refresh that we talked about doing back in 2.8 but decided to put off until later, then wound up never doing. It was after 10pm when this went down last night, so I dusted off photoshop and did some comp combining of my own in case Ryan wound up not having time. I emailed the resulting comp as a POC to the lead and commit-level developers (including Matt) to get a gut check on if this was something we wanted to pursue. Yes.
But! It’s much too late for 3.2. Or is it? If the styling changes are mostly happening in CSS and someone volunteers to work on it, then maybe not. Here’s where it stands:
- Chelsea did the first comp in response to my post.
- Ryan Imel did the second comp in response to my comment on Chelsea’s comp.
- I sent Ryan Imel PSD of Matt Thomas’s nav/header refresh comp from 2.8
- I cut and pasted bits of Ryan’s comp and MT’s comp, and moved some stuff around to make a new comp. Sent to leads for review.
- Leads liked it. Talked about what I would change if spending actual time on it. Got some feedback for what we need to address/finish/improve for it to be core-acceptable.
- Talked to MT about addressing several issues, since menu/header stuff came from his comp. He’s going to try to do several things today, including *Create a gutter between nav sections, *Change direction of arrow so it goes from menu to main area, *Try a repositioning of header elements so that blog title and screen could be oriented in a navigational breadcrumb (involves smaller font, typography adjustments), tabs could flip up again, smaller footprint for header, bring back faves menu (probably need to wait unti l3.3 to talk about removing it). He’ll also take a stab at giving a little gradient and/or bevel love to the boxes to keep the crisp edges and feeling of depth while making it less like 90s windows ui (requested in feedback). It anyone else would like to take a stab at this as well, if you can do it by EOD today, have at it and we can look at it along with MT’s and see what looks like it fits best.
- Need a volunteer to jump in on CSS updates for it.
- @azaozz will check into the JS implications.
- Need to get a patch of general intent into core by end of tomorrow, to meet feature freeze. We then have until May 11 for UI refinements. So please, let’s not start a conversation in this thread about details. We have all next week for that, and can devote the UI meeting to it as well. Let’s talk details after we have a basic something done that gets in by freeze. If we don’t get a first pass in by freeze, then this will be postponed until 3.3, so please keep remarks focused.
- Once initial patch goes in, we can delve into ui details/improvements. Will also start a ticket for some text improvements, which everyone can contribute to as well.
What is cool about this is that even something happening quickly already has 4 different people contributing to the design to get it to where it ought to go.
Not to open a can of worms where everyone starts going crazy over the idea of a redesign, which is *not* my intention, but given that every other CMS seems to be copying our dashboard design, I wonder if we might want to update the style a little. This is just a gut-check question:
- What if instead of boxes with a 1px outline and grabbable header bar, the “boxes” were just delineated by background shading, the ‘headline’ label sitting on the same shading instead of a header bar, and the whole background was a drag handle?
The Comments screen is something I want to improve soon. It’s a big challenge, though, and we will hopefully have a gsoc project dedicated to it, so I don’t want to plan something that would prevent the gsoc project from being committed if it turns out well. If the project gets accepted for gsoc, will anticipate doing ui review in group mtgs/on this blog to help direct the interface (student has done some early mockups to get started).
In the meantime, let’s talk about the Recent Comments box on the Dashboard screen. It was thrown together in 2.7 and never revisited b/c no one had time, and when a student did it as part of a gsoc dashboard modules project last year, it wasn’t super successful. It needs to be redone, and has needed it for over 2 years. Some of the things we meant to get around to:
- Don’t just display x comments, but bring in the ‘river of comments’ model.
- Expand to see all of comment text (on hover? on click? need to decide).
There are more, but I’ll let you guys have the fun of identifying them. Leave your suggestions in the comments and let’s discuss at an upcoming ui group meeting, prioritize, and have someone mock up the decided course.
Trac UI challenge:
Probably not that much of a challenge, necessarily, but would need approved mockups for someone to want to start a patch. Collapsible page hierarchy on edit.php?post_type=page.