How to design effective SEARCH - Interaction Design

After looking at many websites with search option in the inner pages and not so impressive way of performing search, i think posting a blog on some of the best practise in search design will be helpful to all. Let us try to understand what is a search.
Search is a feature that allows users to find the the required piece of information they are looking. If we dissect search, there will be 4 parts to it.
1. Basic search - in this the user types the keywords and he is good to go. He presses the search button and get the results.
2.Advanced search - in this the user uses many filtering options to narrow down his search efforts. The advanced search will be different for all websites as, the UI elements is dependent on the content whose search is being done. After getting the main two user flows let us see what happens when the user makes the search.
3. SERP - Search engine results page is the page that is shown to after he enters the keywords.
4. Search results Relevancy metric - I am jotting this important area as it is utmost importance whether the user got what he was looking for. Was the search results helpful to the user or not.
Working on the below 4 areas, we can make an effective search.I heard designers from HFI(Human factors international) say's usability is not enough, i want to add to it that as far as we are meeting the needs of the users and helping him accomplish his tasks users will stick to the site or software. If some one else comes with a better solution for the user, they may leave our site- the bottom line is VALUE - what value we are adding to the user's life.
Now let us get each section right.
Basic search Design
Tip 1: Focus - As soon as the page is refreshed the cursor focus should be in the search text box. This saves an extra click to the users. If there are some forms on the page we can avoid this, as there are chances that the user may be more interested to fill the form.
Tip 2: Text box length - The length of the text box should be long enough to even accommodate a phrase if the user types, the idea is avoiding the horizontal scroll.
Tip 3: Narrow down - try to narrow down the user's search efforts in basic search also. For example we can include UI elements which helps the user to decide what he is looking for and letting the search engine understand the query at a higher level. A classic example can be clicking on the maps, images or docs options in search.
Tip 4: Progressive disclosure - Make the user aware that advanced search options is available by including the "advanced search" link.

Tip 5: Auto suggest - Including auto suggest can be of great help as it makes the basic search process easier.
Tip 6: Search settings - can be a good section where user can have controls and his preferences for search.

Advanced search Design
Tip 1: Search parameters - Have a look at the search results, that will be shown to the user and decide the parameters on which they can be filtered. An information architecture of the content can be of great help to decide on the search parameters. For example - the search parameter can be file type, date published, containing the words - etc

Tip 2: UI elements - To accomplish the tasks for narrowing down the user's search, we will use different UI elements. Select the best suitable UI elements. For example we can provide radio buttons when there are 3-6 options for the user in a certain group. A drop down can be used when the options are more. This decision needs to be carried out by the designer.
Tip 3: Grouping - Group the sections in the advanced search options and group them visually. A good example is shown below.
Tip 4: Action oriented language - Use the words such as "open search results in new browser window" instead of "pop out results"

SERP Design
Tip 1: Pagination - make the pagination good to navigate, option to move to different pages is good by few clicks however user's rarely move to see the results on the last page. User usually stick to the first 1-8 pages that are shown to them.
Tip 2: Results summary - a summary of results is good to have so the user known how effective was his particular search.
Tip 3: Current page - Notify the user by "showing page 5 of 10 search results" and similar words.
Tip 4: Show similar results - There are chances that a user finds a particular results helpful and is interested to know similar results. Having an option to see similar results is good.
Tip 5: Filters - An option to filter search results in order to narrow down to the required information is good to have. For example we can include sort features that allows the user to filter the search results.
Tip 6: Hierarchy - maintain a hierarchy of information by different visual treatment to the search results heading, description and the online link.

Search results relevancy metric design
Tip 1: Try to capture the user feedback on the search results asking him wether the search results shown to him were helpful.
Tip 2: Suggestions- a forum or e-mail communication to get user's suggestions can be of great help.
I think these are some of the benchmarks that needs to be satisfied for effective search design. I agree the search engine plays an important role and tagging of keywords, however this is out of scope as this blog is pertaining to what we can do at user interface level to design a good user experience.

If you need some more suggestions, or help regarding SEARCH please send an e-mail to

Post a Comment