Annual mobile ecommerce sales are expected to exceed 7.4 trillion USD in 2025, with mobile devices now accounting for more than 44% of all traffic to ecommerce websites.

Considering mobile commerce’s dominance, merchants must invest significant thought and effort into how their site appears and functions on mobile devices.

With that in mind, here are some top tips for optimizing your ecommerce site for mobile—starting with the hugely important autocomplete function.

How autocomplete makes or breaks mobile search

Anybody who’s ever Googled anything has experienced search autocomplete. As you type, the search engine predicts your query to help you find what you need faster.

When implemented correctly, good search autocomplete functionality assists and guides users toward better search queries.

According to the Baymard Institute, when autocomplete queries are done well “inspire users about the types of queries to use, teach correct domain terminology, help avoid typos, and assist users in selecting the right search scope.”

On mobile specifically, autocomplete query suggestions are also helpful in reducing typing during query formulation.

Research carried out by the Baymard Institute reveals users struggle with typing on mobile more than they do on desktop. Thus, any shortcut that autocomplete query suggestions can provide offers users a way to avoid struggling with the mobile keyboard and potentially introducing typos.

Eight is enough for mobile suggestion lists

As you can imagine, a poorly designed autocomplete interface makes it extremely difficult for users to understand the options available within the function, and can either overwhelm the consumer or lead to unexpected, and potentially undesirable, interactions.

The first rule of designing your autocomplete is this: The number of suggestions should not be more than the searcher can see. While this rule stems from ease-of-use reasoning, there is also a secondary problem caused by a long list of suggestions: choice paralysis.

Autocomplete suggestions should be limited to a max of 10 on desktop and eight on mobile. There should be at least four suggestions on both devices.

Dark backgrounds sharpen focus on search options

When designing your autocomplete on both mobile and desktop, you also need to think about how the overall page will look to the shopper, including the area outside the autocomplete box.

It’s important not to distract the consumer when they have already initiated a search and started engaging with the autocomplete function. One simple UX tweak can ensure this: darkening the page background while autocomplete is active.

This gives the autocomplete a stronger emphasis, minimizing elements like ads, carousels, and other page content that could interfere with the search process.

Adding a subtle border around the autocomplete function can create even more depth and make it easier for the user to focus on the suggestions offered.

Visual distinction between typed text and suggestions

Another best practice when designing your site’s autocomplete is stylistically highlighting the difference between words that match the search query and words that are autocomplete suggestions.

There are two ways of doing this: 1) Highlight the characters already typed, or 2) highlight the suggestions being made by the autocomplete.

While both types of unique styling can reduce the visual burden for users, highlighting the query characters helps the user gloss over repeated words, giving them less to read.

In the latter alternative, the prediction is emphasized, which helps draw attention to the suggestions, allowing the user to ignore the characters they have already typed.

Both methods are effective ways of differentiating between the query and the suggestion, thereby speeding up the process for the user and helping them make their next decision quicker and easier.

Tap-friendly design prevents customer frustration

There’s one aspect of mobile autocomplete design that seems obvious, but it’s an aspect many merchants accidentally overlook: readability.

Regarding the dangers of poor readability (and clickability) in a mobile autocomplete function, the Baymard Institute said it best:

During our mobile testing, autocomplete suggestions separated by insufficient spacing and styled in small font sizes made it difficult for participants to view and select suggestions.

Indeed, when inadequate spacing and small font sizes are combined, it contributes to mistaps that leave some users puzzled upon arrival at unexpected results pages.

Indeed, when inadequate spacing and small font sizes are combined, it contributes to mistaps that leaves some users puzzled upon arrival at unexpected results pages.”

To resolve readability issues within autocomplete, use legible font sizing, ensure suitable spacing between tappable elements, and provide hit areas of an appropriate size. Finally, presenting autocomplete suggestions in lower case or title case (or “headline-style”) makes for easier readability than all uppercase text.

Forgiving typos means finding products faster

Now that you know what design elements to incorporate in your autocomplete function, you should be thinking about the suggestions themselves and how they are presented to your valued customer.

One of the most useful capabilities you can infuse into this process is spelling tolerance. Your customers are only human, and when on mobile they’re also struggling with a small screen size. Mistakes will happen. Therefore, your autocomplete needs to be able to deal with the typos it will inevitably be faced with.

Since autocomplete plays such a key role in early search interactions, unexpected suggestions due to minor typos can cause users to change their product-finding strategies by seeking other browsing methods or reworking queries, and, in the worst cases, contribute to abandonment downstream if alternate product-finding strategies don’t quickly lead to relevant results.

Since spelling errors in search queries do occur with significant frequency, autocomplete’s relevance can, and should, be enhanced by mapping misspelled words to meaningful autocomplete suggestions.

Better search tools transform browsers into buyers

Overall, testing has revealed most mobile users will struggle with issues that they don’t face to the same degree when browsing desktop sites. Despite this, the trend toward mobile ecommerce continues to accelerate. For most ecommerce sites, nearly half of their traffic is now on mobile, and some verticals have almost exclusively mobile traffic.

As ecommerce activity increasingly takes place on mobile, it’s more important now than ever before that the mobile user’s experience is smooth, from arrival on the site through successfully placing an order.

An ecommerce site’s autocomplete is a big part of that shopper journey, which is why it’s so important to perfect this capability’s design and functionality. Data shows that searching shoppers convert over six more than those who browse, so by lowering the barriers of their search journey – with rapid relevant suggestions, correcting typos and removing distractions – they will add considerably to the bottom line.

Want to learn more about how Merchandising Cloud can help you optimize your search function to get more conversions? Get a demo.