Best UX practices for

search inte!ace
Qubstudio
Design Agency

Users tell you what they need, and you provide the
information. That’s why the search inte!ace has to be

https://qubstudio.com/blog/best-ux-practices-for-search-interface/ 13/02/2024, 18 00
Página 1 de 20
:
 designed using the same user experience principles as the
rest of your website.

Does the search box need any speci"c a#ention? It’s just one
of the elements on your website, same as the clickable logo or
the drop-down menu, right? Wrong. The search box the
visitors see is just the tip of the iceberg, with the lengthy and
thorough design process lying under the water. It’s easy to
overlook the search (pun intended), but if your impatient and
spoon-fed users don’t get along with the search inte!ace,
your business pe!ormance may su$er.

Let’s "nd out who needs a search that’s carefully thought

through and what are some dos and don’ts of designing the
search inte!ace.

When do You Need

Search on Your
Website?
Not all websites need the search functionality – one-pagers
without any intention to expand will do without it. However,
there are many pla%orms where a convenient search is a life-
or-death question. These are:

big websites with hundreds of entries (libraries,

encyclopedias)
e-commerce websites
news po&als
booking services

https://qubstudio.com/blog/best-ux-practices-for-search-interface/ 13/02/2024, 18 00
Página 2 de 20
:
 Search is faster than navigation, more intuitive and it
provides priceless info about your users’ behavior and
needs. It is a handy assistant to the business’s most valuable
visitors – those who have a clear intent.

The potential of a great search UX is 13,8% of the site’s overall

revenue. And despite this, the majority of e-commerce po&als
provide poor search UX:

70% of (desktop) e-commerce search implementations are

unable to return relevant results for product-type synonyms

(requiring users to search using the exact same jargon as the

site) and 34% don’t return useful results when users search

for a model number or misspell a word with just a single

character in the product title.

Baymard Institute Research

The mobile experience is even more disappointing, and that’s

in the times when a signi"cant pa& of all purchases is done
through the sma&phones. O'en, the progress bumps up
against the proper organization of search – not only the pa&
seen by the user but the whole backstage logic as well. By
implementing the search inte!ace the right way, you will get
an edge over the competitors and experience a boost in sales.

Search UX consists of two components: the search box and

the result page design. Today, we’ll talk about the "rst one –
the best UX agencies’ practices for the search box design.

https://qubstudio.com/blog/best-ux-practices-for-search-interface/ 13/02/2024, 18 00
Página 3 de 20
:
 How to Design a
Search Box According
to the Best UX
Practices?
Our main goal is customer satisfaction. We have to make sure
the design of our search box brings the best experience
possible and, therefore, leads to the required actions: long
interaction, purchase, booking, etc. The experience shouldn’t
depend on the device, location, browser or "nger size. How
do you take everything into account? Here’s a list of dos and
don’ts Qubstudio designers use when working on the search
box UX.

10 Dos for Great UX for

Search
1. A universal symbol of search is
a must
A magnifying glass is generally recognized as a search icon.
Users subconsciously look for it when intending to type their
query. So, if you use any other creative way to mark your
search function, the visitors might get lost. The magnifying

https://qubstudio.com/blog/best-ux-practices-for-search-interface/ 13/02/2024, 18 00
Página 4 de 20
:
 glass icon should be simple, with fewer details and a large and
contrasting clickable area.

Which one looks better?

2. The box should be placed

where users want to see it
The place of a search box on the website ma#ers a lot.
Historically, users expect to see a search box at the top center
or top le' of the page.

Placement in the center showed a result of

15.86% search usage, while placement at
the top - 13.43%. The position at the top
le!, as it turned out, showed the worst
results of use - 7.72%.

Website visitors usually scan the page in an F-shaped pa"ern

, almost immediately spo#ing a universal magnifying glass.
Still, you can use eye-tracking tools to "nd out other focus

https://qubstudio.com/blog/best-ux-practices-for-search-interface/ 13/02/2024, 18 00
Página 5 de 20
:
 areas and experiment with search box location.

Medium

Stackoverflow

3. Adding the “submit” bu"on is a

good tone
The majority of users trigger search by pressing “enter,” but
some people like a traditional “submit” bu#on (usually a
magnifying glass icon). Make it big enough so that the users
won’t have to click or tap several times to hit the icon. Mind
that the submit bu#on should be added as one more option
to sta& the search, and not instead of “enter.”

Glass icon as “submit” at Yahoo

YouTube

https://qubstudio.com/blog/best-ux-practices-for-search-interface/ 13/02/2024, 18 00
Página 6 de 20
:
 4. Every page should have a
search box
In most cases, users don’t use the search immediately as they
entered the website. They sta& by navigating through the
menu options, pages, etc., and then, when they haven’t found
the necessary thing right away, they type their request into
the search box. That’s why it has to be placed on every page
of your website. You wouldn’t want to return to the home
page every time you want to type a query, would you?

Amazon’s home page

Amazon’s 404

https://qubstudio.com/blog/best-ux-practices-for-search-interface/ 13/02/2024, 18 00
Página 7 de 20
:
 5. Auto-suggestion is essential
Not only does auto-suggestion help to reduce the time of
data input (which is especially appreciated on mobile devices)
but it also guides users through the formulation of the search
queries. Useful and well-thought auto-suggestions will help a
person choose the right option. If a user is looking for boots,
for instance, the auto-suggestion will provide the search
options like rain boots, winter boots, hiking boots, kids’ boots,
etc. As a result, you’ll have excellent search UX and satis"ed
users.

Dribbble’s suggestions

Another essential point is a spell check and typos recognition.

Checking and re-typing every le#er can drive anyone mad,
especially while you’re browsing through a sma&phone on the
go. Recognizing the users’ intent and o$ering suggestions will

https://qubstudio.com/blog/best-ux-practices-for-search-interface/ 13/02/2024, 18 00
Página 8 de 20
:
 be well-appreciated. The list of auto-suggestions usually
appears a'er the third le#er typed, and the list shouldn’t be
longer than ten positions.

6. A wide search #eld will be

appreciated on mobile
It’s a good idea to make the search "eld as wide as the screen
on mobile devices. This way, a person will be able to easily
type the request regardless of "nger size, eyesight, with one
free hand only, and so on.

Duckduckgo & Amazon

It’s especially impo&ant for e-commerce websites since many

users shop spontaneously or check the products online
before buying them in the physical store.

7. Provide advanced search

option on request

https://qubstudio.com/blog/best-ux-practices-for-search-interface/ 13/02/2024, 18 00
Página 9 de 20
:
 Can you imagine using Booking.com without an advanced
search? Some websites cannot do without "lters and
speci"cations, like booking services and e-commerce stores.
They have multiple layers, and manually searching through
each one of them will take forever.

Google Images

Information resources also need advanced search

functionality sometimes, in case of massive data volumes or
frequently refreshed content. That’s why it’s nice to o$er
advanced search options to your users on demand.

Wikipedia

8. Consider adding voice search

Voice recognition technology is not new, and it’s spreading
into more apps and pla%orms every day. Since the percentage
of mobile users – and mobile shoppers – is predicted to
increase steadily over the next years, the voice search
functionality won’t go amiss. It can be integrated into almost
any app, so consider adding a microphone icon to your search
box.

https://qubstudio.com/blog/best-ux-practices-for-search-interface/ 13/02/2024, 18 00
Página 10 de 20
:
 Voice search in Google services

9. Dealing with poor connectivity

Unfo&unately, it’s still an issue in our advanced tech era. How
do you keep a visitor on the website when the connectivity is
poor, and the results page or suggestions are loading for too
long? The least you can do is add a progress indicator.

Soundcloud

This psychological trick makes users a bit more patient. Here’s

where you can set your creativity free and think of funny to
unconventional ways to show the progress instead of using a
traditional bar or a sandglass. Another option is displaying the
skeleton screen – to show users they’re almost there.

https://qubstudio.com/blog/best-ux-practices-for-search-interface/ 13/02/2024, 18 00
Página 11 de 20
:
 Linkedin’s skeleton screen

10. Use analysis tools to assure

the best UX
When the search bar design is ready, and all the inputs,
interactions and "lters are implemented, check the users’
reaction. To leverage the search functionality to the fullest, try
to monitor the customers’ behavior concerning the search
box and optimize it according to their needs. Touch heatmaps,
user recordings and journey trackers are the tools for that.

5 Dont’s to Avoid
Frustration with the
Search

https://qubstudio.com/blog/best-ux-practices-for-search-interface/ 13/02/2024, 18 00
Página 12 de 20
:
 1. Don’t hide the search among
other elements
Work Services Clients About
The search box has to be visible and contrasting. If it’s hidden
behind an icon, lost in too many graphic details or masked in
the header, people might fail to "nd it.

Table of
Contents
When do You
Need Search
on Your
Website?

How to Design
a Search Box
According to
the Best UX
Practices?

10 Dos for
Great UX for
Search

5 Dont’s to
Avoid
2. Don’t make the search #eld too
Frustration sho$
with the
Search Make the search box long enough to сontain the whole user’s
query. Sometimes, we want to check what we’ve typed or
correct the request. Why not make it convenient? When they
see a sho& "eld, users tend to write sho&er and less precise
queries, which leads to poor search results and a$ects the
UX. The ideal search box is 27 characters long, which
accommodates 90% of queries.

https://qubstudio.com/blog/best-ux-practices-for-search-interface/ 13/02/2024, 18 00
Página 13 de 20
:
 3. Don’t make the Submit bu"on
too small
On mobile, it’s quicker to hit a “submit” bu#on than “enter.”
Being too small for a "nger, it makes the people do additional
work by moving to the keyboard or zooming the screen – not
a sign of an excellent UX.

4. Don’t overdesign the search

box
Creativity is good, but not in this case. A box must still be a
box. If it’s overdesigned, it is harder to spot. The same thing is
with combining the search with other forms (e.g., newsle#er).
It should be instantly recognized by the user as a "eld to type

https://qubstudio.com/blog/best-ux-practices-for-search-interface/ 13/02/2024, 18 00
Página 14 de 20
:
 the search query. Don’t make your potential buyers search for
the search. It won’t do you any good.

5. Don’t overload the search with

advanced functionality
If the users see a big form they have to "ll in to "nd the
necessary thing, it freaks them out. Advanced functionality
should be available on request: a bu#on click, a drop-down
menu, etc.

Source: dribbble.com

https://qubstudio.com/blog/best-ux-practices-for-search-interface/ 13/02/2024, 18 00
Página 15 de 20
:
 Booking services might be an exception, and still, they don’t
provide the entire array of advanced search options right
away.

These are the basic rules of a good search UX the way

Qubstudio designers see it. Prediction of users’ needs, fast
and precise response to their queries, aid in creating and
specifying their requests, excellent pe!ormance on both
desktop and mobile – all this leads to a smooth and pleasant
interaction between the customer and your business. If you’ve
noticed that your website search functionality needs
improvement, don’t hesitate to contact us, and we’ll be happy
to help you right away.

Recent A$icles

https://qubstudio.com/blog/best-ux-practices-for-search-interface/ 13/02/2024, 18 00
Página 16 de 20
:
 Open Banking and Customer Experience Unveiled:
A Finance Revolution
Daria Rolina
UX Researcher

https://qubstudio.com/blog/best-ux-practices-for-search-interface/ 13/02/2024, 18 00
Página 17 de 20
:
 The A$ of UX Storytelling: Resonating With Users
Oleksandr Valius
Head of Product Design

https://qubstudio.com/blog/best-ux-practices-for-search-interface/ 13/02/2024, 18 00
Página 18 de 20
:
 Islamic Digital Banking: Features, Trends, and
Design Innovations Unveiled
Qubstudio
Design Agency

https://qubstudio.com/blog/best-ux-practices-for-search-interface/ 13/02/2024, 18 00
Página 19 de 20
:
 Reach Us Today
Write us or Book a call

    

London, United Kingdom

Level39, 39th !oor, One Canada
Square, Canary Wha"

Lviv, Ukraine
KIVSH, 2d !oor, Shevchenka
Street, 120G

Unlock company insights with our

newsle#er—zero spam, guaranteed.

Sign up for newsle"er

    

This site uses coookies to provide you with a great user experience. By browsing our website,
you provide consent to our use of cookies.

https://qubstudio.com/blog/best-ux-practices-for-search-interface/ 13/02/2024, 18 00
Página 20 de 20
: