PWA Design
At Divante.co we are developing an open source PWA (Progressive Web App) eCommerce Frontend App called VueStorefront.io. Because of that we have learned a lot about designing for PWA (Progressive Web Apps).
#ICYMT— PWA will be Hot
We recently published The eCommerce Trends 2018 Report. We asked managers about their eCommerce investments last year and about investment plans for this year. We see that Managers plan to increase spendings on PWA about 200%!
PWA Strategy
In western world the typical strategy is to build a separate app for each main function/group of users. So…Facebook has 16 apps.
But there is only one Facebook website. So the first question is — how many PWAs do you need, and is a one PWA enough for you?
You can split your websites into subdomains and then prepare a separate PWA for each domain. For example, eCommerce, Product Magazine, Customer Care, etc.
This is all about customer expectations and you should think about this before start. For many businesses there will be only one App of course.
The PWA Ready Team
The most interesting challenge will be to educate your web-team about PWA and mobile design. A PWA is more like a website from a technological point of view and more like a mobile app from the user experience point of view. So you should think about extending and training your frontend development team.
PWA/Mobile Approach
It’s good to think about a PWA as a native app when you design it. Users will treat it this way. This is why native apps will be your inspiration and your benchmark. Avoid web-based UI elements like footers, for example. See how apps show this type of information and use this approach instead.
No Browser = No Safety Net
When a PWA is running in full-screen mode there are no Browser functionalities to help the user. This makes apps look good, but this also creates some risks. Without a Browser, there is no safety net for you — no address bar, no progress indicators, no SSL icon, no navigation buttons. Remember that the back button is the most frequently used navigation element in the web.
You must think about your own navigation. A safe choice is to keep a small and easy to use navigation bar in your app.
Navigation in PWA
Users will expect your PWA to behave like a typical app. For example, when they get back to a previous page, you should retain the position of content or listings.
Be careful about rich touch interactions — it’s quite hard to code them very well and a bad implementation can ruin your UX. For sure gestures can’t be the only way of navigating in your app.
Again, a good idea is to keep some simple navigation at the bottom of the screen. This will be your safety net.
Content in PWA
Usually, apps show content much better than typical websites. For example, apps use skeletons to show the content positioning even before its arrival.
Use placeholders for content while downloading. You can also use low-resolution images while downloading full size versions.
Remember that users may like to share content from an app — allow them to do so.
Cache in PWA
Caching is an interesting challenge for your PWA. You can use service workers to run your PWA off-line but you must be careful when you implement eCommerce or transactional websites. You must think about dynamic elements like product availability or promotions.
You can, for example, allow users to use your eCommerce app for first 30 minutes without an internet connection and then just inform the customer that there is a risk of product unavailability. You can still synchronize orders later and, in the worst-case scenario, inform user that he or she needs to amend the order due to changes in product availability.
Booting
Remember also that those PWA apps need to boot when they start for the first time. This is something slightly different from apps so you can prepare users for that with some cool UX features.
Payment
Mobile abandonment rates exceed 80% when customers are asked to input their credit card details. Recently, Google introduced the payment request API. This eliminates checkout forms and allows merchants to request and accept any payment in a single API call. You can use a mechanism like this to streamline the checkout process.
Touch
Users will expect that touch to work like in an apps. For example, tappable areas should give touch feedback.
Remember that touching an element while scrolling is not clicking but… scrolling. This is quite a common mistake when it comes to mobile websites.
Smooth User Experience
Sometimes you really need to dig deeper to develop an app-like, smooth user experience. This is what Twitter did for a good UX of long lists in their apps.
We implemented our own virtualized list component; it only renders the content visible within the viewport, incrementally renders items over multiple frames using the requestAnimationFrame API, and preserves scroll position across screens. – Twitter
Design
For any PWA it is good to use standard device fonts to make the design more familiar to the user. If you really need to, try to use Images or SVG instead of custom fonts.
Inputs
Ensure inputs aren’t obscured by the keyboard. This is a common problem and can ruin your conversion rate.
Sources
While researching PWA Design, we found some really interesting sources. We used the know-how from some of them to write this article. Feel free to check them:
Designing Progressive Web Applications for the Future
Designing Responsive Progressive Web Apps
5 ways to ensure a great UX for progressive web apps
Introducing the Payment Request API
Designing Great UIs for Progressive Web Apps
Mobile Commerce Trends 2017: Opportunities and Challenges With Statistics
Listen In: Five Mobile Commerce Predictions for 2017
ps. If you are interested in PWA, feel free to check out our Open Source PWA eCommerce Storefront.
This story is published in Noteworthy, where 10,000+ readers come every day to learn about the people & ideas shaping the products we love.
Follow our publication to see more product & design stories featured by the Journal team.
→ To hear from me in the future, subscribe to my monthly newsletter (by Revue).
