Designing for the Future - Progressive Web Apps (PWAs)

Photo by Christopher Gower on Unsplash

PWAs are not apps in the same way that traditional mobile apps are; but instead, they are applications that run on a browser yet function like a desktop or mobile application. Google was the original pioneer of the PWAs.

How to Design for PWAs

Designing a PWA requires a specific mindset: Forget everything you know about conventional web design in terms of visual design and interaction patterns, and instead imagine you’re designing a native app.

Pay attention to the details of native apps, since they have given users expectations around touch interactions and information hierarchy which should be matched in PWAs.

• Screen transitions should be fast and shouldn’t be affected by blocking on the network
• Tappable areas should give users touch feedback
• Accidentally touching an element while scrolling shouldn’t trigger touch feedback
• Touch interactions should be implemented very well, or not at all
• Content shouldn’t jump as the page loads
• A page should maintain its scroll position if a user presses “back” to revisit it
• Buttons and “non-content” shouldn’t be selectable
• Inputs shouldn’t be obscured by the keyboard when it expands
• It should be easy for users to share page content
• Use system fonts
• Avoid overly “web-like” design

Ultimately, as a designer, it’s your job to bring the best possible digital design solutions to your users. PWAs are a great middle ground for designers (and their respective companies/clients) to consider, as they offer speed, efficiency and familiarity to users; as well as flexibility for your company or client.