Improving the default styles of HTML form controls on Chromium and Chrome, in collaboration with Microsoft Edge team
Why
Edge team's investment
In 2018, Microsoft announced to build the Edge browser based on Chromium, and, the Edge team prioritized updating the form controls. The investment in the area — time and effort from domain experts — was much needed, and Edge team and Chrome team needed to collaborate to yield the best outcomes.
In need of a visual system to continue to evolve
When the basic controls like Checkbox were added at the first launch of Chrome and Chromium in 2008, they had common appearances. However, the default visual styles were deviated over time as new controls, for example, progress bar and date picker, were introduced.
Lacking common styles, when it was necessary to add dark themes to the controls, it was complicated to tackle. Just darkening the existing styles was not a right thing to do. Because that would double the design debt as well as the technical debt.
Developer pain points using the default HTML controls
The developer survey by the Edge team revealed the developer pain points in styleability and customizability.
Styleability — To implement their products' design systems and brand guidelines, developers needed to style the HTML controls. However, doing so was not well supported at the default HTML level. Checkbox and Radio in the default HTML controls didn't provide style attributes to change colors. Progress bar and Range slider required many lines of code to change the styles.
Customizability — Developers also needed to add functionality that were not provided by the default HTML controls, for example, Selectbox popup with checkboxes inside.
Developers ended up developing custom controls to style and customize, also to overcome the browser inconsistencies. The custom controls often lack screen reader support, come with a large size javascript, and add to the maintenance burdens. The default HTML controls are the ones that should address these needs fundamentally.
What
Visual refresh — Work Stream 1
The existing styles have a wide range of visual treatments. Bringing consistency to the default styles was a necessary step to make the default controls useful out of the box. Improved color contrast and dark mode styles were the key additions to the refresh.
In addition to the visual refresh, the controls on the Chrome/Chromium on macOS, which mimicked the Safari styles, were migrated to the new styles. The Color Eyedropper was also newly added.
The refresh including the dark mode support is now available on Chrome and Edge on Windows, macOS, Linux, Chrome OS, and Android as well as on WebView on Android.
Expansion of capabilities — Work Stream 2
While the visual refresh was developed and rolled out as a near term initiative over the recent two years, the two standard efforts were initiated as a longer term play to support better styleability and customizability — Accent Color, and Popup.
Accent Color is to provide a simple way, via one line of CSS, to color Checkbox, Radio, Progress, etc. Popup is to expand functionality of a control such as Selectbox by allowing addition of more UI controls in its popup surface.
The development is done via open-ui.org. More customizability continues to be discussed.
My contributions
My primary contributions were on the visual refresh. I drove the issue resolutions across the companies while doing hands-on designs. For the Accent Color and Popup, I provided input when needed.
Design reviews and iterations — The Edge UX team designed the comprehensive set of the initial design. I was the dedicated design reviewer representing the Chrome UX. We took turns. I proposed iterated designs, and the Edge designer reviewed and proposed the next. We landed on final resolutions through these multiple cycles.
Testing — I prioritized manual testing the controls in all OSes, in different screen readers, and in different content surroundings to ensure the new design is better, and working correctly. From the testing, we identified and fixed numerous issues, existing and new, and in the implementation as well as in the design.
Communication — I documented the project intent, the issue examples, and the rationale for the new design. I communicated it to the Chrome decision makers on Windows, Chrome OS, macOS, Accessibility, and UX for their input. That led to the buy-ins from each of them.
Unblocking — I provided answers, explanations, and updated designs to address UI implementation questions throughout. I made calls to whether a feature met the quality bar.
Work samples
Design and implementations via Chromium issue tracker
