Windows Touch Keyboard

Role

Sole UX & Visual Designer partnering with PM, Engineering, User Research, Content, Data Science

Summary

With touch experiences and on-the-go productivity becoming more prevalent than ever, content creation without a hardware keyboard has increased. Partnering with PM, Engineering, Data Science, and Research, I sought to create a great touch-typing experience that gets out of the way so users can focus on the task at hand.

I designed new text input themes that spark customer delight and playful expression.

Context and Challenge

Along with the rest of Windows, the touch keyboard underwent a visual rejuvenation to give it a modern look and feel for Windows 11. Beyond visual style, the options for switching keyboard layouts were difficult to understand, overcomplicated, and data showed that most users never switched from the default.

There was a gap between design and implementation because the keyboard was coded in millimeters but designed in pixels. Because design and engineering weren’t using the same units, the existing Windows 10 experience didn’t feel polished, and the size of UI elements was inconsistent.

Additionally, the themes offered for Windows input surfaces were limited only to dark and light theme while competitors’ software keyboards offered a robust library of themes.

Goals

• Increase typing efficiency and accuracy with improved scaling logic and bridge the pixels-to-millimeters gap for better polish and control over sizing

• Reduce cognitive load and tax on the user by simplifying the complex matrix of layouts and positioning options; responsively surface the best input experience based on screen size, posture, and invocation method

• Visually rejuvenate the touch keyboard to align with the new Windows 11 design language

• Adapt the base experience for language-specific needs

• Introduce delightful new touch keyboard themes that extend to other text input surfaces

Process and Solution

The first step to modernizing the touch keyboard was to work closely with the Design System team to apply the new Windows 11 design language. This included updating the icons to the new glyph style, introducing strokes and subtle shadows on the keys, rounding corners, updating visual treatment of the keyboard background, and snapping to new color values.

One of the fundamentals for typing accuracy is key pitch (distance from key center to key center). For the software keyboard, I worked with the engineering team to land on a target key pitch depending on screen size.

To figure out how to design for physical size with pixels, I started with display resolution to calculate the number of pixels per millimeter for a given device. Scaling the keyboard across screen sizes at design time had a very different result once it was implemented so it was important to trust the math and then check my work with a ruler.

Next was to simplify the positioning and layout options. By looking at data for the most used configurations across screen sizes, I developed new rules for which layouts are available when. This took some of the tax off the user. I brought the dock/undock button out of the layout menu and moved it top-level so users could quickly switch depending on what makes most sense ergonomically in a given posture. I added layout names to the menu where previously there had only been a complex matrix of visually similar icons so users could better understand the difference between them.

Because Windows supports so many different languages, the touch keyboard needed to be highly adaptive for each language’s alphabet. Some languages had a different number of rows and columns than others or required additional keys to switch between modes. I worked with the engineering team to find the best arrangement for each language.

The touch keyboard serves as an entrypoint to other input experiences and for that reason, seamless transitions and coherence between views was very important. I worked closely with the designers for the emoji panel, voice typing, and handwriting panel to ensure consistent sizing, placement, and visual treatment throughout.

For Windows 11, I crafted a robust set of touch keyboard themes that make this a place users can express themselves and make their experience their own. The 2022 release will extend these themes beyond touch keyboard to other text input surfaces like the emoji panel, input method editors, and voice typing. I drew inspiration from existing mobile keyboards, Surface type cover colors, and the theming experts over on Microsoft’s SwiftKey team. Users can also create custom themes with a wide range of controls like image background, key transparency, text color, and more.

Results

The updated touch keyboard in Windows 11 resulted in increased customer satisfaction ratings and increased usage overall. Usage of the undocked small keyboard, child keys, voice typing, and shapewriting all increased as well. The new resize functionality and themes are well-used and well-loved.

In the Media

Inside Windows 11 Touch & Voice