Hello. And welcome to Babylonia, week number five, my, name is Craig and I'm an Amir product, lead for progressive, web apps at Google joining. Me today in the second, half of this stream will be my good friend and a pataga who, is a mobile user experience specialist. Here at Google. In. This session we'll, be talking about progressive, web apps and how they have the superpowers, of the web and native, apps combined. We'll. Talk through the capabilities. Of PWS, how. To deploy them and you. Expect practices, to ensure a great, user experience. If. The title seems familiar you. Might have heard about the ebook myself, and, some of our colleagues recently, published, with Awards. In. This session today we'll. Talk through some of the chapters, from the e-book and because. The book is a PWA itself we'll, be using it in some of our examples. After. The video you can check out the whole book at the URL on the screen but, please wait until after the video to do that stay, with me you, still have very. Good. Let. Me take you through the agenda for today. I'll. Talk about what the installable progressive, web apps are and their, benefits, plus product, strategies, on deploying, PWS Anna, will. Then go through some patterns, for promoting PWA, installation, before, speaking, about UX, best practices, for designing installable, and reliable. PWA experiences. And talking. Through a case study as well, finally. Both, myself and Anna along with some of the other ebook, authors will, be will be available, for a live Q&A feel. Free to write any questions you have in the box below the video and we'll do our best to answer at the end of the session so, first. Installable. Progressive, web apps what. Are they what, are the benefits to. Start. With let's, talk about the web the. Web has two, distinguishing, superpowers. The. First is the widest, reach of any, platform, spanning. Every kind of device in screen size the. Second, is links, that, enables, search indexing for organic discovery and trivial. Sharing of content and services, between users, with, just a URL. These, superpowers, have made the web unstoppable. As a platform on desktop, for. Example, productivity. Apps such as Google's, G suite Microsoft. Office 365 Tremeloes, slack these. Have been around for a long time as desktop, web apps. However. On mobile, instead. Of the web native. App stores are often thought of as the go-to, app platform, for both users and developers. While. Browsers remain central, for users on mobile every. Device now has its own App Store which has changed user. Behavior. Users. Have learned that the devices store, is where they can install. Software, that's. Made for their device, why. Is this, well. From. A developer, perspective many. Of the capabilities, that require, deep integration. Into the underlying, operating system were, previously unavailable, on, the web. These. Days the. Web natively supports, almost any capability that, an application, might need including. Media. And streaming media access capturing. Photos, and, videos, from any camera on the device, shape. Detection, including, barcode, and face detection. Biometric. Authentication, including. Face and fingerprint. Bluetooth. And, NFC. Native. Access to contacts, native, file system, access and many. Many, many more like. You can see here in the graphic on the screen. Be. Sure to check out the web capabilities project. Also known as project fugu, for, a full list of what's being worked on. Progressive. Web apps are a pattern, for building great, apps that use web technology, they.
Have All the, features. And functionality, users expect, from a modern app on mobile or desktop that, includes. All the capabilities, they just mentioned plus features, like instant. Loading or flow, modes, push notifications. And install. Ability. Progressive. Web apps combine. The superpowers, of the web reaching. Link ability with. Those of native applications. Namely, device integrations. PWS. Can be discovered, in the web browser and used immediately. Content. From pwace, can be shared with a URL and the person receiving the URL can access the content whether, they have the PWA, installed, or not and, if. The user chooses, they. Can install, the PWA, and get the device integrations, they expect, from an app such. As being. Accessible, from familiar, discovery, and launch services, for the device like the home screen and the app tray a. Standalone. Experience, separate. From the browser and. Native. Device services, such as the app switcher, headings. And because. PWA, is built directly on the web it, means you can maintain one, code base that works for visitors in the browser and. Your installed users, you. Can reach anyone, anywhere, on any, device with. A single codebase. That's. Pretty, super. Progressive. Web app install, is supported by all major browsers, although, the install experience, does bury on the, left is the default install prompt experience, on Chrome Android. Both. Chrome and edge, on Android offer full control over the install prompt experience and later, Anna will talk about customizing, this to increase, your install rates in. The, middle is, the experience, on Android Firefox, see. That icon in the browser bar that has the plus symbol users. Can install by tapping on this icon. Safari. On iOS requires. Users, to manually, install pwace, from the Actions menu there. Is no default prompt, and. We'll speak more about creating an install prompts like the one on the right here for, Safari later. PWA. S can also be installed on desktop, from chrome and edge browsers, on all operating, systems including, a chrome OS Linux. Mac and Windows users. Can tap the install icon, in the address bar like you see on the left here and once. Installed, desktop, pwace, can be launched from the app tray into a standalone, experience, like you see on the right. And progressive. Web apps can be published to the Google Playstore and discovered. Alongside any, other app listed, there, this. Is done using an open standard called trusted, web activities, and a. PWA published in play is, like any, other Android app except. It's built with the web, these. Apps are great for users as they are small in size generally, under, 2 megabyte, which is great, for storage conscious users and there's. No need to constantly, install, updates, as changes. Made to the PWA, are immediately, available in the end, they're. Great for developers, too as you, don't need to maintain a separate, Android codebase, if. You'd like to learn more about how to publish a PWA, in play you. Can check out web dev, slash using, the PWA in your android app, now. Let's talk about product, strategies, for progressive, web apps. While, acknowledging the, benefits, that PWA offer like, saving, development, costs from a single codebase and, reaching. More users with smaller, file size applications. Businesses. Sometimes, still have concerns about how to best the floor deploy pwace. In a manner that complements. The existing native, applications. I'm, going to talk through strategies, that reflect how businesses. With various. Needs can. Use PWS to offer the, best possible experience to. The largest number of users in the most cost effective manner, and in complement, to native applications. Before. Getting into that I want, to touch on the value of app users. Businesses. Often report, that native app users are the, most loyal and. Valuable with, a higher customer lifetime value when, compared, with web users, a, native. Experiences. So, much better than web experiences, or. Is it simply that the most loyal users are more likely to install an app. Data. From various businesses across, the globe suggested. The latter. Here's. One, example, the. Successful, online fashion shop about you deployed. A progressive. Web app and offered, install from the browser in, addition, to their native application. Which is available in play they. Found that users who have installed the PWA, generate. 5 times, higher sales, than, the average mobile user and that, they behave similar, to users of the native app. Installed. In an app whether it's a PWA or a native app generates. Business uplift, so maximizing, the total. Installed user base makes, a lot of sense, now. Into, the strategies. The. First one is to go all-in on web and rely solely on a progressive web app to deliver a great experience to.
All Users cost, effectively, with. One code, base and design resources. Can be focused on building new features and experiences. Rather, than maintaining separate, platforms. For. This strategy, develop. A great PWA, and also, publish it in play. From the browser promote, PWA install, and in play users can discover and install the app. This, strategy is best for businesses that don't, have a native app already or, have, an outdated app or, have an app that relies heavily on, web views already. The. Main pros of this approach is that it consolidates all, mobile development, into one codebase and provides. A consistent, user experience no. Matter how users discover you. The. Main corner, of this strategy is if. You need some functionality. That's not available on the web this. Won't work but. For most of you just, won't, be a concern. The. Second, strategy is to, complement, your existing native. Apps with, a light app, the. Terms light, and go, we're going to differentiate the, lighter, faster. However sometimes less, specialized, web-based experience, from, that of a native app for, businesses that are looking to offer books for. This strategy build. A great PWA, and, also, publish it in play alongside, your existing, native application. From. The browser promote. The native app install, to all users but. If they decline. Promote. The PWA, using a light value proposition, in. Play. Use, light naming, for the PWA, there so, that users can differentiate. From the native app and choose their preferred experience. This. Strategy, is best for businesses, that already have, a great but maybe heavy, native, app and want. To grow the installed, user base by offering a better experience, to users on mid. To low end devices, this. Is particularly. Important. For businesses, with growth ambitions, in emerging, markets, where, data plans are expensive, storage. Space is limited and devices, can be low-power and. Also. Remember that even in developed, markets there. Are a large number of people on mid to low tier devices, as well, the. Big, advantage, of this strategy is that you can expand, your reach to users, who would never previously, install, your app and grow. Your installed, user base even, further. In. Terms of cons well, there. Aren't that many big ones it, does require managing. Two listings and play and. Using analytics, to thoughtfully segment, users for promotional PWA, or native, app from the browser. The. Third strategy and the last one I'll go through is to help get as many users installing your apps as possible, by minimizing, install friction, this. Is best for businesses, that can offer a comparable. Experience across PWA, and native, applications. For. This strategy, develop. A great PWA and continue. To build great native applications, as well when.
It Comes to promotion in the, browser the, least, install, friction, is PWA, install as it only takes two, taps and users. Don't need to leave the browser at all from. Play having, just one listing, the native application, means, the user doesn't have to choose between different, versions of the app their attempt. To avoid promoting, your PWA in the browser to, users who already have, the native app installed, is to, use the get installed related apps API you. Can check that out at web dev slash get, installed related apps now. This is an ideal, strategy to reduce the install friction and make promotional, strategies, simple, the. Main cons is that it does require maintaining, both PWA, and native, applications. When there's little. Difference in the experience and there's. No light option, for users discovering, and play. This. Is a safe, option for those businesses, that already have great native apps and want, to grow the total, install base by using PWA, to complement. Existing app, strategies. That's. It from me I'll. Now hand over to Anna who talked, about UX best practices, for pwace, thank. You very much. Thanks. Greg hello. I am Anna I am a mobile user experience specialist. At Google and I'm going to take you through the patterns, for promoting progressive, web app installation, speak. About UX, best practices, for installable, and reliable. PWA, experiences. And present, the case study from weekend, desk. So. Promoting, progressive, web app installation. Should happen, at the right moment, in the user journey. The. Best practice here is to customize your, visuals, copy. And design in, order to align with both with, your brand identity and, your customer, needs. Chrome. On Android allows. Fully, customizable. UI prompt, but, first you. Need to make sure to, prevent, the default experience, which triggers, the, mini info, bar. The. Mini info, bar was. Only intended, as a temporary, solution it's. Not really. The best user, experience since. Its generated. By the browser and it has no way to know when, is the right moment to, appear, it. Just shows up as soon as soon as the site passes, since the mobility criteria, and the user engagement, measure. So. To recommend, the best practice here is, just, to stop, the meeting info bar from showing and instead use a customized, UI prompt, you. Can check out the web dodaf resources, here on the slide to learn on how to technically. Do, that, also. As Craig has mentioned before, don't, promote your PWA to users that already have. The native, app installed. Use. Their get, installed, related, apps API to identify. Users who don't have the native app and show, the PWA, prompt, only to them you. Can also check out the web the deaf resources, here for more details, and. Really. Important, implement. Latex, to, measure and optimize the, install funnel, we have a whole chapter in this in the e-book so do, go and check it out. There. Are a few best practices for. Customized. Installed, products. The. First one is to appear, where, appropriate, the, ground, rule here is not, to ask users, to install the PWA, on their, first visit, instead. Consider, prompting. Already engaged, users, for, example when. They have used certain, content, or completing. The tasks on their, second, visit, another. Rule is to, use a value proposition, it's. No secret that all people, need motivation, to complete any task so. Do motivate, users, to install the PWA by, explaining, why they should be doing this and what, they will get at the end. The. Third rule is to use visuals, to illustrate, action. Mother. Nature, has built into their brain, the ability, to recognize images, instantly. That's. Why visuals. Icons. Pictures. Illustrations. They, are a very. Important. Signal, they help to illustrate the content, and functionality. So, that the users brain recognizes. And, understands. Things faster, so. Do include icons, such as a, download, icon or an install, button to illustrate, the user the actions, they should take, and. Lastly. Integrate. With the UI. Pop-ups. Have historically. Become really. Popular for promoting app, installs, however. Every. Pop-up is earnest to intrusive, experience. Which will likely, get ignored, or dismissed by, users, less. Less, intrusive experiences. Would lead to higher, engagements. So prompts. That are integrated. Within the UI as part, of the site are more, likely, to be well, received by. A user in. The mission. Right here you can see an example of a customized, install, prompt that I have, created it. Looks. And feels native, to the UI it. Contains, a value, proposition and, some visuals and it, appears, at the right time. Here, are some more visual, examples, of how, you can appear where appropriate, throughout. The user journey, okay, each. Of them the, blue box is the example, of prompt. So. On the left hand side is an example of placing, the prompt, within. The side, navigation panel. When people are accessing. The, menu, this.
Makes The install prompt, always, available to the user, discoverable. Throughout the journey without. Being, too interruptive. In, the. Middle is more, of a classic, install, banner that, you might trigger once, sometimes someone. Has viewed multiple, pages or visited. The site more, than once and on. The right hand side is an example of a post purchase prompt, when. Someone, has just completed. A key task like, a purchase, it is a good time to ask them to install, first. Of all you, are not interrupting and then, if the user has just purchased, something it is a strong signal that they will likely, to, also install. With. The value proposition, first of all, remember. That you need to focus on, the benefits to the user but not the app features okay this, is a quite, a basic sales principle, you need to speak about what, the about, the user and what the better version of themselves they will become if they install. The app, also. Remember. Users are not very technical do, not use any, complex. Terminology. Like PWA. And. Another, like more general, rule avoid, negative wording. For, example, if people. See something like don't, worry about this, then there, is a full up question. In the Hat appearing. Or like why should I be, warned. Now. Moving on to best, practices, for integrating within UI and here are more visual examples, do. Use a native looking field to create less. Intrusive. Experience. You. Can see that one on the, Left also. Avoid, using pop-ups. Overlays. These are interruptive. People tend to dismiss. Them without, giving proper attention. IRS. Requires, users. To install, from the browser menu. And here, you can also guide users through this process with, an installed prompt that explains, what, to do like I am showing here in this example, when. Someone clicks install, app on the top right it triggers, the overlay. With instructions. And. Remember. On desktop. Progressive. Web apps can be installed in chrome and edge browsers, on all, operating. Systems an icon. Will appear in the omnibox. When, the website is installable, and will wiggle to draw users attention. Consider. Also providing, a UI prompt, to make sure users are fully aware that they, can install the PWA, like, here in this example. Once. Users, have. Installed your app it's. Important, to meet user, expectations. And UX. Best practices, here from, both web, and native. Apps can be used at the same time as an, inspiration. But always just make sure you listen to your users and test, every, of your design ideas. Once. It's installed it PWA will look like any, other icon, on the home screen and it should feel like any other app for, the user, some. Fundamentals. To consider, include. The icons, launch. Screen full. Screen navigation, and color, schemes. So. For Android, consider. Designing. Masks couple icons that can adapt to any icon shape required by the phone manufacturer. You. Can read more about designing. Adoptable, icons, unwrapped of depth, for. IOS, use, regular, iris, I can design guidelines, but, note that is does not use, the icons, from the manifest file so make sure to. Add an app, Apple touch icon need. Attack with, the proper image. Our. Ebook, uses musket-ball icons so you will get this really. Nice looking erica and when you install, our ebook. On. Android, the browser bar can be changed, to mush your brand color, this. Will also affect the standalone, mode. Specifically. The, color of the, system.
Notifications. Panel right, on the top. When. The app is launched, from, the home screen Chrome. For, Android will. Automatically. Customize, the splash screen by. Using things. Like the name, background. Color. And icons. In the manifest, file on the, screen here you can see an example of, the custom, splash screen, of our ebook, it, uses the icon, the W. The. Background, color and the name of the app also. The orange, browser. Bar on the top is sent from is set from the color scheme that I spoke about on, the previous slide. Progressive. Web apps launched, from the home screen icon. Should, open, in a, standalone. Display, mode, to, provide, the experience, consistent. To what users, have come to expect from, native, apps, this. Means the, people here launches, with no browser, bar, in the top and, I just separate, from the browser when, cycling through the app switcher. Along. With an increased above the fold space yay. The. PWA, in standalone, mode don't, have, the, browser navigation, capabilities. Anymore, so for example on IRS, there are no, back or forward buttons, so, do, implement, additional, navigation. Elements, within the PWA, such, as a back, button or breadcrumbs. Or additional. Navigation bar, you can, see the example, of this on the Left also. When. Users are in standalone mode on, both Android, and iOS, the. Browser menu isn't available to. Select the URL and to easily share so. Consider, this point additional. Buttons. Like trigger. The. Web share API, to bring up the native, at the end, I share dialogue, and make it easy for, users to share URLs, with other apps like social, networks. Or messengers. And. Example. Of this is on the right and do also check the web dev for, more information. On the web share. When. Designing for long the screen right of the standalone UI make. Sure all key navigation, items are easily, accessible for. The user in general. The, bottom of the screen and mobile devices, is considered to be a more ergonomic. Location. It's easier, to reach when holding the device with just one hand. So. Consider allocating their, key, call, to actions, destined. A bottle navigation, bar is a good idea in general or anchoring. Modal pop-ups, in the bottom of the screen versus, in the in the center and. If. You offer both, native, apps and progressive, web apps ensure.
Consistent. Navigation, across platforms. To make it easy for users to, switch between experiences. Now. That's it an installation, and post, install, and let's, now have a look into, design. And for offline. Providing. An offline, experience. In a progressive, web app means, a user experience that is consistent, with what people. Would expect from native applications. Which, would often, have, have, some, applying for sure knowledge right well. At least the UI is available. In the apps and the reasonable, error messages, are displayed if, there is any, network. Connectivity, issue. So. When designing your, reliable. Web experience. Think about the connectivity, as something, that is constantly changing, its. State okay, especially, when, mobile, devices, users can, be, traveling. Underground, or entering, elevators. Or just simply, experiencing. Bad, connectivity. Issues, and, providing. An offline, experience. Opens. New ways to engage, with your users and keep them using, you're PWA, in all connection, states on. The left-hand side here you can see some of the basic, questions that you need to think about when you are defining the, offline, experience. On. The right hand side here, you, can see some more ideas for the how might we exercise. If you want to do Design Thinking, exercise. So, on top of the must-haves on the Left consider, also applying, design thinking methods, and brainstorm. With your team on what functionality, your audience would benefit, from when. They are applying and how, to turn the offline state into, a competitive advantage. And. On. The very basic, level at least you need to inform. Users, about the change of states the. Three elements that can be used for that are the, copy, icons. And colors right so. Copy what exactly. You say to users, about the change of state. Icons. How, do you illustrate, the current status and, colors. In case you want to enhance, the message or highlight, the content, available. And. The. Best practice, here is, to use at least two, out of three, signifiers. To, avoid, user, confusion. For. Example, when using just the colors grayed.
Out Certain. Areas, of the website can. Be interpreted. Not only as an offline, state but also as, some of the items are out of stock so just, to make things clear also, use copy to inform, the user. With. Copy there, are a few things to consider, the. First, one is to keep things simple. Remember. Users, are often, not technically, minded they don't, want to know about servers. Being down or something, else so. Also. Avoid blaming, the user for being offline or blaming your own systems, for a bad connection. Instead. You just simply, confirm, the state and tell, people what. Are in the next actions. And. In case the brand strategy, includes normal, language use, it with care as it, can undermine, the, credibility of. Your, product in such a sensitive, moment, a. Popular. UI component, to inform, user about, the change of state is a pop-up toast or a, snack, bar if you want it, can appear in any, place in the UI but, check that on every page it does not block. The key navigation, elements. Besides. The copy the toast can also carry an icon, and a, call-to-action button. For example refresh. The page or dismiss. Notification. In. Addition, to simply notifying. The user that. They are flying many, other types of experiences. Can, be provided. For. Example you. Can, let. The users simply, continue. Browsing when, they are flying you can, also show a static, offline. Placeholder. Page, you. Can be useful, and, show. To users, some crucial information or, updates, you. Can also try, to entertain, users. By occupying, their time so they keep, staying, in the app or. You can let users complete, the tasks, that they started, while, they were offline online. Caching, can be used, to allow users to continue browsing when they are offline, use. Pre-caching, to let the user continue, exploring, important. Areas, of the website such. As top. Categories, or items. On sale, use. Runtime, caching, to make any previously. Viewed page available and, be. Mindful to make users aware of what, content, is available to, browse provide. Appropriate, navigation. And information. On what actions. Are possible. If. No content, is available you, can show a static, content. Page, this. Could contain, some, alternative. Ways to reach, the business, such. As for example store. Locator, or contact. Or get in touch with a call center buttons. It. Can be a feedback, form that will be submitted once the user is back, online. You. Can also show, some relevant, and useful information, from. The users account, for. Example a travel.
Company Could make tickets. Or boarding, passes available a, retailer. Could show. Safe, items. Or items in, the basket because there is this use case that connection quite often goes, off in. The store or the pickup point or in. The entertainment, service could show, users, favorite. Tracks, or favorite videos and. Another. Option is, to provide. A game or puzzle, or fun facts, in order to occupy a user's time while, they wait, for connection. To return and. More. Advanced, of flying experiences. Can, allow users to complete, their tasks, such, as, adding. Items to the cart. Saving. Items to a wishlist, or completing. The form or, even complete, all the details and checkout right up to payment, it. Is important. To reassure the, user they, can continue, their task and their actions, won't be wasted, despite, the enough line and when. The connection is back just inform the user about the change, of state again and update. The content, if there are any changes, required if the. User can be kept within their current context, just reload the page automatically. For them and if, the context, cannot be kept give the user control. To refresh the page with, the bottom, and. Just. To conclude the offline best practices, section, I wanted to say that new, and, unexpected. And unique, of flying experiences. In the web nowadays may. Not just me but they may exceed, user, expectations. And create, the moment of delight that, will turn your web UX into, a competitive, advantage. Now. When creating offline, experiences. Don't. Forget to implement, analytics, so that you can also measure. Find users and events. Offline. Usage, can be measured, by recording, can delay six things when the. User is, Clyde and then replaying, them when the connection comes, back as described, here on, the slide for. Google, Analytics this is readily, available in, a module for the word box library, and means. That all analytics. Events, will still be tracked even, when the user goes, offline. Check. Out the measurement. Chapter, in the e-book for more information. A. Well-built. Progressive. Web app should. Increase, engagement. Speed. Up the page. Speed and. Drive. Conversions, through a meaningful. Offline. Mode and install, ability. So. What is the best way to measure, this and determine, the, impact, as. A. PWA. Includes. A few different technologies, which. Can, be used somewhat, independently. It is advised to measure each, feature, or that's only, to ensure clear, data and. A complete picture on what to optimize, further. We. Can desk is one, of the top businesses, that is offering, weekends, and short thematic, space and they, have created an ultra, fluid experience but. Unifying, their website, and native, app, with. More than 60% of, web sessions, coming from mobile and an, agent Android app, weekend. Desk has a strategic, interest in offering, the best mobile, experience, to its customers. Wigan, desk has gradually, added, modern. Web functionality to. Its mobile site to, transform, it into a true, progressive web app which, makes it as smooth, as a native app. Here. You can see a breakdown of, some of the features, so. For example thanks to the serviceworker the, website is much faster and transition. Between pages, are happening. Smoother, also. If the user loses, their network connection, the wish list is still available which, is a great. Suppliant experience, right and also. On the second page visitor, the user is asked, if they want to install the PWA. So it just does not happen, in the first visit and, lastly. It is also installable. In Google Play Store as well just, like any other Android, app, and. The results, of this is. For. The users the. Same ultra. Fluid experience, across everywhere. On web, and enough. For. The product team past. The deployment, of new features and, lower, cost, with the maintenance of a single, coat and for.
The Business. 2.5. Times, small, conversions. When, users come. From the installed PWA, also. A site which is up, to 30% faster, more. Engagement, and pageviews and more. Time. Spent on site. Now. I want, to thank, you very much for listening to us today if, you would like to learn more about, progressive. Web apps right. Now it is a good time to finally, go and check, out the ebook, well. Maybe not, right now but right after the live Q&A session. Which myself, Craig. And other authors, of the ebook will be answering, in just a few seconds.
2020-06-13