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.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Building a UX Strategy: 7 Key Steps

Meetup Feature Integration (Conceptual)

Top 10 graphic design magazines from around the world

Signal iOS Case Study

App Design Inspiration — #56

🔴WE’RE LIVE IN 1 HOUR! The SDG Global Festival of Action is finally here!

Let’s Stop Talking About Human Error: It’s Your Product

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sanam B.

Sanam B.

More from Medium

A collaborative project from Masai school.

publishing your website

Privacy defaults and choice architecture for Metaverse

Web design art