The Elements of Search – Part 1

Search is becoming ever more popular (3.5. billion searches a day on Google) and its capability is becoming increasingly deep and powerful. It has the ability – and responsibility – to provide a complete navigation solution, rather than a back-up or as one option of many. This means that the commonly favoured time-saver of simply sticking a search engine onto a website is no longer a good enough solution to navigation issues. This article (and part 2) breaks down the elements of search and highlights good practice ideas and potential pitfalls.

These search elements will aid the searcher in a variety of ways. They support content discovery, increase the accuracy of the results support, and – crucially – aid error recovery. 

All in all these techniques allow the user to easily pick out a search result in context, aiding not only the speed of the search but the understanding of the content.

In part one I will present elements of search that are crucial to get right to support and encourage more search behaviour.

Presentation of Search

Let’s start with the most important element; the search box. This should be clearly visible on every page and should be kept populated with the search term after the search has been submitted, providing key reassurance to the user and allowing them to alter the search term. It is also important to keep a search box in the same location, which allows the user to relate to the results provided.

Auto-complete and Auto-correction

Auto-complete effectively allows the search box to make search suggestions to the user and save valuable effort, as can be seen in Figure 1. This feature can also be used to serve the user with commercially relevant search terms, leading them to a desired page/content or to provide them with sample keywords.

Figure 1: Auto-complete on DuckDuckGo

Auto-correct is used to correct a searcher’s spelling, rather than allowing an incorrect search going unnoticed by the user. The search engine makes a suggestion on what it thinks was meant to be typed. Google is a great example of this working well as it allows the user to clearly see the search term that they have entered and the suggested spelling correction.

Figure 2: Correction suggested by Google

Google also display another method of dealing with inaccurate typists; if it is recognised to be an obviously or commonly mis-typed word then it will display results of the corrected term; though it will allow the user to ‘search instead for…’

Figure 3: Auto-correct

Providing two routes for mis-typed words obviously requires some intelligence behind the interface to work out which mis-types should get suggestions and which should get auto-corrected.

Displaying Results

Results should be clearly displayed for the user to read. The key is to provide consistency so that all the results are in a common format, enabling them to be easily scanned. For example, Google use the following attributes, with ruthless consistency: title, URL, description.

Where the search terms are visible within results they should be differentiated from other parts of the result, this can be done by changing the styling of the font for example, making it bold.

Figure 4: Search result from Google

Title

The title should be provided at the top of the result. It is usually presented in a different colour, and larger size than the description. Consistently locating the title and uniquely styling it also allows the user to quickly see where one result ends and the next begins. 

Description

The description should provide a short and concise description of what the link contains. If the search terms appear in the description they should be differentiated using bold (and colour if desired) to draw the searchers attention to term.

URL

Displaying the URL allows the user to understand where the link will take them. Recognition of the URL allows more advanced searchers to filter results effectively, for example if they recognise multiple results from the same website this may help them work out exactly how to optimise their search term. Displaying the URL has also been proven to significantly increase user trust.

Additional information to provide

In addition to search results, there are other useful pieces of information that could be provided. For example the number of results, and if the search is paginated, the number of pages. This helps give feedback as to the breadth of the user’s search term, and also helps to set expectations of how long it will take to sift through results. It is also important not to provide additional or antiqued metrics that give no useful information to the user, only adding complexity to the results. For example displaying the time it took for the search to be completed would be useful when comparing search engines, but may not be relevant when carrying out a search on Twitter. 

Additional thoughts

Icons to denote file type

If your searchable content also includes files such as Word or PDFs then the use of iconography could be considered (an example of this can be seen in Figure 5). In addition to providing the icon, alt text is required for accessibility reasons.

However they are not necessary in every case; and sometimes they can confuse searchers, for example if they don’t recognise all the icons / file types.

Figure 5: Iconography in search results from WJEC.

Nothing really beats a good text label, providing a textual description such as ‘PDF’ or ‘Word document’ would clearly describe the type of program that is required to open the file. If necessary colour could be used to provide additional context, though should not be relied upon solely for differentiation.

Pagination vs infinite scroll

Pagination limits the number of results on a page to a set number, with results split across multiple pages, whereas infinite scroll shows all results on one page. Pagination allows a user to gauge their position in the results while presenting results in manageable chunks. Infinite scroll displays all the results on one page and is useful for visual searching. An example of where it is used well is on Google image search, where it is possible to scroll through images until the desired image is found. One advantage of pagination over infinite scroll is regarding bandwidth as pagination only loads a limited set of results. This can be seen as Google uses pagination on their mobile image search as bandwidth is at a premium.

In part 2, I will discuss the implementation of facets to search results.