The New Bar for Web Experiences (Chrome Dev Summit 2017)
Articles Blog

The New Bar for Web Experiences (Chrome Dev Summit 2017)

September 2, 2019


[MUSIC PLAYING] THAO TRAN: Hello to
everyone who’s watching us on video from around the world. I’m Thao Tran. I work in product
partnerships for Chrome and the web platform team,
which means that day to day, I get to interact with lots
of different partners and web developers like
yourselves as we try to think about what are the
new, latest and greatest web technologies to bring to
market, and hopefully motivate some of you to ship them, too. So when Chris and I started
talking about what kind of talk we wanted to give,
we knew we wanted to focus on what we see as
the new standard for really good web experiences– the modern web. Then Chris talked
about the new bar, and well, I only heard the
words “modern” and “bar,” and I thought about my favorite
modern bar in New York City, which is the Hudson Hotel,
and what a modern bar experience should be like. I know. So despite our shared
love of cocktails, Chris quickly got
me grounded and said this wasn’t actually our topic. CHRIS WILSON: No. No. So I’m Chris Wilson. I’ve worked on
developing the web platform for nearly 25 years,
nearly a quarter century, since NCSA Mosaic. And I am the developer advocate
lead for the Progressive Web App team here at Google,
and we’re here to– together, actually–
because we both really want to get you as excited as we are
about the user experiences that are now possible on the
web, what we both believe is this inflection point
today, that we’re currently experiencing the
tipping point of the web as a universal platform,
this groundswell of the web being used to deliver
experiences that aren’t just useful and real, but
they’re beautiful, immersive experiences. THAO TRAN: So we want
to inspire all of you on what’s possible today on the
web, share really great partner journeys and success
stories to give you ideas. But this isn’t just
about doing something that’s never been done before or
couldn’t have been done before. CHRIS WILSON: No, not at all. So I’m an avid
scuba diver, right? And I live in Seattle, and
we have really strong tides– and we need a slide
update, I think. That’s not supposed to be there. But we get really
strong tides in Seattle, and this is the experience
of how I used to get tides. Let’s switch over
to the demo screen. THAO TRAN: There you go. CHRIS WILSON: There we go. So this is what I
used to use to check tides to see when I could dive. And it’s really kind of
a painful experience, to be honest, because if I
want to flip between days, I actually have to
use these drop-downs. I have to remember
what day of the month it is, which I can never
do without actually looking somewhere else on my phone. So it’s kind of a pain. It’s not the best. And the team at
DockYard actually has built this
application that I frankly instantly fell in love with. It’s called High Tide, and
this is a Progressive Web App. It’s actually
starting up cold here. So it figures out– loads up and it figures out,
oh, you’re in San Francisco, because it has geoloc access. But I actually want to see what
the tides are like in Seattle, so I’m going to type
in Seattle and Go. Check the station. OK, so I’m flying
home on Wednesday, and it– ooh,
actually, it kind of looks like Wednesday afternoon
is a perfect time to go diving, so I’ll have to get
my gear packed up. Now, this isn’t a
killer app, right? This isn’t like, oh,
my God, I could never get tides before or something. I’ve been able to
look up tides forever. But this is a much
smoother experience. It’s really smooth scrolling. It starts up really quickly. And actually, it still
half works offline. It gives me an
experience at least while I’m offline, even if it
can’t generate the tide tables. And this is really
underscoring the point that it’s not just good
enough to just provide a service anymore. You actually have to prioritize
your user experience. This is what users expect now. So let’s flip back
to this screen. Here we go. I would radically prefer
this experience on the right rather than the
experience on the left. THAO TRAN: And so this is what
users expect out of something that they want to
use frequently. And so the core concept we
want to get across today, and our goal for all
of you, is really, it’s time to raise the bar
for what you can deliver for your user experiences. We know we can all
do better, and we want you to exceed
user expectations for what’s possible on the web. We all know that the web
is great for user reach. It’s the front door for so many
of the companies and services. And now we want you to
believe that the web can be used as a great user
experience platform. CHRIS WILSON: We’ve been using
this term “Progressive Web App” for about two years, a
little over two years now, and we want to be
clear– this is really just a placeholder for this
new, higher bar for delivering web applications. When we talk about service
worker or add to home screen or app manifest,
push notifications, all these different
technologies, this isn’t really like we wanted
to categorize this as an app. It’s really– care about
your user experience. Provide a better
user experience. In fact, the Progressive
Web App pillars are really just about doing
that– providing a great user experience. So we’re mostly
not even referring to Progressive Web Apps. Certainly in our talk,
we’ll mention it a few times just as an easy way
to say something. But it’s just a
shortcut for modern web, in particular caring
about your user experience more than anything else. And what users have
grown to expect– not just from the web,
but from their computers and their devices– they expect these
experiences that are fast, that are integrated with
the way the device they’re using typically works,
and that work reliably. And that’s how you build these
truly engaging experiences. Why PWAs need a service worker
is because then they can cache and they can provide a
really fast initial load. They’re installable not
for some other reason, just because that’s how the user
expects to get to applications. And then the browser
fades into the background. The experience just feels
like it’s part of the device. And yes, these
pillars do spell FIRE. I’m not supposed to yell
fire in a crowded theater, so we’re not making
a big deal of that. But as we explain the details
of what your users expect, we’re going to show you
some success stories, too. So on the first
pillar, Fast, users don’t expect janky scrolling. They don’t expect
slow load performance. You saw how efficiently
that High Tide app loaded, how smoothly it scrolled. Loading an app has
to feel instant. It has to feel invisible,
and this is really just about keeping the
user’s attention. As we’ve said before,
user attention is a really precious resource. After three seconds, 53%
of users abandon sites. Half your users are gone. Now, this is bad enough
on a desktop machine. Certainly, I’m guilty of this. If something takes more
than three seconds to load, I will probably
just close the tab and find something else to do. But those are usually connected
with this reliable, fast network connection. But if half of users abandon
a site after three seconds, it is frankly a miracle
to me that anyone ever loads pages on mobile networks. The average mobile web page
takes an average of 19 seconds to load on a 3G connection. Now, of course, I might
think, hey, that’s fine. I’ve got 4G LTE or
whatever, and I’m usually on Wi-Fi anyways on
my mobile device. That’s great, except
remember, worldwide, 60% of mobile
connections are still 2G. 2G! Not even 3G, but 2G. So worldwide, this is a
much more critical problem than you might understand. And in a nutshell, what
we’re really saying is you have to focus on making
your experience fast. It needs to load instantly. And I’m going to leave
most of this to a session from Addy later this
afternoon, but we really wanted to share some
successes from being fast. For example, Ele.me
is the biggest food ordering and delivering
company in China. They launched the
first Progressive Web App for the domestic
Chinese market, and they serve 260
million users– 260 million. To put this in context,
because a quarter of a billion doesn’t really register to
me, this is almost as much as the entire population
of the United States. That’s their customer base. They actually have 1.3
million restaurants listed in their app, and 99%
of their users order food from mobile devices. So it’s critical for them to
have a good experience, right? And Ele.me set out to improve
their mobile experience focusing on speed
and reliability, but particularly in
flaky connections. So they use an app shell. They want to get skeleton
screens on the screen really quickly, and they want
to ensure that whenever a user taps a button,
it gives them something. It shows them this feedback
that hey, something’s happening. Don’t worry. We know what you’re doing. And transition to
that page– and they get their skeleton paint
up in 400 milliseconds on a mobile connection. They actually get
fully interactive in two seconds in
typical conditions. This is pretty amazing to me. This is awesome. And this critical focus on
page load time, by the way, this user interaction was really
the goal of the AMP project. AMP’s built on web
components and HTML. I think that’s great. It’s a way to easily build fast
and reliable pages on the web. THAO TRAN: So it’s amazing to
see all this momentum with AMP. They just had their two-year
anniversary last week, where they announced
that there are now 4 billion AMP pages out in the
wild across 25 million domains. That’s an incredible milestone. And AMP is really continuing
to evolve and to support additional use cases, especially
when it comes to e-commerce. You see here a couple of
examples of e-commerce sites– have built highly
interactive pages. It’s possible to build
a product page that updates the
availability of an item, shows a different thumbnail and
price, as well as a way to add a product to a shopping cart. Let’s take a look at an
example of a merchant building a highly-interactive AMP page. Here you have Overstock. It’s a US-based
home goods provider that’s built a fast-loading
interactive site using AMP. It’s also important to highlight
that their AMP pages are actually 100% functional parity
with their non-AMP equivalents on their mobile site. They’re using AMP
to sort and filter. They’re using several AMP
components– the amp-sidebar for the menu,
amp-accordion for content that can expand and collapse
based on the user interaction. They’re live with AMP for over
4 million product and category pages. And their early metrics
are looking great– overall uplift in conversions
as well as increase in revenue using their AMP pages. So think about it. A year ago, Overstock
couldn’t have built this page, and yet AMP has allowed
them to step up their game. And I love to hear stories
and feedback from developers, especially as they’re
going through building these new mobile
web experiences. And so I want to highlight
here that the AMP pages allowed the team to realize just how
large their regular mobile web pages were and how
slow they load. And so it’s awesome to see
the Overstock team continue to iterate on their AMP design
to improve their metrics and then take those
lessons and apply it back to their overall mobile website. They’re heavily investing
in Progressive Web Apps as well to take AMP to the
next level and raise the bar. And so AMP has evolved pretty
quickly from static pages to now interactive pages. And more recently,
developers have begun exploring how they can
use the AMP library to build fast, beautiful websites. It’s early days, and we’re
eager to get feedback and hear from sites who are exploring
using AMP for their full site experience. Up here on screen
is tasty.co, which is a recipe site from Buzzfeed. They went all in on AMP. For them, raising the bar was
building an entire website using the AMP library. It’s fast and
getting interactive in less than three seconds. And so users are getting
this amazing experience coming from Google search,
from Facebook links, from Pinterest pins. And AMP was a natural
way for the tasty.co team to make something
super performant and optimized for
their audience. And what’s even more awesome
is that the site is responsive. AMP then becomes
an efficient way to build a site using
a single code base. The tasty.co site provides this
experience not only on mobile, but on desktop. So it’s a really great
overall developer experience. CHRIS WILSON: And this is
really the theme of this new bar for web experiences. You should provide a good
experience across devices. And on each one
of those devices, the experience
should really feel integrated with the
device capabilities, the way the user
typically does things. End to end, experiences
that are built on the web don’t need to feel any
different than experiences that are built on native platforms. They should be just as natural
for the user to interact with. Now, users expect to
interact with all apps pretty much the same, regardless
of how they’re built. They expect to launch
apps from the home screen. They expect that they’re
visible on the task list. They think that apps should
maintain your identity, have access to low-level
hardware stuff like camera, or audio, or accelerometer. And Owen’s going to talk a bunch
more about this in his talk later this morning,
but one good example I really wanted to call
out is media playback. When you’re listening to a music
stream offered over the web, you still have the
same expectations as one offered from
a native application. As a user, if your
screen is locked, you want to be able to
see what song’s playing. You want to maybe
skip to the next song or skip back, hear that one
again, maybe hear it again. I’m never going to
give up this song. But with the media
session API, web apps get to hook into
this capability, too. They get to integrate with how
the user expects to do things. And media companies
are actually now seeing a ton of success in the web. So JioCinema is part
of Reliance Jio. They’re the biggest 4G
telco network in India, and they have 100
million paying customers. This is one of the largest
mobile video networks in the entire world. And their Progressive Web App
is basically a one-stop shopping destination for Indian
movies, TV, music videos, the whole deal. And this was an
app-only business. They only had native apps. And they went to the
web for the first time with this Progressive
Web App that they built, and they only launched
this three weeks ago at the beginning of this month. And already, they’re seeing
10% longer session times on their mobile app– on their mobile web app
than on their native app, and better reach
for their customers who are in tier-two
and tier-three cities because in these
smaller areas, they may not have the native app. They may not have the
storage space to keep it. THAO TRAN: And so
Chris just walked through this really integrated
experience for the most personal device for users. And so I want to transition
to talk a little bit more about how you can make sure
that you’re delivering a really great, personalized experience,
whether it’s getting users to sign in, sign
up, or check out. So let’s first talk
about push notifications. And here, this is really a
great opportunity for you to provide a much more
targeted experience for users. So Mercado Libre is
Latin America’s largest online retailer, with over
190 million registered users. Some of their biggest markets
include Brazil, Mexico, and Argentina. It’s this huge marketplace
for buying products, and oftentimes, buyers want
to ask a question of a seller before making a purchase. So we want to share this
really great use case for push notifications
that’s highly targeted and personalized. So when a user wants to
get in touch with a buyer, they get prompted with a
great visual explaining that they can receive a
push notification when the seller responds. So that’s the visual
you see up here. This is such a great
alternative to email because it’s much more
real time– again, integrated into the
user’s personal device. Then when the seller
responds, the buyer gets a notification
on their device. It contains the
title of the product as well as part of the
text of the response in it. So again, users get
a bit of a preview when the seller responds. Mercado is seeing a 41%
opt-in rate for these web push notifications– again, a whole new
channel for being able to reengage and
reach their customer base. So I really love how this
type of push notification is specific and
shows how Mercado’s able to deliver a
great user experience, taking advantage of native
device capabilities. So let’s turn to the sign-up
use case, which we know is really painful
for a lot of you when you’re trying to do
this on different sites. So Petlove is this innovative
Brazilian e-commerce site for pet goods, and we
included them because look, every talk needs a cute
picture of a puppy. And so actually,
Petlove’s offline page is actually a photo
of a puppy, in case you want to check it out. CHRIS WILSON: Go check it out. Go offline. THAO TRAN: So Petlove
wanted to avoid the issue of having users go
all the way through the checkout flow, only to abandon
their cart when they have to go through the
painful process of signing in. Reducing sign-in friction
is a critical step, especially if you require the
user to sign in before they’re able to check out. So as Ben and Dion
mentioned, there’s now a new one-tap sign-up
library that you can integrate. And so for someone
like Petlove, this means you can sign up
on your mobile device, and then when you go
to your desktop device, you’re actually
automatically signed in. And so there’s this great
cross-platform story for both sign-up
and sign-in here. And pleased to report
that there’s actually– Petlove is seeing that 2x
more users are actually able to get to the checkout
flow already signed in, and they’re seeing a big
bump in overall conversions. We also have the identity
demo booth for anybody who wants to learn more
about the sign-up and sign-in process. So in addition to the
overall sign-up process, Petlove also went ahead
and just integrated and upgraded their
overall website experience into a Progressive Web App. And so what we love to see is
that sites are actually using multiple features and products. And so it’s not
just about– yes, you can integrate
a particular API. But really, the
site and the users truly benefit when you’re able
to do multiple things at once. And so Petlove
integrated the sign-up, and then they went ahead and
just focused on performance and just redoing and
upgrading their experience. They’re seeing overall increases
in conversion and time spent as well as– it’s important to
note that their Progressive Web App is eight times smaller
than their native app. This is especially
critical for users– where they have a lot of
users on 2G and 3G networks. And so this is a big deal– or in this case,
a tiny deal, which is actually a better thing. CHRIS WILSON: So another
great personalized example is Starbucks. And Starbucks, of course, is
the largest coffee house company in the world. They’re based in my
hometown of Seattle, so of course I had
to talk about them. They have 20,000 stores
across 62 different countries, and their customers expect a
really high-quality experience. No matter what device I have,
what network conditions there are around, I gotta
have my pumpkin spice latte this time of year. And users often end up
standing in line at the store rather than ordering ahead. A lot of customers use
their rewards program. And I personally hate
carrying extra cards around in my wallet, so I
don’t want to do that. And the Starbucks team built
this great Progressive Web App– it’s still in beta– with the goal of making
it easy for users to come back and sign in
and pay with their barcode. And I was actually
really surprised to hear because I thought
that it was really just mostly cards that people used. 20% of all their
transactions are done using the barcode,
and this barcode– their beta Progressive
Web App actually has a service worker that
caches all this stuff, and it enables customers
to pay with that barcode, even if they don’t have
a network connection. Even if they don’t have
a network connection, they can pull out their
phone and pay for their stuff with their Starbucks app. So from sign-in to
checkout, their beta is a great example of
this user experience you can offer from
Progressive Web Apps. THAO TRAN: So speaking
of seamless checkout, this is an area
where we want sites to think about how they can
reduce the number of steps necessary for the
checkout process. So this is probably a
pretty typical experience, if you’ve gone through
the checkout process– buying stuff on mobile web– where we see that sites
can have seven to eight steps to complete, including
reviewing cart, creating the user account,
adding the information. So SwimOutlet had a pretty
typical new user checkout flow that required log-in
and multiple screens. And even though they were
leveraging auto-complete fully, it was still a pretty long
process, taking two minutes or more from start to finish. So SwimOutlet, which is actually
the largest online specialty swim shop in the US, did
a review of their site and implemented Payment Request. So users at SwimOutlet can now
go from the cart review page to their order
confirmation, where they see a Payment
Request sheet, this mobile-optimized
form that’s pre-filled with the
user’s information, meaning it only takes a
few clicks to complete. So similar to the J. Crew
walk-through that Ben and Dion did, because the SwimOutlet
shoppers are able to skip so many in-between steps,
they’re able to check out in 20 to 25 seconds– an 80% reduction in time to
check out, which is huge. And to help with
speedier checkout flows, we’re now making the Google
Payment API available as well. This means you can use
credit cards you’ve added to your Google account
from products like Google Play, YouTube, Chrome, Android Pay. And then Google can
send the merchant the payment and shipping
info so that users don’t have to type it in. We showed you in the
keynote the merchant Fancy implementing Pay
with Google button. And in this demo, you see
on-screen that the site calls Payment Request,
similar to SwimOutlet, and that you can see Google
as a form of payment, enabling a much faster
checkout process. And the payments team is also
here in the forum in case you want to check out and
have them review your checkout process. CHRIS WILSON: So the
web, as we all know, has always been this really,
really safe place, right? OK, maybe that’s
patently untrue. But the expectation has
always been, at least, that websites don’t get
access to powerful device features, powerful APIs
without asking for permission. And as we add more and more
powerful APIs to the web, as we enable more and
more web capabilities, that permission changes
the model of the web and how users have
to interact with it. So we’re still on this
journey of building the best model for this,
but when websites need special permissions
from the user, they have to show this
permission request. Now, the permission requests
appear as ignorable banners at the bottom of the
screen on Android, top of the screen on desktop. And developers have often
shown them frequently. They just pop them up
whenever they think, oh, I might need this in the
future, without considering, is this really an appropriate
time to ask the user this? And do they have enough context
to answer that question? And this results in a
really distracting user experience because you have
these little dialogs popping up all over the place. And it turns out this
is kind of a bad thing too because in
Chrome for Android alone, we found users either
entirely ignore the permission requests or they temporarily
dismiss them more than 90% of the time. So 90% of the time, it’s not
that the user is saying, yes, you can have that permission,
or saying no, you can’t. They’re just saying, get
this dialog out of my face. So to address this
problem, since Chrome 59, we actually started saying if
a user dismisses a permission request– doesn’t accept or deny
it, they just dismiss it– three times in a row, we’ll
actually just temporarily block that permission request
in the future for a week. So it will pop up again,
but not for another week, since clearly, the
user doesn’t feel like answering the question. Now, as another step
though towards making this even better, beginning
in Chrome 63 for Android, we really want to reduce
these continuous distractions for users. So we’re going to present
permission requests as modal dialogs. Now, this sounds backwards
because now we’re going to force the user
to answer this question. But this really is going to
encourage users to say, yeah, sure, that’s a good request or
deny a request that they’re not interested in, rather
than just ignoring that they’re being asked. And this is going to drastically
reduce the number of permission requests that users
actually see because they’ll make a decision up front. And the best part
about this is this is going to encourage
applications to not only ask for permission in the context
of why that permission will be useful to make the
user’s experience better, but only ask it when
it’s actually a good idea and they need that capability. And this is really
important because we’ve found that sites that ask for
permissions across all APIs without context– on average, they actually
only get granted permission 40% as much as sites that
actually ask for something and give you the context. So if you’re given
the context of, hey, I want access
to your location because it will help me tell
you which restaurant is closest to you, you’ll actually grant
that so much more often– like 150% as much often
as you will if you don’t get any context at all. 40% of the time, they
would get that accepted. So since a block
decision, by the way, is permanent unless the
user manually overrides it, we hope this is
going to encourage people to ask for
permission and give context. OK, so let’s talk
about reliability for web applications. When you click on an app
icon on your home screen, you expect it to just work. You expect it to just
load and do something. And this frankly has always
been something holding the web back as an
application platform because as users, we’ve
become conditioned to think that web app equals
something that only works when I have a network connection. And native mobile apps never
show us this cute little guy. Nothing on my home screen
shows this except for Chrome. And in order for web apps
to earn a place on the home screen, we need to
make them reliable, even when the network isn’t. And the worst part is mobile
phones actually aren’t always online or offline. They’re in this Schrodinger’s
cat state, where they might have a network connection. They show four bars, but it
might not actually do anything. Or it might only have
one bar, but it actually can get data through. And this is actually even worse. This breaks the user experience
just as much as saying, hey, I’m disconnected completely. So let’s talk about
a service that I’m sure you’ve probably heard
of and you might even rely on and need to be reliable– ride sharing. So everyone’s heard of Uber. They’re a ride service
with a global focus. They actually build products
that work all over the world. And earlier this summer, they
announced their Progressive Web App– m.uber, called “Moober”– no,
really, it’s called “Moober.” They said so in their
blog post, so I’m going to say that
the rest of the time. So m.uber is this
investment in delivering really great global
access for Uber everywhere, especially
for those users with really low
connectivity or low storage space on their devices,
or even devices where their native app
wasn’t actually supported. And users need to really be able
to quickly and reliably request a ride no matter where they
are or what their network speed is, what their device is. And m.uber provides that
experience using the web. In fact, they’re
actually designed to work really well on 2G. They’re interactive in
three seconds on 2G. Their core ride-sharing app
is really just 50 kilobytes. That’s incredibly tiny. I haven’t seen a JavaScript
library that small in– I can’t even remember when. But it’s really
designed to work well because they cache
these requests, and they actually let them serve
the content locally, even when they have an
intermittent network, and they detect
this really well. Instagram is another example. You’re going to
hear more about this later in the “Creating
Media Without an App” talk, but they do this great job of
unlocking the ability for users on unreliable connections
to share experiences even when they don’t
have a connection through offline support. So you can take a photo,
even when you’re not connected to the internet. And using background sync
and the service worker API, it gets posted automatically
as soon as you’re back online. So they’ll talk more
about that later. And continuing with
this theme, eBay is actually currently
looking at service workers to see how they can make
their experience better for their users. And they’re not quite ready
to refactor their entire core experience, but they came up
with this great standalone use case to try out service
worker deployment. So they started caching the
user’s eBay browsing history, like what items you’ve
looked at already. They cache those
using service worker. And then the user can
actually look at those. They can flip back through items
even while they’re offline. And this way, they can learn
how to use service workers for a really strong
offline experience and then use that
to integrate back into their main experience. So all these pillars– fast, integrated, and reliable– they really just
lead to engaging. And an engaging app really goes
beyond just being functional, and it ensures your
whole experience is really delightful. It makes it easy for users
to do what they need to do. And using features
like web push, it can always be up to
date with notifications. You can keep users informed, and
it uses the right capabilities at the right time in a
really beautiful way. And to talk through an
engaging experience, we’re going to take
a look at Trivago. THAO TRAN: Great. Thanks, Chris. So go to demo screen. So, in the keynote,
we highlighted Trivago as this really great
Progressive Web App. And so I wanted to go
ahead and give a demo, although all of
you who I know, I think you’re really
paying attention to us, you’re probably looking
at your phones already. So if you wanted to
go to Trivago.com, you can do that as
well and follow along. So, I’m going to click on
Trivago, this beautiful splash screen that, again,
gives you some time to warm up the browser. And I’m going to go
ahead and search here. So for those who are
unfamiliar with Trivago, they’re actually one of
the largest hotel search engines for travel, and they
operate in 55 countries. So I’m going to go ahead and
search for San Francisco. Let’s take a look at the dates. Let’s see, maybe I’ll be in
the city for my anniversary next weekend. And then if you
actually scroll through, it’s really, really
fast and smooth. And if I actually try to go
into the various different hotel product detail pages,
you see a nav here, where each of the
pieces of information is available really,
really quickly. You see the skeleton–
some of the skeleton screens that Chris
talked about earlier. And so it’s just
a wonderful, kind of immersive user experience. And one of the things that the
Trivago team really focused on was the ability to be extremely
resilient and still performant, even on a flaky connection. And so I’m going to go ahead
and go to airplane mode. And as you can see here,
there’s the UI that tells the user you’re offline. So then we’ll reconnect when
we are back with network. And even while being offline,
you don’t hit a white screen. You actually are still able
to consume some content. Again, if I’m going
into a listing that isn’t already cached,
there’s really nice UI to communicate to the
user when they’re offline. And I think what’s terrific
about this is that, even when the user navigates
through Trivago and goes back to a screen,
they actually have a maze. So I guess it’s their version
of the offline dinosaur. But you’re actually
able to play a game while you’re
waiting to come back online, which is really cool. CHRIS WILSON: But please
still pay attention to the rest of the talk. THAO TRAN: That’s true. CHRIS WILSON: Don’t just
play the little game. THAO TRAN: And so what
I love about Trivago is that it’s great
to ship really amazing experiences for users. But at the end of the day, it’s
still a pretty large business. And so I want to highlight
a couple of stats here. So again, as I mentioned,
they focus a lot on providing a really
resilient experience. And a stat that they wanted– I want to highlight is that 67%
of users who are interrupted by a period of a flaky
connection or offline actually come back to
continue to browse. Think about that. Think about how often
you hit a flaky network, and then you actually
just leave the site. In this situation,
you actually– Trivago is still maintaining
some sort of content for you to interact with until
that network connection comes back. And so that continuity
is really proving well in their business results. So they’re seeing users
continue to stay with them, and continue to browse. Another stat which Ben
highlighted earlier in the keynote– and I want to really
emphasize here that 97%– they’re seeing a 97% increase
in overall conversions. And conversions here is defined
by a user browsing through lots of different hotel
listings and then clicking on the View Deal button. And so that means that
users are able to find what they want really
quickly, and are clicking out. So that’s a really,
really great experience. And again, I want to share
one of the highlights here is that Trivago actually
published a blog post, I think with Google, where
one of the developers said that, mobile users come
to expect sites to just work, regardless of flaky Wi-Fi
or poor mobile reception. And so this is
really the new bar. It’s the standard bar, I
hope, for what users expect, and for what all
of you developers should be able to deliver
for all of your users. And another example of
an engaging experience I want to walk through
is West Elm’s approach. For those who were here at
Chrome Dev Summit last year, I actually demoed the
West Elm beta site. And I want to touch
upon the journey that they went through
over the last year. And I think that’s going
to be very relatable. Because sometimes,
here at Google, we have a lot of– we
move at a fast pace. But when I talk to partners,
I have to remind folks that it takes time. It takes a lot of planning,
a lot of internal stakeholder management– I see a lot of nodding
because people understand what it takes to kind
of reinvest or invest in new experiences. So I want to walk through
what West Elm did. And so for those of you
who don’t know West Elm, it’s a major retail
furnishings company. It’s part of the Williams-Sonoma
group that has eight brands, including Pottery Barn and
Williams-Sonoma.com as well. And so I’m going to go ahead
and walk through the timeline. So this time last
year, they had just launched the West Elm beta. And they kept it as a
separate experience. And they started to redirect
some limited traffic there. But they knew that they
had something good. And so they actually went
through rigorous usability testing. And they got positive feedback. And so that gave
them the confidence to continue to roll out
to more of their traffic. So they were seeing
10% of traffic constantly, constantly checking
what the data was telling them. Again, continuing to
see positive metrics. And then at the point where they
were rolling out 10% traffic and seeing positive
metrics, they said, wow, we’re on to
something good here. It’s actually– let’s
take this opportunity to re-architect the
platform, so that they can use web components across
all of the company’s sites. Ben highlighted, West
Elm, Pottery Barn, and Williams-Sonoma going
through this process already. And so this really means that
not only were they building a high bar for
one site, but they were taking that learnings and
able to expand it across so many other company sites. And when they rolled
out to 25% traffic across iOS and Android– and it’s important to note that
West Elm’s traffic is actually over 80% of it is
actually on iOS. I want to pause for a moment
to kind share a couple of stats that they saw for 25% traffic. They saw an increase
in average time spent, as well as an overall
lift in revenue per visit. Now, if any of you have actually
been on the West Elm site– a 9% revenue increase
is actually a lot, if you’ve seen their furniture. So, I think this is a
huge testament to the work that the team did in terms
of testing and continuing to look at their data. And then that data
that I just shared with you was so positive that
it actually accelerated, folks internally to think about
multiple sites upgrading onto this new platform. And so over the next few
weeks, Potterybarn.com, williams-sonoma.com and
westelm.com will be getting this new experience through–
probably most of it coming right after the holidays. But you’ll be seeing all these
new upgraded experiences. So it’s a great example of
testing, iterating, retooling, and then launching for what
makes sense in terms of raising the bar for all of your users. CHRIS WILSON: And I hope
you’re getting the idea as we go through all these examples. We’re hopefully
showing you there’s a ton of different
features here. There’s a ton of
different ingredients to help you mix and
match the recipes, to formulate your perfect
cocktail or web experience, whatever. Speaking of cocktails, I hear
there are some good nitro cocktails at the
bar tonight here in SF for those of you
who are here with us. And yes, there are mocktails for
those who don’t drink alcohol, as well. But– THAO TRAN: So just
two years ago, we had this major
e-com company in India ship a beautiful
new web experience. And so I really want to
emphasize that we think about the web as this global– having global reach. And so it was just
this one company. And I always like to take a look
at where we are year over year. So two years ago,
we had one company. And today, there
are so many sites adopting all of these
modern web features, from AMP, to service worker,
to push notifications. Better sign-in, better checkout. Because these sites want
to deliver a better user experience. This is just a small
sampling of brands, but it just gives you a sense
of the momentum that we’re seeing throughout the world. And it’s just not about sites. It’s about making
sure that platforms are able to invest
in the modern web. And so we understand
that it’s also important that we are able to turn on
many of these features at scale. And so we’re excited to see that
Automattic and WordPress are continuing to invest here. So most folks have probably
heard of WordPress.org. Automattic is actually the
creators of WordPress.com, WordPress VIP, the Jetpack
plugin for WordPress, as well as WooCommerce. And so with
Automattic, we’ve been able to collaborate
on a couple of fronts. First on AMP, we’re creating
the official Google AMP plugin for WordPress,
and making it instantly available on millions of
sites across WordPress.com and the VIP sites. And with service worker, we’re
doing some experimental work with the Jetpack plugin to
bring the generic service worker framework to the theme authors. So this means that
you can progressively enhance your theme with
more Progressive Web App functionality. And hopefully, there’ll be more
to announce on this front soon. The Automattic team
is actually here with us at Chrome Dev Summit. And they will be
giving a talk about how WordPress is continuing
to invest in the web. So WordPress and Automattic
are just one example. Magento is a major
e-commerce platform. They’re serving tons and
tons of sites, actually over $124 billion
in gross merchandise volume goes through the Magento
platform on an annual basis. They have lots of– a huge developer community,
tons of technology partners. And recently, Magento
announced their commitment to integrating Progressive
Web App technologies. And it’ll be part of the
upgrade into the next version of their platform. So we’re excited that
they are continuing to invest so that users are
going to get modern shopping experiences. CHRIS WILSON: And
hopefully this shows how you can reach the bar. You can have some support
to help reach the bar. You can get some assistance. That’s actually what
our team is here for. That’s why we hold
these conferences. This is what we want
to do, is help– figure out how to help
you to reach that bar. THAO TRAN: So with that,
we hope that you’ll take some of these stories, get
motivated and inspired to go back to your teams and
build something great, actually build really great
modern web experiences. We’re around the
next couple of days. Feel free to come up to us. We’re excited to
engage with all of you. And have a good rest
of the next few days. SPEAKER 2: Absolutely. Thanks. [MUSIC PLAYING]

Only registered users can comment.

  1. This is by far the worst presantation i have ever seen by google, if it is Chrome it is about and mobile, maybe it would a better idea, to talk about Google Chrome for mobile. Just saying!!! Tracy seem very tired, and i dont like this, because she is smart. maybe it is time for her to work with somebody else.

  2. I've no doubt the figures rolled out are true, but if you really need to visit a page, you will otherwise you won't. It's that simple. Browsing is passing time. Visiting a website for a valid reason is a different proposition.

Leave a Reply

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