Before analyzing the declared 6 mistakes of the mobile version of the site, let’s figure out why a mobile version is needed at all. According to the latest data.
the share of those users who access the Internet from mobile devices exceeds the share of those who access from a PC by 3 times. And they all expect to see a convenient and informative site that is as similar as possible to its desktop version.
In this article, we will analyze 6 common mistakes of the mobile version of the site that negatively affect its conversion. And we will tell you how to avoid them.
Mistake 1. Poor structure and logic of placing interface elements in the site header.
One of the most important elements of any site is the header or, more simply, the header. This is where the basic information about the company should be located, along with contact details and logo, as well as the navigation bar. The user sees the header first and looks for most of the information in it.
When creating a website interface, UX designers are guided by the “Don’t make the user think” rule, which means not making the user guess where this or that information can be located on the site. The greater the percentage of such “thinking time”, the lower the percentage of conversions.
To avoid this, elements that can create additional cognitive load (for example, icons) should at least add labels so that the user does not have to think about their functionality. And as a maximum, all elements should have a clear structure and placement logic, formed on the basis of user experience. So, the hamburger menu should always be placed on the left, while the “Cart” should always be placed on the right. Phone numbers should be clickable, and clicking on the logo should redirect the user to the main page of the site. Also, all components should have the most understandable design and a single style.
The header should not take up too much space on the first screen. Its “ideal” height is between 80px and 120px. This site will allow you to compactly place the necessary interface elements and not overload the first screen.
Mistake 2. The absence of the “Find” button in the search bar.
Most users have a pattern in which, after entering a query in the search box on the desktop version of the site, they click on the “Search” button using the mouse cursor. At the same time, pressing the Enter key is perceived as a transition to the next line. This behavioral feature is even more relevant to mobile device users and has been noticed when viewing session recordings on many mobile versions of sites.
It turned out that a person enters a query, but does not immediately understand what he needs to do in order to display the search results on the screen. The most difficult thing to deal with this audience is over 40 years old.
Based on this, it is necessary to add a button called “Find” or “Search” to the search bar.
Mistake 3. Lack of target action buttons on the first screen.
Placement of target action buttons not on the first screen or their absence on the page, in general, has an extremely negative impact on conversion. They are exactly those elements that give the user the opportunity to perform a conversion action.
Usually this:
- Adding a product to the cart;
- Placing an order;
- Pop-up form call;
- Sending applications;
- Callback order.
The negative effect of this bug is clearly visible when viewing session records in HotJar or a heatmap of scrolling in Purdy.
The user who enters the landing page of the site has natural questions “how to order a product?” or “how to send a request for a service?”. If he does not find the right CTA button, then most likely he will almost immediately leave your site for competitors who do not have this problem.
Target action buttons must be present on the page and it is highly desirable that they be on the first screen (before scrolling). Also, a good solution would be to pin the main button at the bottom of the first screen.
Mistake 4. Poor content optimization.
The content on the site affects many behavioral factors. So, poorly optimized content:
- Increases the length of the page, which leads to low scroll depth, due to which most users will simply skip some of the content;
- Badly affects page loading speed, which increases the bounce rate;
- Spoils the design of the site, which leads to a decrease in loyalty to the company and brand.
Therefore, it is very important to optimize and adapt the content in the mobile version. For example, instead of placing images in a large size in a column, you should reduce them and place them two in a row. This will significantly reduce the length of the page, which will positively affect the depth of scrolling. You also need to remember about the optimization of product teasers. They can also be placed two in a row.
You should not transfer text, images, graphics, etc. to the extent that they were in the desktop version.
The font size of text and headings should also be reduced. For example, if on the desktop version of the site the height of the headings is 32px, then on the mobile version it is worth using 20px or 24px.
Mistake 5. Slow page loading speed.
Slow website page loading speed is one of the key reasons for low conversions on any website, as users do not like to wait for a long time. They may get the impression that the site simply does not work.
Also, slow loading reduces the effectiveness of the Google crawler, so it takes more time to index web pages.
The strategic goal of any site, which also affects SEO, and usability – is to load faster than the site of competitors.
If you speed uploading, you can increase the number of sales. So, studies show that optimizing site speed leads to an increase in the number of conversions.
To check the loading speed and optimize your site, you should use the service Google PageSpeed Insights. It will also provide recommendations on what to do to speed up download speeds on any device:
- Use modern image formats (Progressive JPEG, WebP).
- Enable Gzip compression.
- Enable browser caching.
- Use CDN.
- Use an appropriate image size.
- Remove display-blocking resources.
- Postpone loading unused CSS content.
- Reduce server response time (time to receive the first byte).
- Reduce the size of JavaScript code.
- Reduce the size of the CSS code.
- Use CSS sprites.
Mistake 6. Narrow banners on sliders.
Many mobile versions of sites have a problem with the correct display of banners on sliders. Most often, they turn out to be too narrow, and the information on them is almost impossible to read. This is due to the use of banners for the desktop version, which is simply proportionally reduced.
Obviously, phone screens are not as big as computer or tablet screens. This is why images that look good on the desktop will look bad on mobile.
This problem is solved by creating separate banners for the mobile version. They should be larger in height, being at least 200-250px, and the font should be at least 14px high.
Avoid these 6 mistakes of the mobile version of your site when designing it – and it will bring you, new customers!