This useful guide will give you a simple and straight-forward Best Practice overview for Progressive Web Apps, according to Google Web Developers Forum, allowing you to answer an all important question:
"Is my App up to scratch?"
Introduction
Progressive Web Apps are experiences that combine the best of the web and the best of apps. They are useful to users from the very first visit in a browser tab, no install required. As the user progressively builds a relationship with the app over time, it becomes more and more powerful. It loads quickly, even on flaky networks, sends relevant push notifications, has an icon on the home screen, and loads as a top-level, full screen experience.
What is a Progressive Web App?
PWA's are:
- Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.
- Responsive - Fits any form factor: desktop, mobile, tablet, or whatever is next.
- Connectivity independent - Enhanced with service workers to work offline or on low-quality networks.
- App-like - Feels like an app, because the app shell model separates the application functionality from applicationcontent .
- Fresh - Always up-to-date thanks to the service worker update process.
- Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with.
- Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it.
- Re-engageable - Makes re-engagement easy through features like push notifications.
- Installable - Allows users to add apps they find most useful to their home screen without the hassle of an app store.
- Linkable - Easily share the application via URL, does not require complex installation.
Google and AnswerLab conducted a research study to answer this question.
Mobile users are very goal-oriented. They expect to be able to get what they need, immediately, and on their own terms.
The study was held through 119 hour-long, in-person usability sessions with participants in the US. Participants were asked to perform key tasks across a diverse set of mobile sites. iOS and Android users were included, and users tested the sites on their own phones. For each site, participants were asked to voice their thoughts aloud as they completed conversion-focused tasks like making a purchase or booking a reservation.
The study uncovered 25 mobile site design principles, grouped into five categories.
Home page and site navigation
Success: Focus your mobile homepage on connecting users to the content they’re looking for.
Keep calls to action front and center
Make secondary tasks available through menus or “below the fold” (the part of the webpage that can’t be seen without scrolling down).
Keep menus short and sweet
Mobile users don’t have the patience to scroll through a long list of options to find what they want. Reorganize your menu to use as few items as possible, without sacrificing usability.
Make it easy to get back to the home page
Users expect to go back to the homepage when they tap the logo in the top-left of a mobile page, and they become frustrated when it isn’t available or doesn’t work.
Don't let promotions steal the show
Large app install interstitials (e.g., full-page promotions that hide content and prompt users to install an app) annoy users and make it difficult to perform tasks. In addition to annoying users, sites that use interstitials may see a negative impact to their search rankings.
Site search
Success: Help mobile users find what they’re looking for in a hurry.
Make site search visible
Users looking for information usually turn to search, so the search field should be one of the first things they see on your pages. Don’t hide the search box in a menu.
Ensure site search results are relevant
Users don’t scan through multiple pages of results to find what they’re looking for. Make life easier on users by auto-completing queries, correcting misspellings, and suggesting related queries. Rather than reinventing the wheel, consider robust products like Google Custom Search.
Implement filters to narrow results
Study participants rely on filters to find what they’re looking for, and abandon sites that do not have effective filters. Place filters above search results, and help users by displaying how many results will be returned when a specific filter is applied.
Guide users to better site search results
For sites with diverse customer segments, ask a few questions before presenting the search box, and use the customer’s responses as search query filters to ensure that users get results from the most relevant segment.
Commerce and conversion
Success: Understand your customer journeys and let users convert on their own terms.
Let users explore before they commit
Study participants were frustrated by sites that require upfront registrations to view the site, especially when the brand was unfamiliar. Although customer information may be integral to your business, asking for it too early may result in fewer registrations.
Let users purchase as guests
Study participants viewed guest checkouts as “convenient”, “simple”, “easy”, and “quick”. Users are annoyed by sites that force them to register for an account when making a purchase, especially when the benefit of an account is unclear.
Use existing information to maximize convenience
Remember and pre-fill preferences for registered users. Offer familiar, third-party checkout services for new users.
Use click-to-call buttons for complex tasks
On devices with calling capabilities, click-to-call links enable users to make a phone call by simply tapping a link. On most mobile devices the user receives a confirmation before the number is dialed, or a menu is presented asking the user how the number should be handled.
Make it easy to finish on another device
Users frequently want to finish tasks on other devices. For instance, they might wish to view an item on a larger screen. Or they might get busy and need to finish later. Support these customer journeys by enabling users toshare items on social networks, or by letting users email themselves links from directly within the site.
Form entry
Success: Provide a seamless, frictionless conversion experience with usable forms.
Streamline information entry
Automatically advance to the next field when a user presses Return. In general, the less taps the user must perform, the better.
Choose the simplest input
Use the most appropriate input type for each scenario. Use elements like datalist to provide suggested values for a field.
Provide visual calendar for date selection
Clearly label start and end dates. Users should not need to leave a site and check a calendar app just to schedule a date.
Minimize form errors with labeling and real-time validation
Label inputs properly and validate input in real-time.
Design efficient forms
Take advantage of autofill so that users can easily complete forms with pre-populated data. Pre-fill fields with information you already know. For example, when retrieving shipping and billing addresses, try to userequestAutocomplete or enable users to copy their shipping address to their billing address (or vice versa).
