The following was translated and edited by the Mockplus team, a faster and easier prototyping tool, for learning and communication purposes only.
In 2016, global mobile Internet usage surpassed desktop computer usage for the first time. According to Google UK research:
“65% of UK adults now use a smartphone as their primary device for accessing the Internet.”
People search for information, buy goods and subscribe to services using mobile devices. This shift in user preferences has led to a dramatic increase in user expectations. Today, most users have little patience for poor mobile performance — if they don’t get what they want immediately, they’ll switch to something else (which is a big hit for an app).
Design a mobile website application, how to capture the hearts of users? First, designers should avoid some common design mistakes and speed things up. Here, I’ll offer some solutions to common problems such as slow page loading, poor login wall user experience, and long payment process.
Slow page loading
With current technology enabling a faster experience, users’ willingness to wait is beginning to decline.
“Two-thirds of mobile web users said the speed required to load a page had the biggest impact on their overall experience.”
Google tested 900,000 mobile web sites worldwide and found that the average time it took to fully load a mobile web page was 22 seconds. In the meantime:
If the load time is longer than 3 seconds, 53% of users will leave the mobile site.
The solution
1. Try to figure out the cause of the slow loading
If slow loading is a common problem on your site, try to identify the cause and fix the problem. Typically, page load times are affected by:
Visual elements (graphics and animation). High definition graphics and smooth animations can only create a good user experience without compromising load times. Therefore, this may be one of the reasons why websites load slowly. It is recommended to read “Image Optimization” for more optimization details.
Custom fonts. As with other resources on the site, downloading custom fonts takes some time to load (more time if the font is on a third-party service).
Business logic. The programming is not standardized enough.
Website infrastructure. The hardware used by the site, such as the performance of the server, the width speed, and the hardware configuration of the server, all affect the loading speed.
2. Test your site
How do I test the performance of my website? Here are two tools I recommend for you. The first is Google’s Test MySite, which provides actionable reports on how to speed up and improve your site based on its current performance.
WebPagetest is another tool for testing and optimizing web site performance that allows you to run a free test on connection speeds of real browsers (such as Internet Explorer and Google Chrome) used by real users in multiple locations around the globe.
3. Use the loading placeholder map
If you can’t improve the actual speed of your site, at least try to make it feel like it’s loading fast — the user’s perception of how fast your site is is often more important than the actual loading speed.
The load placeholder is the version of the page that is displayed when the content is loaded. A placeholder map gives users the impression that the site is running faster than it really is.
Designers can check out the placeholder map in Codepen Example. Its designers take advantage of pressure buffers, using placeholders to give users the illusion that the site is working and content is loading quickly.
Login Wall Settings
Before users can use the application, there is usually a login wall with mandatory registration. The login wall is the main reason why users abandon an application after the first use. The number of users using an app is particularly important for apps with low brand recognition or an unclear value proposition. Therefore, it is advisable to defer registration – offer users a chance to try the service, and they will be more than happy to complete this step.
The solution
1. Use an email address or phone number as the user ID
If you ask users to create a unique username, they are likely to encounter the following problems:
Because the username must be unique, it can take several minutes for a user to get the correct name because the preferred username is already used by another user.
Users might sign up with a username, but after a while, they forget all about it. According to Janrain+Blue, 92% of users give up if they forget their username.
Therefore, allowing users to register by email or phone number makes registration easier and easier.
2. Make password authentication a frictionless experience
Users often forget their passwords and get annoyed when they have to go through the process of resetting them.
What should a designer do? Simplify the certification experience and reduce the risk of abandonment. Log in using a third party (log in using Facebook/Twitter) :
Flipboard allows users to log in through their social networking accounts,
Or fingerprint touch/face recognition login:
The Chase Bank iPhone app offers a one-click login option.
3. Provide other login methods
Provide other login methods based on the information provided by the user. For example, if you have a user’s cell phone number, you can enter a one-time password on the phone.
Long payment process
More and more mobile users are not only using mobile devices to search for goods, but even to pay for them on their phones. This means we need to design shopping experiences for small screen devices and make them as comfortable as possible. But it’s easier said than done, and filling out checkout forms on mobile devices can be a pain. Therefore, cumbersome payment process is the main reason for users to give up payment. Not surprisingly, according to Google:
“50% of users abandon transactions due to an unpleasant mobile payment experience”
The solution
1. Don’t force users to create accounts
According to Baymard Research, forcing users to create an account is one of the biggest reasons consumers give up buying. The right approach is to enable users to make purchases without registering. As a result, apps need to not only provide consumers with a “quick to pay” option, but also make it visible enough (Baymard research also found that 88% of mobile devices support guest payments, which are often not obvious enough to be ignored by users).
Ebay offers two options -‘ Login pay ‘and’ visitor Pay ‘
2. Remember user details
Do not ask users to enter any information they have previously provided. Once the user data has been collected, it can be used for other new transactions by the user. This data could be shipping addresses and payment information, so make sure the user can change it if they need to.
3. Use geolocation data
Instead of asking the user for a shipping address, make their current location the default option for shipping goods. However, the design should ensure that users can easily change the shipping address when they need to.
When the user clicks the “Share my Location” button, the information in the form will automatically fill in the current address.
4. Pay with Apple Pay or Google Pay
When it comes to payment, designers should provide users with as many options as possible so they can choose their preferred method of payment. Apps that offer a variety of payment options, such as Apple Pay and Android Pay, can relieve users of the pain of filling out extra forms when making payments and can provide them with a greater sense of security.
5. Design the “Quick Buy” option
Setting the “quick Purchase” option may be more helpful for older users. When a user clicks the “Buy Quick” button, the site should automatically redirect the user to the purchase information page for confirmation. All common payment methods and shipping addresses should be extracted directly from previous orders.
6. You can use other devices to continue purchasing
While the number of people using mobile devices to complete purchases is growing, a significant number of users use their phones just to browse, preferring to complete purchases on desktop computers. Designers should set “save for later” or “send shopping cart to mailbox” options to help the user complete the payment.
After reading this article (originally published on Babich.biz), do you have more tips for improving mobile web performance? Feel free to share in the comments section below!
Nick Babich
The original link: https://uxplanet.org/mobile-web-when-speed-matters-d371a961cf46