pwa_mobile

How to improve mobile experience?

Development / eCommerce / Tips / VUE STOREFRONT

How to improve mobile experience?

The e-commerce sector is continuously evolving. Strong competition means that it is necessary to keep up with trends and even overtaking them by a step. One of those trends is- the mobile experience. Most online marketers neglect it. Especially when they see that their conversion rate achieves higher values ​​for stationary devices, they put all of the energy into optimizing the site for them. However, this is a big mistake. It’s not said that desktops should generate more of your conversions than mobile devices. You can have a high conversion rate when your mobile version is optimized.

« Mobile gap »

Imagine this: mobile devices account for 70% of total internet traffic, the remaining 30% comes from computers. However, mobile phones are responsible for only 20% of total e-commerce sales – the remaining 80% are responsible for stationary devices.

This significant difference between the volume of website traffic coming from mobile devices and the value of the revenues generated by these devices is our « mobile gap« .

Statistic says that over 4.5 billion people already are active on the Internet. Over 4 billion users use mobile access. Quite impressive numbers, don’t you think? So, here is the question- how to improve the user experience with the mobile site and keep a potential client for the longest?

Numbers based on: statista.com

On mobile devices, it is difficult to browse and learn about new products

First of all. All you have to do is implement some user-friendly rules. You may ask how you can do that. It’s all about optimization of the purchase process to make it available for mobile users.

Tips related to the convenience of use with one hand:

  1. Don’t hide the menu icon
  2. Do not use ambiguous, unsigned icons
  3. Display menu for most of the screen
  4. Allow users to jump efficiently between categories
  5. Ensure that users can leave the menu
  6. The buttons must be large enough
  7. Place two products on each row on the category
  8. Let filter results with one-touch and make it fullscreen
  9. Adjust the size of « Add to basket » section to fit the screen size
  10. At cart put a product picture first
  11. Adjust CTA to the entire screen width
  12. Simplify the header and footer

Second of all. You have to be familiar with the technologies of creating your mobile content. If you meet users’ needs, their user experience will increase.

Mobile-first

The idea of ​​mobile-first is to focus on building your mobile version rather than a desktop one. So instead of cutting functionalities of your product for smartphones and tablets, you can start from a very functional phone-friendly version, which will then be expanded to larger screens (called a progressive enhancement).

Imagine your mobile site in the form of a narrow column. Put the essential content, buttons, articles under the heading, and then go to less important elements.

« What gives us this? ». You get a professional website that is optimized and loads quickly.  The mobile-first solution puts special emphasis on task – views are devoid of unnecessary « additions » and focus on specific goals. All of the essential contexts must be in a place where it will be easy to click on it while holding the phone with one hand. This is to speed up the conversion process and make it easier for internet users to navigate the page. That’s why most of your future clients will choose the smartphone instead of the desktop- convenience, and transparency. With the following of mobile-first, instead of thinking about « What to cut, » you move on to product development.

RWD

The solution is more universal and involves designing the site according to the principles of Responsive Web Design. What should you know? Responsiveness is today’s must-have – makes websites automatically adapt to different screen sizes. So users can use tablets, smartphones, laptops or TVs – and on every device, they will get the content you want.

The responsive website automatically adapts to the standards of mobile devices. It reveals the possibility of free content management, and changes introduced in the CSS are visible to both stationary and mobile users.

It promises to be perfect, right? However, remember that the universality of the solution involves some compromises that should be discussed with the graphic design team.

A mobile application is not enough.

Web applications are starting to replace standard websites. From month to month, they become more and more convenient to use, they aren’t associated with one specific device or platform, and their updates are trouble-free. Users want to buy mobile. How to respond to this need? A new way is needed here: e-commerce needs complex, sophisticated web applications that can improve user experience.

SPA

Single Page Application is, in a nutshell, the path to creating websites consisting of loading the entire look of the page once. As the user performs various operations, the site downloads and replaces only the data, it needs.

There are many solutions to create a SPA. Depending on the size of the project, they can be: Angular, React, Ember, or Vue.js (also used in PWA). The website works faster because the view of our page or application is created only once, and individual elements are replaced only when necessary. Thanks to this operation, our browser performs a smaller number of actions, which is associated with increased efficiency and the impression that the button clicked immediately reacted.

PWA

Progressive Web App is a web application that uses modern network capabilities to provide users with a similar experience to a dedicated native application. These applications must meet specific requirements, are implemented on servers, accessible via URLs and indexed by search engines.

But what is the difference between web application and the native mobile application?

A native application means that the product is created on a dedicated platform, e.g. iOS or Android. It must then be written in the appropriate language for the platform (Swift / Objective-C or Java). It also gives us full access to phone components.

In turn, the web application can be treated as a development of a responsive website. In technical terms, it’s a web application. However, the user who uses it may get the impression that it’s a native application because of also operating in offline mode. Not only will he be able to connect it on the desktop, but he also will see that it has a dedicated icon.

What requirements must your mobile application meet to be called PWA?

  • supporting a secure HTTPS connection
  • responsiveness
  • having a Web App Manifest file, i.e. a simple JSON file that informs the browser about the application and how it should behave after installation on a mobile device or computer
  • must load quickly
  • must work on all browsers
  • each subpage should have a separate URL

PWA applications have some restrictions on native applications. In particular, this applies to phone capabilities that cannot be reproduced on a website. In addition, they cannot do everything that mobile applications are capable of. Because they are written in JavaScript, they are not as efficient and optimized as applications written in Kotlin or Swift.

+

The most significant advantage of PWA applications is their availability. They can be installed almost independently on the phone’s operating system. This benefits both developers and users, because the developers will not have to create separate applications, and there is even the possibility of using their offline mode. Chrome browser allows convenient and direct installation of applications from a website.

Vue Storefront

When talking about PWA for e-commerce, the best way is if you take a look at Vue Storefront.

Vue Storefront is an open-source project created by Divante based on vue.js (javascript library used to build web applications based on MVVM (ModelView View Model) architecture). It can be integrated into various e-Commerce backend. Practically regardless of what engine was used in your store, it can easily access the store’s offer on your devices.

Example:

You run a business and sell clothes on the platform. Your prospect (suppose his name is Peter) is about to buy his wife the birthday dress she was dreaming about. Peter is on a business trip and is just sitting on the train. He starts browsing the offers and, at the moment, no longer sees your products on the screen, but « There is no Internet connection ». He is getting annoyed because he realizes that he may not have time to buy. I bet it will affect his user experience. And what if you give him the opportunity to view these offers even without the Internet connection?

Offline possibility of browsing pages is a great way to improve users’ experience. And it’s an answer to how VueStorefront helps improve your mobile app/site.

We, as Bitbag, face everyday challenges regarding the above technologies. With each project, we become more and more aware and we can pass this awareness on to others. If you are currently struggling with any of the problems listed above (or maybe a new one), just contact us using this link or using the form below. You can go for more to improve your and the user’s mobile experience!