Designing for the Future - Progressive Web Apps (PWAs)
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.