Designing Great Apps for New Internet Users (Google I/O ’17)

Designing Great Apps for New Internet Users (Google I/O ’17)


[MUSIC PLAYING] GAREN CHECKLEY: Hi, everyone. Good afternoon. My name is Garen, and
I’m a product designer that works on emerging markets
projects here at Google. TRACEY CHAN: And I’m Tracey,
a researcher that works on emerging markets at YouTube. GAREN CHECKLEY: And we’re super
excited that you’re joining us this afternoon to talk and learn
about design for new internet users. Most recently, Tracey and
I spent the last few years working on YouTube Go, which
is a new version of YouTube– a new app that’s been designed
and built from the ground up for new internet users
in countries like India. And you may have heard
about this in the keynote back on Wednesday
that was announced as part of the Android
Go operating system. So if you’re interested in
designing apps that work great on Android Go, or just
work great for new internet users in general, then
we’re glad you’re here, this talk is for you. This is important because
the majority of people coming online, and actually the
majority of people online right now, are in emerging market
countries like India, Indonesia, Brazil, and Nigeria. So if you’re interested
in going global, if you’re interested in scaling
any projects or products– it’s important to consider their
experiences and their context. So you might be thinking, well,
Android is doing really well. There is this
announcement that Android has over 2 billion users. Why do we have to do
anything differently? We know from a host of
qualitative and quantitative data that these internet users
have very different experiences from those of us in this room. If you think about your
first computer experience, it was probably a
couple of decades ago. You probably started
using a desktop, you probably started
connecting to the internet on that desktop. Your internet connection
was probably fast, reliable, and not too expensive. Right now, you probably
have a cell phone that’s pretty good, has a
good screen, it’s pretty fast. You’re on Wi-Fi now, or
you’re on Wi-Fi at home, at work, or events like this. And when you’re not
on Wi-Fi, you’ve got pretty good access to mobile
data to be online all the time. Compare this to a typical
persona of a new internet user. These folks are coming online
with their first computer or their first internet
experience being a smartphone. And it’s oftentimes not this
kind of fancy smartphone that we carry around. It’s a lower end smartphone,
sub $100, sub $50 smartphone. These phones don’t
have great screens, don’t have great contrast. They’ve got different
kind of touch feedback, they’ve got low
storage, low RAM. Oftentimes, they’re running
older versions of the operating system, they’re not updating
their apps as frequently. They’re using the internet
on slow, expensive, flaky connections. And rarely, if ever,
are folks using Wi-Fi. So while we still believe that
universally we are all human– regardless of whether somebody
is in India, Indonesia, Nigeria, or United States,
or London, we’re all human– we do think it’s really
important that we consider the context, the
different cultures, the different constraints,
and different mental models that people bring to
their internet experience. So over the past
few years, we’ve invested a lot in
thinking and figuring out what to do within Google. And we’re excited
to share a framework that we use within the company
for building for new internet users. So in the course
of this talk, we’re going to talk about what it
means to make your product usable, useful, and engaging
for these types of users. We’re going to give you very
quick, very focused tips for each one of
these components. So it’s not going to be really
nebulous, very design-y. It’s going to be very applied. And, Tracey, do you
want to kick us off? TRACEY CHAN: Sure. So our first bucket is usable,
which focuses on the question– which is simple, but
challenging– can your product be used? And this bucket contains
three components– cost, connectedness,
and compatibility. So the first will be cost. We could start
with a comparison. To afford one gigabyte of
data in the United States, you would need to work a
little bit over 20 minutes, on average. But to afford the
same exact thing in Indonesia, one
gigabyte of data, you would have to
work 316 minutes. So, nearly five
and a half hours. So in markets like
these, like Indonesia, data is much harder to come by. And for that reason, people
savor every MB that much more. Also in these markets, most
of the data is prepaid. Specifically, in India,
95% of it is prepaid. And prepaid is where people buy
fixed amounts of data upfront. It’s not an ongoing
commitment, which we might be familiar with. So imagine going into a store
and you buy a small paper card with a scratch
code on the back that maybe you buy
for 40 or 50 rupees. And you get 100
megabytes of data that might last one day, five
days, or even up to 28 days. So, the behavior we’re
seeing is that people are buying denominations
based on what they can afford, what they foresee
as actually needing. And then they budget
out their data use over that time
period, as necessary. So overall, data just feels
like money in these markets. And compare this to
what happens in the US. We usually buy a pretty
high data cap plan by month, or we pay on every month. But we pretty much
commit for a long time, and we’re often
connected to Wi-Fi. So, we don’t really worry about
running out of data, maybe only at the end of the month. So what is Wi-Fi really
like in these markets? Wi-Fi is actually
rarely connected to, because it’s not
that accessible. Globally, there’s one Wi-Fi
hotspot for every 150 people. And in India, it’s a lot higher. There’s about 31,500 hotspots
overall in the country. So that means one hotspot
for every 3,900 people. So if India wanted to
meet the global average, they would have to install
eight million more hotspots. And the point here is that
public Wi-Fi access is rare, making data, again, that much
more precious and expensive. So now, you might be
thinking, Wi-Fi at home. Home is where we have
the comfort of Wi-Fi. We’re wrapped in the comfort
of our own connection, our nice security blanket. We’re not spending any
of that mobile data. But this is not necessarily
true in these types of markets. Currently, less than 2% of
the entire population in India subscribe to a fixed-line
broadband internet connection in their home. And if they are accessing
internet at home, it’s mostly through their mobile
data on their mobile device. So in sum, Wi-Fi access
is still very rare. And we can’t be
assuming that Wi-Fi is going to come along
as certain cadencies for these users to
fix whatever blockages or barriers they may hit in
other connectivity states. So our tip here, for the
first component of cost– for data heavy tasks, provide
transparency and control over data consumption. The example on the right is
actually from YouTube Go. After selecting a
video, users are given the control to select
their quality before watching. So they know upfront
how much data they’ll spend before committing
to an action to either play or save the video. And we specifically say
for data heavy tasks, because this type
of transparency might be less important
for smaller amounts that could be considered
negligible, like 10 KB. GAREN CHECKLEY: So the next
component of the usable bucket is connectivity. We know that the internet is
much slower in different parts of the world. The statistic is that in
India, on average, the internet is three times slower than it
is here in the United States. And most of the folks
that are coming online for the very first
time are coming online on the
slowest connections– on cheap 2G, 3G connections,
or overloaded free public Wi-Fi networks. But on top of it
being slow, it’s also important to consider the
flakiness and the intermittency of the connections. So 65% to 80% of the time,
a 3G connection round trip will actually work. There will be uptime only
for this amount of time. So you can imagine for
seconds, for minutes, for hours at a time, even
though you might have data– you might not be
on airplane mode– the internet still might
not be working for you. So, it’s crucial for those of
us that are creating software to acknowledge and
actually embrace these states of intermittency. As designers, we
usually approach designing for these
types of connections by looking at states. So typically, these
are the states that we’re often used to
designing in Silicon Valley or in well-connected tech
company environments. There is an online state,
which is kind of considered the ideal state. Sometimes we think about
partial loading states. And oftentimes, we’ll design
error states, as well. So a typical mock might
look like this for us. Or a typical flow
of mocks or designs might look like this for us. You might move from one online
mock, to another online mock, to another online mock. And that might be how we design
how an app experience actually is. Maybe you design an
error case, as well. But this isn’t
really comprehensive. This doesn’t actually
meet the needs or doesn’t portray the
experience of a new internet user. So we’ve actually added
a few other states to make this more comprehensive. In addition to considering
the online state as ideal, we also think about the
offline state as ideal. Both because
connections are flaky, and because connections
are expensive. So people turn off their
mobile data frequently. In addition to loading
being in progress– partially loading–
we also have loading started, just to let folks
know that something is actually happening. In addition to having
an error content, we also have a state that
portrays when you’re offline and there just is no content. It’s not a problem if you
don’t have connectivity, and it’s not a
problem if nothing is cached on your device. So if you use this
kind of framework and you’re walking through
the design of a product, you end up with a lifecycle
that looks kind of like this. You’re offline, you don’t have
any content, you switch it on, the loading starts. There is partial loading
that’s happening, then you’re in a
full online state, and then maybe you switch off
your connection, it’s flaky. And then, you go into
an offline state. And we consider all of these
states first-class citizens. So our tip for connectivity
is to expect latency by designing offline, loading,
retry, and success experiences. Make great connectivity
an edge case. So oftentimes, we’re used
to designing edge cases as when there’s no network. Have no and slow networks
be your primary use cases, and have great connectivity
be the edge case. The example that we have here
is Chrome’s offline page, which has recently added a
download page later button. So not only does
Chrome work offline and give you helps to
figure out what’s going on, but there’s also
an action that you can take on this page on
this piece of content. Another example for this
tip is Google Search. Google Search has
launched a new feature where when you’re
offline, or when you’re on a flaky connection
and the connection to Google doesn’t work, you can
search for something. And then Google Search will
give you a notification of the content when it’s ready. So you can turn to Google
Search in great connectivity, in flaky connectivity,
or no connectivity and still count on
getting an answer back. The final component of the
usable bucket is compatibility. And oftentimes, when we
talk about compatibility for emerging markets or
for new internet users, we talk about operating
systems, hardware, software. And all of those are
very important– for all the developers in the audience–
these are important things to focus on, but I want to talk
about something that’s actually design related, which is
half of the phones in India, right now, being sold
are less than $100. And actually, many of them are
$30, $40, $50 phones, as well. And as you can
imagine, a $50 phone doesn’t really have the
same type of screen, doesn’t have the
same touch feedback, doesn’t have the same contrast. It doesn’t have
the same resolution as an expensive premium
device screen does, as well. It’s also got lower processing. On top of that, because
phones are expensive, people keep using broken phones. Just because the phone breaks,
doesn’t mean they go out and buy a new phone. Oftentimes, broken
phones are used. And when a new phone
comes, the broken phone will still be used by
another family member, or by somebody in a more
remote or more rural location. So, it’s important
that we understand that low cost and broken
phones are actually part of the ecosystem in which
people are using our products. Material design provides a
variety of affordance options. And it’s always being revised,
and there’s more affordances that are being added. And so we encourage
you to choose the types of affordances
that make the most sense for these types of phones. The tip here is to
design clearer, larger, farther apart affordances to
prevent mistaken taps caused by bad and broken screens and
high contrast environments. You’ll see the example
here is from YouTube Go. There’s a modal,
there’s two buttons. The buttons are not
just text buttons, we didn’t choose to use
that affordance option. We chose to use big
buttons with high contrast and big backgrounds. And this ends up
being easier to see when you’re in the sunlight,
or when you’re using a screen that isn’t as great. TRACEY CHAN: Yeah, and
to add something, too– what we’ve learned
really strongly in our user research is that
pairing together icon and text can really help people
understand or remember what an affordance does. You can consider each item,
the icon and the text, as compensating for each other
for any little bit of each that might get, inevitably,
lost in translation. So now, we move on to the
second bucket of useful. This contains, also, the second
set of components– culture, content, and
commerce– evaluating, is your product valuable? Not just if it can be used,
but is it also providing good use to the users? The first is culture,
and culture manifests in numerous ways. But we’re just going to
explore one branch of it for time purposes. So before search
engines existed, there were sites like this. Like DMOZ, which was like
a portal to the internet, a directory of the internet’s
top level contents. And whether you knew what
you wanted to search for or didn’t, you’d start
with a related category and go from there. But now, we’ve evolved more
into this very familiar format of searching to all of
us which is, arguably, a little less guided. But this works for us, because
we had portals like DMOZ help us build a really
strong mental model for what lived on the internet,
and how to find it with the high level categories,
and then the subcategories. And studies have actually
shown that your mental models and your visual preferences
are heavily shaped and affected by the physical
landscapes you grow up in, and the environments
you grow up in. So why can’t this be applied
to digital environments, too? We can’t assume that
everyone coming online, who hasn’t had this DMOZ
type background, has the same mental
model of searching. It can be really hard to know
what you want to search for, and also, to formulate a query. Imagine how
intimidating it could be to form a query in
your second, third, or fourth language. And then, hope to find some
semblance of a relevant result come up afterwards. So our tip for
this bit of culture is to show the breadth of
what’s possible in your product. Don’t assume an
existing mental model. The example we have here is
actually Google Search, itself, on this mobile device. So there are
options to discover. Not just particular
categories, but you can also dive directly
into news content. You can find out
the current weather, before even worrying
about typing. And typing can still be
very hard on mobile devices. Another example are categories
within the Google Play Store. Again, this screen
guides users to show what the Play Store contains. And it clearly shows
the various categories with matching icons on the side. The next component is content. And one way, just one way
that content manifests is with language. Statistics on English
speaking ability can be pretty unreliable,
but it’s generally accepted that about 30%
of the population in India can speak English. And a third of that
have some semblance of reading and writing aptitude. So, 10% overall. And this is a really
interesting statistic to consider, alongside the
fact that a lot of users in these markets, and
globally, use their Android OS in English, despite it not
being their first language, and despite not fully
understanding written English. So another thing we can’t assume
is that users in these markets will use interfaces in
their native language, if that’s even
offered as an option. And we also can’t
assume that they want to type in their native script. So, we need to work on
improving our English UIs. Our tip here is to
simplify language– short, simple, direct
for maximum clarity. And with this, to avoid very
culturally specific phrases, like “Shucks!” Most of the examples
we’ve been showing so far are examples of what to do. And we want to show
a quick example here of a screen that may not work
so great in other markets. This is a past YouTube
onboarding flow that said, “New awesomeness awaits.” And the word “awesomeness”
doesn’t really mean awesome or, really,
anything in other vernaculars. GAREN CHECKLEY: Finally,
the last component of the useful
bucket is commerce. And oftentimes, when we talk
about commerce and new internet users, we talk about
forms of payment because so many
economies run on cash. That’s important
for your product to consider from your
business standpoint, as well. But we want to talk about a
UI specific design example, as well. And that’s around sachet
economics, sachet marketing. So sachets are small little
packets of consumer goods, like shampoo or detergent. And what they are is
they’re really cheap, so people can go and buy them. And this allows folks to get
a sense of what the product is and try it out at
a very low cost. They can try the
experience a little bit, before they commit to
buying something even more. So instead of buying a
big bottle of shampoo, they’ll buy a single, one
time use sachet of shampoo. And we can actually
bring this learning back into how we design
digital experiences, as well. And our tip here is to allow
people to try before they buy, providing tastes of
experiences before you want them to commit to them. The example here
that we’re showing is the website of Flipkart. Flipkart is a big
e-commerce company in India. And what we’re not
showing here, actually, is the Flipkart Android app. Great Android app, but
Flipkart is heavily invested in a web presence, as well. So for folks that don’t
really know what Flipkart is, they don’t want to
invest in the data and the storage and the
battery to download an app. They can go poke
around the website to get a sense of what
the app is before they commit to downloading the app. Another example of this
is within YouTube Go, where when you tap on a
video before you choose to play or download
the video, we show you a little
preview of what’s inside. We’re not going to give
away the entire video. But we show you a sense
of what you’ll be getting, if you choose to spend
the MBs to download it. Keep in mind, like
Tracey said, data feels like money
for a lot of folks. So it’s not just spending
money that feels like money. It’s also spending data,
it’s spending limited storage that folks have
on their devices, spending limited battery. TRACEY CHAN: So the final bucket
of this framework is engaging. Does your product delight
by being social, sensorial, and surprising? In this context, social
touches on the fact that the cultures in these
types of emerging markets is collectivistic, it’s
not individualistic. They rely on human networks
to fetch information, to learn new
things, to discover. Friends are their search engine. For us, Google is
our search engine. And there’s nothing
wrong with that. But considering how
we fetch information with search engines,
while we are leveraging the other people’s
knowledge on the internet, it’s still, very often,
an individual experience. Additionally, content,
like a funny video, is very valuable social currency
in these types of environments, where new online content
is a lot harder to search for, and therefore a
lot harder to access. Our tip here is to encourage
the sharing of experiences. Don’t just design
for the individual, but for the community as well. If you allow people to show off
to their friends and family, it really bumps up the social
currency of your entire app. In this example, YouTube
provides a pretty clear shared affordance, centered underneath
the video and the title. So it makes the
action really easy to discover and act
upon at the moment you realize you want
to share this content. This is just one way,
though, that a product has encouraged sharing. Our second example is the
peer-to-peer sharing feature within YouTube Go, which allows
people to transfer videos or social currency to any
friend nearby with very, very minimal use of data. The second component
is sensorial. So not all cultures
embrace what we deem this minimalistic
aesthetic that seems to be quite coveted
in Western cultures. And why it’s not always
coveted in other cultures could be due to
a lot of reasons, be it traditions, resources,
beliefs, or what have you. But in these markets
and cultures, you’ll see a lot of
different uses of color, patterns, and designs that can
connote a feeling of vibrancy or energy to our Western eyes. So for instance, here
we see a comparison of clothing and textiles across
three different countries that differ vastly
from each other, and also from Western markets,
too, be it the context in which they’re wearing the clothes,
how they’re crafted, the colors, the meanings behind
the patterns, et cetera– many more things. Another really interesting
example is information density, with respect to high context
and low context environments. The center image is from a
really interesting study that showed that users in Indonesia
preferred icons that depicted more of the surrounding
context of the object, and more detail in
the icon depictions. Whereas, users in
the United States prefer the more abstract,
simple icons or more low context designs. The images on the
sides are common scenes that you’ll see walking
the streets in India– very dense signage
or stores that are organized– maybe how you
would consider your storage room is organized. And the main point is that
what’s considered clutter to us, or not clean
and simple design, could be the
preference for others. A lot of these differences can
also be really overwhelming, but ultimately, we say
they should be embraced. So our tip, really, is don’t
westernize everything, that’s not really what people want. Nod to local aesthetics
by drawing inspiration from regionally
popular products, or hiring local designers. This will make your product feel
more relatable, that you care and pay attention to
the cultural aesthetics. A really great example here
is Google Allo stickers. That team hired local
designers in India to create these
downloadable sticker packs. And not only can you see
the pretty clear inspiration of local aesthetics,
but also the addition of common
transliterated phrases. GAREN CHECKLEY: And
our last component for the engaging
bucket is surprising. This is the one that’s
the most nebulous. But we strongly recommend
to surprise and delight by doing one thing or just
a focused set of things very, very well. It’s really easy to think
of emerging markets, to think of new internet users
as having a lower tolerance or being less savvy, and
that’s absolutely wrong. Just because they’re new to
the internet does not mean they’re new to life,
does not mean they’re willing to settle for less. They’ve got different mental
models, different desires. But they also deserve,
they desire, they want great experiences. And because many
of them are coming online for the
first time, they’re trying to evaluate how
they use their technology. They’ll try something out. And if it doesn’t
make sense, they’ll move on to the next thing. So at an umbrella level,
it’s absolutely critical that you keep your
product focused, not have too many
gimmicks, and just focus on doing this one thing– delivering the
value very clearly. People are critical. They’re looking for
great experiences that resonate with them. And we think that this
is the way to do it. This is the way that a
lot of product development happens at Google,
as well, where we focus on figuring out
what this value makes sense and just being very
focused on delivering that. So thank you for
following along, as we’ve discussed these
different components of these different buckets
on making your product usable, useful, and engaging. In India alone, over the
next couple of years, 100 million people
are going to be coming online every single year. So let’s not forget that
while we’re all human, while we all care
about our families, we have similar aspirations
for our families, our lives, there are many different
cultures, different context, constraints, and mental models
that we can accommodate for, as well. We think that they deserve
great internet experiences. And we’re excited that
you’re here, that you’re thinking about this. And if there’s one
piece of advice that we can give you, other
than following this framework, it’s to listen to your users. And whether that means going to
a place where your product is popular, or you want it to be
popular, to conduct some user research, or to
building feedback mechanisms into your product. Even just looking at
the Google Play reviews and looking at where the
feedback is coming from, which geographies
they are coming from, we think that
focusing on the user is the way to help
understand how to deliver that focused value. Thank you very much. And this framework is published
online in the ACM Interactions magazine. So you can go ahead and check
that out at this short link. We also have a website,
developers.google.com/billions. And we’ll leave you with this
framework and these tips, all on one slide. And we invite any Q&A, as well. So, please come up to the
microphones in the aisles. Thank you. TRACEY CHAN: Thank you. [APPLAUSE] [MUSIC PLAYING]


7 thoughts on “Designing Great Apps for New Internet Users (Google I/O ’17)

  1. The cluttered text on the large papers are actually put up usually by ticket sellers or education or employment form sellers which even for our experiences and comfort are not well designed.

Leave a Reply

Your email address will not be published. Required fields are marked *