Alright, so you’re fully on board with the web app revolution. That’s great. But considering this is new ground to tread, we’re all a little short on guides and guidelines to follow when we’re designing one. But rather than thinking of that like a problem… Think of it as an opportunity. We can reshape the internet for years to come! It’s every youngster’s dream.
So what kind of design principles should you follow? Here’s a brief list of some of the things we think you should keep in mind. Starting with…
Plan, plan, and plan some more
Just because you’re designing something new, that doesn’t mean that the very basics of the job go out of the window. Before you design your web app, take the time to plan the layout and navigation, just like you would for any regular site or app. So the first thing that we recommend as best practice is to wireframe your web app before you start putting your ideas on the screen.
The reason, as always, is that it’s far easier to design your site correctly first time than it is to redesign it, especially when it comes to layout and navigation. If wireframing isn’t something you normally do when you design, it’s simple: either by hand or using one of many freely available or paid-for tools, draw brief sketches of what your web app should look like.
Planning before you dive in takes restraint, but it’s worth it in the end. It will give you a clear recipe to follow which will help you complete your objective of helping users through your web app… And in the long term, this can only increase conversions and engagement.
Simplify the complex
Design, generally, is better when it’s simple. But that’s especially the case for mobile web design, where one of the first things you should take into consideration is simplicity. Designing for desktop is a completely different kettle of fish to designing for mobile, and one of the main reasons why is that you have to keep things simple. That’s a task in and of itself.
First things first, there’s far less space on a mobile phone screen. And not only that, but apps typically utilise less content than mobile web pages- so you might have even less to work with. So when you’re designing a web app, you have to make use of the space that’s available to you.
At the same time, especially because space is at a premium, you have to make sure that you don’t leave the UI looking cluttered and ugly. One of the strengths of web apps is that they’re visually appealing in the same way as a premium app or well designed, bespoke page. So it should be simple and fluid, but that shouldn’t come at the expense of your web app looking good.
Play to the strengths of PWA: make it seamless
Because of the primacy of native apps, smartphone users have come to expect seamless performance. That means that after the initial purchase or free download of an app, it will open up and work ‘just like that’. Practically immediate loading times, swift and good looking transitions and constant functionality with no downtime are par for the course for native apps. And because that’s what Progressive Web Apps offer, that’s what you have to offer in your design.
This influences design from beginning to end. So upon loading, for instance, your web app will take advantage of JavaScript caching to load instantly. That’s a good start, but throughout the entire design of your web app, transitions should be smooth and seamless. And whether users are submitting a form or processing a payment, it should feel flawless. Always remember that you can lose a tremendous amount of leverage over a consumer with a bloated form or a complex experience.
Put the user centre stage
From top to bottom, you should always think about the customer and their intent, their experience, before anything. That’s UX design, after all. You should be shaping the design of the mobile experience with their priorities in mind.
No matter what they’re trying to do, the user should always feel like they are making headway towards their particular objective- be that booking tickets, booking a table or booking flights. They should never be made to feel like they have to grasp around to find where they’re going, and should never feel like they’re going backwards. Prioritising their mobile experience with this in mind will make conversions skyrocket.
The first thing to do is to cut away anything unnecessary: like we said, you should keep it simple. Try to cut down on the bloatware, and don’t build in any pages that just aren’t necessary. Not only that, but there should always be crystal clear navigation menus and breadcrumbs so that your users don’t get lost. Bear in mind that just because you can navigate your web app, that doesn’t mean that your users can. How do you know if you did a good job with navigation? There are plenty of tells, but the only way to get a full picture is to talk to users. The bad news is that it’s easier said than done. However, if you lack internal expertise, consider hiring a UX agency.
Don’t overwhelm your users
When users come across your web app, your brand style and imagery should be obvious. But there’s a difference between it being obvious, and hitting users over the head with it. If everything from tone to style is brand-oriented, it’s going to come across as shallow and unappealing: so try to cut your brand down to size, and create what we like to call a lite version. It’s everything there is to love about your brand, but not enough to turn users off when placed in the small confines of a smartphone screen.
The tone you use should reflect what your brand stands for. It should be vibrant, sexy, reliable- or whatever you feel fits best. But at the same time, you shouldn’t fill the mobile experience with text. Far too often people see the mobile world as the same as desktop, when in reality, people have less time to spend on a mobile website, and even less time to read your millions of words. So users browsing on their smartphones don’t want War and Peace, all they want are the Cliffs Notes. Don’t overwhelm your users with too much text.
Make it fast
In the world of the digital- and even more so in the world of the mobile- speed is absolutely central to a satisfying user experience. If a website takes more than a few seconds to open, we’ll abandon it. If signing up to a website or an app takes too long, we’ll quickly lose interest. And this isn’t just to denigrate ‘users’: it’s all of us!
It’s purely psychological. We all of us have been taught, slowly but surely, to be less patient. Terrestrial TV has been largely taken over by on-demand services; our weekly shop can be ordered online, without having to leave our chairs, and brought straight to our doors; it’s all so practical and so easy, that there’s no wonder we’ve become less patient. So when you’re putting together your web app, you absolutely must make speed and efficient navigation the absolute beating heart of your design.
Without it, users won’t know where to go, and won’t have the motivation to get there. But if your app loads quickly and is easy to navigate, you’ll enjoy a dramatic increase in converting users to customers. This includes making use of ‘service worker’ JavaScript code, using navigational tools like breadcrumbs, and having a clear path to the end goal, be it buying or subscribing.
Above all… Don’t try to reinvent the wheel
This is our last point, but it isn’t the least. When you’re designing your web app, it might be tempting to throw all caution to the wind and to try to reinvent the wheel. What do we mean? Well, this is new ground for mobile web development: so why not try unusual designs and layouts to see how they work? New kinds of menu navigation, maybe, or unusual transitions.
We advise against it, and here’s why. Progressive Web Apps aren’t a revolution, only evolution. They aren’t intended to shake up web design from the ground up- only to make mobile web browsing a little more convenient. And that’s exactly what they do. So any radical changes to layout or design only serve to hinder that aim, and do so by confusing users. Ultimately, this does nothing but drive them away rather than draw them closer.
And really? That’s the main thing that we’ve learned today. We don’t recommend anything that you wouldn’t already call best practice, to be perfectly honest with you. Make it load quickly. Make it easy to navigate. Make it pleasing to the eye. And try not to overwhelm your users!
It’s not rocket science- so we’re looking forward to seeing your very own version of the future of the mobile web.
To learn more about the PWA features supported by AppInstitute, click here.
One thought on “UX Best Practices for Progressive Web Apps”