3 common design mistakes for mobile websites

3 common design mistakes for mobile websites the Baymard team of UX researchers and Edward Scott released the results of a comprehensive study on the current state of the mobile user experience. So here I will discuss 3 common design mistakes for mobile websites with details.

I found this study so interesting that I think it is worth discussing some of the findings with you. If you have an e-commerce and you want to position yourself correctly in the market of our era, I think it is a good idea to take note.

Some numbers from the Baymard team study

· 289 user sessions / test site
· 2,597 usability and user experience problems on mobile devices
· Database with over 12,000 manually reviewed mobile website items
· 9,000 best and worst practice examples of US and European benchmark e-commerce websites

In this article, I share with you 3 of the most common mistakes and oversights on e-commerce websites, which have a mobile version, according to Baymard's conclusions.

Mobile home page

According to Baymard's benchmarks and scoring methodology, "Landing Pages" for mobile websites have an average performance between "mediocre" and "fair".

It is worth noting that behind this average there is a “generalized distribution of results, with 50% of the websites” having a “mediocre” or “bad” performance.

This is mainly because:

· "95% of mobile websites place ads in the main areas of the home page," leading to distraction issues, interaction issues, or other general issues.
· 57% of mobile websites "do not provide full scope in link text of suggested routes." This causes users to lose the context of "where they are in the hierarchy of the website" and abandon the purchase thinking that the website does not have the "specific products they were looking for".

Search on the mobile version of the website

According to the study, the average mobile website performs “'mediocre' when it comes to search, with 34% having 'broken' experiences and only 40% having a rating of 'fair' or better”.

This is because when designing, desktop search experiences are simply emulated without taking into account the unique special context and usability of mobile devices. It is not enough to be " responsive ".

The main problems detected were the following:

· 68% of mobile websites do not offer "relevant autocomplete suggestions for misspelled search terms and queries." Almost everyone in the world who uses the Internet uses Google, and they are waiting for this functionality on your e-commerce website.
· 79% of mobile websites don't include search scope in autocomplete suggestions. Category scoping suggestions if well implemented "help users avoid having to deal with excessive and irrelevant results, ultimately saving them time and helping them focus on the most relevant results more quickly."
· 40% of "mobile" websites do not visually distinguish product autocomplete suggestions from query suggestions. Not visually distinguishing product suggestions from the query suggestions create a jarring user experience, as "most users expect to explore products through search results, but end up on a single product page."

Mobile forms

Forms, due to their complexity, always generate more worrying results. According to Baymard's results, the average performance of forms on mobile devices is “poor”. Only 22% of websites perform "fair" or better. "33% of websites have this functionality totally 'broken'."

Baymard's team identified the following issues:

· 62% of mobile websites "don't dynamically change form labels from the top of fields to left-aligned in landscape mode." This is important because some users prefer to write with their mobile facing horizontally, and they can lose context while filling in the form.
· 69% of mobile websites "do not present, position, or design error messages correctly" and users are unable to resolve errors. What makes them abandon the purchase out of frustration.
· 25% of mobile websites "do not have an address validator or an address lookup feature." This can lead to cascading problems caused by inaccurate addresses.
· 50% of mobile websites have an excessive number of form fields displayed by default. This is a feature that you should take into account, because according to another Baymard study, 23% of "users have abandoned a purchase due to a too long or complicated process".
· 79% of mobile websites don't check the "required" and "optional" fields consistently. Users need high consistency in the purchase process throughout the website if they are to provide information.
· 61% of "mobile websites do not use the keyboard layout" appropriate for one or more fields. This is particularly important so that the user does not have to switch between numeric keyboards to the standard keyboard layout. By changing "one or two attributes in the input field code, you can instruct a user's phone to automatically display a specific type of keyboard optimized for the input requested."

Conclusion

On the website of the Baymard Institute you can find much more information about the discoveries of its UX researchers. But I think that with the values shared in this article you can understand that your eCommerce website also needs to fix some of these 3 common design mistakes for mobile websites. If you need help, don't hesitate to contact us!