WordPress.org

Make WordPress Core

Opened 7 years ago

Last modified 4 years ago

#29158 closed task (blessed)

Customizer UI Design lacks contrast for visual hierarchy and does not match wp-admin — at Initial Version

Reported by: celloexpressions Owned by:
Milestone: 4.7 Priority: normal
Severity: normal Version: 3.8
Component: Customize Keywords: color-contrast ui-feedback has-patch needs-testing needs-refresh
Focuses: ui, accessibility Cc:

Description

WordPress 3.8 (and the mp6 project) introduced a new design language for the WordPress admin, including a flatened design, higher contrast, more color, an icon font, and more. While it reskinned the Customizer, further work on the Customizer UI has proven difficult because the Customizer still lacks enough contrast for proper focus/hover/active styling.

Implementing things like Widgets, Menus, and Panels into the Customizer, has shown that most background colors need to be between #fff (the section heading color) and #eee. This makes it extremely difficult to create visual hierarchy between UI elements using color.

Customizer controls themselves are on a white background, not the off-white that is now used in wp-admin, making input elements stand out less and generally making something about the Customizer UI not feel very "WordPress". While the other accordion in the admin (in Menus) also uses this convention, it doesn't fit well in the Customizer since the Customizer accordion contains the primary actions.

The goal of this ticket is to introduce more breathing room for stronger visual hierarchy in new development with the Customizer, and to resolve the lack of contrast for focus/hover and active (open/current-section) states. Additionally, we should address concerns that the Customizer doesn't really match wp-admin (or the front-end toolbar, for that matter, which it should be more similar to given the front-end context) in the process.

MP6 did experiment with a considerably different design for the Customizer at one point, but it was pulled because the dark styling, which was keyed to color schemes, was too heavy, and felt more appropriate for a menu than for tools. However, one potential option for addressing this ticket is to re-explore color scheme integration, since color schemes are under-utilized in the Customizer. This is one approach I'm proposing, but not the only possible solution here. Many options have been explored, and I like this the best, but this is design so not everyone will. I'm open to anything that addresses the issues above.

The coming patch uses admin menu colors (keyed to colorschemes) for the navigation components of the Customizer, but uses wp-admin body styling (the off-white background and light UI) for the functional tools/controls regions of the Customizer. Not perfect, but an interesting proof-of-concept at the very least, and does address some of the issues with this approach in mp6.

Change History (5)

@celloexpressions
7 years ago

Failed experiment at improving contrast between inactive and active/hover/focus styling, with panels.

@celloexpressions
7 years ago

Failed (too many shades of gray, though likely to end up in 4.0) attempt to introduce more contrast/hierarchy but keep things very light.

@celloexpressions
7 years ago

Initial attempt to re-introduce color schemes and stronger contrast/hierarchy, with the default colorscheme and 29158.colors.diff.

@celloexpressions
7 years ago

Insufficient range of shades (of gray) for good color-based visual hierarchy in Menu Customizer.

Note: See TracTickets for help on using tickets.