[MUSIC PLAYING]
ANDRE LABONTE: Hi.
I'm Andre, product manager at Google
working on Material Design.
Today, I'm excited to walk you through why
it's important to optimize your apps for large screens
and how to get started.
We'll walk through key concepts and strategies
for adapting mobile apps to large screens,
as well as preview the latest guidance from Material Design.
Last October, at Android Developer Summit,
we announced major updates to Material Design and Android
that make large-screen experiences easier to build
and more beautiful.
Material's design language and adaptive capabilities
are evolving in tandem with large-screen frameworks
from Android.
Altogether, this level of support
for optimizing large screen experiences
is leading to great results for designers, developers,
and, most importantly, the people who use our apps.
Let's talk about why optimizing for large screens
matters for your app.
But, first, what exactly do we mean by large screens?
We're talking about device form factors beyond mobile phones,
like foldables and tablets.
They're the fastest-growing group of devices,
and we see people really embracing them for reasons
we'll go into in a bit.
As app-makers, we know that with every new device
comes new challenges for designers and developers.
Large-screen users expect high-quality apps
that adapt to new form factors, not just stretch to fit.
It's the expectation that elements and features
rise to the opportunity of expanding to new screen
real estate in ways that are intentional and appropriate
for app functions.
And these adjustments pay off, because apps
that optimize for large screens are
seen to foster deeper engagement,
signaled by longer user sessions and higher on-device spending
when compared to apps that are not optimized.
Not to mention, Google Play Store
enables users to discover and engage
with high-quality tablet apps.
We're working to support and promote the best tablet
experiences to meet the growing demand.
And, since it's Google I/O, look out
for a bunch of great Google Apps sharing
their large-screen updates this week.
They've applied many of the same principles and practices
we're going to cover here.
Before you start planning the layout of your app,
consider the device basics and user expectations
that change when an app is experienced on a larger screen.
Let's talk about how the context, conditions,
and expectations change from mobile to tablet,
and how you can lean into this to influence your design
decisions.
The first part is that devices are fundamentally different
sizes, so we must consider ergonomics and proximity.
Ergonomics might seem obvious, but considering
the change in the way the device is held
should play a direct role in your adaptation.
One-handed tasks that can be completed quickly on a phone
don't directly transfer to tablets,
because, generally, we expect people to use two hands when
holding a tablet.
So we don't recommend placing critical interactions
in the middle of the screen.
From a proximity perspective, which
is the distance you are from the device,
it's important to consider that, in addition
to being used as close as a mobile phone,
tablets are also used for longer range viewing.
On large screens, users typically consume more content
over longer sessions.
This means that apps can anticipate
the value of optimizing for a more comfortable and immersive
content experience.
There's also an expectation that apps offer more productivity
opportunities when they transition to larger screens,
so optimizing for capabilities and efficiency
will enable people to get more done.
The design challenge for large screens
centers on how you meet the changing expectations
your users will have for the same experience
across different form factors.
Here are four guiding principles for you
to consider in tackling this challenge--
comfort, capability, efficiency, and immersion.
Comfort.
Larger screens are less constrained.
There's more space.
Take advantage of this.
Capability.
When people use tablets and foldable devices,
they expect that with a larger screen
comes in ability to do more.
What features would be at home on a wider canvas?
Efficiency.
Large screens bring multitasking to the forefront
of the experience.
It's a space made for users to do more than one thing at once.
Consider how to support users in accomplishing their tasks
efficiently.
And immersion.
It's a simplification of the layout that
allows the user to immerse themselves
in the content or a task.
A great example of that is a video call,
where the app adapts to immerse the user
into the video stream, focused on the person they're
communicating with.
Next, I'll walk you through two main approaches
for planning and adapting the composition of your apps
for larger screens.
Let's assume you've already perfected your mobile app
design in portrait posture.
That's fantastic, but now what?
There are two main paths to consider
when approaching adapting the composition of your mobile apps
for tablets--
expand and reorganize, and combining content.
The first decision you can make relates to the critical user
journeys that you've identified and prioritized for your app.
These are the user flows that are
most important to your users and help
you meet your business goals.
With all this new real estate, a great option
would be to expand the canvas of a phone screen
you've already made and reorganize the content.
Some examples of this include a second column of content,
or creating a more interesting layout of photos,
or simply introducing more whitespace.
This is a great path forward to using the space
more efficiently and in interesting ways.
This is different from simply stretching the mobile phone
design.
Another option to consider is to combine content
by adding another screen.
Based on the mobile app hierarchy,
this would essentially be taking multiple screens from one user
flow and presenting them in a single view when on a tablet.
Take this example on the left.
You can see the inbox and conversation screens
on a mobile app, and, on the right,
notice how the two screens are displayed simultaneously
on the tablet.
You've chosen your approach.
Now let's explore some of the other building blocks
that help guide app layout decisions.
Layout regions are the foundations
for interactive experiences.
They consist of three main regions--
the body region, the app region, and the navigation region.
The body region is used for displaying
most of the content in an app.
The app bar typically contains high-level controls and actions
related to the content in the body region.
And the navigation region holds navigational components,
such as the navigation drawer or navigation
rail, which help the user navigate between destinations
in an app.
As layout regions change across screen sizes,
components with similar functions can be exchanged.
For example, a bottom navigation bar
can swap with the navigation rail on a small tablet
or a navigation drawer on a large one.
Material.io adaptive guidance includes
a specific section on component groups
and how they can swap across device contexts.
Canonical layouts representing common use cases
are a helpful method of organizing the body area.
They are a series of adaptive layouts
that serve as starting points for design
and implementation of large-screen app optimizations.
These are not requirements or rules.
These compositions can be helpful when defining layouts
and organizing common elements involved in adapting your app.
Once you have the basic layout structure,
it's time to decide how to organize
the content of your app to best suit the use cases you support.
Here's a way to think about it.
When you move into a new home, you
have a lot of decisions to make, like, where
does the sofa go, the TV, the lamp, the work-from-home desk?
All fitting pieces into a new context that most likely
has a new shape and size.
Canonical layouts help you figure out and decide
how to divide the space on the screen,
whether it's a tablet or a foldable device.
Let's have a look at three canonical layouts.
List detail.
Many layouts can be established based
on the relationship between a list of items
and a detailed view for a selected item.
We call this layout list detail.
The relationship is established spatially using two columns,
by taking the left side of the screen
to display a list and the right side
to show the details of a selected list item.
Uses for the list detail layout include a list of text messages
and an open conversation, a file browser and an open folder,
or a musical album and a list of songs.
In a list detail layout, proportions
can also direct user focus.
An app can split the columns into equal parts on a smaller
size window and in asymmetrical parts for a larger window size.
Supporting panel.
The supporting panel layout extends the screen.
The supporting panel is different from list detail
because the primary and secondary regions represent
functionally distinct panels.
They are integral to one another without necessarily directly
referring to each other.
Common uses for the supporting panel layout
include document editing and comments,
or a video and related video recommendations.
Feed.
Feeds are a common layout found in news and social apps.
A feed layout can be used to show
different pieces of content through cards and lists.
Feed layouts support content discovery and browsing
and are typically used in apps that showcase news or photos.
The same content on mobile would be a single, long column.
The feed layout, however, makes use of the expanded space
by adding an adjacent column to expose more information,
creating a layout that takes full advantage of the larger
screen.
With Android 12L, productivity is
unlocked with a handy taskbar and simplified access
to a multiwindow mode.
This means users will be using your app alongside another.
Being able to adapt your layout to any size or orientation
has never been more important.
When your app exists as part of an ecosystem,
rather than a full-screen experience,
it's important to consider the ways multiple apps
on the screen can interact with each other--
for example, through dragging and dropping
content between apps.
This can be accomplished either through touch gestures
or other control methods that make
moving content more accessible.
Given the accessibility and productivity expectations
inherent to large-screen experiences,
it's important to consider other input modalities, like mouse,
keyboard, and stylus.
Let's recap.
Large-screen devices, such as tablets and foldables,
are the fastest-growing device segment.
And optimizing your app for these devices
is an impactful way to increase user engagement.
Consider how the ergonomics and proximity of tablet use
might impact the user journeys in your app.
Optimize for immersion and comfort
while respecting the user expectations of efficiency
and capability.
Take advantage of your existing mobile app layout
to expand or combine content in order
to deliver a high-quality tablet experience.
Canonical layouts are a helpful starting point
for apps to adapt to optimal large-screen patterns.
Always consider the accessibility needs
of users across form factors.
Inclusive tablet design supports a wide range
of input methods, ones that don't require touch gestures.
Material Design's resources for designers and developers
can help you take the next step towards adapting
your app for large screens.
Check out our new canonical layout guidance at material.io.
We look forward to seeing the awesome large-screen apps
you make.
Thank you for joining.
[MUSIC PLAYING]