When searching for products on mobile websites, users won’t always look towards the touch keyboard to submit their search queries.
Indeed, during our large-scale mobile usability testing, some users would mainly look to the webpage UI itself at first, therefore failing to notice or recognize the touch keyboards’ search submit button provided by the mobile OS.
These users will often go on a major detour and experience severe frustrations over the seemingly basic action of submitting a typed search query.
Yet, 21% of mobile e-commerce websites in our UX benchmark fail to provide search submission buttons adjacent to the field.
In this article we’ll discuss the test findings from our large-scale mobile usability research study including:
There are 3 key ways to submit a mobile on-site search query:
Of those actively using the search field during testing, some users were observed reaching their finger toward a submit button placed to the right of the search field — whether it was actually present or not.
This behavior likely represents an instinctual habit for many users since desktop sites frequently include a search submit button, typically at the right-hand side of the search field itself.
When a search submit button adjacent to the field is absent on mobile websites, it causes users to make a mental context switch — shifting from a product-exploration mindset to one focused on tracking down an expected UI component.
Additionally, issues with submitting queries on sites without a search submit button positioned adjacent to the field are not only problematic during a user’s first search attempt, but were also observed during search iterations or when users were attempting to “reset” their search by resubmitting the same search query.
Ultimately, the absence of a search submission button often forces users to turn to the keyboard to execute their search query, which is not always a typical first action.
Admittedly, it’s unlikely that the absence of a search submit button next to the field will cause serious issues for most users — during testing, users who looked for a way to submit their search near the field did ultimately find it in the keyboard or through an autocomplete suggestion.
However, in testing the absence of a search submit button adjacent to the field resulted in unnecessary pauses, increased scrolling, visually scanning the screen for other search submit options, and near-mistaken interactions (e.g., clearing queries by mistakenly tapping the “X” in the search field).
Moreover, mobile users typically face more challenges overall than desktop users — meaning seemingly “minor” issues can quickly compound to cause severe friction and can contribute to site abandonment.
A subissue observed during testing occurred on sites where the search field is hidden (i.e., it’s icon-invoked) and, at the same time, they don’t have a search submit button.
While most sites show an exposed search field on the homepage, 35% of mobile e-commerce websites in our UX benchmark hide the search field by default.
On these sites, search was accessed using a magnifying glass icon in the sitewide menu, and tapping the icon would show or hide the search field.
This “show/hide” interaction is a departure from the icon’s more historic use as a deliberate search submission method — carried over from desktop search field design. Indeed, 68% of mobile e-commerce websites in our UX benchmark use a magnifying glass icon to represent the search field submit button.
The two design patterns combined — 1) a field without an obvious way to submit search and 2) a nearby show/hide-only magnifying glass icon — can result in users not intuitively knowing how to submit their search query.
When the magnifying glass icon is misinterpreted for search submit, it leaves users disoriented and frustrated, and wondering whether their search queries were submitted at all.
For the users who do use the keyboard to submit queries, it’s also important to customize the submit search key on the keyboard to display a sufficient call to action.
While keyboard optimization specific to search submit is lower priority than other mobile touch keyboard customizations, using a custom search submit button does provide a stronger visual call to action and a more polished appearance than the default state.
Note that this keyboard optimization comes in addition to having a search submit button adjacent to the search field.
For example, to optimize the iOS touch keyboard to display a blue “search” button, specify that the related form field is, in fact, a search field by using the attribute
Search submission on mobile websites is already troublesome due to the fact that typing on the mobile keyboard is inherently difficult.
During our large-scale mobile UX testing, we’ve observed that the absence of an explicit search submission button directly in the UI further impedes the search process and increases the potential for errors such as inadvertently clearing a search query.
Moreover, the risk that users will struggle with query submission is higher for sites that hide the search field by default. Some users will mistake the purpose of the magnifying glass icon, resulting in disorientation or severe frustration.
On the other hand, positioning an explicit search submit button directly in the UI adjacent to the search field aligns with users’ expectations and, therefore, streamlines the search process, including initial search query submission as well as iterative search refinements.
Combining the use of a touch keyboard optimized for “search submit” with a search submission button directly in the UI helps to ensure an intuitive and efficient mobile search experience, regardless of the user’s favored method for submitting a search query.
This article presents the research findings from just 1 of the 600+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” e-commerce user experience.
Authored by Sally Collins on June 1, 2021
Join 30,000+ UX professionals and get a new UX article every second week.