In today’s digital marketplace, spreeing through entire catalogs or copping the latest deal is as easy as a few flicks of the fingertips. Algolia integration partner Shopify expects that mobile commerce will constitute 44.6% of total US retail sales in 2024. They also anticipate that trend rising since 60% of American adults surveyed claimed shopping via mobile is most convenient.
Opportunities on mobile are ready to be captured, and it all starts with search.
However, when it comes to search, conveying your desktop on a mobile device is more than just a 1:1 reproduction. The physical and technical challenges mobile introduces can complicate a shopper’s experience, leading to shopping cart abandonment and lower conversion rates. In fact, recent statistics show that smartphone conversion is around one-half of desktop conversion rates.
What can you do to improve mobile shopping outcomes?
Focusing on user experience is an often overlooked strategy that can quickly and directly impact your business numbers.
In this eBook, we’ll look at some common problems that search on mobile will pose and the best ways to approach them. The goal is to render your mobile search as beautiful and usable as possible to the user, and just as directly impactful to your business.
- 87% consumers who start their product searches online
- 57% shoppers on a mobile device when they visit a website
- 43% retail customers who begin their buying journey from a website’s search bar
- 77% shoppers who search for products via a mobile device
Pitfalls of mobile user experience
Pitfall l
Tiny screen, big fingers
Many of the difficulties on the mobile platform come from the extreme limitation of display space. A common mistake is wanting to display all the data at hand like you would on a desktop.
In addition, transferring information from mind to application is easy when the user can use all ten fingers on a life-sized keyboard. It’s not so easy when they’re tapping on a mobile display with two thumbs. On mobile, information output is dramatically reduced.
Pitfall 2
Mobile users are, well, mobile
We use our mobile phones in less than optimal conditions like on a shaky train or while walking.
Those environments are not conducive to good focus and can lead to harder information input on the user’s end.
Pitfall 3
Network, or the absence of it
Taking your device on the go and being connected to the web is an advantage of mobile. But network coverage won’t always function at its best, even in the busiest cities. Poor connectivity is extremely frustrating to the user: you should anticipate the user being offline and plan accordingly.
Pitfall 4
Tradeoffs between quantity and quality
Given above constraints, how many results you display and how much information you provide about each result is a significant consideration. Fewer results on page means a higher constraint on relevance—you can’t allow a single poor result if you only show five total results.
The amount of information per result should be kept to a minimum to fulfill two simple goals:
- Is this result relevant to the query?
- Is this result interesting in itself?
Consider also filtering and refinement. On a desktop, the sidebar provides plentiful space for including filters and facets; in contrast, when screen space is limited and UI is touch-based, you’ll have to prioritize one over the other.
Mobile devices should give users the impression of having access to everything at their fingertips, but behind the scenes, we need to be selective with our mobile app’s haystack of display options.
Pitfall 5
Search is an active process
A touch screen is ideal when you the user is consuming content in a semi-passive way, but search is more involved. A user has to type and then evaluate the results of the search.
Search process is far from a one-tap action: minimizing user effort like the number of taps is mission critical. We must serve relevant content with the fewest reformulations needed from the user.
Pitfall 6
High user expectations
Users are accustomed to search experiences that are fast and responsive. For years, Google has been serving relevant as-you-type query suggestions in milliseconds. Amazon, too, gives us access to their massive catalog that can be searched with an auto-suggest dropdown menu and dynamic refinements. To provide what will be perceived as a great search experience, we must meet or exceed users expectations previously set by big players.
HOW, WHAT, & WHY: Solutions to mobile UX Pitfalls
Now that we’ve looked at common pain points that mobile can present for a search experience, what are some steps we can take to help alleviate them? The solution lies in a strategic interaction between the search bar and the results. This means how your search bar is set up, what your search screen displays, and the reason why the user is searching in the first place: the results themselves. All elements must work together to give an UX that is both coherent and comfortable for the user.
HOW:
Configuring the search bar
The decision for how you guide your user through the mobile search experience depends on many factors: the size and complexity of your data set, the knowledge that you expect your user to have about the data set they are searching through, and your desire to balance discovery and intent in the search experience.
The form your search bar takes and where it’s located on the mobile display are important distinctions that will guide the way your shopper browses your app. There are three most common options: full search bar, tab bar, icon.
Full search bar
The full-length search bar typically appears at the top of the main screen, giving instant access to the search feature.
If your product or app revolves around giving your users quick and easy access to a lot of content, then it’s the way to go. Search becomes the center of user interaction, with results populating below in an “as you type” fashion.
Tab bar
The tab bar may not be a “bar” at all; oftentimes, it’s an icon that, when pressed, directs users to a search page separate from your home page. You should consider the tab bar when search is not a main access point to your content, but you still want to make it available to users.
For example, Spotify favors suggestions of albums, playlists or songs on the home screen, but a specific song can be accessed through its tab bar icon.
Icon
The contextual search icon is among the least intrusive options. It’s easily the most flexible approach—you can display the button only in parts of the app that make sense for searching.
For Gmail, the main use case is browsing emails in the inbox. The search icon in the navigation bar on the top right corner enables users to search through all emails.
WHAT
Showing intent through the search screen
As soon as a search field is prompted with a text input through any one of the search configurations previously described, intent is indicated. Algolia’s AI applies across the layers of user queries with query understanding, retrieval of results, and the ranking of those results. Our AI also personalizes search results, product listings, and recommendations to every user. Analyzing your user inputs, Algolia also automatically detects new potential synonyms. Store owners can quickly accept or reject synonym recommendations to match more queries.
A user’s intent can be thought of as a transition between the main ‘non-search’ view and the results page. Facilitating this movement with deliberate UI can help the user’s query. Instead of a default empty table view waiting for the user’s query to fetch and display content, there are better options to help move the user along the path to the shopping cart.
- Recent searches: When a user searches for a product, it’s good to offer them a handy quick glance at previous searches for comparison.
- Trending searches: Guide the user by showing what other users are searching for in your app. This helps an uninspired customer discover products easily.
- Categories: Give the user a number of filter options with a scope of themes that are searchable. Refining your search and increasing the specificity can accelerate the find.
WHY
Result display strategy
The results screen is the user’s query answered and should respond to the essential why of the shoppers coming to your ecommerce site. The results screen has to be relevant and organized—not an easy feat if you have a large inventory or if the scope of search is undefined.
Search-as-you-type functionality can help. Today’s users expect search to be instant, not only with respect to how fast results are fetched, but how frequently they are updated. With a search-as-you-type experience, each keystroke will yield a new set of results, refreshing instantly.
Here are three UX strategies that rely on search-as-you-type functionality:
Query suggestions
Query suggestions offer a brief pause between search and results by including an extra beat to help users sift through dense results. When a query is typed, results will generate completed queries, sorted by popularity or relevance.
Let’s say a user has typed ‘iPhone’ in the search box. Suggestions displayed will be completed queries based on the textual input, so the user ends up with a list of suggestions like “iphone case” and “iphone cable.”
Best practices dictate minimizing the number of taps and scrolls a user needs to take before reaching their destination. While it’s true that query suggestions add another step, they are a great solution for users searching through huge data sets where they might feel overwhelmed by the volume of possible results.
Between getting lost in too many results and one additional tap, query suggestions are a preferable strategy for results that are both fast and relevant.
Instant Results
Instant results answer the ‘why’ by going in the opposite direction. It yields a limited set of results under the assumption that the search has been completed. This approach is most effective when the data set is either more limited or there’s a more defined idea of what they’re looking for.
In the Spotify example, the product will naturally limit search within the realm of albums, songs, playlists, and artists. When a search like “beatles” is conducted, displaying as the top result The Beatles (artist) eliminates unnecessary steps from query to actual results. Auxiliary information related to the input, like albums, songs, and playlists can be shown in limited sets as the user scrolls further down.
Combination of query suggestions and instant results
It’s also possible to combine both strategies in order to let the users get to the desired content or product faster. Mixing the two can work when you have a large dataset but are also able to determine valid matches in the results.
The Google Play Store implements this mixed strategy for displaying results to answer a user’s query for “airbnb.” The first result leads directly to the Airbnb app—sure, there are millions of other apps but this is in fact the most likely match— while below the user sees more granular results that approach the base input closely.
HOW, WHAT, & WHY: Designing for beauty in mobile ux
Beauty, when it comes to UX for mobile, is a little different. Certainly, the way your search bar fits aesthetically with the design of your mobile site is important. But in the context of user experience, does your mobile display reflect the state of your search or filter? Does it support and complement it to give an experience that is at once pretty to look at and purposeful to use?
Display results the right way
When displaying search results, the end user should be able to easily view and select the item. It is therefore important to visually display the information in a way that will resonate while making efficient use of the limited screen space.
Start by understanding how shoppers browse your catalog. For items that are selected visually, like shoes or clothes, you could present search results as enlarged pictures.
In contrast, filters like price, distance and ratings can be used to display results for entries that are heavy on specifications, like restaurants.
Showing feedback when filtering
Filters give specificity and solve viewing a large volume of results quickly. However, it’s a challenge to include both filters and search results in the same view without the screen getting cluttered.
But most of the time, we’ll have to show a dedicated view with all possible filters. Good filtering user experiences have one thing in common: they show some sort of feedback when the user applies a filter.
For example, Amazon displays a panel that occupies 2/3 of the mobile screen width. When a filter is applied, the ‘background search’ result view will update on the fly to show the new results:
Another example is the Airbnb app, where a button at the bottom of the screen displays the number of results every time a filter changes.
Relevance
Relevance is mission critical on mobile because the small screen allows for only a limited number of results to be visible.
On the desktop, the most relevant result at the top may not need to be first, since the user can simply continue scrolling down. On a mobile device, limited real estate means only the top search results are visible so they need to be relevant.
Key Takeaways
Search needs to be a seamless conversation between the user and the product, especially on mobile devices. With great user experiences in mind, navigating your shoppers from query to cart should be a sleek and straightforward trajectory.
But for shoppers to even begin to articulate their queries, strategies aimed at conquering the limitations set by mobile display are important.
- Physical challenges like the fat finger effect and a network’s erratic connectivity need to be worked around
- While the location of your search bar or the way results are delivered may seem obvious, applying the right UX strategy makes a world of difference when providing the user a faster path to the shopping cart.
- On mobile, users are on the go, often with bad or no connectivity. The search experience must adapt to these circumstances in order to ensure a smooth user experience.
- Mobile is a powerful catalyst for connecting shoppers with your site: through powerful search and navigation experiences, you can remove obstacles to finding the right product and increase basket size both on mobile and via omni-channel strategies.
%20(2).svg)
