Web as a building block for user experience (Chrome Dev Summit 2019)

So. Growing up I wanted. To be a rock star like. Literally. A log star I dreamt. Of being a guitarist, in a rock band, now. Due to lack of talent amongst other things that career move didn't work out for me and. That's okay but. To make up for it I did. Dress as my favorite guitarist. During Halloween. Does. Anybody recognize who. I'm dressed as. Yeah. Few of you all, right that's awesome, now. I was, born in India and grew. Up listening to a lot of music and a lot of bands. But. Growing up I never had. The opportunity or, the means to see any of my favourite bands play, alive. So. I listened to a lot of their music you know through conventional means tapes, radio. CDs. And so, on so forth, but. I always wished I could see my favorite band life. Now. Fast forward and just. A few years ago my favourite band reunited, and I was able to see them in concert and, man. What an experience, that was I was, all the way up in the front, yelling. At the band and it was the most beautiful, thing in the world for me. But. That got me thinking what. If, watching a band live at the concert, was the only way for me to get exposure to their music, could. Have discovered the music back home in India. Now. The beauty of music is that the, original song once recorded, by the artist is available. In many different formats, and over devices, and, you. Can listen to your favorite song whether you are working out, your. Cooking. Or driving. So. In short as a listener, I don't. Have to go to the music unless, I want to the. Music is available to me wherever, I am and. In. The same fashion, being. Able to deliver amazing, web content, to your user wherever, the user is, that's. Leveraging the power of the web and we'll, dive into these concepts. So. Thirty years ago, exactly. To this day which is November 12th, Tim. Berners-lee the man who would go on to develop the World Wide Web he. Published a proposal, for. Linking and accessing, information over. A shared interface. His. Proposal, was to build a web, of hypertext. Documents, that. Could be viewed on a browser. Now. I remember, my first experience, using a browser, was. A simple, process you, sat in front of a computer you fired, up the browser you, typed up the destination, URL you. Hit Enter and you got to your destination, and then, when you wanted to do something else or access, some other site you followed the same process all, over again. It. Was a deliberate, simple, and very linear process and. Even. If as devices, have changed, and we now carry mobile. Devices, that can browse the web the. Idea of going to a browser on, your device is pretty much the same. But. Technology, and user, behavior has, changed quite a bit, now. Today the browser isn't the only way to, access the, internet or connect your users to your website and. We. Are in such an exciting age for developers, with so many new devices. And, ways to engage with your users all the way from tablets. To, desktops, to phones to. Newer interactive, methods. Like the, assistant. So. Thanks, to the omnipresence. Of all these computing. Devices around us we. Have entered an era of ambient, computing, and so. The devices are not the center of attention anymore. It's, the user it's, you and me. So. How does web development evolve. To, address the shift and, just. Like in my concert, example, it's. Unrealistic, to expect that the band is going to re-record their music every. Single time a new content, format, or a, new device shows, up in the market. But. Before we go ahead let, me just give a quick introduction my. Name is Dave Gautier I've been at Google for 10 years and. I lead a team of web solution, consultants. And we've worked with developers like yourself, to build engaging, web experiences. Using. The, latest modern web tech, and. It's really amazing to see some of the things our partners have built the way they have completely transformed, the way you buy movie tickets online, buy flowers, online or, listen to music online all, using, the power of the web. So. What are the underlying powers, of the web that make it so effective, in today's, environment.

So. I'm here to talk about how the web can, be a key building block for, building immersive, user experiences. Based on its primary four superpowers. The. Web is capable, its. Interoperable. Its. Embeddable and it's. Highly transformative and we'll dive into each of these concepts. But. Before we go any further, it's. Critical, to acknowledge, that we learn something completely. New when. We moved. From desktop, devices and stat it started carrying handheld, devices that could browse the web. We. Learned that you can't just be mobile first by. Taking our desktop content and just resizing. It for a different screen size and this, is beside the obvious performance. Issues. Because. The users expectation. Of how they interact with the web has completely changed I mean, we started with typing, keyboards. And mouse right and with. Mobile now, we are all about tapping. And swiping, and. Now. We are on the cusp of the ambient, web with. Newer interactive, patterns like the. Assistant and voice, and. Besides. The obvious performance. Related issues as I mentioned earlier these. New experiences. Lead, to a completely, new user expectation. And a. Lot of this is based on how the users, interact, with the, real-life objects, around, them so, they expect, a similar response. However. In my experience working with a lot of our partners I feel. Like the web design process is still, starts. With the assumption that the. User will go to a browser and then, follow the steps that we have laid out for them. But. Then if we only think of website design in this, in this, format I think. We are drastically, under estimating, the impact the. Web can have on our lives and. We. Are under valuing the complexity. Of a real users, journey. Now. User journeys, are getting increasingly, complex, and, there. Are actually a lot more complex than even what our analytics, or data shows, us now. When we look at our analytics data we. Might look at data, in terms of a user session, or, time spent on our site, but. What if the user doing in between, these sessions like how are they even getting, to the website and it's important, to think about that. Now. Research, shows that a. Digital shopper. Will. Have almost, more than 100, touch points to the web and this, is right from the, intent, to purchase something, all the way through discovery, research. To, the actual process of buying, so. People are no longer following, a linear path from, a ver Ness to. To. Discovery, to purchase. No. Ok. Now. Let's look at a real life example now. I talked about my desire to be a rockstar so. I want to look cool and I want to buy a Gibson Les Paul guitar, so. This whole process of me even thinking of buying a guitar to. Actually finding the perfect guitar, to buy is long. And the. Journey is perilous, and it takes, could take me days and months or weeks, to, find the perfect guitar and the, process, of research, and discovery, like. Happens, across mobile. Desktop. Tablets. And could. Include a combination of web search social, media ad. Remarketing. Ads video. Research, and research, on the retailer website, now. Let's say at the end of all of this I find, the perfect guitar that I want to buy I go. To the retailer's website and. I purchase. And. The journey doesn't end there now I'm really anxious to get this guitar right in my hands so now I'm tracking it the. Delivery right maybe, I'm using the assistant, to. Track the delivery or I could use mobile web you track. The progress in the delivery, now. The guitar shows up and I get a push notification. Now. Whether it's obvious, or not oh by, the way the guitar shows up that means I'm also really very excited, now. Whether it's obvious or not a direct. Browser or a, version of a chrome custom tab or a webview, it's. Part of almost every part, of this journey leading. Up to the. Event where the guitar actually shows up at my doorstep and, whether. It's obvious or not it's. Like, the most interesting part here is it's not very I'm directly, going to the browser to, access the web is how the web creeps, out of the browser and comes to me. So. We. Don't have to go to the web anymore I think, the web comes to us as we move across devices. Services and even, the assistant. So. We are in a post destination. Web. Okay. So how did we get, there how did this happen so. Like let's, look at the first superpower, of the web which is the, web is extremely. Capable. Now. We all know that the web has evolved, from, a collection of static, documents, to a collection, of highly immersive, experiences. Now. The web can do it all now. Whether it's subscribing, to a podcast watching. A movie online, connecting. With a friend or, just getting, the right information at, the right time, you. Can build highly, engaging experiences. And performant, experiences, that, do exactly that. If. There's one company that really, cares about giving.

Their Users great experience, its Airbnb, now. As part of its research Airbnb, realized that. 65%. Of, his first-time, users, land, on its mobile, web experience and. Those. Same users expected. All the performance, and all. The features of the native app without. Having to download the app so. Airbnb, took this really seriously, and invested. In rebuilding, its, guest experience, on the web, now. They're already seeing some great results they're seeing 23 percent improvement, conversion, rates but. That's not the most exciting fact, now. Mobile web is the, primary platform that. Airbnb, designs and develops for instead. Of it being the, last platform, and which. Also means that parody. With native, ensures. That their design that they built for mobile web can easily. Be transform and transport. It to other, platforms. Like Android and, iOS thereby. Reducing, the overall development time. Now. Google we, are always investing, to push the boundaries even further by. Bringing newer technology, to the web now. Tensorflow, radius is a web native implementation. Of the. Core machine learning functionality, provided by tensorflow, which. Is our software tool for deep learning and, this. Includes many many prepackaged. Solutions let's. Say to classify, images to. Detect objects, detect, body poses, detect. Language and so on and so forth. Mada. Face which, is a Canadian augmented. Reality company. Use. Tensorflow degeus to. Build a beauty product virtual, Tryon app for L'Oreal and as you can see from this image here it's, highly interactive highly, engaging it's a really good way to take a real life use case and apply, technology, to solve the problem. Now. Even. Emerging, areas like, augmented. Reality and, viewing 3d models, are now possible on the web. Yahoo. Introduced, a web AR feature to distribute, rich media content to all its users. They. Use the model where viewer, web component, and by. Using that they were able to ship AR. Mode with fall back to 3d, for, non supported, devices, now. Even though this is an early experimentation. Phase. Yahoo. Is already seeing a huge increase. In the engagement they are seeing around 10 percent engagement, which is much higher when. Compared to non AR mode and they're also seeing a bump in conversion. Rates, so. This is going, forward going to play a critical role in enhancing. The e-commerce experience at. Yahoo shopping. And. If you are willing to try this it only takes a few lines of code to, try this out and it works across. Across. Platforms. And frameworks, so. I highly encourage you to try this on. Now. The second superpower, of the way I want to talk about is, the. Web's ability to be interoperable or interoperability. Now. This speaks to the ability of the web to. Really render across, all types of browsers now, this. Is not a new thing we already know that a good web page, renders. And works across all browsers. But. From a user's, perspective I, think, this is beyond a browser now now your same web content, can. Render in your favorite, native app on Google. Search or even the. Assistant. So. Let's look at a few examples here. So. As we have transitioned, to a mobile first world, native. Apps are obviously. Very popular and. Especially. Social media apps and one specific, format, that's become increasingly popular is stories or. For those of you don't know stories, is a highly, interactive, way to, share your experiences, online by, using a combination of video and. Images and, if you're a verified user you. Can even add a web link to your story, so. In a way your app now, acts like a post destination. Browser and with. One swipe up you're, able to load your, web content embedded. Within the app in a comb and a chrome custom tab now. Imagine if these pages were actually built for, this type of handoff how, efficient, and cool would this would be. Okay. Let's look at a different example the, assistant. Now. One of the amazing things about the Google assistant, is you, can now use your voice to find, interactive. Or. Immersive, services. And experiences and, if. You want more control, over this experience, you, can even write a dedicated, action, like, Walmart did and. As you can see here on the screen you can search for objects or things in this, case is Apple and add, it to your shopping cart I. Mean. Your shopping journey is over. You can just click the link which. Takes you, our, rich deep links straight into their progressive, web app at, the point of checkout and the, progressive, web app is hosted at grocery at walmart.com and.

At, This point you, transition, to your normal, touch, interface, and complete. The checkout process and this just works it's. The same URL supported, experience, that you find on the web. The. Google lense platform, is an entirely new way for, users to explore what's around them using. The, camera, and this. Makes a lot of sense because let's. Admit it it is hard to type. Into a search bar, or a URL bar on your phone. Now. We recently partnered, with Netflix. And. The New York Times for. A special, lens experience, in the print edition of New York Times. And. As you can see in this image. There's. A printed ad in the newspaper and when you point, Google lens at it it, shows you an over digital overlay, and, when. You tap the digital overlay it. Takes you to additional content tied, to it and now. Guess what this. Is this experience, is powered by the web and, opens. Up an immersive, page, using. The physical, world as your, virtual URL, and, due. To the interoperability of the web content. Lens. Can now immediately surface. Your content, that's, tied to a visual anchor point so in, a way it's your same web hosted. Content, but, which can be surfaced, in new and engaging ways. So. Let's look at the next superpower, the. Web is embeddable. Now. In the previous examples, you, end up in what looks like a traditional, browsing, experience which, takes advantage of the link ability, of the web, but. What if you want to embed content. So. We think of embedding in really two contexts what, if you want to embed web. Content. Into other platforms, or, what. If you wanted to bring native. Content, and embed that into the, web the. Glad to see both, these scenarios. Possible, so let's explore a few examples, here. Now. Dynamic, male takes. Us to the next level, by. Bringing modern tech, like interactive, amp, content. Into, your email client, now. It provides senders, the, ability, to. Provide expressive. And immersive. Content and deliver it to your email inbox, so, much better than static, boring emails and, as. A user. You can now interact, with the content as if it was a mini app so. In a way a user can now let's, say browse through a carousel. Click. A link on click, a link submit a form or click. A button all within. The context, of the email and always. Have access to the latest information in, the, email. Now. We always knew that web content, could, be made available inside, your android app, through. Web views or. What we are offering you is a much better way to do these things so we recently, announced, trusted, web activities, and you've probably heard about all of it over the last two days it. Lists content creators, quickly. Integrate, existing web, flows and journeys. In a full-screen, mode within. Android existing. Android apps with. All the performance, and the assistive, features of, the Chrome browser. As. You might remember from all the other talks there are ton of other partners, who. Have experimented with this and have, seen immense, value, now. Obviously. All of this. Should adhere to Play, Store policies. So. What about the other type of embed ability. Now. If the key differentiator of the web is its. Power of distribution. Can. You take native. Content and then leverage, that power to distribute, it widely and, the. Answer is yes, using. Web assembly. Now. Webassembly lets you run your, high performance. Low-level. Code written in C and C++ and. Run. It within the browser in a, much more efficient, manner and, I think again you have learnt all about it today, so. Webassembly also has broad support across. Many, browsers and devices. So. Let's look at a few examples. Now. AutoCAD took. Their 35, year old codebase. By. The way that is older than the web itself and it's. Now running it in the browser, as, a proof of concept and it's. Going really well now what an amazing, achievement, and. If I the web developer, you're not that familiar with AutoCAD. Or you don't use AutoCAD as much you. Might be familiar with figma, which, is a software, that you use to, design your web interfaces.

Fitme. Has been using web assembly, to, run their C++, code within, the browser and the. Biggest benefit, figma saw from. Using web assembly was faster load time in fact. They are seeing 3x, the, load time after. They switch to web assembly. Okay. So let's talk about the last superpower, of the web which. Is the web's ability, to transform. Now. As we've seen throughout, this talk the. Digital, ecosystem, is getting more and more complex, and it's. No longer about worrying. If your page can render, in the browser. You. Don't have to worry about platforms, apps, and new computing, surfaces, that, all seek, for, your attention, so, how do you keep up with this. And. Maybe it doesn't make sense to publish, a dedicated, UI for, all of these surfaces. Your. Content, might be universal, but your UI is, increasingly. Custom, to a particular, surface. So. It might be interesting to see how, your publish, endpoints, can be seen as separate entities like. Let's say business logic content. And UI. Now. In a typical web page loaded, in a browser, all three, are combined to. Form the user experience, that you control, but. You might have noticed that some of the mark-up that you use lets. Your content, act independently. And. I'm talking about structured, data here which. Is a way to mark up your pages so. Platforms, like Google can. Better understand, your content, and can transform, it if necessary now. The. End result, is that, your web content which, was previously, coupled. With your UI can. Be decoupled, and transformed. Into a richer, UI, within. Let's say Google search. Now. You in this example you can see snippets, events and products, and many, more areas. Shown here with a very rich UI that, shows up within Google search so, in a way this extends, your presence, beyond. Your core page. Now. Earlier we talked about how the assistant, can become a good refer, to your site. But. What if you want to trigger a quick action, before it even gets to your site now. What's neat about this ecosystem, is that. To. Enable actions on Google for your content, you, don't have to create something from scratch because. You already mark, up your group pages, to describe your content, Google. Can automatically. Generate actions. For the Google assistant, with, a corresponding. Entry in the, assistant, directory. So. When users ask the assistant, for one of the available content types. Assistant. Is able to serve it up easily and now. We are already doing this for podcasts, recipes, and news verticals, and. As. A site owner now. You can go to the console, and claim, your, claim. Your site content knowing. That has already been transformed. For, use with the assistant. Okay. So, as web developers you. Have made huge investments in, the, web in the web, platform. So. It's only logical that, you should be able to leverage this when new markets, or platforms. Open up and there's. A way to do that now. Recently in India we. Announced this part platform, which is powered by Google pay. Our. Spot is a digital, front, for a business, that is created, branded, and hosted. By the business, but. Powered, by Google pay now. Users can discover a spot. Online. Or at a physical location by, scanning a QR code and, transact. With the merchants safely. And securely all within, the, google pay app, now. The good news is a spot is built using, HTML. And JavaScript. So, as developers you can leverage your, existing. Investments. In the web and, transform. It into a spot by just adding a few lines of JavaScript code. Now. This makes it possible for merchants to have a truly scalable solution. While, maintaining the, consistency. Of your user flows across different platforms and. Google. Is not the only player who's doing this, WeChat. Lets you do something similar on their platform, as well. So. To recap the four superpowers. The. Web is capable. You. Can do almost anything, with the web today, the. Web is interoperable you. Build something work once, and it works almost everywhere. So. Web is embeddable, you. Can embed web tech into, native platforms, and bring, native, to, the web and the.

Web Is transformative. Your. Web content can, adapt and cede, new platforms. So. Now that we have discussed the main superpowers, of the web here's some things to ponder, and reflect, on. Are. You building high quality, content. Are. You building highly, performant, sites. Are. You taking advantages, of all the capabilities. That the web has to offer so, that you're creating the best experience. For your users. Are. You really designing for a post destination. Web. You. Know that users are accessing your site through all these non-conventional, means, how. Are you ensuring, that your site is interoperable, and, embeddable. Is. Your web presence modular. Are. You designing your site in a way so that you can leverage your investment and, apply. It, a cross platform so a new, technology, comes in you're ready. Now. You might leave c.d.s today and say. Hey this is all great. I have to think of all this technical, debt that I've accumulated and deal with all these performance, issues, now. It's, not that different than, the sound engineer, at a concert, who, has a stare at this jumble, of cables, and try to like make things work, but. I ask that you leave that aside for a moment. Now. Just like fans like me demand. An amazing. Experience, at the concert. We. Are on the cusp of the. Ambient, web and our users are demanding, an amazing. And immersive, experience, from us and, as. You probably learned over the last two days there's. Tons of capabilities. And tools that you can leverage and. Now that you learned about all the super powers of the web, now. The only thing needed is your. Creativity, and your imagination. So. I can't wait to see what you'll build. Let's. Go put on an amazing show thank. You.

2019-11-15 11:53

Other news