[MUSIC PLAYING] MIKE TALVENSAARI:
Welcome to I/O 2024. I'm Mike Talvensaari, Head of
Product for Material Design. [CHEERS] This year Material
turns 10, and we're celebrating with a
year-long campaign looking back on our impactful
moments along the way, hearing from key
voices, and examining our influence on the design
of UI and the physical world. Just for fun, let's explore some
key moments in Google design history, and head
to design.google.com to follow along
throughout the year with the entire celebration. In 2007, Google hired its
first visual designer. Before this hire, UI design
was handled by engineers. For the first two years,
design was handled by the founders themselves. Larry designed the original
Search results page and Sergey designed the first Google logo. In 2011, Larry asked for a
new visual design language for all flagship desktop apps. It was codenamed Kennedy. Up to then, our
products had been built by siloed teams over
many years, and it showed. Larry wanted a cohesive
look and feel across Google. Outside of Google, reception
to this massive undertaking was a major turning point. Design was finally
a thing at Google. Kennedy's success
built momentum. By 2012, the word "beauty"
entered the company's vernacular when Larry spent an entire TGIF
talking about the importance of beauty in Google's products. In 2014, Material Design
system was officially unveiled at Google
I/O. It featured bold color, clear navigation,
and the Floating Action Button, or FAB. Our goal was to give makers
a flexible system backed by open source code to help you
build beautiful, usable designs faster and more easily. But looking back, Material
did more than that. It made products better by
establishing a quality bar and providing the
resources to meet that bar. It elevated design for mobile,
giving it visibility and cachet, and it continued
the work of Kennedy, building Google's reputation
as a design company. 10 years later,
we're still building on that solid
foundation and our goals have remained largely
the same, though what it means to be beautiful and
usable continues to evolve. In 2016, Google Fonts joined
the Material Design team. Bringing Fonts and
Material together opened up new opportunities
for our makers, allowing them to use any font
from the Google Fonts catalog with Material to strengthen
their brand identity. In 2018, we
introduced Material 2, again, at Google I/O, which
featured UI components and theming capabilities. Which brings us to our
most recent launch, at Google I/O 2021, when
Material 3 was unveiled with updated components
and Material You personalization features
like dynamic color. This was a critical
turning point as we pushed beyond the
boundary of good and explored what it means to make
products desirable. So after 10 years, where
is Material Design heading? We're focusing even
more on helping you create personal and
expressive experiences so your products feel
alive and your users feel more connected to them. We've built flexibility
into the system's core, ensuring that you
have the ability to make the system work for you,
your product, and your users. And of course, we're
partnering deeply with research at each stage
of product development to understand what makes
products appealing. The good news is we've
learned that our hunch was right, expressive and personal
UIs are more desirable according to consumers. Passing these
insights along to you in the form of a more
thoughtful system is our goal. But we'd also like to invite
you into the research process. So please check out more details
in the design on the Material blog by reading the article,
"What Does Your UI Say to Your Users?" Insights like this
inform our evolution. They are the reason the
Material Design is personal. Building on Material
You, our system continues to
support flexibility, not just for makers,
but for end users through personalized
color and contrast. Personalized contrast
unlocks accessibility, making it easier for everyone
to comfortably use your product. And we found that the
ability to customize color is valuable to users. It allows them to make a device
uniquely theirs, and it's fun. And because we bake
it into our system, you'll get the benefit of
accessibility and user-tailored contrast just by
using Material Design. And while Material is the
foundation, you, the makers, are ultimately the ones in
control of the user experience. This year, we've
been working hard to address some of your
strongest feedback on Material Design. We're continually adding
to the system, specifically the components that have been
requested most by all of you to make our Compose
offering more comprehensive. We'll tell you about
some of these shortly. And we're graduating
many experimental APIs to general availability, which
means stable code that you can use reliably in your products. And finally, we're
making it easier for you to create flexible,
expressive experience by expanding our color
and motion offerings and improving the tools to make
color and motion systems easier to use. Now you'll hear from
some of my colleagues who will share more detail
about these exciting updates. And later, we'll hear from an
engineer on Google Maps who will show us how all
of this comes together to help Google teams make
great products for billions of people around the world. But for now, I'll
hand it off to James to go over some of our latest
updates to Material Design. [CHEERS, APPLAUSE] JAMES WILLIAMS: Thanks, Mike. Hello. My name is James Williams. I am a Developer Relations
Engineer for Material Design. Today I'm going to talk to
you about some of our upcoming releases, and what
we have planned, and how we've been
listening to the feedback that you've been giving
us about the things you love and don't
love about Material. So first, Composed Material
1.2 has gotten to Stable. In this release, we
have some color updates to expand our color
scheme to make it more customizable for
you and more regular, and you can understand what
colors are being used and when. We also have some APIs that
are going into Experimental. And let's talk about
some of the components. So first, we have
segmented buttons. Segmented buttons are
already available in Views and we are bringing them to
Compose to give you parity, to give you more
reasons to use Compose for your new experiences. They are Experimental in
1.2, but they're expected to graduate to Stable in 1.3. Next, we have an Experimental
API for pull-to-refresh. And part of the
reason to do this was to give you a reason to not
have to use external libraries. Currently you have to use
the Accompanist library to have pull-to-refresh. So we're bringing that into
Compose Material as of 1.3. And you can find
the instructions on how to migrate from the
version and Accompanist to our version at that website. The next thing in 1.3
I want to talk about is our carousel component. I won't be going
into details myself, but my two colleagues,
Noa and Sagie, will be talking more
about what the thought was behind this component,
and more importantly, how it's been used in apps. So in 1.3, some
things are expected to be graduated to
Stable, swipe to dismiss and the segmented button
that we talked about. And some of our color
updates are also going to be applied
to components. Another thing that we've done
in this upcoming 1.3 release is think about
non-text contrasts. Now when you think about
contrast, a lot of times you're thinking about the
text that's being displayed and how that is shown
against the background. But there's also contrast
in other components, like your sliders, and
your progress indicators, and your bottom
sheets that you need to be able to quickly
parse that information to understand what's going on. So non-text contrast
identifies the parts of the component that are needed
for legibility and adjusting the pixels around it
or the subcomponents around it to provide a better
contrast between that element and what it appears upon. That will be coming to
these components in 1.3. I also would be remiss if I
didn't mention our Designing Adaptive Apps talk that's
also at I/O by my colleagues Javier and Aneesha. This talk talks about
the way that we're helping you make adaptive apps
for different screen sizes, be it regular phone, small
phones, or foldables. Now on to my favorite part of
this talk is our color updates. So what we're doing is we're
giving you greater opportunities to customize your
apps and also building in some options for contrast. One of the things that
you told us in the past was surface containers
were confusing, because it was this magic
formula of a surface container, and the primary color,
and your elevation, and you didn't understand
how it was going to create the final color. So what we've done
is we've replaced that sort of magical formula
with discrete values of emphasis for surface container
from lowest to highest. These were added
in 1.2, and in 1.3 the components that
use surface containers have been updated to different
values in this scale. I've mentioned a couple of
times before with contrast, we have a contrast control
that is coming to Android V, I think Android 15. And what this gives you is your
users three options of standard, medium, and high to
select their contrast. If you're using dynamic color,
you get this automatically out-of-the-box because these
values are stored in system UI that it will pull from. If you're using
custom colors, you will have to handle your
medium and high contrast. OK, one way that we suggest
that y'all handle this is by interrogating
the UI mode manager. And there is a property
called Contrast that returns a floating point value. And in this sample, I
just bucket the values into either 0 to 0.33, and
then the middle 0.33 to 0.6, and then above that into
standard, medium, and high respectively. You can see more of how this
works in our sample reply, which I believe was used in some
of the other talks at I/O. But if you need to locate it,
it's on our Android GitHub. The project is Compose Samples. And this is how that reply
app looks in standard, medium, and high contrast. So I wanted to show
this graphic for you to show sort of where
Material 3 has started with our color
schemes and the things that we've added to help you
build more comprehensive apps, expressive apps. So we've added,
like I said before, the service container
from lowest to highest. And then we also have a surface
bright and a surface dim. So yeah, please use
Material 3 colors. That wasn't a pause line. [LAUGHTER] So one of the things
that you've told us with how color is
hard to understand is, one of the ways that
we try to solve that is with our Tool
Material Theme Builder, and it's available on
the web and in Figma. And what you can do is
put your colors into it and then it will
give you a Material theme, like the one that we
saw on the previous slide here. It will give you a Material
theme with everything graded for the proper contrast between
light and dark, and also the different contrast
levels, as we see here, where the control you can
switch between standard, medium, and high contrast. There we go. We also have a bit of
scaffolding for Google Fonts to give you a way to select
specific fonts for your display, titles and headers and
then the think body and label the other ones. Yes, I can't see as well
because my glasses aren't on. And when you export
your theme it will export the little
bit of scaffolding code for you to be able to use it
in your app from the jump. And as I said before,
all of these colors are going to be exported when
you export a theme from material theme builder. So please use our tooling. Please ask us questions. Please continue to share with
us what is and isn't working, because we do take
in that feedback even if we can't solve
that problem at that time. So I'd like to thank you all
for listening to me rattle on for a little bit, and
I'm going to hand it over to my colleague, Noa. Thanks. [APPLAUSE] NOA DOLBERG: Thank you,
James, and thank you all for choosing our session today. My name is Noa Dolberg. I'm a UX Manager
on Material Design. And if it's not
already clear, these are exciting times to be
both working on Material and using Material. We've heard from James about
updates to our libraries and tools, and I'm here to show
you how these show up in the UI. But before we dive in,
let's take a look back to the beginning of our journey. From the moment of its
inception 10 years ago, Material has been pursuing its mission
to create beautiful design at Google scale. Over the years, our
perception of beauty has organically evolved. So are the preferences
of our users. Ultimately, beauty is a
subjective experience, so we are pushing
personalization features in our system more
than ever before. We want users to see
their own preferences and choices reflected back
at them in their apps. Not only because
this will help them form a deeper and
more meaningful connection to the
product, but also because this ensures that the
product works best for them. The improvement updates
through our color system play a crucial role here. Updates to our algorithm
allow for a wider range of possible colors,
greater consistency in the way it's being applied,
and for selectable contrast levels. But this flexibility
goes beyond color. We are gradually making updates
to all of our components to make them more adaptive,
personal, and way more cool. Take the M3 carousel. It's one of our most expressive
and engaging components. It uses shape morphing, parallax
scrolling, and dynamic layout to create a powerful yet
functional moment in any app. We've tested how different
carousel layouts, when paired with different contents,
influence the user experience. And we share those
insights back with you to help you and inspire you in
making the best carousel choice for your experience. Working with accessibility
experts across Google, we wanted to make sure that
the carousel not only works with a beautiful swipe gesture,
but also with keyboard input, reduce motion settings,
and extra UI affordances. We did all this
because we wanted to make sure that we deliver
the most accessible carousel out there. To support accessibility
requirements, the progress indicator
and the slider have both been given
a major overhaul. We wanted to optimize these
components for functionality, but also delight. And we've achieved this with
new shapes, refined animation, and a way more expressive
column mapping. All this while also meeting
the latest non-text contrast requirements. For the slider specifically,
we focused our attention on the moment a user adjusts it. This nuance interaction
needed to be just right. The new handle helps users
make a more precise interaction all the way to the
edges of the slider. We also added a
centered configuration with new tracks and a
secondary sensory feedback. And the best part
about all these updates is that you can swap
them in your layout without making
any changes to it. Easy. Typography remains one of
the main feature of any UI. And we already know that making
typography more expressive is a huge lever in
making any app feel more interesting and personal. To make this
easier, we recommend using our Roboto Flex with
all its fine grain controls. And let me show you a few
things that you can do with it. You can play with a Roboto
flexible variable width axis to better fit
type in components with space constraints and
for longer localizations. With the optical size axis, you
can micro adjust your typography to improve the legibility. You can use larger
and thinner weights to create dramatic moments
with your UI, with your type, and you can even animate the
type to enhance an interaction. Variable type unlocks so many
design opportunities for you, and we're excited
to make it more available throughout our system. We wanted to make sure
that your apps function and looks amazingly also on
foldable and tablet devices. For this reason,
as mentioned, we're announcing this year the
Material Paint system that is powered by the
Material Adaptive Library that helps you create apps
that smoothly respond to window sizes, foldable states
and changing input methods. With our Paint system, we give
you logical navigation paradigms with opinionated layout that
works smoothly across devices right out of the box. And to make this library
even more robust, we're gradually
adding adaptivity to all of our components,
so they work beautifully with the adaptive layouts. Please be sure to check out
our talk, Designing Adaptive Apps, to get you started. And with this recorded
talk and many others, we keep making updates
to our guidelines that aim to empower you, designers
and engineers, in making the best design decisions in the
context of your business goals and user needs, and your brand. With Material Design,
we're constantly pushing the envelope of what is
possible when a user interacts with their device. With all these
updates, M3 allows you to do so much more
now, and also these updates are now in Compose
ready for you. My team and I are super excited
to see what you're going to make with all these things. In making updates to
the Material system, we partner closely with
teams across Google to unlock with them the
experience those updates might bring to their users. This approach makes
us even more confident in our products, in our updates,
and how these influence the user expectations. And with that, I'll hand it
off to Sagie to showcase how Material works in Google Maps. [CHEERS, APPLAUSE] SAGIE PUDINSKY: All right. Thanks, Noa. Hi, I'm Sagie Pudinsky,
a Software Engineer on Google Maps. We've been using Material
components in Maps for a while now. So when we started
adopting Compose, we were excited to continue
that collaboration. If you've ever used
Maps on Android, you probably notice how
rich and complex the UI is. We have our own design
system and component library, but it's built on the
foundation of Material Design. This means we can use Material
components under the hood to get built-in
accessibility, performance, and rich functionality while
customizing for our product's unique needs. When we started
adopting Compose, we knew we had to implement more
than 50 components in our Maps component library. Using Material as our
foundation made the process faster and more
efficient than if we had to write them from scratch. That also ensured our components
were battle-tested, supported by the Material
team, and consistent with the rest of our
Google ecosystem. When we use a
Material component, we know it adheres
to Google best practices for user
experience, accessibility, and personalization. We know we don't have to
worry about dynamic color, accessibility delegates,
or complex motion. That means we can focus
on styling the component to match our design language and
deciding which parts of the API we want to expose
to our developers to maintain app-wide
consistency in the long run. I'll go back to the
previous slide for a second. So in this example,
in Google Maps, we changed the elevated button
that Material uses by default. We use the elevated buttons
under the Search box on Google Maps to
help you search for places like restaurants
or coffee shops. To do this, we just wrapped
the Material elevated button with our own composable,
setting the colors and height of the component
to match our design specs. Additionally, we wanted to
ensure our developers only use icons and text labels
inside the button. So we replaced the
Composable content slots with Icon and Label parameters
to ensure that consistency across the app. As for the latest updates
we just heard about, we've been working closely
with the Material team on these and we're super
excited about them. Our Notifications
inbox is already using the new
pull-to-refresh API. Using pull-to-refresh
for Material meant we didn't have
to handle any swipe interactions or
animation, and it was really easy to hook up
to our existing data layer. Our recently revamped missing
road reporting experience also leverages several Material
components, including buttons, lists, and the bottom sheet. While Material's bottom sheet
didn't have the look and feel we needed out-of-the-box, it was
really easy to customize it to match our specs. On the color front. James just told you about
Material's latest updates to surface color roles. We were very pleased to
hear about these ourselves and wasted no time
incorporating them into our app. Being a very content-rich
app with a ton of useful data to show the user, we're
always looking for ways to improve our information
architecture on screen. With the new Arrival card
design we're exploring, you'll see how we leverage
surface roles to organize the different layers of
information on the page. Whether it's a quick
overview of your destination, additional actions you can
take after you've arrived, or requesting feedback on
your navigation experience, the new surface roles
make all of these elements distinct and easily
parsable by the user. Finally, we're
especially excited about the new carousel component. As Noa mentioned, the
new expressive carousel is intended for creating
hero moments in your app. Since Maps is all about
discovering new places, we believe the new
Discover Through Photos carousel is the perfect
opportunity to introduce it. We're still exploring
this direction, but here's how this could
look like in our app. You can see it allows us to
highlight all the amazing places you can find on Google Maps and
all the amazing latte art that comes with them while bringing
an expressive and fresh look to the app. Now, I'll hand it back to
Mike to wrap things up. [APPLAUSE] MIKE TALVENSAARI: Thanks, Sagie. Over on Material, we love to
see the added customization that are adopting things
built onto the system. It's really inspiring to us. We hope this gave you an idea
of the latest technology we're offering to help you make your
products as useful, accessible, and memorable as possible. And we've got one last exciting
thing to share with you all. I bet you never guessed
it would be AI-related. We know from research
that developers are relying more and more on AI
while building their products, but our researchers
are on the front lines. They see how some
developers struggle to make use of these
powerful tools, both our system
and the Gemini app. To help, one of our
researchers over on Material put together a guide, complete
with general best practices for leveraging
LLM tools, as well as it walks through specific
prompts on how to make them yield more helpful results. Head over to the blog on
material.io to read "Using the Gemini App with
Material Design 3" to see the guide and start using
the Gemini app in your Material Design workflow today. We're working to make it easier
than ever to leverage Gemini as you adopt material. Oops, wrong button. That's all we have for today. We hope you're as excited as we
are about these latest updates. Please keep talking to us. Share your experience. We really do listen and add
the things you ask us to. It just might take
us a little while. Share your experience
adopting Material Compose and help us continue to
make future versions easier and faster to use, and
ultimately a better experience for everyone. Have an amazing rest of I/O
'24, and thanks for listening. [MUSIC PLAYING]
