Designing an efficient search box
Search box, is an important factor of positive user experience for websites and mobile apps. Finally, I overcame my procrastination and decided to talk about UX design practices on how to design an efficient search box that makes internal search for websites and mobile applications intuitive and easy to use.
What are search boxes?
A search box or search field as its commonly called is a user interface design element that allows users to enter keywords, letters in a website search engine, database or archive list that in return, provides the users “results” or content related to their input. The search box is typically located at the global navigational area of the website or at the top bar of an application. This is to ensure that it's very prominent and visible to users when they visit a website that contains larger numbers of sections buried within the website architecture.
The search box is an important element of a website as it aid users navigation within the website. It relieves users the arduous job of walking their way through a labyrinth of website pages trying to find the appropriate content or page. Users can easily type in keywords of what they're searching for within a website and in seconds, the result appears straight away! Who doesn't like it simple? However, when designed poorly, it can send users running around an endless loop searching for contents or pages thereby increasing the bounce rate and abandoned carts in the case of eCommerce.
How do you design an efficient search box?
Many different designs call for some form of search box, in which each situation will present different constraints such as shape, location, size, database and the afforded visibility of the website itself. Therefore the implementation guidelines discussed below are in no way exhaustive and are not specific to certain forms of search boxes. However, some qualities must remain across board which are in line with the general nature of search boxes and ways of implementing them to make the user experience quick, smooth and hitch-free.
1. Outline the input field
Search boxes need to be clearly distinguished from other elements in the website interface. In order to achieve this, you must outline the input field and also ensure that the internal colour of the box contrasts with the surrounding colour. This gives greater visibility.
2. Position
Always position search boxes above areas where the results will be displayed. Search boxes are always placed at the highest point within the page or just beyond the global navigational area.
3. Saved search history
For returning users, it's recommended that previous search history should be saved. This will ease the problem of typing, to just one click and viola! The users have their results.
4. Searched Keyword
Whenever a search box directs users to a new page, the searched keyword or term should appear above the results or content on this new page. This way, the user gets to confirm that their search term was righty produced by matching the content with the search term. With this, users can confirm if they are on the right result page.
5. Editable search field
Always include a word or icon to show the user that the search field is editable. If the input field is blank, the user might assume it is simply an area of dead space within the design. Typically, the word ‘search’ appears in the search box and there is a small magnifying glass icon either in the right- or left-hand corner of the input field. When the user clicks in the search box, the word or phrase that is put there to trigger users to input text (often the word ‘search’ is used) should instantly disappear, so they do not have to delete the word manually before they can enter their search term.
6. Clearly visible submit button
Lastly, You must provide the user with a clearly visible ‘submit’ button or an icon, such as a magnifying glass, that performs the same function when clicked. However, the user should also be able to use the return key to submit the search term.
I’ve been working on solving search usability problems with my team at Muster for some time now and implementing these, have greatly improved our user search process and bounce rates also reduced. Suggestions, questions and feedback are welcome, I would love to hear your thoughts!
Thank you for reading!
