Progressive Web Apps (PWAs) bring app-like experiences to the web. Through PWAs, Mobify aims to create fast, fluid, frictionless mobile experiences that look and feel the same as a native app.
What makes an app-like experience?
Built into the core functionality of a PWA are techniques that make browsing feel 'native'. Instant page transitions and offline caching mean content is loaded quickly on low or no connectivity, without the feeling that a new page is loading each time.
It is up to the designer to build on these capabilities to communicate a feeling of fluidity and high performance.
Designing app-like experiences
Good use of page skeletons and loading animations can create a perception of high performance for the shopper, helping to close the gap between loading content and browsing.
Read this article to learn more about perceived performance best practices.
Smooth transitions and user feedback
Interactions that are responsive to a user's gesture are synonymous with apps. Swiping to open or close menus, tap states that react instantly to touch, and smooth scroll effects are just a few examples of these responsive interactions.
Offline mode feedback
Mobify PWAs allow the user to view previously-loaded content while offline, which means that shoppers can continue browsing, even if their network connection becomes limited. Designers should craft the UI elements that will help communicate this state. These can include banners, 'retry connection' buttons, and the use of grayscale on links to pages with no previously loaded content to show they are unavailable offline.
Add to home screen
Shoppers can add PWAs to their home screen if they're using a supported device. This makes the PWA behave like a native app: they will be able to access the PWA in their app launcher, device settings and task switcher. To encourage this app-like behavior, designers should include an app icon in every PWA project. It's also ideal to explore alternative navigation patterns for users loading an app from this view, due to the loss of the Back and Share buttons previously found in the browser chromes.
In terms of navigation, home pages with large category tap targets provide user-friendly jumping off points for the shopper, as opposed to the 'web-like' approach of nesting everything in a navigation drawer. Below are a few examples of different ways you can arrange large tap targets:
While desktop sites often contain global footers with social media links, newsletter signups and privacy statements, this type of content is best left off your PWA app footer. Global footers that contain lots of non-contextual content and links clutter up the small screen, and interfere with the user's current task. In the PWA environment, designers are encouraged to reposition this content into areas where the shopper is more likely to engage with it:
- Offer newsletter or push notification signups on the PDP when items are out of stock, or after a user has made a purchase.
- Place company-related links (for example, Careers, or About us) into the main menu.
- Include any social media links in this area of the main navigation, away from the core task of browsing products.
Read this article to learn more about footer design best practices.
Logging out of a user account on a native app is not a common task, so it can be presented lower in the visual hierarchy. Cookie length is defined on the client side, however, designers are encouraged to communicate the need for extended cookies to the client in order to provide a continuous login to mobile shoppers.
Rule of thumb
These examples are just a few ways to create an app-like experience. In general, always consider how your shopper's behavior would occur in a native app, and adjust the web experience accordingly.