hello everyone how are you all this
afternoon doing well during the
conference
excellent it's lovely to be here so
thank you everyone for inviting me so
I'm going to be talking about the web
and there are lots of reasons to love
the web for me it's the scale it can
reach users all around the world on
almost any device and the only thing
they need is a browser it's easy to use
and it's easy to share there's nothing
to install and it's an open ecosystem
that anyone can use or build on but you
know for a long time there were many
claims that the web was dead
for example Wired magazine back in 2010
said the web is dead long lived the
internet though but the web was only 18
years old at the time so it was really
just a teenager it's a bit unfortunate
this conference I think very much proves
that the web isn't dead the issue back
at this time was that people were
noticing and documenting that apps had
started to take up more that more
people's time than web does and that led
to headlines back in 2014 like this
mobile app usage increases as mobile web
surfing declines the web is dead long
live the app the decline of the mobile
web and the web is dying
and apps are killing it so what was
happening well it was all to do with
time spent and this is the kind of thing
that was reported this was updated
figures and today only 12% of the time
the people are on their phones is spent
on the mobile web while 88% of it is
spent in native apps and this study was
by conquer the comScore and other
companies find very similar stats and as
you might well know the reason for this
is because people are spending their
time in certain sorts of apps so it's to
do with social networking music games
multimedia and this is why that time
stat is prevalent so these things are
entertainment or communication focus
maybe it's not time that matters so
while it is indeed a great deal of time
that people are spending in apps it's
not evenly distributed across verticals
they found stats like this back in 2014
- although these ones are the latest
ones and back when all these headlines
were published but when people started
looking at this more closely there were
some telltale signs that mobile web has
some great things going for it - they
found that mobile web accounted for more
traffic for many verticals more than our
for many mobile apps for example this
chart this was from 2015 so it was a
year later than all those headlines were
published it shows that retail finance
insurance and travel typically see a 50
percent or higher proportion of their
visits from the mobile web this resulted
in Wired changing their tune the web is
not dead after all
and Google made sure of it and this rip
was reporting about the advancement of
activities that can be done in a browser
and the early successes of progressive
web apps in fact some use cases are
really ideal for the web luke chat Alain
who's the chief innovations officer I've
always wanted a job title like that I
think it's awesome he's a chief
innovations officer for West Elm that
furniture company he made this point
when he stood on the stage last year at
Google's retail conference to explain
why they created a progressive web app
rather than a native app and he said
what people don't buy a couch on their
phone every day so another way of saying
this is understand user behavior and do
what's right to meet your users for your
business in a way that will help them
best
so in order to make the web better we've
been developing progressive web apps so
let me tell you a little bit about this
and I'm going to go into a little bit of
technical detail and you might wonder
what's this got to do with UX design but
I think it has everything to do with UX
design because the technologies that are
coming enable us to design for new types
of experiences on the web and this
really needs to be a designer developer
partnership and when I mentioned
developer I kind of mean all of the UX
functions progressive Web Apps is a new
term for new features and technologies
of the modern web progressive web apps
are enabled by a new set of capabilities
that allow us as designers in
collaboration with developers to
radically improve that user
experience that people have on the web
and we do this by making sure that that
experience is fast we want to make sure
that the experience is better integrated
with device hardware platforms and we
want to ensure that experiences are
reliable and we need to keep users
engaged so let's start with fast users
don't expect janky scrolling or slow
loading for performance from a really
good app the web has a bad name for slow
performance particularly on mobile and
by performance I mean in page
performance as well as load performance
web app loading has to be invisible for
your users
just like with good native apps web apps
should really just work
now it takes a mobile webpage on average
12 seconds to fully load on a 3G
connection and that experience is really
bad for everyone for every one second
delay in page load time conversions drop
by 7% so that's bad for our businesses
so we have to fix this
and also one side-effect of the reach of
the web unlike native apps is that you
can't dictate the starting point for any
particular experience you need to really
carefully think about the performance of
every single page so we have to make
sure that wherever someone starts it's
always a first experience let's talk
about integration as well as speed users
expect app like integration with their
device hardware platform and other apps
you know that great feeling you get when
you use a really well-made app that
tight connection right from the start
that you want the task you want to
achieve you forget you're using an app
really it's just such a tighter engaging
experience so people shouldn't really
have to think about the fact that
they're on the web that they're using
their phone their tablet or their laptop
to complete a task now in terms of
integration when your user visits your
site you can now prompt them to add that
site to the home screen a great example
is from trivago a major travel site that
launched their PWA for 55 different
domains globally and as you can see here
when you tap Add to Home screen this
hits your screen immediately and you can
access that just like you would a native
app it's fast and it's simple so now
when it's added on your home screen it's
more integrated on your device then the
the it's displayed also in your app
launcher just like other apps and it's
part of your overall Android settings
another user experience to design for
that's now possible is push
notifications from the web so we've not
really had that before this example from
Twitter this is Twitter's progressive
web app illustrates push notifications
and how they've integrated on their
progressive web app experience of course
we need to be conscientious and mindful
when we can
to how to design set schedules but this
does provide now a way for businesses to
re-engage people on the web which hasn't
existed before and on the topic of
integration let's touch on new
capabilities for integration for
e-commerce
so digital commerce is such a huge deal
last year ecommerce was worth two point
three zero four trillion dollars
globally most commerce ecommerce
accounted for
I'm sorry mobile Eve's ecommerce
accounted for almost sixty percent of
this fifty eight point nine percent of
this but it's still a really a big
fundamental challenge for the mobile web
specifically the web has gone mobile but
conversions on mobile are one-third
lower than on desktop and it makes sense
it's hard to enter data on a phone so
we're doing as much as possible to you
know remove form experiences and
everything else we need better
integration ecommerce is all about
removing friction so browsers have
worked to address this with autofill and
today on Chrome over nine billion forms
and passwords are Auto filled each month
that's really great but it's not enough
so the payment ap request API goes a
step further
it's a w3c standard for browsers that
provides an interface to users to enter
payments and shipping data so users have
this consistent experience and
developers don't have to reinvent the
wheel from you know your tiny boutique
store to your big ecommerce giant now
sites can use the payment request API to
get it the experience that is shown here
and you can see that Chrome has securely
stored email shipping and the credit
card details for the user the merchant
gets all of this information in a simple
form already pre-populated and now we're
going further than this
since convergence is so much lower on
mobile we need to fix that
so we've released a whole payment
solution that companies use Google pay
and that's the product that I now work
on it enables fast simple checkout
provides easy access to awards and
offers and one spot for purchases and
payment methods really it's trying to do
away with forms so that this one-click
experience and you know a lot of the way
we're getting users ready to pay is
through autofill and getting credit
cards into the cloud like that so users
across the board and ready to pay even
if it's the first time they've used your
product so you can see that the web has
become an environment that is fit for
the possibility of providing really
great experiences that users need better
reliability as well with progressive Web
Apps we make sure the experience always
works because when it doesn't work or
when it loads too slowly
it breaks the user experience and it
destroys that user trust so creating a
reliable experience is really crucial
when a user taps on home screen icon
they expect it to low instantly and
reliably we've become used to always
being online and as much as I like this
cute little fella we don't really need
to see him weird rather we didn't so
imagine getting a system-generated error
message from your offline native app
that would seem crazy and it's not just
no connection that breaks the user
experience slow and intermittent
connections can be even worse we call
this life I write even here in the Bay
Area believe it or not there are areas
with poor cell coverage and there are
people here in the u.s. that have to use
dial-up to get online and worldwide more
than 60% of cell phones are on 2g so
likewise broadband infrastructure is
often poor and as you see here many
people in the u.s. don't have access to
a fast broadband a similar picture in
many other regions now though the news
on this is it exists this new technology
called service workers written in
JavaScript it's a client-side proxy that
acts as an intermediary between your web
app and the outside world
it can cache resources to ensure a
reliable experience no matter what the
connection is like because resources can
be pulled directly from the cache
instead of from the network so your app
can work even if there's no network
connection for us as UX professionals
this means we'll be designing for
offline experiences for the web a whole
new realm for us to explore is what can
we achieve for our users for our
companies when people are offline or in
places with flaky network connections
these service workers are part of what's
at the core of PWA is they also enable
the push notifications I mentioned
earlier lastly a truly engaging app
experience needs to go beyond being
functional reliable and ensure that the
whole experience is delightful and makes
it easy for the user to do what they
want an engaging experience starts at
the very beginning with a delightful
first-run experience and it continues
through all your user journeys and works
perfectly without friction
so the an engaging PWA uses the magic of
the web it's indexable searchable its
linkable and shareable the experience is
timely and relevant and precise because
it counts for users context and what
matters to them right now
so making enough engaging ranges from
basic experiences that are imperative to
get right and this includes asking for
permissions only when you need it not as
soon as it opens and asking people to
sign up and sign in at the right time
when they were perfectly invested and
there's something in it for them and not
just for our businesses I'm removing
friction in forms many presentations
have talked a lot about forms before my
colleague Luke Wroblewski talks about it
plenty but there's still plenty of for
experiences on the web we actually did
an audit this year of 400 top web sites
in Europe and we found 42 percent of the
sites from across 15 countries didn't
show the appropriate keyboard for the
input type so obviously that's friction
it's the best practice that's been out
there for a long time and 27 percent
didn't show optional fields there's a
couple of problems with this users might
be overwhelmed with the sheer number of
you know form fields they need to fill
in and they might struggle on one that's
actually not applicable to them and
eventually give up so a lot of errors we
see with
forms can be overcome by the use of and
the proper implementation of auto film
now it's critical to make sure you're
following all of the best practices for
web design obviously using the right
input type and using features
appropriately and at Google we've done
some extensive usability studies to
develop now all in all 75 principles
that encapture the best practices on
mobile we had we did large studies on
Android and iOS and we looked at 250
different mobile sites and apps and this
led to all of these principles here the
second set in each of those that you see
have additional links in it that go to
code snippets and and different
resources for developers and so those
ones you can pass on to any developers
you're working with - so making sure the
user experience basics is good as well
as enabling delightful perhaps
personalized context-dependent
experiences makes a web app experience
engaging and at Google we're working on
creative progressive web experiences
that scale so Google search uses a PWA
to make sure it's possible for users to
ask questions when they're offline and
then when they come back online that it
provides an answer once they've
reconnected that uses service workers
and background sync and push
notifications to let people know that
the answer has now been found by using
service workers they were able to reduce
the number of external javascript
requests by nearly 50% and reduce the
number of user interactions delayed by
loading JavaScript by 6% bulletin is a
new way to create and share hyperlocal
stories all built around a progressive
web app it's a tiny fraction of the size
of a native app with a hundred percent
of the functionality and they do some
really neat stuff with media capture API
to make it really easy for users to
capture the moment and sharing is as
simple as sharing a URL and the Maps
team recently shipped a progressive web
app themselves they saw progressive web
apps as a way to radically improve their
experience for their users on low-end
devices or when they're on flaky network
connections and it would be great if
these improve
experiences are available to users no
matter what browser they use if the
browser supports it and if developers
can build on it and designers can design
for it and this is becoming a reality
service workers are now supported in
essentially every modern browser
including Safari and edge an apple ship
support for service workers in late
March and with the recent update to edge
they're now supported their two browser
vendors are adding support for all new
kinds of capabilities that enhance the
user experience edge also got push
notifications and is doing some
interesting stuff with their store and
Firefox our support for push
notifications as well and is working on
the new web authentication api's and
Safari is also working on the web off
api's as well so that's the basics of
progressive web apps and it's exciting
to see how these are transforming web
user experience now let's take a look at
one example of progressive web app this
one from Starbucks it takes advantage of
many of the new capabilities and brings
a modern web experience to their
customers it makes it easy to browse the
menu customize and place an order or pay
for an order in a store so let's
consider how that fire acronym the first
integrated reliable and engaging implies
to the Starbucks experience so the
Starbucks site loads fast but it also
feels really fast and the way Starbucks
does this is using placeholder content
like you see here until the actual
content is loaded it's kind of you know
most of the time the users don't notice
it but it really makes a difference to
that Pacific perceived speed it looks
like things have started to load and
those grey placeholders are quickly
replaced by the actual content and on
faster networks when the content has
already been pre cached users don't even
see it there so they're not aware of it
another aspect of the past experience is
navigating between pages navigations
feel fast and they are fast it never
fails to like to the user that the page
does a full kind of reload navigation
shouldn't rely only on the network but
instead everything should be pre cached
and ready to go to reduce
friction of signing in Starbucks use the
credential management API which makes
signers as simple as one tap and as you
can see here the add to home homescreen
prompt that you can see at the bottom
and I can easily add it to my home
screen and launcher and soon the add to
homescreen banner is not going to show
automatically anymore instead we'll have
to add a little bit of UI to our app to
prompt the user and when that happens we
need to be careful that we don't go in
add you know anything like a full page
interstitial again because nobody really
likes those so when they use agile PWA
to their home screen on Android Chrome
automatically generates the apk for you
which we sometimes call a webby apk
having a webby apk means your app shows
up in the app launcher and in your
settings where you can see the amount of
storage use its permissions and so forth
to make the experience reliable
experience the Starbucks PWA uses work
box with a combination of pre caching
strategies so it's caching a lot of this
information and runtime caching
strategies by pre-caching that content
they can make sure that those key
resources always available and served
directly from the cache without having
to wait for the network then as the user
uses a Yap additional content is cached
as they navigate round the app so
sometimes some of that content isn't
uncashed until users go there if they're
then in a flaky network connection they
can get back to it while placing an
order offline is of course impossible
the Starbucks PWA makes it possible for
a user to pay for an order in the store
because they pre cached the payment
information so it uses indexeddb to save
information on each menu item store
information the users Starbucks card and
more so if I'm in perhaps a different
country than I usually am and I haven't
got a connection there
I can pay in this offline way Starbucks
focus on the user experience to make
their progressive web app engaging
placing an order has to be easy so that
users can customize the drink with the
many possible options available they
paid attention to fundamental details
like the navigation
and stack making sure that the back
button always does the right thing that
it goes back step by step rather than
jumping back to the home screen or some
other random page and to make the
experience really feel alive Starbucks
use content specific animations and
messaging for the user for example after
clicking add to order it shows this
toast here that it's added my audit of
my bank so through creating this fast
integrated reliable and engaging
experience Starbucks have put their
customers first to meet their needs
where they are to make it convenient and
delightful for them to get their
favorite drink
so this improved user experience has
really paid off for Starbucks they've
got some wonderful data that the orders
are growing 12% week over week and
because Starbucks took a responsive
approach and made sure the experience
works nicely on desktop they're also
seen desktop users use the web app in
order to order ahead so their drink is
ready when they get there we attribute
many of the progressions I shouldn't use
that word really the evolution of
progressive web app very much to mobile
and Mobile's being the key focus of
progressive web apps however we're
starting work on desktop because desktop
experience is still growing it just has
a different pattern in users lives
whereas mobile and tablet are used in
the morning and evening it's used more
often like more often distributed
throughout the day particularly because
of the productivity tools we use at work
users have really high expectations of
desktop apps and they also need to be
fast integrated reliable and engaging so
that they look and feel like other apps
we're used to on desktop so progressive
web apps development is happening for
Chrome Mac and Windows and when those
users can already install desktop
progressive web apps through the
Microsoft app store so things are
starting to merge like that so if a team
has created a mobile progressive web app
they don't have to do a great deal more
work to create one for desktop it works
you know reliably we can use web push
and notifications the only real
difference isn't
dead of running in a browser tab it runs
in an app window there are no tabs or
address bar is just an app is oft
optimized to support the needs of apps
so you can think about flexible window
organizing organization and manipulation
at windows make it really easy to unit
tasks with the window in full screen or
multitask with multiple screens and it's
really responsive design that matters
here you can also do your app switching
with you know your alt tab that works
well here so that's a nice experience
and and you can have the title bar theme
based on the theme color defined in the
web app manifest as you can see here so
different things you can do with the app
menu there then things that you'd expect
print the page change the zoom level
open the app in the browser and they
have this large screen escape so you can
add additional breakpoints and really
think about your responsive design here
whether that's for a full week's
forecast or if you're gonna move it down
and then perhaps just have one day of
weather or if that was a music app just
you know the the button to move to the
next song so we can take that idea of
progressive web apps and think about how
we're going to support convertibles like
the pixel book or the surface so you
know when we switch those to tablet mode
the devices make the active window
fullscreen and depending on how the user
holds a device that can be either
landscape or portrait and again we need
to think about this responsive design so
and that window opens up lots of new
possibilities so we need to take that
responsive approach that adds new
breakpoints for larger screens supports
landscape or portrait views works when
full screen or not and nicely also works
with virtual keyboards and what's next
we're looking at support for mac and
Windows we're looking at things like
adding support for keyboard shortcuts
badging for the launch icon the launch
icon so users can be informed about
important events that full notifications
aren't needed for and link capturing
opening installed pwace when the user
kick clicks on
Lync handled by the app and so we'll be
making more announcements about this on
our chromium blog so take a look there
for the new technologies coming out with
that so just to summarize I wanted to
take this time I have with you today to
tell you all about progressive Web Apps
because in my experience is primarily
developer communities that are talking
about this and I think it's really
important for user experience and design
professionals to get involved with this
we need to work with developers to
determine what experience it is we can
provide through that caching we are the
ones that are going to have some great
ideas and do the research to understand
what those offline experiences ought to
be there were all sorts of user journeys
that can benefit from this such as you
know browsing content when you want
underground transit and that kind of
thing so working together designers and
developers and it's really exciting
consider how these transformations of
the web will support the next use cases
and user experiences we can design for
so that's what I've got for you today
thank you so much for your time you can
contact me at this name on Twitter
thanks a lot
For more infomation >> Trump attackiert Google ✖ Facebook Watch ✖ Instagram Verifizierung ✖ Amazon Video Ads - Duration: 10:17. 
For more infomation >> 🔴((จ่ายจริง)) วิธีหาเงินบน Google ถอนครั้งละ 500-1,000 บาท💸 | Go Bank - Duration: 7:18. 
For more infomation >> Простой план эксперимента в Google Optimize (2018) 🤖 - Duration: 1:48. 
For more infomation >> La Landing Page per le Tue Campagne Google Ads (Adwords) - Duration: 1:30. 
Không có nhận xét nào:
Đăng nhận xét