Progressive Web App: GUIDE FOR UX DESIGNER
Part — 2
In Part — 1 of PWA, we discussed on Progressive Web App and their benefits and how it is a good practice.
From a specialist’s point of view, there are several rules developers must adhere to when building PWAs. Similarly, it is crucial for the UX Designer to think about the pros and cons of different Operating Systems and ways to accomplish the best outcome.
This post describes in detail the checklist needed to build progressive web applications from a designer’s perspective.
1. Splash Screen:
The splash screen for PWA apps on a mobile device gives the feel of a native application. While this is a default feature for Android, they need to be independently created for iOS. Splash screens can be displayed until the application is ready to launch.
For the Android operating system, a white screen shows by default. However, we can customize it by displaying either the application logo, application name, or any animation.
Tip: Splash screens for iOS, show two splash screens for an Android user. One way around this glitch is to either show both screens on Android and iOS in the same sequence with some micro animation or redesign the same default screen for iOS and Android.
2. Push Notification:
Push notification differentiates a native app from a web app, and PWAs can send push notifications on both desktops and mobile devices. While Android supports this feature iOS users will have to wait for some more time for it to become available.
Tip: Apple quietly added support for push notifications on its Safari browser. Other browsers on iOS such as Chrome and Firefox, do not support push notifications yet.
3. App Shell:
The App Shell is useful for showing some initial data on screen without a network, similar to what we see on native apps. We can include Header and Footer in the App Shell to keep the user informed in the event of a network failure.
Tip: It is the responsibility of the UX designer to include these to ensure the best experience.
4. Ask Users for Permissions:
While PWAs can access device hardware such as camera and location best practice dictates asking the user for access permissions similar to native apps.
Note: Don’t overlook these basic use cases while designing the PWA application.
5. Add to the home screen:
Android automatically supports a “Add to Home Screen” toast message feature. However, as a general rule, this message should show in iOS by default.
Note: Don’t neglect to design a toast message on iOS separately.
6. Deep Linking:
Deep linking is the usage of URLs within the app that allows the user to navigate to other parts of the app or other locations. In PWA, if a user taps on a deep link, the appropriate page should open. If the user switches between two applications, the app should not start from the splash screen but return to the last known location where the user left it.
Note: Android supports this feature and same has been updated in iOS version 12.2.
Quick toast message keeps the user updated and can be used to show time-critical information or action items. As a designer, it is very important to include the “App Update” message as a toast message, this is a standout feature and one that users should not ignore.
8. Credential Management:
Android users can use the Smart Lock feature. However, iOS users find it difficult to bring and utilize credential data. On Android phones, Chrome always asks users if they wish to store the credential if the user is already logged in to the system.
9. Off-line support:
Offline support is one of the key features of PWA. All native apps do not support (all) offline features all the time. This is a key reason to move from native to PWA. A progressive web app can load the last seen page or save user data even when users face connectivity issues.
Note: Alert users about their offline status.
10. Vibration Alert:
Chrome browser supports vibration alert in Android devices however Safari does not. Looking at Apple’s track record we hope to see this feature enabled soon.
While developers create apps, native or progressive, with certain intended navigation, users often find other ways to use these apps. To achieve better user experience, designers and developers need to anticipate all user touch points and information they would want to see to aid better usage. These ten action items are must-dos for any designer working with PWAs.
Thank you for taking the time to read. Happy Reading!