Menu
Menu Sheet Overlay
Search
Search Sheet

Mobify PWA Feature Considerations

In this section understand some of the design details with Mobify PWA features.

During a Mobify PWA build, designers play a key role in bringing the new user experience to life. Together, the following Mobify Platform features enable a state of the art browsing experience:

Home Screen Icon

You will want to create icons (in iOS and Android formats), for when the user chooses to add the site to their mobile device home screen. While Android home screen icons are exported with transparency and shadows, Apple home screen icons are exported as squares, with the effects added by the OS. A useful tool for this is AndroidAssetStudio.

Homescreen icon example

Note: The Android home screen icon will appear in the centre of the page when the home screen app is launched, along with the app name in a native font. This cannot be changed.

Loading Animation

Loading animation example

A loading animation will be required to seamlessly link your pages together. This should be a looping animation created in a flat HTML file and a flat CSS file (that is, no compilation). You may want to create a mockup for this in a prototyping tool like Principle, or code it directly in something like CodePen. Because the loading animation occurs before the browsing experience, it’s critical that the loop loads quickly.

Offline States

The offline state is required when the user is browsing without an internet connection and cached content cannot be loaded.

Offline states example
Offline states example

This state usually has an icon, supporting text, and a retry button, which refreshes the page. You will have to consider the interface requirements based on the user’s actions. For example, a full page warning will be required in case the user travels to a page they haven’t previously visited, as it would no longer be available in the offline state. For pages that the user has already viewed, a simple toast-like warning may be all that is required.

Page Skeletons

Page skeleton example

Page skeletons should be designed for cases when the page has loaded, but the content has not yet been returned. This is important to give the user a sense of ‘progression’. The page skeletons are placeholder shapes that visually represent the layout of the content, usually in a light, monotone colour.

Pinned Navigation Bar

App-like navigation bars, such as sticky headers are recommended to improve the browsing experience. (Mobify PWAs can be loaded in a full screen mode which displays only the site content, without the browser interface. This provides an app-like user experience.)

Pinned navigation bar example

Sharing Panel

It's important that global share functionality is integrated into the design, as the browser will no longer have its native share function. (This happens when opening a Mobify PWA site directly from an Android home screen. In this case, browser chrome is hidden for a full screen experience, so the user won’t have their native browser functionality).

Sharing panel example

Category Navigation

Category navigation example

You can improve the user experience through the use of bigger icons for the main categories, and larger touch targets for the calls-to-actions.

Payments

Payments example

With the addition of new payment options like Apple Pay, Android Pay, and the Payment Request API, there are more opportunities than ever for shoppers to make quick payments.

As a designer, you have control over how these options are triggered. Where will you put the “Buy Now” button? How will you avoid overwhelming the shopper with checkout methods?