Want to get involved? See the handbook and optionally drop into #design to chat. Most active design work happens in the block editor project, consider dropping into Needs design or Needs design feedback.
There’s a WordPress Component Library in Figma. Duplicate to edit, direct access is reserved for the design team.
There are a handful of interrelated TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. tickets slated for WordPress 5.3 that together have a noticeable visual impact on the UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing.. It can be difficult to follow and give feedback on so many tickets in Trac, so I’d like to take a moment to review and discuss them together in this thread. Read on for an overview of the updates, and try the demo in the Design Experiments pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party.
Field boundaries have insufficient color contrast (#47153)
Insufficient contrast on empty field borders (#47150)
These are two long-standing issues that were raised in the WPCampus accessibility report. Both address the same issue: form field borders in WP-Admin lack proper contrast. The generally agreed-upon fix in these threads is to adopt GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/’s darker treatment for form field borders.
This accomplishes two great things: It makes form fields throughout WP-Admin more accessible, and it brings greater alignment between UI in Gutenberg and the rest of WP-Admin. 🎉
WP-Admin is full of low-contrast UI elements like those original borders, so this also has the side effect of shifting the visual hierarchy around a bit. More on that below.
The design of the focus outline on buttons/elements could be improved (#34904)
This Trac ticket explores new button styles throughout WP-Admin. This is also a long-standing issue. The thread has the full details, but here’s a quick summary: The focus states for buttons in all of WP-Admin are relatively subtle, and should be made more noticeable. In the process of addressing that, the scope broadened a bit, and @joen proposed a slight adjustment of button styles.
Adopting these styles would address a number of related button accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) issues. In addition, it gives us a chance to ensure buttons have equal weight with the darker form field borders.
In the first example above, the button is slightly more prominent visually than the form field. In the second example, that hierarchy is flipped due to the prominence of the dark field border. The third mockup evens that back out again by adopting the new, higher-contrast secondary button style.
Since these changes will have very visible changes throughout the UI, I think it’s very important to ensure we’re thinking about them all together.
It can be difficult to review multiple patches at once, so I’ve pushed both of these changes up into the Design Experiments plugin for easy review. To test, just download that plugin, visit Settings > Design Experiments, and activate the “Darker Field Borders and New Buttons” experiment. That should turn your WP-Admin interface from something like this:
… into this:
In addition to the form updates, the experiment introduces darker borders for all box/card/notice/table elements to create visual balance. The reasoning behind this change is explained in more depth on Trac.
Increasing the contrast for these elements is a necessary (and relatively easy!) win for WordPress, but I’d love for more designers to review and provide feedback on these issues holistically. Buttons and form fields make up a good deal of the UI in WordPress, so even subtle changes can have unintended effects.
Please install the Design Experiments plugin, take these changes for a spin, and provide feedback here by Wednesday, September 11th. Once the design team has a group consensus on these updates, we can make any additional changes in the Trac tickets and push these live in 5.3. 🎉
Specifically, it would be excellent to gather more thoughts around the following questions:
Thanks!
You must be logged in to post a comment.