October 15, 2019 8:30 am

Improving form controls in Microsoft Edge and Chromium

Since we began work on the next version of Microsoft Edge based on Chromium, we’ve been investigating ways to modernize form controls to provide a modern appearance as well as the touch friendliness and accessibility that our users expect from Microsoft Edge today.

Over the past few months, we’ve been collaborating closely with the Google Chrome team on this project, and are excited to share the refreshed controls that will be coming to Microsoft Edge Insider builds, or other Chromium browsers near you.

A more modern appearance

This change brings an improved polish to the form controls and helps bring continuity of design and user experience with the rest of the browser. We have been collaborating closely with the Google Chrome design team to strike a balance between our design languages with a modern look and feel that feels at home in a variety of Chromium browsers. Below is a comparison of the default controls in Chromium today, compared to the updated controls we’re rolling out:

  Current Upcoming
Radio Image showing the radio control in Chromium today Image showing the new radio control in Microsoft Edge
Checkbox Image of the checkbox control in Chromium today Image of the new checkbox control in Microsoft Edge
Text Image showing the text control in Chromium today Image showing the new select control coming to Microsoft Edge
Buttons Image of the button control in Chromium today Image of the new button control in Microsoft Edge
Select Image showing the select control in Chromium today Image showing the new Select control in Microsoft Edge
Password Image showing the password field in Chromium today Image showing the new password field in Microsoft Edge
Color Image of the color picker control in Chromium today Image of the new color picker control in Microsoft Edge
Meter Image showing the meter control in Chromium today Image of the new meter control in Microsoft Edge
Progress Image showing the password control in Chromium today Image showing the new progress control coming to Microsoft Edge
Range Image the the range control in Chromium today Image of the new range control coming to Microsoft Edge
Date Image of the date picker control in Chromium today Image of the new date picker control coming to Microsoft Edge
Time Image showing the time control in Chromium today Image showing the new time control in Microsoft Edge

 

Better touch support

Windows devices come in a rich array of form factors and input modalities, including traditional desktop and laptop PCs, 2-in-1 devices, and other tablets and pen devices. We heard your feedback looking for a better touch input experience in our early Chromium preview builds, and set out to take an inventory of the controls to identify opportunities to improve the touch experience.

Image comparing the old and new time controls

A good example of the touch improvements is the time input; currently, Chromium provides a text input, a clear button and a spinner. Our research found that with the large surface area of the fingertip, small controls that are too close together can be difficult to target precisely, recommending a control size of 23×23 pixels (13×13 DLUs) is a good minimum interactive control size for any input device. By contrast, the spin controls at 15×11 pixels are much too small to be used effectively with touch. The new time input we’re introducing includes a flyout with expected touch affordances, like inertia when scrolling and larger touch targets. Other inputs such as date, color, range received subtle size increases to  important touch targets as well.

More accessible controls

Another area we examined is the focus rectangle that wraps a control when a user focuses the control. This is an important accessibility feature, as it allows the user to track where they’re actively focused, especially while navigating via keyboard.

Our team identified three different potential focus indicators that aligned with Microsoft’s design language, guaranteed high contrast on any background content, and provided a clean and aesthetically pleasing appearance.

We then ran interactive user studies to identify the best option, compared against Chromium’s current default focus rectangle as a baseline. We found that, while preferences were split for aesthetics, one option was the clear leader for accessibility. We’ve chosen that option as the new focus rectangle in Microsoft Edge, which you can see below:

Image comparing focus react options

Additionally, all these controls now support Windows High Contrast, which allows the user to define specific colors to improve the visual experience. All sites that utilize the built-in controls will benefit from these updated controls whenever the user is in High Contrast mode, without web developers doing any extra work. However, webdevelopers can adjust these styles if they want by utilizing the new CSS forced-color-adjust property and the prefers-contrastmedia query that are actively being standardized.

Image showing new date and color picker controls in High Contrast mode

We’ve also updated our implementation to ensure great keyboard support across each control. For example, in the new color input, you can either navigate a single value using the arrow keys with the color well selected; if you hold the Ctrl key on Windows (Cmd key on Mac), it will move by 10 values allowing for quick traversal of the color well.

Finally, we updated the mappings for the controls to map to the HTML Accessibility API Mappings specification, to ensure a great experience for users who use assistive technologies (such as screen readers).

Please share your feedback

These updated controls are now available in Canary and Dev channel builds of Microsoft Edge, and will be coming upstream to other Chromium browsers in the near future. We’re excited as this work begins to ship out to users, and as the controls continue to evolve, we greatly appreciate any feedback that you may have in how we can improve the experience. Just click the smiley face in the top-right to Send Feedback, and let us know what you think!

Greg Whitworth, Senior Program Manager, Microsoft Edge