Progressive Web App Design Best Practices
Below is an excerpt from the Awwwards ebook — Progressive Web Apps the Future of the Mobile Web.
As the name suggests, PWAs are applications that use web technologies to give us the best of both the web and native environments. They are delivered in a progressive way, which means we don’t need to build them in different formats: we deliver a basic solution as a website and add extra functionality as we go. — Chris Heilmann
Design For All Your Users
Developing a PWA demonstrates that a company is prioritizing their users’ time, delivering faster loads and more engaging functionality. Progressive PWA features should therefore accentuate the experience, not distract from it. Before deciding which features to add, ask yourself why a user is coming to your site: a well-designed PWA should make it easier for users to complete their goals.
Below are the top PWA UX best practices:
Less is More — Online, people tend to scan rather than reading in detail, and prefer not to sift through too much information. If an element on your site has a low Click Through Rate (CTR), it’s possible your users can’t see its value or relevance. To address this, prioritize the primary Call-To-Action (CTA) and remove elements with low engagement, which in turn will reduce your page weight. Have a clear and memorable value proposition in a prominent position. Tip: Avoid automatic sliders.
Be Consistent — Ensure fonts, media, and images have a consistent look and feel and contribute to the overall brand strategy. Tip: Retrieve custom fonts on subsequent loads and use device fonts whenever possible.
Perceived performance — Let the user know that they’re making progress by loading skeleton screens and using transition animations. This should help reduce bounce rate and encourage users to wait to continue their journey (or return if a connection is interrupted).
Navigation — Keep the navigation simple, fast, and at the bottom of the viewport, making it easier for users to find their way around and return home when needed.
Reduce Friction — Make procedures as smooth as possible. Users tend to have very little patience when tasked with completing forms and finalizing the checkout process. In fact, the most common reason for a user abandoning a cart while shopping on mobile is “problems entering personal details” (see chart below). Tip: use express checkout solutions like Autofill, Web Payments and Onetap sign-in to collate everything a user needs at checkout, while keeping information safe and secure.
Push Notifications — Push notifications can increase user engagement, but they carry more impact if delivered at the right time. Don’t force the user to opt in on the homepage. Imagine walking into a store and immediately being asked by an assistant if you want to be kept updated in future. But if you’re trying something on, and someone politely asks if you’d like to know when it be comes available in the right size, you’re far more likely to say yes. When push notifications add real value, users are far more likely to opt in.
Accessibility — When we say a site is accessible, we mean that the content is available to all, and can be operated by absolutely anybody. Web Content Accessibility Guidelines (WCAG) 2.0 is a set of best practices put together by experts to address exactly what “accessibility” means, and how to deliver it. WCAG is organized around four principles, often referred to as POUR:
• Perceivable: Can users perceive the content? Just because something is perceivable with one sense, such as sight, that doesn’t mean that all users can experience it.
• Operable: Can users navigate the content? A hover interaction, for instance, cannot be operated by someone who can’t use a mouse or touch screen.
• Understandable: Can users understand the content? Is the interface clear, and consistent enough to avoid confusion?
• Robust: Can the content be consumed by a wide variety of user agents (browsers)? Does it work with assistive technology?
2019 is the year to build your Progressive Web App.
