Three Things You Need to Create a Great Search UI Design

Designing a better UI search experienceWhen using search there’s more going on in your user’s mind than just typing in some random keywords (and it’s all about two numbers: relevancy and precision). Here’s how to support how your users use search.

A few days ago, I went looking for a book I had read as a child. While knowing the title would have let me find the book immediately, that  information was lost with my childhood. I had a vague recollection of the plot (a mixture of Chinese and First Nations myths) the heroes (a boy and a girl), and the setting (Canada’s West Coast). Fortunately, a few minutes with Google led me to The One-Winged Dragon by Catherine Anthony Clarke and a few more minutes using the search facility on led me to ordering a copy of my own.

It’s a search oriented world (thanks to Google, Bing…and the other guys). We expect, as a matter of course, that we don’t have to know the unique identifier for whatever we want. Instead, we expect that we only need to know some characteristics about what we want to find, that we’ll be able to enter that information into some search facility, and that we’ll get a list of matching items. From that list, we expect that we’ll recognize and choose the item that we are looking for.

Your users probably expect your application to have a search component. As we discuss in Learning Tree’s user experience design course, if you’re going to deliver a successful search experience then you need to know three things: precision, relevancy, and what your users are looking for.

Relevancy and Search UI Design

Relevancy is a measurement that describes what percentage of the related items are found by the search. An ideally relevant search returns every matching item (100% of the matching items). For this score, “more is better” and 100% is better than 90%. If the resulting list is sufficiently short and easy to scan (something I’ll return to later) then the user finds their item and stops searching.

There are things that you can do to improve relevancy. The first step is, of course, to know your audience and know what search terms they’ll use in their initial search. Where the number of terms is small you can provide lists for users to pick from. Where the number of terms is large, you’ll need to understand how the terms that users will enter relate to the data that you’re storing. Because you’ll need to let users enter whatever they want, you’ll have to use stemming to tie the user’s terms to your data (stemming adds search terms based on the user’s entries: if the user enters “taxi”, stemming would add in additional words that appear in your data, like “taxis”, “cab,” and “limo”).

The problem is that, while 100% relevancy sounds like a good thing (and it is), it’s not much help to your user. The reason that 100% relevancy isn’t helpful is because that first list is probably too long for the user to scan (for example, my first Google search didn’t have the book I was looking for on either of the first two pages, which is as far as I looked).

While users often have lots of information they could provide to the search, users typically  don’t provide all of that information. Instead, users provide what they regard as the “minimum necessary” information to find what they want — which, in a 100% relevancy search, results in a list that’s too long to be useful. The good news here is that users regard that initial search just as a way of getting a feeling for the “size of the problem”: They do not expect to find their item on the first search (though it’s certainly nice if they do). Instead, users refine their search, following “the scent of information.”

Precision and Search UI Design

Since that first list is usually too long to scan and requires refining, users’ next step is to make the search more precise. When discussing search, precise is a measurement that of what percentage of all available items are returned. Here, lower scores are better than higher scores because an ideally precise search returns exactly one item, which a very small percentage of all of the items (if one isn’t a small percentage of all of the items then you probably don’t need search at all). When talking about precise a search is, 1% is better than 10%.

There are a couple of ways that you can help users make their search more precise. The easiest way is to leave the search criteria on the screen so that the user can enter more search terms. Users will scan your initial list to determine what the next “minimum necessary” information is required to get a list that’s short enough to scan and then apply those additional terms.

Another option is to provide additional information about the items in the list. If each item has been assigned to some category then you can provide, to one side of the main list, a list of the categories that have items  in the main list. Users can make their search more precise by limiting the categories used in the list. Alternatively, you can assign one or more tags to each item and list the tags for the items in the list, allowing the user to make the main list more precise by selecting/deselecting tags.

Here, again, understanding your audience is paramount. You’ll need to know what category users will expect items to appear in (in my case, I knew that I was looking for a “book” and something in “children’s literature”); similarly, you’ll need to know what tags users will associate with the item they’re looking for.

How to Display the Results When Designing UI

When the list does get short enough to scan, users will stop searching and start scanning. For scanning to be successful, you need to make sure that the users can recognize the item they want from the information in the search list.

If the items have pictures associated with them, you’ll want to make sure that the pictures highlight the distinctive part of each item — what your audience sees as different in each item. For text descriptions, you’ll want to make sure that you highlight and move to the front of the description the information that, to the user, distinctively identifies each item. It does the user no good, for example, in a list of engines, to identify at the start of the description that an item is an engine. There’s a lot more to say about how to display that list but already has a great article on how to display results when designing search and I can’t improve on it.

If you combine a highly relevant search, tools for improving precision, and an understanding of what your users are looking in the resulting list then you can give your users what they want: A genuinely satisfying search experience.

Type to search

Do you mean "" ?

Sorry, no results were found for your query.

Please check your spelling and try your search again.