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?
Tagged: style Toggle Comment Threads | Keyboard Shortcuts
-
Mark Jaquith
-
Jen Mylo
#17324 – UI Style Update
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.
-
Ryan Imel
First pass looks awesome, psyched to see some of the ideas being implemented.
Is the idea that Dashboard widgets will be draggable from only the header, still, or will that be workable on the whole of the widget too?
I’ll be keeping an eye on things. I can contribute patches to help things along as soon as it’s time for that.
-
Chelsea Otakan
http://cl.ly/0A0m3c02170I2I2n2B37
Did another comp trying a shaded box style with light borders. A little more along the line of the style described in the initial post.
Switched the Right Now numbers to Helvetica. I imagine we’ll be using more sans serif now that we’re
using Helvetica/Arial instead of Lucida Sans.Included a button-ish treatment for the expand/collapse buttons. I know we might nix these on the Dashboard, but there are still collapsible boxes in other parts of the UI
Bolded the text on the Nav menu.
The style is a little Apple-ish, let me know what you think :]
Made the arrow indicator a size between the large and small below. -
Greenshady
I don’t have any suggestions and will leave UI to folks that are good at it. But, I just wanted to drop a line and say that you all are doing an awesome job with this. I haven’t been this excited about the UI since we got rid of the old v.2.5 look.
-
Doug
Questions about names and places:
1) Could the tops of metaboxes end up being called something besides “title bars?”
2) The top area, below the newish Admin Bar, was “Admin Header”; will that whole area still be named that now that it’s more obviously two levels instead of one?
3) For multisite, will the toggle between Site Admin/Network Admin still be in the pipes between Howdy [User] and Log Out?
This could be a little early because this is still in flux…
-
Ran Yaniv Hartstein
The new design is gorgeous, but is also very conservative and pale. How about spicing things up a bit with some more color in the default color scheme?
-
Ran Yaniv Hartstein
Also, minimizing the menu is quite challenging ATM – very hard to locate that right spot on the horizontal separators to click on. Can the vertical separator be made clickable instead?
-
Chelsea Otakan
I believe we’re planning to nix the minimize function all together eventually, since you can add and remove boxes from a screen using screen options
-
-
-
Ken Newman
Footer is broken on many pages. Can markup be changed or is this CSS/Graphics only refreshment? With the layout as it is, the footer likely can be put into #wpcontent
-
Daryl Koopersmith
Can you provide examples of pages where the footer is broken? Screenshots, active plugins, and browser details would be especially helpful. Thanks.
-
scribu
Firefox 4:
(latest nightly, not trunk)
-
Ken Newman
I added a patch to trac. The issue is #adminmenuback’s inheritance of the #wpwrap element’s min-height 100% which doesn’t account for the footer element (by 46px) so the menuback comes up short. It’s only visible when the main content generates scrollbars (meaning you can see it on all pages if you shrink the window.)
Appears on IE 9, Firefox 4, but not Webkits
-
Ken Newman
unfortunately my patch doesn’t correct IE it seems.
-
Ken Newman
Putting #adminmenuback up a level (with wpfooter, wpadminbar, etc.) would be a cleaner, easier fix.
-
Ken Newman
My brain is mush. Giving #wpwrap overflow:hidden fixes IE 8, 9 and Firefox 4, no adverse effects on Webkit.
Still a footer issue if the left and right have too much content and line-wrap tho (but that’d be rare).
-
-
-
-
saracannon
I’ve been following along with Daryl’s changes in trac and applying the changes to the Blue Admin. (colors-classic.dev.css) I’ve uploaded a diff to the ticket of what I’ve modified so far if you wanted to download it to see what I’ve done so far.
The colors-fresh.dev.css and the colors-classic.dev.css now match line-for line. There is still more tweaking to be done with colors/borders/menus/widgets. As we go along, I’ll be replacing the patch with modifications following daryl’s modifications.
Screenshot: http://cl.ly/302k273J0e1l0l1B3v1k
I will post up for a review all the blue changes here after the grey is set in stone. :]
-
Ken Newman
I’d like to make the sidebar “fixed” and let the right side scoll (when necessary), clean up some negative margin hacks, move the footer markup into the wrapper element (probably as deep as wpcontent) while keeping it attached to the bottom when appropriate, and get in a better adminbar bump.
I’ll be working on a patch tonight for this, contingent on whether markup changes and fixed positioning can be considered…
-
jane wells
We would not have the sidebar fixed for usability reasons.
-
Ken Newman
I had considered the problem of the sidebar getting to large for the window, and concluded that a second scrollbar would appear on the right… but it’s kinda ugly… I guess I’ll work on a plugin for proof of concept.
-
Jane Wells
We looked at it as a possibility back in 2.7 and it was immediately discarded. Since it’s the same group of leads, it’s unlikely that the team would go for the double scroll.
-
Dean Robinson
Yeah I’d definitely avoid anything that introduces a double scroll. While I like having the menu fixed in place (which is why I added the option to Fluency) I completely agree that for the default WP collapse/expand style menu it wouldn’t work.
However, if the menu was fixed in place, the menu length issue could potentially be handled in a way so that if the current screen height was less than the menu height then the menu switched from being fixed to not-fixed – while in theory that could work I think it over-complicates it for the average user.
-
-
-
-
Nasul
Hello,
I like what you did with the admin area but have you seen what the guys from Blogger did? http://buzz.blogger.com/2011/03/fresh-new-perspectives-for-your-blog.html
Will WordPress (core) have something like Infinite scrolling and posibility to download images as you view them, not all at once in advance?
I like the Blogger Views and it would be nice if you would implement something like this in a future version of WP.Best wishes
-
Jane Wells
Most of the things you reference are theme territory.
-
Nasul
Here are you right…
-
-
-
Hugo Baeta
Just had the oportunity to check out the UI improvements you’re doing on the new dashboard and one thing that immediately felt strange is the background color being white on the main content area. I played a bit with the CSS in firebug and made some changes, mainly switching the background color to #f9f9f9. I also changes the boxes background color to #efefef and tweaked the border-radius for something more subtle, 4px. (instead of the old 6px).
Check it out: http://cl.ly/342H3N2n2W1X0z090h3K
-
Jane Wells
Part of what MT was going for in the refresh styling was to get away from so much gray, but we’ll take it into consideration.
-
Chelsea Otakan
also trying to avoid rounded corners as much as possible
-
-
Travis Northcutt
Has a final decision already been made (publicly or not) on full width header vs. as it is right now (header is only to the right of the left nav column)? I think a strong case can be made for a full width header, but I don’t want to waste anyone’s time doing so if it’s already final.
-
Jane Wells
Nothing is final until May 11, but the lead devs all seem to like the less-wide header.
-
-
Aaron D. Campbell
I loved the mockups, but seeing it in actual dashboards the shadow on the admin menu seems excessive (overpowering). Maybe we should lighten up ../images/menu-shadow.png or even just get rid of it? I personally think it looks really nice without it, but I’m probably more minimalist than most.
-
James Dimick
I kinda wish the new admin menu worked more like this for multi-line top level menu items:
http://img541.imageshack.us/img541/4968/altselmenuitem.png -
Andrew Ozz
There are several things that IMHO looked better before:
Font face, the previously used font looks better and is easier to read at small sizes. If we are staying with Arial think we would need to increase the “normal” size by at least 1px, possibly 2px.
The background used to be a very light shade of grey (f9f9f9) and all postboxes and other components had white backgrounds. That brought the illusion of the components being on top of the background (as it should be logically). Now the background is white and all components are light grey which is contra intuitive. The difference is very small and it seems to work on subliminal level (feels right vs. feels wrong). I tried swapping the background colors and it “felt right”.
-
James Dimick
I agree with you on both.
-
-
tonyjansen_nl
Helvetica Neue Light is best used for body copy (on paper), not for on-screen headings and other key element of a UI. Please consider setting those elements in a non ‘light’ typeface or bold.
If the designer wishes to persist in this misguided way, then please consider setting -webkit-font-smoothing and text-rendering appropriatly. -
Wayne
okay, so i’m like comment #191291023123
something i’ve been wondering for a while, why is the edit post page limited to 2 columns? I have tons of custom post types that don’t even use the main editor and would love to be able to use 3 or 4 columns…
is that doable?
-
Andrew G
I like the existing UI better than what I currently see in trunk. Many of the changes are a step backwards, particularly the decision to use Arial. I mean, seriously, Arial!? Please, please keep the font(s) currently in use. There’s nothing wrong with them. The widgets/menus also look worse than what is in the existing UI.
About the only thing I like is the option to collapse the sidebar. But then, the sidebar should not reach to the top of the page. It’s better for the header to stretch across the screen, as it does now.
If you want more color in the current UI, why not make the blue visual scheme the default?
-
Dean Robinson
I feel that the current shadow used on the admin menu looks a little weird, I think the shadow need to either be a shadow that fades completely into the menu colour, or it needs to be solid colour – not a combination of both which is what the current one looks like examples of each -> http://cl.ly/6Z54
-
Mamaduka
This style updates looks great. But I think Contextual Help and Screen Options link wrappers don’t fit with new style, so I just changed few things to fit new style -> http://i.imgur.com/lnnH8.jpg
-
Matt Thomas
r17324 made me a little sad; I thought the larger icon and headline were important for visual hierarchy. Just my 2¢.
-
Matt Thomas
Uh, duh, sorry, that’s 17833.
-
James Dimick
I definitely agree there.
-
Dean Robinson
I like the little icons, don’t have any well thought out reason why, I just do. But I agree that the page headline does seem to get a little lost at the smaller size.
If it is to stay at the small size maybe the font-weight could be bumped up, and/or the white-space above and below the headline increased to stop it blending in?
-
Ken Newman
giving a little breathing room above it could make the smaller sizes more comfortable.
-
-
Ryan Boren
I’d like to move the 3.1-style icon32 and page title from the h2 up into the h1. Let it be big and beautiful right at the top. What to do with the blog name though. I played around with relocating the blog name over into the “Howdy, $user” user_info block. “Welcome to $blog_name, $user” and such. The blog name would have to be truncated quite a bit and “Welcome to Make WordPress U…, ryan” might not read so well.
The home url could be used instead, perhaps. “Welcome to make.wordpress.org/ui, ryan” I like it, but I have curiously strong dislike for the way the blog name currently (3.1) has so much weight and takes up so much vertical space.-
Erik Teichmann
I think it’s important for the blog name to be prominent — I administer a decent number of WordPress sites, frequently having the admin area of more than one open at a time. A prominent blog title keeps me from making stupid mistakes and changing settings or content on the wrong site.
-
Otto
The blog name is far more important. It’s a link to the front end of the site. People click on it to go to the front end of the site. By reducing its footprint, you’ve made it far harder to view the actual site from the admin end of things.
I click on that link all the time, and am now dismayed to find it harder to find and click on. It hurts usability to reduce that title’s size.
-
Jane Wells
Really, “far harder”? It’s not hard. Of all the things people reacted to when we ported te .com (600+ comments) no one was bothered by making the site name smaller. Getting rid of favorites upset people, not having full TMCE toolbar in dfw caused complaint, and people didn’t like the smaller Arial body text, but no one said it was now too hard to click on the site name.
-
Otto
It seems to be a fairly common complaint amongst the people I’ve been seeing start to switch to 3.2. I recently started using it and it was the main thing I noticed right away as making the admin more difficult to use. I had to actually search to find a link to get back to the front end of my site. If I have to look for things and have trouble finding them, then I think that’s a bit of a problem.
-
-
-
-
Chelsea Otakan
+1 for larger icons. Right now the Blog Header and the Section Headers are competing a little oddly
-
John James Jacoby
+1 for larger icons.
-
luffer
+1, this change has killed my productivity. The site title should be big and obvious, now it’s smaller than the page title below it, which makes the hierarchy look odd. I click on the site title all the time and use it to see which site I’m working on. It’s probably one of my most clicked links in the Dashboard and now it’s one of the smallest!
-
-
andrew_cpht
In the last few nightlies, the link to the Network Admin moved into a dropdown menu next to “Howdy User.” This is incompatible with the iPad (which is my primary means of administrating my site) as the iPad doesn’t support the hover that is being used. It also makes it less obvious that there IS a Network Admin page, unless you happen to notice that little arrow next to your name (which I personally associate with the user profile anyway, not Site vs User admin.
-
andrew_cpht
And as long as I’m on the subject of the iPad, is there anyway you could make the widgets admin function on the iPad/other tablets? There is currently no way to drag widgets across the screen.
-
-
John James Jacoby
While putting contextual help into the bbPress plugin, I’ve accidentally logged myself out a few times because of the sensitivity of the user mouse over. Few thoughts:
1. Delay the menu by a half second or so
2. Use click instead of hover + use rotated “Collapse Menu” button to identify as button
instead of lone-triangle
3. Could use the new “New Post” drop down style up there, instead of another dedicated UI element.-
jane wells
It’s not a button, it’s a toggle. Not adding extra cognitive load and visual density up there by putting a button around it. We are trying flipping the tabs up in the update Daryl is working on.
-
John James Jacoby
The part that I’m referencing looks like a button: rounded, outward bevel, with a hover state.
The result of clicking it is a toggle, but it’s styled like a button. Not any different than the HTML/Visual pill-style buttons in DFW. They toggle, but they are buttons.
-
-
-
smub
Not really digging the Bolded Menu Links… maybe its just my eyes, but it seems a bit too aggressive… I like the unbolded version better.
-
c3mdigital
UI Suggestions (3.2 beta 1)
I prefer the old font-stack better and it doesn’t feel like WordPress to me without Lucida Grande.
The .wrap h2 font should be serif to keep titles consistant.
The h1 site heading and icon is too small. Maybe 20px or use blue. From a UI perspective users have become accustomed to using this link to access the front end.Other than that an icon refresh would be nice.
-
chrishoward
Stylistically, this is looking great. And these comps look ok. But when I use 3.2b1, it quickly becomes evident that there’s an issue with visual hierarchy once other menus are selected, especially as you head towards the lower menus.
The selected menu title background is too strong in relationship to its importance. Is it the thing you want the user’s eye always coming back too? No. You want the user’s eye to naturally head to the top of the main area and then comfortably work down through it.
It works ok on the Dashboard, but others, not so well. E.g checkout Settings. Your eye gets stuck down there alternating between the selected menu title, and the save button.
The other factor is it is an arrow and arrow says “Look here!” Often “here” is blank space and/or irrelevant to where you really want the user looking.
Therefore, something has to be done to give the section title or thereabouts a stronger draw for the eye.
One solution is to employ the design principle of repetition, and match the blog header background to the selected menu title’s background. I’d also tend to lighten both too. The eye then naturally finds its way to the top of the page with feeling the tug of the selected menu title.
Here’s a bit of a hack of the sort of thing I mean. http://d.pr/XHC2
Other folks may have even better solutions.
-
Otto
Question: Why is the Site Title and WP logo so bloody small? I use that link all the time, and now it’s difficult to find and click on. Suggest doubling its visual height, or at least 1.5′ing it. Also suggest reducing the size of the rather useless Page Title and icon.
The Site Title is actually important, people click on it to go to the front end view of their site. The name of the page the person is on is redundant. They know what page they’re on, they’re looking at the page. With this shift in sizing, the link people use often is now difficult to click on, while the redundant information isn’t clickable anyway.
-
Jane Wells
Core team felt it took up too much room. People know what their site is called.
-
Otto
People on multi-site find it handy to know what site they’re on at a glance, and having a big and obvious link to the front of the site is a good thing.
Do I need to write a plugin to correct this, or is there still room for debate on it before 3.2 ships?
-
Jane Wells
The core team all wanted to save the vertical space. You’re welcome to bring it up in dev chat tomorrow pre-RC, but I do not think you’ll convince @markjaquith, @ryan, etc. It was pretty much consensus.
-
Otto
Fair enough. Plugin it is.
-
-
-
luffer
Core team are showing how little they know about how people actually use WordPress then! I use the site title all the time to get onto my site, this “minor” change has had massive repercussions for the way I work!
-
-
-
luffer
The new font in the HTML editor is terrible and unreadable. Why was this changed? How can I get the old “Sans” style back? My productivity has taken a massive hit today, I’m not impressed!
-
-
Jen Mylo
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.
-
Andrew Nacin
The only thing I don’t like about this is “WordPress 2.8.”
Pumped.-
Jane Wells
Cut and Paste, my boy. Cut and paste.
-
-
Andew Ryno
I could help work on the CSS for it.
-
Chelsea Otakan
Here is the PSD (with rounded corners though) if anyone wants to play with it: http://cl.ly/0B1o1b163b18063k0z0d
I’m up for helping on the CSS once my exams are out of the way. Booooo schoooooll
-
krizalis
I’ve downloaded the psd file.. But.. by playing with it.. what do you mean? Basically editing the css file and make it look exactly like the psd file so I can show to the core dev team?
-
Jane Wells
“playing” means doing design experimentation.
-
-
-
Aaron D. Campbell
I love it…especially the sidebar moving all the way to the top. Practically every site I work on has to scroll to see all the links on the left, so getting a few more onscreen will be awesome!
-
rafaelfranca
I did this work for some time, and posted yesterday on my portfolio in forrst, and received the request from many users to send it to you, to be used in WP 3.2 ..
I hope you enjoy..
http://forrst-production.s3.amazonaws.com/posts/snaps/87226/original.jpg?1307640700
I await comments!
-
Jen Mylo
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?
-
Chelsea Otakan
Think this might be cool. Would be nice to see a refresh of something as obvious as the Dashboard on an update. I’ll work on this this week and see where it takes me :]
-
Chelsea Otakan
Here’s my stab at a style update: http://cl.ly/1l2N2n0g0Q350e0N1V1b
There are still some faint 1 pixel borders, but the boxes are more unified, rather than separated into header and body.
To designate that the entire box is draggable, boxes would have a hover state with a shadow and cursor:move (to simulate, lifting).
Added some bounding boxes to the comments so they seem more list-like, since they no longer have full borders.
Updated QuickPress inputs to the rounded corner styleCritique welcome/encouraged :]
-
Jane Wells
Can you try a version without the rounded corners?
-
ryanimel
Same thing, round corners removed.
-
jane wells
Look at you, a UI group contributor now!
-
Ryan Imel
I just hope I can help
-
-
Chelsea Otakan
Gracias!
-
-
-
luffer, 
Andrew Ozz 5:39 pm on May 7, 2011 Permalink | Log in to Reply
One of the comps had them with a light gradient, thought we were adding that. IMHO looks pretty good.
Dean Robinson 1:07 am on May 8, 2011 Permalink | Log in to Reply
Knocked this together quickly, very subtle css gradient for the h3, also switched font to Helvetica Neue and bolded to try and stop it blending in http://cl.ly/6Y6w
chexee 9:14 pm on May 9, 2011 Permalink | Log in to Reply
think we’re trying to avoid going back to entire bordered headers as was the case with the previous style because we’re eventually going to make the entire body of the metabox draggable, not just the header.
James Dimick 10:17 pm on May 8, 2011 Permalink | Log in to Reply
Yeah, the boxes definitely need some love. I think Dean’s idea is a step in the right direction. It still seems like it needs something though.
Dre Armeda 5:19 am on May 9, 2011 Permalink | Log in to Reply
Dean, I like the direction that is heading. Do you have diff we can work with by chance?
rafaelfranca 3:05 pm on May 14, 2011 Permalink | Log in to Reply
My idea is.. http://dl.dropbox.com/u/27577349/wordpress/wp-dashboard-mock.jpg
Is based on simplicity, lightness and beauty. I thought splitting in color, the buttons and sorting areas, would have thus a lighter and consistent. Suggestions?
rafaelfranca 3:13 pm on May 14, 2011 Permalink | Log in to Reply
Adopting the same basic look, the sign would look like … http://dl.dropbox.com/u/27577349/wordpress/wp-login-mock.jpg