If you haven’t already heard, mobile is the future. In the US alone, mobile market penetration stands at 79.3 percent. Worldwide, over 1.42 billion smartphones have been sold worldwide. Mobile is steadily growing and more people are spending time on it not only on apps, but on the web as well. Besides optimizing your site for mobile, you’ll want to ensure your page search is also mobile friendly.
Mobile Page Search
While smartphones might be getting larger, navigating around a site still comes with its own set of challenges. Navigating category menus and tapping links is still tedious due to the small size of the screen. Mobile search is increasingly becoming popular as it requires fewer on screen taps and can bring up exactly what users want. However, a poorly designed mobile search page can be disastrous. Luckily there are a few simple things you can do to improve the user experience.
Search Box Appearance
Mobile users generally are more pressed for time than their desktop counterparts. That means they want everything easy to find, including the search bar. Instead of using a simple magnifying glass for the search button, use a bold and open search field. Treat it like a call-to-action – that means use contrasting colors from your main menu and header and place it at the top of the page. Users will zero in on the search box and know immediately what to do.
If you have multiple icons at the top of your page, make sure you space the search far enough away from the other icons to reduce mistaken tap. If you go the icon route, place it on the top right as that is the most conventional location on both mobile and desktop.
Search Box Behavior
Once visitors have tapped on the search field, a native keyboard will automatically pop up. Make sure you disable autocorrect for mobile searches as it presents a few challenges:
- If you’ve implemented autosuggest you want customers to focus on this feature as it suggests various items in your catalog. Besides, if it is working properly, autosuggest should also correct any misspellings.
- It takes up too much screen real estate making it harder to see the menus and catalog.
- The dictionary will not recognize brand and product names and automatically try to correct it, leading to failed searches.
Completing the Search
Once your customers are ready to search, what button do they press? If you don’t make it obvious, most will probably press the “Done” button, but all that does is close the keyboard without performing the search. You’ll need to make your search button very obvious. Again, think of it as a call-to-action button. Make sure it stands out from your background and use a bold color that will catch people’s attention.
Autosuggest, when done properly, can be a huge asset to your mobile search. The trick here is space out your links to avoid accidental activation of the wrong product. While it might take up more screen real estate, it’s better to use larger text and buttons to avoid issues. You’ll also want to make sure buttons are cut off by the keyboard as it suggests there’s more below the fold.
Emphasize Category Suggestions
Rather than pull up a specific product, have your autosuggest show category results. This can potentially guide customers to make a purchase as they then have the power to refine their search based on their needs. A product title doesn’t offer enough context, especially early on in the discovery stage.
Reduce Menu Sensitivity
While you don’t want customers to tap on a button multiple times, you also don’t want them to accidentally activate a button when they simply meant to scroll through the autosuggest options. You’ll want to adjust it so it reacts to a strong tap. Something as simple as this can significantly reduce customer frustration.
Search Result Page
Instead of creating a whole new page design for your search results, why not use the template from your category page? Not only does this increase conversion, it also saves you time and keeps the design consistent across the board. You can also use many of the same features on your category page onto your search result page such as sub-category refinement for more guided selling.
Of all the features in mobile search, filters are one of the most important as it allows users to quickly and easily find the exact product they want. They can adjust by price, best rated, and so on. The trick is to make sure they know this feature is available by making it stand out from the header menus.
Show Search Query
There’s no shame in giving customers a helping hand in remembering what they just looked up. They don’t have perfect memories so be sure to put the search query where you would normally put the category title. It isn’t just about jogging their memory, however. If you use autosuggest, users could have mistakenly tapped the wrong suggestion so something as simple as showing the search term can let them know if they’ve landed on the right page or not.
Mobile Friendly Error or Zero Results
It’s easy to forget about the error page or zero results page as it’s a simple template. However, if you don’t have a way for users to get back to the main page, it’s an easy way to lose business. Make sure visitors can resume their search immediately without having to press the back button multiple times.
When optimizing your site for mobile, don’t just focus on your main category pages and shopping cart experience, make sure to put in effort into your search experience as well. Most users don’t have the time or patience to click through all of the categories on your page to find what they are looking for. They want results quickly and if your search isn’t easy to use or browse, they will quickly move on to your competitors.