At the Chrome Dev Summit in San Francisco, Thao Tran and Chris Wilson discussed the user experience benefits made possible by new Web technologies with a number of case studies. Here's my notes from their talk: The new bar for web experiences
- New modern Web technologies provide an unparalleled opportunity to raise the user experience bar for Web sites/apps.
- It's not enough to just provide a useful service, you also have to deliver a great experience. This is what people expect now online.
- The Web is great for reach, but now it needs to get better at delivering richness.
- Progressive Web Apps (PWAs) are really just a higher bar for user experiences. They are not really a new type of app but a way to drive significant UX improvements on the Web.
- Pillars of PWAs Fast, Integrated, Reliable, and Engaging.
- User expect fast loading, instant applications.
- After 3 seconds of waiting for a Web page to load on the desktop, 53% of people will abandon the site.
- The average mobile Web page takes an average of 19 seconds to load on 3G. 60% of worldwide mobile connections are still on 2G networks.
- Ele.me is the biggest food ordering service in China. They serve 260 million users, 1.3 million restaurants, and 99% of their orders happen on mobile. Their Progressive Web App was designed to work especially well in flaky network conditions. They get skeleton screens up in 400ms and fully interactive in 2seconds.
- Fast loading pages is the key goal of AMP pages. After 2 years, there are over 4 billion AMP pages on over 25 million domains.
- Overstock.com has built interactive AMP pages for their product search and browse. They are seeing an 8% increase in conversion and 36% increase in revenue.
- Tasty.com used AMP to achieve first meaningful paint in under 3 seconds using a single responsive code base.
- Experiences built on the Web should feel just as responsive and natural as those built on other platforms.
- People expect apps to launch from home screen, have access to hardware, preserve identity, play media, etc.
- Jio media used the Media API (in their PWA) to integrate media controls and enable offline listening. They are seeing 10% longer average session times then on their native apps.
- Mercado Libre uses Web push notifications to allow buyers to get replies from sellers. Their prompt dialog has a 41% opt-in rate for their Web Push notifications.
- PetLove uses the one-tap sign-in API to get 2x more users to go to checkout signed in. They got 2.8x increase in conversions; 2.7x increase in time spent; and a 8x smaller size site then their native app.
- Starbucks PWA uses auto-sign and provides an offline payment barcode (20% pay with bar code in store) using Service Workers.
- A typical Web checkout experience in 7-8 steps on mobile. Swim Outlet's took 2min+ to finish. They implemented Payment Request and saw 80% reduction in checkout times.
- Web sites typically don't get access to powerful APIs without asking for permission. As a result, people end up seeing a lot of permission dialogs.
- In Chrome for Android, 90% of the time people dismiss or ignore permission dialogs. After 3 times, Chrome blocks this permission request for a week.
- Starting in Chrome 63, these requests will be modal and force people to decide. Which should reduce the number of dialogs people see.
- Without context, sites get 40% less permission grants then those that explain why they are asking.
- People expect their apps to work with a network connection or not. Unfortunately mobile sites are often in an online/offline state due to network issues.
- Uber used a Progressive Web App for global access especially on low end devices. It is 50kb (for the core app) and is interactive in 3 seconds on 2G.
- Instagram uses offline support to allow people to store images when the browser is offline. They start to upload when the connection returns.
- eBay is using service workers to store previously viewed items for offline browsing.
- An engaging app goes beyond being functional and uses today's modern Web technologies to create a delightful user experience.
- Trivago used many of these capabilities in their PWA and saw big results: 67% of users who are interrupted by a period of offline come back to browse and a 97% increase in conversion.
- West Elm launched a PWA beta, ran usability tests, rolled out to 10% traffic, rearchitected their platform to use Web components, then rolled out to 25% mobile traffic. This resulted in 15% increase in average time spent and a 9% life in revenue per visit.
- There's lots of capabilities in PWAs being adopted by many sites all over the World. These companies are raising the user experience bar on the Web and you can too.