WordPress.org

Make WordPress Core

Opened 14 months ago

Closed 14 months ago

Last modified 13 months ago

#23415 closed enhancement (wontfix)

Reducing visual noise within the admin

Reported by: melchoyce Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Administration Keywords:
Focuses: ui Cc:

Description

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:

http://f.cl.ly/items/2A3z2X1W3i3L0p2w0635/menus-compared.jpg

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

Attachments (7)

23415.diff (33.5 KB) - added by melchoyce 14 months ago.
23415.2.diff (33.7 KB) - added by aaroncampbell 14 months ago.
23415.3.diff (33.7 KB) - added by aaroncampbell 14 months ago.
23415.4.diff (35.4 KB) - added by sabreuse 14 months ago.
23415.5.diff (35.0 KB) - added by lessbloat 14 months ago.
23415.6.diff (31.2 KB) - added by lessbloat 14 months ago.
23415.7.diff (31.1 KB) - added by lessbloat 14 months ago.

Download all attachments as: .zip

Change History (64)

comment:1 melchoyce14 months ago

  • Cc melissachoyce@… added

comment:2 helen14 months ago

  • Component changed from General to Administration
  • Keywords ui-focus added
  • Milestone changed from Awaiting Review to 3.6

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

comment:3 MikeHansenMe14 months ago

  • Cc mdhansen@… added

comment:4 rachelbaker14 months ago

  • Cc rachelbaker added

comment:5 scribu14 months ago

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

comment:6 DrewAPicture14 months ago

  • Cc xoodrew@… added

comment:7 saracannon14 months ago

  • Cc sararcannon@… added

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

comment:8 aaroncampbell14 months ago

  • Cc aaroncampbell added

comment:9 follow-up: melchoyce14 months ago

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.

comment:10 in reply to: ↑ 9 aaroncampbell14 months ago

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)

comment:11 melchoyce14 months ago

Sure, I'll patch it up tonight.

comment:12 jeherve14 months ago

  • Cc jeremy+wp@… added

comment:13 markmcwilliams14 months ago

  • Cc mark@… added

comment:14 sabreuse14 months ago

  • Cc sabreuse added

comment:15 melchoyce14 months ago

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

comment:16 scribu14 months ago

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.

melchoyce14 months ago

comment:17 melchoyce14 months ago

  • Keywords has-patch added

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

comment:18 scribu14 months ago

Sent you a copy via email.

Last edited 14 months ago by scribu (previous) (diff)

comment:19 ocean9014 months ago

  • Cc ocean90 added

comment:20 swissspidy14 months ago

  • Cc hello@… added

aaroncampbell14 months ago

comment:21 aaroncampbell14 months ago

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)

comment:22 aaroncampbell14 months ago

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

aaroncampbell14 months ago

comment:23 aaroncampbell14 months ago

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

comment:24 follow-up: sabreuse14 months ago

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.

sabreuse14 months ago

comment:25 sabreuse14 months ago

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: http://f.cl.ly/items/1D2D0D0Z3R3N1T373h11/23415-goldilocks.png

Last edited 14 months ago by sabreuse (previous) (diff)

comment:26 helen14 months ago

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.
Last edited 14 months ago by helen (previous) (diff)

comment:27 lessbloat14 months ago

  • Cc lessbloat added

comment:28 joen14 months ago

  • Cc joen added

comment:29 joen14 months ago

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.

comment:30 in reply to: ↑ 24 mrwweb14 months ago

  • Cc info@… added

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.

lessbloat14 months ago

comment:31 follow-up: lessbloat14 months ago

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?

comment:32 philiparthurmoore14 months ago

  • Cc philip@… added

comment:33 corvannoorloos14 months ago

  • Cc cor@… added

comment:34 in reply to: ↑ 31 ; follow-up: helen14 months ago

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.

comment:35 in reply to: ↑ 34 lessbloat14 months ago

Replying to helen:

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

comment:36 markjaquith14 months ago

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?

comment:37 follow-up: helen14 months ago

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.

lessbloat14 months ago

comment:38 in reply to: ↑ 37 lessbloat14 months ago

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.

comment:39 follow-up: helen14 months ago

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.

Last edited 14 months ago by helen (previous) (diff)

comment:40 in reply to: ↑ 39 lessbloat14 months ago

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.

lessbloat14 months ago

comment:41 aaroncampbell14 months ago

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.

comment:42 helen14 months ago

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

comment:43 ocean9014 months ago

  • Keywords commit added

Go for it @helen.

comment:44 empireoflight14 months ago

  • Cc ben@… added

comment:45 helen14 months ago

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.

comment:46 helen14 months ago

  • Keywords ui-feedback has-patch commit removed

comment:47 toscho14 months ago

  • Cc info@… added

comment:48 helen14 months ago

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.

comment:49 follow-ups: melchoyce14 months ago

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

comment:50 in reply to: ↑ 49 aaroncampbell14 months ago

Replying to melchoyce:
The blue theme also needs the new icons integrated.

Version 0, edited 14 months ago by aaroncampbell (next)

comment:51 in reply to: ↑ 49 helen14 months ago

Replying to melchoyce:

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

comment:52 Archetyped14 months ago

  • Cc Archetyped added

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.

comment:53 chipbennett14 months ago

  • Cc chip@… added

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.

comment:55 helen14 months ago

In 23500:

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

comment:56 helen14 months ago

  • Keywords revert removed
  • Milestone 3.6 deleted
  • Resolution set to wontfix
  • Status changed from new to closed

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.

comment:57 desrosj13 months ago

  • Cc desrosj@… added
Note: See TracTickets for help on using tickets.