Do you ever pull up your phone and forget what you were about to search for? Yeah, me too.
Search for a long time has been defined in different ways based on how someone understands it but also based on the expert level someone has in using user interfaces thus some people always mix search with filter or even sorting.
But what exactly is search?
This guide is made for people that have interest in knowing what search is and getting the tip of the iceberg knowledge. For deeper readings please refer to citations at the end
A couple of weeks back, I attended a workshop organized by Smashing Magazine titled “Designing Search UX in 2024” (content on YouTube) where Vitaly Friedman was breaking down search and the design patterns that are involved with it.
One of the opening slides stated.
“When users have a pretty good idea of what they are looking for, they use search: mostly via exact queries or broader topic queries (“D-2348” vs “climate change”).
Which is true, over time people have developed mental models regards search and these are different for everyone that is very hard/challenging to design for because of the endless use cases.
It should be noted that.
Search quality always depends on the quality of the metadata. Search must be actively managed by editorial and technical experts. And: we should measure content findability. — Vitaly Friedman
We first search, then filter and sort
This is the “correct” way search should function thus it is important for designers and engineers to implement it like that as a way of customizing the mental models of users. Vitaly Friedman in his presentation presented different “patterns” related to search.
The way people use search field however is dependent on how people read information, which patters they follow. Below are some patters on how people read information on sites and even apps.
From these patters, one behavior you can observe is people do not read information in a straight line but people ‘bounce’ between information looking for what exactly they are searching for (pinball pattern) and if they do not get it, they go away which presents the question How to people look for information?
How do people look for information?
Have you ever entered your room/house looking for this exact thing but can't figure out what yet so you keep looking around and hoping you can remember it, so you keep looking for clues to help?
That is how users use search inputs as well that is why it is important to make technology work as much as the real world as stated in Jakob’s second heuristic “Match between system and real world.”
By understanding how people use the search bar, we can understand how people actually look for information.
In Donna Spencer’s book “A Practical guide to Information Architecture” in chapter 9 (link at the end), she lists out the different ways people look for information and how to best design for such people and these are the ways:
Finding known items
This is one of the most common patters used by most people who use search bars. For instance, when using Uber the chances of me typing in a name of a place I know are higher than me not doing so does not matter the way I type it what matters is that I know what “item” in this case the location I am going to.
When integrating a search bar/option it is important to ask, “do my users know what item they would search?”. What users type into a search bar in Jira is not the same as what they would type into a search bar on the website of a university library.
However, these types of users are usually “expert” users when searching. Expert because they know enough about a topic to make it known to them that they just input that knowledge they have in a search box. Users like this know that there is an answer to their query and know when they see it to stop searching.
Examples of such cases can include.
-
Searching how many Goals Cristiano Ronald scored against Granada.
-
Searching the Samsung Frame TV
-
Checking the price of products among others.
Design guides.
-
Implementing an A-Z index (involves having the correct metadata on items like multiple labels on products. For instance, on an ecommerce platform a 65' TV can have tags like “big TV screen” (A-Z Website Indexes Explained — SitePoint)
-
Implement a persistent search bar based on context to enable users find whatever whenever.
-
Show a “No results” state instead of an error.
-
Use filters as user would want to fine tune results to their liking.
-
Consider localization (other languages) as sometimes users can better describe something in their native language.
-
As a user types, historical search suggestions can be shown beneath the search bar.
-
When displaying results, the search text field remains visible, but not in focus to shift user attention to the results.
-
Implement categories to allow users to search within categories.
-
Add a label in the search field to show users clearly that “this is where you should type your query”.
Exploring
Growing up we did not really have a computer at my house so I always walked to the one cafe around my neighborhood to surf the internet and what that basically meant was just scrolling and scrolling through whatever I could scroll about.
Users that search by exploring are more like me back then. Such users may have an idea of what they need to know but may not really know how to articulate it to make sense in the search bar as they may not know what terminology to even use at such a point not even have an idea of where to start from when looking.
Such users usually read content halfway and if it does not make sense to their inner self, they leave and do the same elsewhere.
In this mode, the information need will almost certainly change as you discover information and learn, and the gap between your current knowledge and your target knowledge narrows. - Donna Spencer
It's important to note that such users may not be shacked by presenting to them large amounts of information at once.
The best way to design for these kinds of users can be through making sure that they can move through information, back and forth so pagination in such a case would make sense to them, links (make sure links change color when clicked) to show them that they have been here before among others.
Pagination is a debated idea because it's hard to fine tune results but showing a range below the pagination is good UX.
Pagination has overtime come to mobile user interfaces as well presented as a carousel controller (I failed to find a name for this UI component).
Design guides.
-
Use page controls to represent movement between an ordered list of pages.
-
For more complex navigation, consider using a sidebar.
-
Center a page control at the bottom of the view or window. To ensure people always know where to find a page control, center it horizontally and position it near the bottom of the view.
-
Although page controls can handle any number of pages, don’t display too many.
There is quite a number of types of page controls out there so do get something that works for you and your users.
Refining and narrowing
I sometimes dress up my young sister for occasions but picking clothes has forever been an issue, so well usually get a number of clothes out of the closet and throw away one by one until we get to desired results.
There are users like her, people that want to grade stuff. This is so common with library websites and e-commerce platforms to help users get to the bottom of things.
But this raise a question, what is the difference between search, filter and sorting?
It should be noted that all the three are interconnected but users move in a sequence we stated up there.
In a searching scenario, a user inputs a search term for a specific thing they’re looking for. In a filtering scenario, a user generally knows what they’re looking for, but may not have a specific thing in mind.
Sorting (Courtesy of Smashing Magazine)
These types of users can be classified as expert users and thus want to customize details displayed by organizing how and which metadata is presented to them as they like.
Usually in such situations users have a certain criterion in mind to follow when filtering and sorting results.
Design guides.
-
Implement filters and a good filter lets you select a number of criteria and displays results for those criteria.
-
Filters should update results as they get selected. This helps not to frustrate users by displaying zero results after spending so much time setting up filters but do not even know what caused the zero results.
Comparing
Every time I am buying a new gadget for my desk setup, I always watch YouTube videos and open windows side by side to compare the two devices or compare one device two times.
Comparison is all about finding the similarities and differences then make a decision based on conclusion.
Users of this nature could have queries like;
-
“Product A vs Product B”
-
“Product A reviews” or “Product B reviews”
-
“Best [product type]”
-
“Product A features” or “Product B features”
-
“Product A alternatives” or “Product B alternatives” etc.
Interfaces that give users the ability to compare two products could be hard to execute thus it's important to have a solid understanding of your user base through user research, usability testing and design thinking in general.
Conclusion to part 1
I know that putting together a very long piece in the age of low attention spans is quite challenging thus I had to split up these two publications another which I am currently finishing up.
Thank you for reading this far. For comments or improvements i can make to my writing (which is just growing) please send me a message on Twitter/X.
References
Designing Search UX In 2024 with Vitaly Friedman — YouTube
A Practical Guide to Information Architecture, Second Edition (uxmastery.com)