- March 6, 2020
There is a lot of buzz surrounding progressive web applications now. The movement towards PWA’s has yielded significant results for some businesses recently including examples such as Twitter and Flipkart. It has been proven that using a PWA can increase the time spent on your site and increase conversions. You can see what areas of your PWA you should test here in our previous post. The increase in online shopping, especially on mobile, should encourage companies to try and get the most out of their PWA’s. The focus will shift from just having a PWA to customization and individuality. Here are the areas you should focus on when deciding which elements should stick on your PWA.
Order Customisation
With customization being an important aspect along the consumer’s buying journey it is important to optimise your product pages. On desktop, it is easy on most websites to customize your products and watch the colour or features change as you check out different options. Dealing with a smaller screen while on mobile it is important to make the most out of a 5 or 6-inch screen.
Depending on your business area customization elements may differ. Uber Eats order customization is a good example of how you can customize elements of a meal. In terms of physical products like clothes, the screen should always display the item while having all customization options just below the product. The product should stick. If there are numerous options for customization that requires scrolling, then the product image should remain at the top of the page while the options become scrollable.
If the product remains as an element that is stuck it decreases the likelihood that users will bounce from your site while increasing the CTR to the next step in the sales process.
Navigation Bars
You would imagine that sticky navigation bars are simple and straightforward. There are several areas where small improvements to the navigation bars would improve overall experience and usability. Your top navigation bar should be small and contrasting in colour with your main background. Usually, this will contain a sidebar for categories, account settings, and popular pages. This is accompanied by a search bar and a basket to access the items you intend on purchasing on online retailers.
A second navigation bar may be implemented on your PWA if it improves usability. These usually contain some of the most popular categories available. The top navigation bar element should stick but the second is variable. If it may take away from the overall user experience, then the second navigation bar should be able to collapse so it can be removed from the user’s view.
Some sites also utilize bottom navigation bars in order to make it easier to use and bounce back and forward across different areas of your PWA. A bottom navigation bar is not always a necessary addition but is used very effectively across social media sites like Facebook and Instagram. The bottom navigation bar does not always have to be available. You can choose to activate it during specific times of the sales funnel. It can be used to get a quote or get in contact.
Widgets
An example of widgets stuck on some Progressive Web Apps is Twitter’s button to compose a tweet. It is stuck on the bottom corner but is still large enough to cover some of the content. For Twitter, it is not that bad but for other sites, it can be an irritating feature. One of the main sites that do this is content. A content site ends up covering some of the content on the bottom of the screen to suggest more content. Instead of constantly covering content wait until they are 70-80 percent down the page to display a sidebar that suggests more content.
The only reason it works on Twitter is that it provides some extra value to the user. Every component that is on your PWA should always add value to the user. If it doesn’t add a constant value to the user, it should only appear at times when it will improve user experience.