ROMA SHAH: So I'm Roma, and
I'm the UX lead on Chrome.
So you've already heard today
about all the different ways
that we're tackling
the web app experience
from so many different fronts.
And you've heard about the
performance improvements, how
we're bringing
capabilities to web apps
that native apps already
have, and balancing
the friction of permissions,
with still keeping users safe.
So I'm here to talk today
a little bit about the user
experience run in general.
We've made some pretty
significant steps this year
that make it easier to design
intuitive and beautiful user
experiences across
native and web platforms.
And my hope is
that you guys leave
this talk with a general
understanding of the philosophy
behind Material Design, some
practical tips on how to get
started even if you don't
have a designer on your team.
And I'm also going to talk
a little bit about some
of the Chrome UX changes
that we've made in Android L
that we hope moves the mobile
web experience forward.
So before I dig into the
philosophy of Material Design,
let's take a look at the
Material Design reel,
so you can get a visual design
sense of what it's about.
[VIDEO PLAYBACK]
[MUSIC PLAYING]
[END VIDEO PLAYBACK]
So the reason I want to get
into the philosophy of Material
Design instead of just
jumping straight to the spec
and giving you
practical tips is that I
think it's really important
to understand what this design
framework is trying to achieve.
The spec is online.
You guys could just go
there right now look at it.
And it makes it easy for people
to build well-designed apps
but-- and that's
really important.
--but what I'm hoping is that
by understanding the philosophy
behind this design
framework you guys
can help us evolve it further.
A spec is never going
to be able to cover
all the complexities
of any app out there.
And we need you guys are
really kind of push on it
and use it in novel ways
to help us evolve it.
It's a community effort.
So getting into the
philosophy, Material Design
is based in real life,
tactile experiences.
The name material suggest this.
But it was really
heavily inspired
by studies of paper and ink.
But it's more open and
imaginative with behavior
because there's code behind it.
So paper lends itself
really well to squares,
simple shapes like
squares and circles.
But unlike real
paper, this material
can split, heal,
rearrange itself,
and move itself about
when it needs to.
And while we want users to
feel like they can interact
with it in a realistic
way like real paper,
things should always
feel intuitive.
So let's take an example of
what it means to be material.
Material Design has attributes
that we're innately elite
familiar with in real life.
So there's surfaces, edges,
light, dimensionality,
and movement.
All of these things
give us visual cues
about how these objects
relate to each other
and what the affordances
are in a design.
Material Design is bold,
graphic, and intentional.
It's based on the
foundational elements
of print design
and graphic design.
Typography and imagery,
colors, grids, scale, and space
all guide the visual design.
And when used appropriately,
these elements
combined will really make up
an esthetically pleasing UI
and a more immersive experience.
But beyond the
surface look and feel,
when these elements
are you the best,
they should really
also have function.
They should help convey
the meaning of elements,
the hierarchy of
the UI, and where
users should be focusing
their attention.
So let's take a look at Gmail
before and after having applied
these elements of design,
how it affects it.
There's a lot more white space.
It's more readable.
And with the use of color and
this floating action button,
you see where the
user is supposed
to focus their attention to.
So these elements should
also provide consistency
in a sense of familiarity
across platforms and devices.
In Material Design,
you've probably
noticed that there's a lot
more motion and animation.
And it's not just there
for the sake of it.
Motion is meant to
provide meaning.
So motion and
animation are really
meant to reinforce the idea that
the user is initiating change.
The user is initiating action.
And they're in control.
So motion cascades
from touchpoints.
Changes in the
interface are meant
to provide visual feedback
and feel really directly
connected to what the
user has just done.
Motion also allows us to
make the experience more
immersive and natural.
It's no longer this
jump from screen A
to screen B but a really fluid
and deliberate transition
between states.
Material Design
also aims to create
a unified experience across
native and web platforms
and all the different device
sizes that are out there.
Across devices,
the user is meant
to be seeing these same
views of the same design.
And obviously, based on the
screen size, the interaction,
and the input method that
is appropriate for whatever
that device is,
things should change.
But the colors,
iconography, and hierarchy
should all remained
somewhat constant.
So those are kind of the
basics of the philosophy
behind Material Design.
Now, I want to shift gears
is into how you can actually
apply these principles.
So the entire Material
Design spec up
on google.com/design/spec.
If you have the
luxury of a dedicated
designer on your
team, this is the spec
that they should
be going off of.
But if you don't, that's
why we're here right now.
So first of all,
you probably want
to use Polymer since you
can get in yearly for free.
And it's specifically for
building material design
for web apps across
desktop and mobile.
And their website has everything
you need to get started,
including some really
great demo apps
that show you the interactive
elements of Material Design.
So Polymer is a tool.
And you're actually going to
be hearing more about it later.
But I'd like to dive into
a practical basic checklist
of how to apply Material
Design to your apps.
And the particular things
that I'm going to talk about
will help you make
critical design decisions
even if you don't have
a designer on your team
and hopefully give you the
biggest bang for your buck.
So Material Design has
recommended spacing and sizing
guidelines, all of which
are detailed in online spec.
Following these can
really just help
the readability and
usability of your app.
So components are on an
eight device independent
pixel square grid.
Type is on a four
dp squared grid.
And the size of
structural elements
are based on these
things called increment.
And increments are based on
standard app art height which
is 56 dp on mobile and
64 dp on larger screen.
So for example, we have
three different apps here.
And they all have different
needs for different app bar
heights or different view
heights for whatever reason.
And all of these things
are in increments
of 2, 3, or nx, the size of
the standard app bar height
which is shown in the
orange one on the right.
There are a number
of layout templates
available to you on the
online spec for mobile,
tablet, and desktop.
And they give you an idea of
how keylines and spacing can
work across screen sizes, window
sizes, different structures,
and different elements.
And if you're building an
app designed for touch input,
you should really make your
touch targets 48 by 48 in dp
whether the icons or
elements within that 48 by 48
take up that full space or not.
So Polymer has a
lot of components
that you get for free.
You should take
advantage of those.
This includes icons
sets, widgets, elements,
and transitions, all
based on Material Design.
I'm going to take a
second to call out
one of the specific
components that's
pretty recognizable
in Material Design.
And that is the floating action
button or FAB or paper FAB.
This thing is supposed to be
the main and iconic action
of your app.
It's not supposed to be any
arbitrary action but something
that a user can really
look at in one glance
and understand what
is your app about.
So for example, we have
this media app here.
And a play/pause button
really gets the essence
of what this app is about.
In the Maps app, you have
a driving directions button
with a car.
You really get a sense of this
is what this app is about.
And you should only ever
have one of these components
on the screen at one time.
And you probably don't need
these floating action buttons
on all of your screens
within your app.
Colors.
So Material Design has
a lot of color palettes
that you should
take advantage of.
I do you want to stress,
since it has come up before,
that the Material Design
color palate does not
equal the Google
Design color palette.
This thing has plenty of range
to fit any app's branding
and style needs.
So it's easy to start with
the primary color of your app.
This is usually going to be
the brand color of your app.
So if the brand of
your app is red,
let's say, this should probably
be red instead of indigo.
And then, we have this
notion of accent colors.
So accent colors really should
be bright not dull or dark.
And they're really used
for button, UI elements,
and components that you want
the users to focus and guide
their attention to.
The Material Design spec
recommends a stack of Roboto,
then Noto, then,
Sans Serif-- that's
a font stack-- at least
for body sized texts.
But we doing
knowledge that fonts
are often inseparable
from branding.
So if you have a specific
font for your brand
that really you want
to use everywhere,
we recommend using
it for display
sized texts not for body
sized texts, per se.
But regardless of the
fonts that you use,
you really should use
the sizing and spacing
and weight and style guidelines
that they have in the spec.
They've made a really easy
for you guys to just take.
There's tons of typography nerds
that have worked on this stuff.
Depth.
Dimensionality and
shadows in depth
are very important
in Material Design.
So it helps to think of your
UI as existing in z space,
not just x and y.
So depth shouldn't
just be ornamental.
Depth should be
giving users hints
of how sections
relate to each other
and move in ways
that seem plausible.
Once you understand
the relationship
of how sections in your
UI relate to each other,
then you can start adding
shadows and dimensionality
to things.
So for example, on
the left, you see
if there is a shadow there that
makes those two sections look
somewhat separate from each
other or somewhat of a gap,
it's natural for
the user to assume
that if I swipe
one of those things
away that the
other on may remain
and moves independently
of the other.
But the one on the right,
the seem between them
is like a very light line.
They still feel like they're
coplanar on the same section.
And you would imagine that
if I swiped one of them
in one direction,
both of those things
are going to go in the same.
The z position is also meant to
be a reflection of your content
hierarchy.
And you're probably going
to use it with content
that you typically want
the user to be focusing on,
such as dialogue boxes or
floating action buttons
that we were talking
about earlier.
And this z-depth hierarchy
isn't necessarily
a constant or fixed thing.
For example, when a user
selects a date from Calendar,
and it expands and moves
forward from the grid.
So really make sure to
thoughtfully consider what
z level each section
of your UI is in.
And make sure that the shadows
it casts are appropriate.
The movement is plausible.
And Polymer, in fact, you can
use the Paper Shadow element
to create z-depth and animate
between z of one to five.
So motion, as we
talked about earlier,
is also very important
in Material Design.
But it's also one
of the things where
it's really easy to
go overboard with.
So transitions and
animations should
be very deliberate
and meaningful but not
necessarily gratuitous.
A lot of the motion that you've
seen in this presentation today
required a nontrivial
amount of work
from motion designers
specific to that role.
So if you don't have
dedicated motion designers,
or you just don't have the
time to finesse these things
on your own, I would recommend
just not worrying about it.
It's better to stay
simple than to spend
a lot of time and effort
making all these motions
and animation that end up being
more distracting than helpful.
And also you're going to
get a lot of transition
in animations for free from
Polymer with the various UI
widgets and elements.
So if you do implement
custom animations,
we recommend that
they be smooth, mimic
true physical emotion,
give hints to your users
about how this app works,
and then also reflect
users choices and actions.
So now that we've covered the
basics of Material Design,
I really want to talk about
some of the big changes
that we've made in Chrome.
So first, let me start by
saying that applying Material
Design to Chrome has been
a very interesting design
exercise for us.
We really like to think
of Chrome's core UI
as a container for your guys'
app and your guys' content.
And we usually strive to be
as invisible as possible.
An approach that
we've landed on is
to begin to apply Material
Design, starting first
on mobile, using these
core foundational elements
that we talked about earlier.
But on the core parts like tabs,
the toolbar, and the omnibox,
we're still going to remain much
more visually subtle than what
an individual app
might be doing.
So we basically want
our UI to be there
for users when they need it.
But most of the
time, they should
be looking at your
content not Chrome.
So beyond Material
Design, some of the stuff
that we've been doing
is looking at how
to make your apps fit more
naturally and intuitively and
beautifully into
other platforms.
So that brings me to
some of the big changes
that we've made in the Chrome UX
for Android L. First, the most
visible change that you'll see
here is that we've taken tabs
outside of the Chrome
app and put them
at the same level as your
Recent Apps in the Overview.
So this is a pretty big
change to the user experience
of the browser
where we separately
have a separate browser
app that you go to.
But we're really
excited about this
because it brings
visibility of web content,
brings visibility
to web content.
And it actually un-silos
the web from a browser app.
And for users, we think
that users shouldn't
have to think about
the technologies
that apps are built on.
If I'm planning a
dinner with my friend,
and I'm looking at restaurant
reviews on the web,
I'm talking to my friends on my
native messaging or email app,
I'm going to be switching
back and forth between those
and planning this thing.
I'm thinking about my task.
I'm not thinking about oh,
OK, that thing is on the web,
so I need to go to
the browser for that.
That thing is native,
so I need to go
to the other switcher for that.
So we want to have one single
place to switch between tasks.
And in addition to
this new home for tabs,
we want to continue
to make steps
to level the visuals between
native apps and web apps.
So you've notice in
Material Design in Android L
that apps have really
boldly colored toolbars.
And starting in Version
39 in Chrome for Android,
you'll now be able to
choose a theme color meta
tag to set Chrome's
toolbar color,
giving you more control over the
look and feel of your content.
The Theme toolbars will be
visible not only in the Browser
view but in the Recent
Overview section
as well to help users
with recognizability.
Of course, what you
do here will really
depend on the design
of your content.
You may not want to
have multiple bars
of really boldly colored things.
So if you choose not
to use a theme color,
we're still going to be
the same default gray
that we are right now.
So the syntax is pretty simple.
You add a meta tag to your
page's head with the name theme
dash color and set the content
to any valid opaque CSS color.
Chrome will also show high
res fab icons in the Overview
just like native apps have.
And we pick the highest
res icon that you provide.
And we recommend providing
a 192 by 192 PNG.
So all the details for that
are on html5rocks and the web
fundamentals site.
So I hope I've helped guys get
a bit of a grasp on the efforts
that we've been doing from
a user experience front
to move the mobile web forward.
Material Design is
basically a framework
that helps anyone really make
thoughtful and well-designed
apps whether they're built
natively or on the web
with a really small
amount of effort
using the tools and
specs that we provide.
And the changes in Chrome
for Android Lollipop
are our first steps to give you
guys more control over the look
and feel of your stuff
and really simplify
the workflow for our
users who don't really
care whether something
is native or web.
They just want to use this
stuff that they care about.
And even more importantly,
what we need from you
guys is to test out these
changes in Chrome, the Material
Design framework,
and really, really
stress test them with the
complexity of your apps,
give us guidance and feedback.
And that's the only
way we're going
to be able to move the mobile
web user experience forward.
Thanks.
