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.

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.