About the talk
Learn how UX researchers helped test, refine, and evolve the latest Material Design guidance and why it matters to product development.
02:38 Material Consists of Components
09:45 Material Text Field
16:13 Bottom-Up Experiential Research
22:22 Work Flow Research
24:43 Design Process Discovery
27:35 Pain Points of Designers
27:40 Key Pain Points
29:31 Product Research
35:06 Homepage Design
Sara Cambridge is a UX Researcher for Material Design. She leads research for Material Product, which includes tools for designer and developer collaboration and Material.io. She has a Masters degree from UC Berkeley School of Information, where she currently teaches. Prior to joining Google, she was a Senior UX Researcher at gotoresearch, where she led projects for Target, Capital One and Sony.View the profile
Elizabeth heads up research for Material Design and Flutter. She has been building and managing research teams in Silicon Valley for over 20 years.View the profile
Michael is a research lead within the Material Design organization, heading up the charge to make sure all components are usable and useful to the users who would interact with them. Prior to the research world, he helped build games at Sony Online Entertainment & Monolith Productions.View the profile
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 Ajo, and we've done a lot of research in the background to backup. Innovation. And what we're going to do today is just tell you a little bit about some of that research where we can to encourage you to come and talk to us later and we will be in dumbass
cuz we're interested in knowing how your integrating Research into your product and design system development. But before I get going, I want to know how many people out that I 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 researches. Scary research welcome, welcome, welcome one of the things we want to emphasize in this too
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 uses of the things that you built but also you as uses 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 uses. 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 adaptable. And it helps you bring high-quality experiences to your uses. And I will a mister help you make things that I beautiful but that I usable and useful and also importantly accessible was very committed to helping you do that. So material consists of components and components a things like buttons things like text fields and things like tables. This Tayo, we have brought material seeming 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 adopt them for your experience so that you can have your brand and you'll look and feel for your uses all the way through systematically from design to code. So that's very much a key part of our innovation. material also consists of patents Patton's like account switching accessing settings for handling empty States. All of this information these components these themes and these patents roll up into guidance that you can see on our site
us back. If you have not yet checked out material. IO, please do so, please go and have a look check out what we got there and send us feedback because the great part of this tool gives 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 it.
Gallery results have been launched here Ayo. 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 a relationship on 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 went with folks like you to make these tools great. Sarah's 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 police together to accomplish the things you need?
What is the biggest ecosystem of the idea to design to develop to iterate workflow? And again, we do interviews we do hope Behavioral Studies. We observe folks in workplaces. 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 stop to think about where we need to go in the future as the whole field explosion innovate and Sarah is going to help you with that. So with that said for my studies
with a few uses the thousands of uses for my clothes studies as we talk to you two are surveys. I'm 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 all 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 introduce them on the left. We have the material Fab or The Floating Action button. 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 their earth-shattering lie 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 under line 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 they 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 the slide. I just want to show a few of the details that were considering here. So what we're looking at here is an exploration of label placement
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 contacts 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 on quote forms,
which reforms that we actually took from the wild and then inserted are 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 there unreasonably complex, but we created them to see how each text field would perform in extreme circumstances. Would it stand out too much or what it get lost entirely and will show examples of that one in a minute. But first what is 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 Steam and each of the characteristics that we had identified. We then deploy these forms and 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 were 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 a while, but this is just so you know, the lengths designers will go to to make sure that every opportunity is explored and they were they really are something what we were able to do in the end West to create a way for people to interact with ideas rather than products and to be clear
we weren't doing this research as 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 seem to work and what parts might require caution. To provide them with the tools that ultimately cannot 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 artifacts from research as one of those tools. And here is the
before-and-after example of what just one text field mite look like given this approach. because ultimately what we aim to do is to support design that is more usable more useful more beautiful and 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 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 done as well as the bottom-up experiential research. And this may look familiar to many of you this bottom of research that usually involves sitting down with your users across a
table sometimes and something like usability studies sometimes and 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 in the usability
of components, but it is also about that look and that feel So next time 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 bolted 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 I button look like if it's trustworthy and these aren't just strictly questions for fun either. There is an entire landscape of what what buttons might look like of what they might be of what is botany. I'm part of the research we get to do is to better understand that landscape
and we get to do that by talking with her users. And the second example is from a study participant who was interacting with the Google material theme 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 component 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 user's own perspective about what seems to jump
out at them. and in the end we can speak more effectively about them meaningful characteristics of brand with the designers in 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 theme 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 and 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 similar 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 wear a building material design. And on the other hand, we are aiming to better support our users to make sure the each component is usable as useful is
beautiful. No matter how it's used or by who And last again, I'm hoping you might be able to take some of the ideas. We 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 Ciara to the stage who's going to be talking a little bit about designer and developer research. Thank you, Michael. So is 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 Michael shared with you how we do research with our end users so that we can really understand how to make are components most effective. But you are and users to 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 the other two types of research Elizabeth mention the workflow research and product research and I'll give you examples of how products that have launched here at I
have been better through our research. Let's start with workflow research. This is 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 is 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 an 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. This example is from workflow research. We did with designers 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 to walk us through every part of the project who they worked with but 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 working really different ways. Whenever I do this kind of research, 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 compared 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
until I had my colleagues categorizing the different phases that they heard the people we talked to went through 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 we ended up with was 6 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 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 have a 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 simplify it to show you but the 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 hear. 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 weekend. Built this this technical constraints make this impossible. So has anybody ever had one of those conversations?
Okay. Alright, that's good that were resonating with with your experience as well. But of course, there's positive interactions between designers and developers throughout this process would definitely have heard that the designers do not enjoy making designs facts for handing a project off to a developer. But when that moment comes where they get the handoff formally to developer, that's usually a milestone a really positive milestone in a project. So that's positive and it can goes down 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 off and after they've already moved on to another project. So Dennis, it's resonating anybody had this happen, okay. So the whole point of doing this kind of really deep dive and 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 Define 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 of design. So another thing that came out of that research is pain points designers and developers and I'll go through these with you. So the key pain points we heard from designers are having a great 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 going to need at different phases of the design process that often are living in different
places that remember this cuz I'll show you a solution that we came up with for this in gallery. I'm craving design specs as I mentioned and then having to share design assets across their team and keep them consistent. Top 10 points we heard for developers was having to solve for edge cases and often responsiveness from a singular happy pass that they're getting from their designer getting incomplete design specs or getting ones that are wrong or not getting them at all. 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 the intent was with a design so not knowing what really matters. Notice with this kind of list that both pain designers and developers both found design specs as a real pain point. So it was this kind of research to that. Let us realize what a problem. This is for both roles and lettuce prioritize building a tool that solves is
problem. And that project is ice Elizabeth Mansion is gallery and I'm going to tell you more about Gallery in a minute. But before I do I'm going to tell you a little bit about the other type of research I mention 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 of 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 am also let me walk you through a little bit about how I conduct research when I 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 the left
and I'll walk you through some kind of prototype or beta tool and getting your feedback as we go along like what are you like what's confusing and especially at the end? I want to know how does this fit into your existing workflow is going to 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? But now I 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. Has anybody seen a demo of gallery in the are? Okay just a couple folks wouldn't 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 metadata from the sketch goes into an online way Ford has that developers to get that the code in the values.
Anime developers also have an access tube material component in that Gallery feature if they're using the material components when they're designing and it's being demo'd in and dumb ass over there if you want to check it out. So we're in the edz a project called Positive Vibes little description of the project at the top with colored rectangles are a way for designers to collect the the link that they're going to need different stages of the projects. As I mentioned. We were solving one of the problems when covered in the research with that one and then below that are basically folders and
people can organize them. However, they want in this case are organized by the device that is being designed for So what's that you clicked into the tablet do you from here? You would see all the screens that are in that tablet. And if you clicked into the first screen, then you're going to see that screen in more detail. Now at the yellow box of the top you can see all the different things you can do from here. You can comment and spect you can share it. But what's Happening Here is someone is rolled over the type of the top and you can see it. The feds the typeface the way the color all
that stuff is right there for the developer to access. 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 cuz it's the older mop, 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 they have. Hope you've heard about the the material plug-in we have for sketch and that has gives him access to all these pre-built material components where they can customize
for their own brand so that the one in the green bar that green bottom app bar had they had customized at in sketching at change 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 your 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, but you're getting is the link to the code and aspects for that but you're not getting any more granular information beyond the size
of that entire bar and will be her designer saying is like, well, I want to see what they 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 when we were showing them and gallery and we have 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 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 for the size and the events of that a die. And shapes out. So this is just one of many examples of how the research has made. Our products launching here at IO better. Another one is the material IO homepage. So in the same research I'm talking about. We also got feedback on an earlier version of the homepage design and we 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 Who's 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 website that went live a couple days ago underneath 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 just gone through with you is giving you some examples of how we use workflow research to identify the big problem that we want to put our time into solving and how pranic research improve the product no
matter what stage it's in and how we use products that we releasing at IO 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. I'm going to hand it back to Elizabeth now. Thank you so much Sarah. Thank you everybody. So just a little bit of a wrap up by a reminder of the invitation to visit us and Dome F. I am so what we've shown you today is just the flavor of a 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 Esthetics temps of usability in terms of sort of usefulness, but also access ability and Sarah has said how important it is for you to send us feedback on all 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 were 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 out some of the methods that way using and inventing and we will be sharing that along with the other guidance inspect and sharing how these methods can help you understand how I'll tools work for you'll come text because of Michael said very clearly your contacts might be slightly different from our own so we will be sharing more of that with you over the next year. I'm so
finally I hope you take away how we're bringing together design and development and engineering and research on how we're really treating. This is 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 them F10 F. I should say at design sxs accessibility. And again, thank you for your attention. Thank you for coming.
Buy this talk
Access to all the recordings of the event
Buy this video
Our other topics
With ConferenceCast.tv, you get access to our library of the world's best conference talks.