good afternoon everybody

hello thank you so much for coming to

this session

I'm Elizabeth Churchill and I head up

research for material design and I'm

sure you've been hearing about a lot of

the innovations that material has

brought out recently here at i/o and

we've done a lot of research in the

background to back up much of that

innovation and what we're going to do

today is just tell you a little bit

about some of that research we're also

going to encourage you to come and talk

to us later and we will be in dome F

because we're interested in knowing how

you're integrating research into your

product and design system development

but before I get going I want to know

how many people out there consider

themselves to be developers yay welcome

thank you for coming and how many

consider themselves to be designers and

you might have multiple roles wonderful

this is great finally researchers yay

research welcome welcome welcome one of

the things we want to emphasize in this

talk and that material is extremely

committed to is that we believe the

tight collaboration between engineering

and development between design and

research really is the key to creating

great user experiences and by user

experiences I mean the users of the

things that you build but also you as

use this because in material as you will

see and you've been hearing we build

products for you so that you can build

great products for your users so I just

wanted to go over a few things about

material which you may know just to

remind you

so the material design system is

open-source it's adaptable and it helps

you bring high quality experiences to

your users and our aim is to help you

make things that are you beautiful but

that are usable and useful and also

importantly accessible we're very

committed to helping you do that so

material consists of components and

components are things like buttons

things like text fields and things like

tables you're familiar with that and at

this I owe

we have brought material theming into

the picture and we've heard you and we

have responded because we want to make

all of these components customizable so

that you can adapt them for your

experience so that you can have your

brand and your look and feel for your

users

all the way through systematically from

design to code so that's very much a key

part of our innovation material also

consists of patterns patterns like

account switching accessing settings or

handling empty States all of this

information these components these

themes and these patterns roll up into

guidance that you can see on our site

aspect if you have not yet checked out

material to i/o please do so please go

and have a look check out what we've got

there and send us feedback because a

great part of this talk is to remind you

that we can shape great experiences for

people with the help of folks like you

so we need your feedback material also

as I mentioned has a suite of products

and tools that are designed for you one

of them is here this is

Gallery and Sarah is going to be talking

about gallery in a bit of detail later

gallery has also been launched here at

i/o and again we want your feedback

gallery will allow you to take those

components those themes and that

guidance and turn it into reality we're

really building these tools to build

this relationship and this collaboration

the deep collaboration between design

and development so just as a pause this

is the outline of the kinds of research

we do in this team in the material

experience research team the most

granular research is on components and

Michael is going to be taking you

through some of that here we look to

make sure the components really are

beautiful and usable and useful and

accessible the next level of research is

the product research on things like

gallery and here again we use interviews

and observations and we work with folks

like you to make these tools great Sarah

is going to be taking you through some

of that finally we look at workflow

where do all of these tools fit into

your lives as designers and developers

how do you pull these together to

accomplish the things you need what is

the bigger ecosystem of the idea to

design to develop to iterate workflow

and again we do interviews we do hoop

behavioral studies we observe folks in

work places like where you work we do

surveys to try and understand where our

tools fit in for you now how we can

improve them and to start to think about

where we need to go in the future as the

whole field explores and innovates and

Sarah is going to help you with that

so with that say

from our studies with a few users to

thousands of users from our close

studies as we talk to you to our surveys

we're going to give you a bit of a

flavor of that today and I would like to

hand off to Michael who's going to talk

about components research well thank you

for the introduction Elizabeth and once

again welcome everyone my name is

Michael and I lead up research on

material system so as Elizabeth

mentioned we do research on everything

that covers the minor details of users

experience all the way up to the big

picture we look at everything from how

things look on the web or on your mobile

device to how those things come together

to form an application or a brand or an

experience for today I'm going to be

focusing on two types of research that

we've done both examining the components

of a design system first I'll go into

some detail on the top-down experimental

work that we've done which looks into

how the details of design can really

impact how your users interact with your

products and second I'll go through some

of the bottom-up experiential research

that we've done focusing on those same

components but also aiming to understand

how experiences come together in our

products and what those experiences mean

to our users and by the end I'm hoping

to give everyone a better understanding

about how we do some of the research

here at Google so you can take that back

and do it within your own teams but

first a little background on what I mean

when I say components Elizabeth already

introduced some of the components the

patterns and the guidelines available in

material design here we have three

examples of abstractions of those

components and just to introduce them on

the Left we have the material fab or the

floating action by

this was introduced in the first

iteration of material design and since

has become one of its more recognizable

characteristics in the center we have

the material text field and this

provides a core means for users to input

content into applications and on the

right material buttons which provide a

core means of interacting with content

in applications and you probably are all

familiar with these already but what I

want to call out here is not that these

components are necessarily unique or

that they're earth-shatteringly critical

to any one single interaction but that

these components are a fundamental part

of a larger experience and because of

that we want to make sure that we

understand these components at a

fundamental level but for now we're

going to focus just on this first one

the material text field so this is the

text field that we started with this was

our baseline this text field performed

well and it aligned with the original

material vision but there was an

opportunity to make sure that it worked

even better that it worked across all

devices that it worked in both consumer

and enterprise applications and when you

look at something like this think of all

the different parts that have to come

together to make a text field

there's the underline that indicates

where the field starts and where it

stops

there's the label that hints at what

might be typed in there and there's the

text itself once you've entered it and

of course there's the shape of the

entire component how each of those

individual parameters come together and

then how they're used on a page so it's

clear that even for a text field there's

a lot going on design wise but really

how many options could there be well it

turns out quite a lot and as an aside

I'm not expecting everyone to read

through

the actual text on this slide I just

want to show a few of the details that

we're considering here so what we're

looking at here is an exploration of

label placements as well as some of the

possible values in consideration for

label placement but we also looked at

things like background fill we looked at

different elements of style different

types of contrast and of course whether

there should be squared or rounded

borders in the end there were over a

hundred and forty different variations

that we looked at in a couple different

contexts first we looked at simple forms

which had stub content that was

procedurally drawn so that we could test

a whole bunch of them second we looked

at real quote/unquote forms which were

forms that we actually took from the

wild and then inserted our experimental

text fields and then third we looked at

complex forms and these are forms we

hope you would never encounter you know

in nature they're unreasonably complex

but we created them to see how each text

field would perform in extreme

circumstances would it stand out too

much or would it get lost entirely and

we'll show examples of that one in a

minute but first what does that look

like this is ultimately a tool that we

created that would create each of those

forms with each of those text fields

randomly drawing the layout the theme

and each of the characteristics that we

had identified we then deployed these

forms and a set of large-scale surveys

so that we could test both the

performance of every individual text

field as well as get an idea of what

users actually preferred and on the

right you can see the admin interface

for this tool that we built and it's

it's simple but it allows us to zero in

on the types of designs that we want to

research and more importantly it

provides us with an artifact that we can

share with the designers and developers

who

creating and building these text fields

and maybe you're curious about the

complex forms well this is what I mean

when I say complex forms we don't

condone their use in the wild but this

is just so you know the lengths

designers will go to to make sure that

every opportunity is explored and they

really are something what we were able

to do in the end was to create a way for

people to interact with ideas rather

than products and to be clear we weren't

doing this research as a way of telling

designers what products should look like

we were doing research as a way of

working with designers to show them what

parts seemed to work and what parts

might require caution to provide them

with the tools that ultimately can allow

us to more effectively bring our users

into the conversation and this is one

example of what that conversation looks

like this is another this is what the

data actually is from those text field

experiments and without going into too

many of the details I want to show you

how we were looking at all the possible

text fields every possible combination

without dropping any of those

possibilities because the data says this

or that each step that I'm showing you

here involved a process of working with

our team to explore the landscape and to

provide our designers and engineers with

the tools that they can use to create

great products and here I'm referring to

research and the artifacts from research

as one of those tools and here is the

before-and-after example of what just

one text field might look like given

this approach because ultimately what we

aim to do is to support design that is

more usable more useful more beautiful

importantly more customizable especially

with today's enhanced material design

system and the introduction of material

theming we want to emphasize that the

components are customizable and that

within that customizability we've done

the legwork to make sure that those

components will still work the way they

should and importantly that they'll

still look the way that you want them to

so that's a quick look at some of what

we've done with the material text field

but let's take a look at the fab and the

button next at the beginning I mentioned

that we'd be looking at both the

top-down experimental research that

we've done as well as the bottom-up

experiential research and this may look

familiar to many of you this bottom-up

research it usually involves sitting

down with your users across a table

sometimes in something like usability

studies sometimes in things like

interviews and frequently it looks a lot

like just a normal conversation but what

we try to do as researchers is to make

sure that we're asking the right

questions and that's not always how long

does it take 10,000 users to click on

this sometimes what we want to know more

about is how the users think and feel

about our products and about

interactions because material design is

about the performance and the usability

of components but it is also about that

look and that feel so next I'm going to

show three examples to give you a sense

about how users feel about these

components and what that means for our

design so this first example is from a

study participant who is interacting

with the new material button and she

said when the boxes are really bolded

like that it makes you feel like you're

actually pressing a button

and sometimes something like this that

happens in the middle of these

interviews will make you actually take a

step back and ask yourself what is a

button really and and really what should

a button look like if we define it by

how it feels when we press it or what

should a button look like if it's

trustworthy and these aren't just

strictly questions for fun either

there's an entire landscape of what what

buttons might look like of what they

might be of what is button II and part

of the research we get to do is to

better understand that landscape and we

get to do that by talking with our users

and the second example is from a study

participant who was interacting with the

Google material themed fab shown here

and she said the last time I looked at

your email app it didn't look as googly

as this and I love this because when we

actually talked to our users we learn

about more than just the components we

learn about more than just the

interactions or the products and in this

example we can clearly see how design

can impact brand but we get a better

sense from the users own perspective

about what seems to jump out at them and

in the end we can speak more effectively

about the meaningful characteristics of

brand with the designers and the

developers who are building these and

this last example is a quote from a

study participant who could use

assistive devices to see but he was

actually legally blind and he was

interacting with the Google material

themed extended fab shown on the bottom

he said it actually jumps out a little

bit more even without the color it pops

out it just seems more obvious what's

going on there

and I think this is one of the main

strengths of actually sitting down and

talking with our users in the same way

we want to explore how a hundred

different text fields can be implemented

in a hundred different ways we want to

see how these components in our products

are encountered by all our users it's a

different way of looking at the exact

same landscape to wrap things up I've

shown you a brief look at how we've

approached a couple different types of

research first looking at the material

text field from the top down

experimentally and second looking at the

fab and the button from the bottom up

I'm hoping you can see some of the

similarities of these two approaches on

the one hand we are aiming to better

understand a whole range of possible

expression to better support the

brilliant designers and engineers we're

a building material design and on the

other hand we are aiming to better

support our users to make sure that each

component is usable as useful is

beautiful no matter how it's used or by

whom and last again I'm hoping you might

be able to take some of the ideas we've

talked about here to be able to do

research within your own teams and with

that I'd like to thank you for your time

and welcome Sarah to the stage who's

going to be talking a little bit about

designer and developer research

thank you Michael so as Michael said I'm

Sarah and I lead research for material

product and what we do is create

products and tools resources for

designers and developers just like you

so Michael shared with you how we do

research with our end-users so that we

can really understand how to make our

components most effective but you are

end-users - and designers and developers

is where I put my energy to

understanding our products and how

you're using them to make them better so

what I'm going to talk about is that

other two types of research Elizabeth

mentioned the work flow research and

product research and I'll give you

examples of how products that have

launched here at i/o have been made

better through our research so let's

start with workflow research this gives

us a really big broad picture for how

people creating digital tools people

like you how you're doing your work day

in and day out usually how this looks as

all interview ideally designers and

developers who work together I'll go to

your office I'll talk to you about how

you're working I want to know all the

tools you're using who you're

collaborating with and especially

anything that's a problem in your

workflow and our goal with this kind of

research is to get a big picture of the

bigger problems that affect a lot of

people so we can prioritize building

tools that solve those problems for you

so this example is from workflow

research we did with designers and

developers that work together like I

said we went to their offices and one of

the things we had them do is take us

through a recent project from beginning

to end we had them walk us through every

part of the project who they worked with

what the tools they were using and

especially anything that was a struggle

so here's a couple of examples of how

people think about their work so you can

see people look at their work in really

different ways whenever I do this kind

of race

search I want my developer designer and

product manager colleagues working on

those products to come with me because

everyone hears different things and

different things pop out at them during

the interviews so we always do a debrief

where we compare notes on what we heard

and what was interesting or surprising

and because this research was really

focused on understanding the UX design

process itself

we were going to be doing a timeline of

a typical UX design project and so I had

my colleagues categorizing the different

phases that they heard the people we

talked to went through so let me show

you what this turned into this is a UX

design workflow it's also known as a

journey map or experience map but what

we ended up with with six phases for the

design process discovery initial design

iterating on the design validating

beginning building and then the final

implementation and I'll explain the

structure first and then I'll come

around and fill in some details so below

that and the green to red are a single

positive and a negative key moment in

each phase and those were from stories

we literally heard from the participants

we talked to that were either really

meaningful or were a pattern we heard

several people talk about and then at

the bottom we had the tasks pain points

and tools and this gave us a really rich

range of experiences that we heard

different people using now he took that

out to just simplify it to show you but

that whole thing is a big poster that

hangs in our office so for instance

thinking about the the key moments often

we heard people get really excited when

they're starting a new project there's a

lot of promise and potential but they

quickly get overwhelmed by scope or

scope creep so that becomes a negative

moment and as you might imagine there's

a lot of interplay between designers and

developers here the first one is when in

the initial design phase when a designer

is really excited about an idea they

have and they have to go to their

developer and the developer says to them

this we cannot build this there's

technical constraints make this

impossible so has anybody here ever had

one of those conversations okay alright

that's good that we're resonating with

with your experience as well but of

course there's positive interactions

between designers and developers

throughout this process we definitely

have heard that designers do not enjoy

making design specs for handing a

project off to a developer but when that

moment comes where they get to handoff

formally to a developer that's usually a

milestone a really positive milestone in

a project so that's positive and it can

go south again because what happens

often is that developers come back later

with unexpected problems due to legacy

code and the designers have to step back

in often after they've already moved on

to another project so again is this

resonating anybody had this happen okay

all right so the whole point of doing

this kind of really deep dive into

understanding the practices again is to

surface those problems that affect a lot

of people so we can prioritize building

them and I just want to take a minute

and defying I've mentioned design specs

and I'll talk about it more in a minute

but when I say design specs what I mean

are the margins guidelines colors fonts

and often even behaviors that designers

give to developers when they're getting

ready to implement a design so another

thing that came out of that research is

pain points of designers and developers

and I'll go through these with you so

the key pain points we heard from

designers are having to aggregate

feedback from a lot of different

stakeholders often the feedback is

living in different tools having to

prototype motion but not having time to

do it having to keep track of different

project resources that they're gonna

need at different phases of the design

process that often are living in

different places now remember this

because I'll show you a solution that we

came up with for this and gallery

creating design specs as I mentioned and

then having to share design assets

across their team and keep them

consistent

top pain points we heard for developers

was having to solve for edge cases and

often responsiveness from a singular

happy path that they're getting from

their designer getting in complete

design specs or getting ones that are

wrong or not getting them at all ffs

absolutely I've heard that one a lot as

well when you have to create a new

component trying to figure out am I

going to customize something that's

existing or build something new from

scratch getting design changes late

after you've started working leading to

rework and finally having a lack of

context of what that intent was with a

design so not knowing what really

matters so you'll notice with this kind

of list that both pane designers and

developers both found design specs as a

real pain point so it was this kind of

research that led us realize what a

problem this is for both roles and let

us prioritize building a tool that

solves this problem and that project is

as Elizabeth mentioned is gallery and

I'm going to tell you more about gallery

in a minute but before I do I'm gonna

tell you a little bit about the other

type of research I mentioned product

research and this is really just a big

bucket for anytime we show you something

that we want to get your feedback on it

may be a really early stage idea that we

just want to validate and make sure the

concept is sound or maybe it's a

refinement of a product we've already

invested a lot of time in and we just

want to make sure that it's really

functioning well for how you want to use

it so a lot of people call this

usability but for us this type of

research is doing so much more than just

telling us if a product is usable so and

also let me walk you through a little

bit about how I conduct research when

I'm doing product research with

designers and developers so this is one

of our research labs on the Left usually

I'll bring somebody into our lab I'm

meeting with them one on one it's

streaming to a room that my designer

developer and product manager colleagues

are sitting in like the one on

left and I'll walk you through some kind

of prototype or beta tool and getting

your feedback as we go along like what

do you like what's confusing and

especially at the end I want to know how

does this fit into your existing

workflow is this gonna solve any

problems for you and then after all that

is done go back in talk to my colleagues

and we figure out what was really

interesting here what can we take from

this that we can use to make our

products better so now I've told you a

little bit about how this process works

let me walk you through an example of

something we learned when we were doing

research with gallery and how that made

it better for the final product so is

anybody seen a demo of gallery in the

hour okay just a couple folks and let me

walk you through so this is a project

page in gallery and also let me just

give an overview gallery is an online

collaborative tool that lets designers

share their designs with other

colleagues get feedback and it also has

a design specs feature where they can

get the the metadata from the sketch

goes into an online way for developers

to get that the code and the values and

then the developers also have an access

to material components in that gallery

feature if they're using the material

components when they're designing and

it's being demoed in Indo map over there

if you want to check it out so we're in

a project called pazzo vibes there's a

little description of the project at the

top the colored rectangles are a way for

designers to collect the the links that

they're gonna need at different stages

of the project so as I mentioned we were

solving one of the problems we uncovered

in the research with that one and then

below that are basically folders and

people can organize them however they

want in this case they're organized by

the device that it's being designed for

so let's say you clicked into the tablet

view from here you would see all the

screens that are in that tablet and if

you clicked into the first screen then

you're gonna see that screen in more

detail now at the yellow box at the top

you can see all the different thing

you can do from here you can comment

inspect you can share it but what's

happening here is someone is rolled over

the type at the top and you can see it's

got the the the typeface the way the

color all that stuff is right there for

the developer to access so that's how it

looks now and let me show you something

that we were getting feedback on a

couple months ago when we did some

research on it so this looks a little

bit different because it's the older

mock but you can see it's basically the

same thing so in the study what we did

is we were talking to designers we had

them use our new material theme editor

which I've hope you've heard about the

the material plugin we have for sketch

and that has gives them access to all

these pre-built material components

words they can customize for their own

brand so that the one in the the green

bar that green bottom app bar had they

had customized that in sketch and that

changed the color and changed one of the

icons in there and then they had

uploaded that to gallery where they were

looking at what they would be sharing

with their developers so we were wanting

to know you know what do you think of

this and what we heard from them as you

can see here when you roll over that

bottom app bar what you're getting is

the link to the code and the specs for

that but you're not getting any more

granular information beyond the Desai's

of that entire bar and what we heard

designers saying is like well I want to

see what that shade of green that I

changed it to us I want to make sure

it's my right brand color and I want to

see what that icon was I want to make

sure it's the right icon in there so

what we heard is that they wanted a lot

more granular data for the material

components than we were showing them in

gallery and we had it we just didn't put

it in there so this was a really

important thing for us to know so this

is the final version that's been

released so as you can see you've still

got that bottom app bar but when you

roll over any single component inside it

you get that really granular data for

that particular component in this case

the size and the of that of that

diamond-shaped fab so this is just one

of many examples of how the research has

made our products launching here at i/o

better

another one is the material IO homepage

so we in the same research I'm talking

about we also got feedback on an earlier

version of the homepage design and we've

heard from designers that they really

like to get overview videos of any kind

there's a new evolution of something so

they can get a quick sense of what's

changed and we had that but it was at

the bottom of a really long page and

nobody found it before they were able to

click on the video so what we did is in

the the website that went live a couple

days ago right underneath that fold that

video is really prominent so we made it

really easy for you all to get a quick

overview of what's new in material so

what I've just gone through with you has

given you some examples of how we use

workflow research to identify the big

problems that we want to put our time

into solving and how product research

improves the product no matter what

stage it's in and how we use products

that we releasing at i/o how we use

research on these products to make them

better and if you want to go check out

gallery go to material io / tools all

right I'm gonna hand it back to

Elizabeth now thank you so much Sara

thank you everybody so just a little bit

of a wrap-up and a reminder of the

invitation to visit us in dome F and so

what we've shown you today is just a

flavor of the ways we're using

traditional methods for research as well

as inventing new methods to understand

how the components work for everyday

uses in terms of beauty and aesthetics

in terms of usability in terms of sort

of usefulness but also accessibility and

sara has shared how important it is for

you to send us feedback on our products

because we do want to work with you to

make sure that your lives are easier in

this pretty difficult workflow process

from idea to product that really works

another thing I want to let you know is

that we know that many of you don't have

research teams we're lucky enough to

have one and so we think of ourselves as

the research system that aligns with the

design system in the engineering system

and we have committed to writing up some

of the methods that were using and

inventing and we'll be sharing that

along with the other guidance and spec

and sharing how these methods can help

you understand how our tools work for

your context because as Michael said

very clearly your context might be

slightly different from our own so we

will be sharing more of that with you

over the next year and so finally I hope

you take away how we're bringing

together design and development and

engineering and research and how we're

really treating this as a conversation

and a conversation that needs to be a

rich one and so with that said thank you

again for your attention please come and

join us in dome F 10th F say at design

and sex accessibility and again thank

you for your attention thank you for

coming

[Applause]

[Music]

Oh

[Music]