Material 3 Expressive

The research behind Google’s bold new direction for design

Material 3 Expressive is the most researched update to Google’s design system, ever. Here, Material researchers share the data behind the designs and new insights into users’ preference for emotion-driven UX.

Material 3 Expressive was born out of research — not in the 41 shades of blue kind of way, which delegated design decisions to data, but in a collaborative inquiry spanning research, design, and engineering. Back in 2022, our research intern was studying user sentiment toward Material Design in Google apps. After mentioning her initial findings to colleagues in a Munich beer hall, she sparked a team-wide design debate: Why did all these apps look so similar? So boring? Wasn’t there room to dial up the feeling?

Over the past three years, we’ve explored the implications of this conversation, iterating through dozens of rounds of design and research to find the next evolution of Material Design. Through 46 separate research studies with hundreds of designs, and more than 18,000 participants from around the world, we’ve fine tuned a system that’s both beautiful and highly usable. Material 3 Expressive principles are rooted in solid research and built on long-standing usability best practices. Designers can confidently apply these new components and principles knowing they’re building something easy to use and connect with.

Expressive design makes you feel something. It inspires emotion, communicates function, and helps users achieve their goals. Want to dive deeper? Check out the official Material 3 Expressive guidelines. The fundamental parts of expressive design are the use of color, shape, size, motion, and containment. These design aspects are also fundamental to what makes a product more usable by drawing attention to what matters in the interface: making key actions stand out and grouping like elements together.

Material 3 Expressive's bold use of shape and color creates delightful user experiences.

As the design team created initial concepts and explored how a more expressive design ethos could work across Google products, we embarked on a series of research studies using a variety of methods, including:

• Eye tracking: Analyzing where users focused their attention
• Surveys and focus groups: Gauging emotional responses to different designs
• Experiments: Gathering sentiment and preferences
• Usability: Seeing how quickly participants could understand and use an interface

To build a solid foundation, we started with research on individual components. For example: We evaluated options for progress indicators, assessing which made waiting time feel faster while also looking like it belonged on a premium phone. We studied how big a button can be, seeking improvements in tap time without overwhelming other items on the screen. We also ran several studies on the new floating toolbar, optimizing for designs perceived as modern, clean, and energetic as well as noticeable and usable. And we ensured that our designs were following accessibility requirements and best practices. In many cases, we chose to exceed existing standards for tap target size, color contrast, and other important aspects that can make interfaces easier to use. This research helped us create the building blocks and guidelines needed for this new evolution of Material Design.

When it comes to design, people really do prefer to feel something. We found that well-applied, expressive design is strongly preferred by people of all ages, with that preference being particularly strong — up to 87% — among 18-to-24-year-olds.

While there was a net-positive indication across all age groups, younger study participants had the most enthusiastic preference for M3 Expressive and rated the designs as high in “visual appeal” and “intention to use.”

But top-level preference can only tell us so much. We wanted to dive into the design aspects that led to this preference. At last year’s Google I/O, we introduced a set of attributes that the Material team uses to compare designs. Maybe you noticed that many of these were emotional words? “Playful,” “energetic,” “creative,” “friendly,” and “positive vibe” are some examples. As we’ve been developing Material 3 Expressive, our researchers have worked with designers to iteratively test new screen designs against these attributes, helping to optimize the designs for a desired emotional reaction. In addition, we’ve sought to ensure that designs created with this new system are seen as more modern and visually appealing.

M3 Expressive designs were overwhelmingly rated higher for attributes such as “energetic,” “emotive,” “positive vibe,” “creative,” “playful,” and “friendly.”

Expressive design isn’t just about making a product look good; it can elevate how users perceive the product itself. We saw this in action when measuring the desirability of these designs. Existing research from Caleb Warren et al. (2019) explored what factors explain why some products become trendy, must-have items that everyone wants, while others — even with the same features — just don't have that appeal.

These factors can be quantified in users’ responses to new M3 Expressive designs. We found a 32% increase in subculture perception, which indicates that expressive design makes a brand feel more relevant and “in-the-know.” We also saw a 34% boost in modernity, making a brand feel fresh and forward-thinking. On top of that, there was a 30% jump in rebelliousness, suggesting that expressive design positions a brand as bold, innovative, and willing to break from convention.

M3 Expressive designs were rated higher across desirability attributes, including “modernity,” “subculture,” and “rebelliousness.”

Most importantly, expressive design is about improving user experience. M3 Expressive’s strategic use of color, size, shape, and containment follows from long-standing design principles and best practices, drawing attention to key elements and helping users navigate more quickly.

We brought a diverse set of people into a lab with the very latest eye-tracking glasses and had them interact with 10 different apps in both Material 3 Expressive and current Material 3 versions, randomly ordered. Participants were able to spot key UI elements up to four times faster in the M3 Expressive designs, suggesting that they steer user attention toward the most important part of the screen. We’ve seen many apps achieve these levels of improvement, which extend beyond eye-fixation times. The time it takes to tap on key actions, for example, decreased by seconds across different expressive designs we tested.

The email-app case study below persuasively illustrates the benefits of expressive principles. For example, the Send button in the new design (on the right) is larger, placed just above the keyboard, and uses a secondary color to draw attention to it. The non-expressive design, by contrast, places the small Send button in the top-of-screen toolbar alongside other controls like attaching a file. When participants were asked to “send the email,” their eyes saw the button four times faster in the expressive design.

Email app with the Send button in a standard top app bar.

By making the Send button larger and more prominent, participants were able to spot the button four times faster.

What’s particularly exciting is that expressive design seems to level the playing field for users of all ages. Usability tests typically find that older adults take longer to visually locate key UI elements. But with M3 Expressive versions, we’ve seen a dramatic erasure of age effects in fixation times, helping 45-plus-year-old users perform on par with their younger counterparts.

M3 Expressive design enabled older users to spot key interactive elements on the screen just as fast as younger users across 10 apps tested.

Finally, and crucially, expressive design was shown to be more visually appealing, intuitive, and easy to use for participants with varying movement and visual abilities. Larger buttons, high-contrast visual containment, and other key attributes of M3 Expressive designs make interfaces better and more usable for everyone.

While expressive design offers exciting possibilities, it’s not a one-size-fits-all solution. What works in a media player or email app might not be suitable for something like a banking interface. Product makers need to respect well-established UI patterns and standards.

One design we tested didn’'t stick to the patterns and standards of our design system: For a playlist, we replaced the familiar vertically scrolling list of songs with images from album art arranged helter-skelter. While users reported the interface looked modern and exciting, usability scores suffered. In another example, removing text labels from email actions resulted in decreased usability. This is why we have a design system that tells you how to use expressive components. When basic interaction paradigms are broken, expressive design can lead to poor usability or negative sentiment.

The familiar UX pattern of a carousel and vertical list is effective in this design for a music playlist.

No amount of expressive design will beat basic functionality. The unstructured and unlabeled images weren’t recognized as a music playlist in this concept design.

It is also worth noting that while expressive design improved preference and usability, it was impacted by users’ lack of familiarity. This is a challenge that designers will have to navigate, but we expect to see familiarity increase as more and more apps adopt this new style in the coming months.

It's time to move beyond “clean” and “boring” designs to create interfaces that connect with people on an emotional level. Ready to try it out for yourself? We have a few tips:

• Start experimenting: Dive into the updated Material 3 Design Kit for Figma and start playing with the expressive design options.
• Try the tactics: Explore using the M3 Expressive design tactics, while also tailoring your UI to support core user journeys.
• Be intentional and start from user need: While there was broad appeal for vibrant, expressive design, a strong minority of users preferred calmer, less intense versions. Always start with what your users need. Understand their requirements and critical user journeys before determining the right choice of tactics and components.
• Prioritize functionality: Don’t compromise your product’s core functionality for visual flourishes. No amount of emotion can compensate for a lack of clarity.
• Follow accessibility standards: Adhere to established guidelines for color contrast, screen reader compatibility, navigation, and other best practices for accessibility.
• Iterate, iterate, iterate: Use research to find the right balance between freshness and familiarity, playfulness and professionalism. Our design scales can give you a head start. And don’t forget critical usability research to ensure you haven’t gone too far.

Special thanks to all of the researchers and designers who made this research possible, with special shoutouts to Bradley Patrie, Dallas Barnes, Viviane Herdel, Nico Thornley, Mason Price, Mohammed Khwaja, and Brenton Simpson.(opens in a new tab or window)

Get a full introduction to the latest evolution of Material, including new components and style updates.(opens in a new tab or window)

Quickly create design mockups and prototypes with the latest Material 3 Expressive components and styles.