Designing Better Experiences With Progressive Web Apps

This article will look into how Progressive Web Apps (PWA’s) are being designed and developed for users, exploring what benefits compared to traditional websites and mobile apps they deliver.

With some reports stating upwards of a 100% increase in conversion rates, 90% decrease in page sizes as well as the option for Push Notifications there are compelling reasons to consider implementing a progressive web app.

Background

There’s been some significant strides made in the world of user experience and design over the past few years, and with more and more full-time job postings for UX and UI talents, the commercial world can be said to have accepted the benefits that great user interfaces and experiences provides.

Ever since the first websites went online in the previous century, there’s been smart people working on improving the user’s experiences, way before the term UX was coined. But if one considers how far we’ve come in terms of the web, and how much the web has changed, we are still faced with some of the same issues as back in 1990.

Enter the progressive web apps

A few of these issues are being addressed with progressive web apps, such as offline capabilities allowing users to browse the pages already visited, instead of getting a blank page telling the users that they have lost internet connection.

Which screen would you rather be met by, when losing your internet connection?

Default Google Chrome browser offline screen.

Progressive Web App showing offline error message.

This feature alone means that there’s a potential for retaining users on internet with intermittent access, or for users on a limited data plan, it’s possible to keep down their costs, thus improving their experience greatly.

Today, most progressive web apps are being designed to look and feel like a native mobile application, with all the bells and whistles they normally ship with. While it’s up to the individual developers or publishers to design and structure their PWA, the general trend is to emulate mobile apps and utilize existing UX/UI guidelines and principles.

Like mobile applications, progressive web apps can also leverage push notifications, allowing developers and designers to implement functions that engage with the user on a more personal level than newsletters do for instance.

Another great boon for UX minded professionals is that of the installation process. Compared to a mobile application which is downloadable via the official app stores, it takes no extra steps for the user to install an app once that user is visiting the website on a supported browser.

Furthermore, the installation process is almost instant, since all relevant data has already been loaded and cached during the user’s first visit on the website. 

Performance

While speed issues because of page sizes were never really really evident in the early days of the web, due to low image qualities, and overall simple HTML pages with limited functionality, these days things are quite different. Many websites uses a number of large images, some even use videos, and almost all sites use a variety of external and internal scripts such as jQuery and Google analytics to name just a few.

All of this adds up, and while we generally have faster internet than back in the nineties, not everyone has broadband speeds, especially in certain parts of the world. By using service workers and app shells, significant speed increases can be achieved compared to both websites and mobile apps.

Progressive web apps are thus already used on several large sites visited by low speed users, or by users browsing primarily from data limited connections, such as the large indian e-commerce site Flipkart, which saw a whopping 70% increase in customer conversions after implementing their progressive web app, Flipkart Lite.

While India is quite an internet savvy country on the whole, because of geographics, not everybody has access to high speed internet, and a large percentage of indian internet users only have intermittent access, making the country a great place to experiment with progressive web apps.

Designing a progressive web app

Progressive web apps do not need to adhere to any specific form of design pattern to qualify as one, nor do they need to follow conventional methods of interface layouts, however the current trend does just that. Because it works, and because users are already accustomed to these methods and layouts.

The very nature of a PWA is all about improved user experience, since users no longer have to visit the app store and wait for that to load before downloading the app in question. Now it’s possible to download the app directly from the website, push updates and bug fixes without waiting for confirmation from the app stores, and thus delivering better content much faster.

The way this works has to do with the browsers automatically showing a prompt, asking users if they want to add the website in question to their home screen.

Since this comes from a trusted authority such as Google or Mozilla, it stands to reason that it lends a certain level of credibility and might in the future become synonymous with a safe website, regardless of whether people add the PWA to the home screen or not.

A worrying trend

There’s been a slightly worrying trend in a large number of progressive web apps, namely the fact that they’ve been designing the apps to function almost too much like mobile applications, specifically hiding URL’s and using tabs to navigate.

This is either based on a gross misunderstanding of what a PWA is all about, or it is deliberately changing the focus point. Either way, a big reason to use the progressive apps compared to native or hybrid apps are the fact that it’s possible to share URL’s of individual pages, thereby allowing Google and other search engines to crawl and cache the content.

By not utilizing proper URLs and pages, this possibility is lost, and helps to undermine the user experience in fact. It’s important to realize that while not recommended, it’s not disallowed either, although in this author’s opinion, there are few reasons to do so.

After all, since the PWA’s by nature won’t exist in app stores, it’s considered important for them to be discoverable, and by removing URLs from the PWA, that becomes incredibly difficult, if not impossible altogether.

Reported benefits

Google has been showcasing different businesses successfully implementing progressive web apps into their existing channels. AliExpress, a leading Chinese web and mobile commerce platform has seen a 104% increase in conversion rates for new visitors, Konga, a Nigerian e-commerce site has cut more than 90% of their data usage resulting in their visitors having a much faster load time and better user experience compared to their traditional channels.

Conclusion

Since it’s still early days for this new technology, many things are still up for debate, even the requirements of what makes a PWA in general. However, we’ve seen some great results from successful implementations so far, and that promises great things in the coming year for progressive web apps.

It might still be better to wait for more companies to spend time researching and developing a sort of standard wireframe for the progressive apps, as it can be costly to invent everything from the ground up, and then change multiple times before settling on “the way to do things.”