Reducing visual noise within the admin

[melchoyce]

This closely relates to #23333 (New icons).

There's a lot of visual clutter and noise in the admin (gradients, shadows, etc.) and not a whole lot of breathing room. We're moving towards new, vector icons, but they currently don't fit stylistically within the admin.

I've taken an initial stab at playing with a flatter, less cluttered dashboard screen: ​http://f.cl.ly/items/3Q0e0y1E1X231K1s3i0M/wp-flatter.png (Ignore the font — I was playing around with Open Sans, but I think it makes sense to stick with just "sans-serif" as our generic font stack.)

You can see a comparison of the current navbar with icons vs. new icons and a flatter, more spacious navbar:

How do people feel about the direction we're moving in?

[helen]

So long as #23333 is slated for 3.6, this should be as well.

[scribu]

Stop my eyes from bleeding when looking at trunk and get this in already! :)

[saracannon]

yes! is this in a patch? or is it a mock-up? I would love to try some lighter bg greys

[melchoyce]

Right now it's just a screenshot of me playing around in developer tools, but I can easily make it into a patch later tonight. There was some concern in #23333 about making the navbar too tall with the padding I'm using, but I think it needs extra vertical padding.

[aaroncampbell]

Replying to melchoyce:

Right now it's just a screenshot of me playing around in developer tools, but I can easily make it into a patch later tonight. There was some concern in #23333 about making the navbar too tall with the padding I'm using, but I think it needs extra vertical padding.

If you can work this into a patch, then everyone can use it as a jumping off point to play with it (and they can try various amount of padding, etc)

[melchoyce]

Sure, I'll patch it up tonight.

[melchoyce]

FYI, I'm about 80% done with the initial edits. I'll finish everything up tomorrow and then post my patch.

[scribu]

Just got a link to this plugin: ​http://devpress.com/plugins/dp-dashboard/

It does a bunch of things which presumably make the admin UI more usable. Just thought I'd mention it, in case some of them made sense for Core.

[melchoyce]

Thanks for the link, scribu — that plugin looks pretty attractive. Do you own a copy? I'd love to see a video walkthrough of it.

23415.diff​ is a first shot at flat-ifying the admin. It is most definitely a rough draft, and clearly needs a lot of work. Some things I know for sure need fixing:

• Tabs colors need to change to match container backgrounds (didn't catch this until after patching, sorry)
• My spacing changes totally threw the collapsed navbar is totally out of whack. The entire collapsed state needs a lot of love
• I can't figure out how to make the navbar arrows bigger
• Actions and buttons now feel really cramped and need some more space

[scribu]

Sent you a copy via email.

[aaroncampbell]

23415.2.diff​ is a riff on Mel's 23415.diff​ with a few changes:

• It puts the padding back to how it is currently in trunk, which makes the menu items shorter as well as the meta box titles
• Tweaks the position of the icons in the menu just slightly, mostly to work with the padding
• Instead of having a 1px border-top on table cells in widefat tables that's transparent, I just removed the border-top

Basically this is just a way to see how things look with more padding (23415.diff​) and less (23415.2.diff​)

[aaroncampbell]

Also a quick note: Neither patch touches the blue theme yet.

[aaroncampbell]

I added 23415.3.diff​ to fix the position of the dashboard hover/selected icon in the menu. 2px != -2px

[sabreuse]

Just a couple of general impression notes:

• killing gradients and text shadows on metabox and list table headers makes me happy.
• on the other hand, the header colors (or something about the header design anyway) need adjusting if they're not going to have gradients to make them more clearly headers.
• also happy to lose the shadow at the edge of the menu.
• on the other hand, killing the shadows on flyout menus is problematic -- the impression that they're floating above the main content of the screen is gone and it's much harder to make out the menu from what it's popping out over. I think the shadow can probably be toned down a little to get a flatter aesthetic while keeping enough distinction to have the functional benefits.
• on padding, I kind of want to play with something in-between. Call me Goldilocks.

[sabreuse]

Added 23415.4.diff for people to play around with. The padding on menu item heights and metabox headers is somewhere between Mel's version and Aaron's, and the navbar arrow is adjusted for this size.

Looks like:

[helen]

I think sabreuse is right - playing Goldilocks with the amount of padding is probably the right way to go. Metabox headers might still be a bit big in 23415.4.diff​, and along with that, table headers might need to grow a bit to be more in line.

Other thoughts:

• Would actually rather keep the shadows for admin menu (both inset for the menu itself and the drop for the flyouts), as well as the inset one for the customizer. I find the separation to be quite meaningful, especially in the case of the customizer when used with a theme that has a gray background. I don't think flattening has to mean completely flat.
• Headers do indeed need a different treatment - could be as simple as darker, but not sure. Needs exploration.
• I wonder if we could kill the list table outer borders completely (or even all the borders in those tables) and also do some tweaking to the list tables in general. It might not work, but worth a try. We have lots of borders - maybe there's a way to get rid of some of them to reduce busy-ness without creating a disjointed experience.

[joen]

Love what's going on here. Beautiful work, this is exciting!

I don't think it's necessary to tackle the toolbar for this round, it was pretty simple already. Also, the inset shadow provided some separation between toolbar and content. There's no reason to go all out and flatten everything, for example I don't think we need to change the buttons either.

[mrwweb]

I like where this ticket is going :)

• on padding, I kind of want to play with something in-between. Call me Goldilocks.

Regarding padding, I wonder if this might call for some vertical media queries. Someone actually put together one idea for their use with ​the admin menu on CSS Tricks. (I like the "sticky" menu implementation here, though that's outside of the scope of this ticket.)

In this case, the solution might be similar to the responsive Google Reader or Gmail themes which decrease vertical padding on both horizontal and vertical window resizing. I'd lean toward just doing it for vertical resizing, but who knows what would be preferred. The only question is whether we'd have to follow the Google lead and allow people to override that change with a setting. If that's the case, then I think the whole idea isn't worth following.

[lessbloat]

If we're not careful, this ticket will shoot down a thousand rabbit holes, and never see the light of day. I think we need to agree on a pretty tight scope for this particular ticket to have any realistic expectation of it making 3.6.

This doesn't prevent us from opening additional tickets (to simplify the admin even further), but for this ticket, I'd propose we focus on:

• Removing gradients
• Removing shadows (text & box) where appropriate (though, as Helen suggested I don't think they all necessarily need to go)
• Adjusting borders (where applicable, as with '.widefat td, .widefat th')

Items I'd recommend keeping out of scope for this ticket

• Anything outside of the three items mentioned above, including…
• Changes to the toolbar (admin-bar.css). As Joen points out, this is already pretty much there.
• Padding/Margin changes
• Color changes (fonts, backgrounds, etc…)
• icon positioning tweaks (leave this for the icons patch)

Changes in 23415.5.diff

• Brought colors-classic.css in line with similar changes
• Reverted all changes in admin-bar.css
• Reverted padding tweaks
• Reverted .wp-menu-arrow tweaks
• Reverted color changes in colors-fresh.css
• Reverted #adminmenu icon background-position tweaks
• Added form element :focus styles back in (for accessibility reasons, I don't think we can drop this). We could optionally change the style to something else, but that should likely take place in a separate ticket.

Thoughts?

[helen]

Replying to lessbloat:

I mostly agree, except that whitespace and color changes may be required to make it work visually once gradients and box shadows are gone. I don't think we can globally call that out of scope for this ticket, though we can say to restrict to where something like a gradient has been changed. Everything else, though (toolbar, :focus styles, etc.) does definitely seem to fall under no-touch.

[lessbloat]

Replying to helen:

Yep, sounds good. I think we're on the same page. :-)

[markjaquith]

Considering that, how close are we to being able to land this, so we can move on to the other stuff? Is everyone happy with Dave's conservative patch as a starting point?

[helen]

I think it's actually still a little too aggressive - would like TinyMCE and quickedit buttons not to be touched (they should still look like buttons because they are), drop shadow restored to admin menu flyouts, and inset shadow restored to admin menu and customizer sidebar. There are also some color mis-matches with tabs now that the gradient is gone, e.g. screen options/help, menus, and editor mode. Don't need things to be perfect for a first pass, but I can see getting stuck just because of the color not matching and don't want that to happen.

[lessbloat]

Replying to helen:

I think it's actually still a little too aggressive - would like TinyMCE and quickedit buttons not to be touched (they should still look like buttons because they are), drop shadow restored to admin menu flyouts, and inset shadow restored to admin menu and customizer sidebar. There are also some color mis-matches with tabs now that the gradient is gone, e.g. screen options/help, menus, and editor mode. Don't need things to be perfect for a first pass, but I can see getting stuck just because of the color not matching and don't want that to happen.

As you wish... ;-) Let me know if I missed anything in 23415.6.diff.

[helen]

I'm seeing two things - menu tabs (not important), and the plugins and themes list tables. Themes list table is in network admin for multisite. Other than that, can get behind it for a first pass.

[lessbloat]

Replying to helen:

I'm seeing two things - menu tabs (not important), and the plugins and themes list tables. Themes list table is in network admin for multisite. Other than that, can get behind it for a first pass.

23415.7.diff​ should do the trick.

[aaroncampbell]

I tested 23415.7.diff​ and it looks good to me. I'm thinking it's a good candidate to get in and then we iterate on it.

[helen]

I can also get behind 23415.7.diff​ for a first pass.

[ocean90]

Go for it @helen.

[helen]

In 23407:

Begin simplifying some of the visual elements in the admin, starting with gradients. White space purposefully not currently altered. props lessbloat, melchoyce, aaroncampbell, sabreuse. see #23415.

[helen]

In 23409:

Restore the following:

• Box shadow for screen options/help tabs focus state.
• Text shadow on the about screen badge to match the text shadow in the graphic itself.
• Border for credits screen gravatars, in place of the previous box shadow.

props nacin. see #23415.

[melchoyce]

This is a great first pass. Thanks to everyone who contributed.

I noticed that blue theme's dashboard widgets (​http://cl.ly/image/26360G3o1o2O) and interior tables (​http://cl.ly/image/0Y3d3L400W1F) are now pretty low contrast. I know there weren't really any color changes committed, but I feel like this is a bad way to start off. Would anyone object to me taking the darker color from the original header gradient and making another patch? It would look like this: ​http://cl.ly/image/2k24172n161M, ​http://cl.ly/image/3i1j1n273W3N

[aaroncampbell]

Replying to melchoyce:

The blue theme also needs the new icons integrated.

[helen]

Replying to melchoyce:

Contrast was actually the first thing I noticed. Feel free to experiment, and experiment with hiking up the contrast more, even.

[Archetyped]

Is this really necessary? I'm sure some of the grads and drop shadows could be refined to be more subtle, but I think going fully flat is rather heavy handed.

We also need to consider how this will affect usability. Some may call it "visual noise", but when done right, I would refer to the use of these "effects" as visual cues for the end user.

For example, the meta boxes in 3.5 have been refined quite well. The top bar has an ever-so-subtle gradient that is lightweight, but gives enough of a sense of depth that indicates to the user that it is an element that can be interacted with.

If everything has the same visual weight, then nothing will be differentiated. This is not good for usability because we want to make it as simple as possible for a user to know what to do (what to click on, etc.) on a given page.

Believe me, I'm all for completely tearing things down when it's necessary, but in this case I would advocate further refinement of the current admin styling.

Increasing the negative space (as has been done for this ticket), being more selective with the greys (e.g. meta box content areas), etc. will go a long way toward making the admin feel lighter.

[chipbennett]

Please UI test with menus collapsed.

I realize I've got some pretty strongly ingrained "muscle memory" with the old icons, but I keep confusing appearance, tools, and plugins. (The posts icon is quite similar, but it is not proximal to the others.)

I could be unique, and could very well get used to the new icons, but thus far, they've added confusion for me.

[helen]

​https://irclogs.wordpress.org/chanlog.php?channel=wordpress-dev&day=2013-02-27&sort=asc#m565014

[helen]

In 23500:

Revert [23407], thereby restoring gradients and shadows. see #23415.

[helen]

We started massaging the admin CSS to complement the change of icons, which will shortly also be reverting. There is certainly something that can be done with the admin UI, but it needs to start with identifying problem areas and doing exploration that we don't have time or resources for in the remainder of the 3.6 cycle. Closing this as wontfix - will start fresh with the re-attempt.