When engineering a solution for front-end search results, I follow a personal rule I call the 0, 1, 10, 100 rule. Regardless of whether you’re a new or seasoned developer, UX designer, or product manager, the 0, 1, 10, 100 rule will help you stay mindful of all the result page possibilities you’ll need to address even before you get started. From writing user stories and designing screens, to coding the UI and creating API endpoints, the 0, 1, 10, 100 rule can kick off your conversations around how to handle front-end search results in your app.
Most often related to front-end search results, this rule applies to lists, result sets, or any type of display where there can be a variable amount of items returned. It helps you explore process flow options and uncover how you want to consistently handle certain features across your app.
These four numbers represent the following cases:
- 0 – an empty result set
- 1 – a single result
- 10 – a handful of results
- 100 – more results than can fit on the screen at once
0 — an empty result set
The “0” is a reminder to address how your page should appear when there are no results. Unless you’re a true test-driven developer, this rule is an easy one to overlook on your first pass. The desire to quickly “see something on the screen” might cause you to skip this rule and have to double back later. The empty result set is also a great place to suggest next steps, provide instructions, market, make a joke, etc.
The Atlassian team provides a great example with their empty Bitbucket repository graphics and instructions. They make links and commands easy to copy, give you steps to follow, as well as links to get more information.
By the way, check out https://www.humaaans.com for free illustrations that will make your “0” rule stand out.
1 — a single result
“1” result provides a unique opportunity. You have several options including:
- skipping the results listing and forwarding users to a detail page of the single result
- show the single result with similar/related items in the same view to make it appear as if there are more results than there actually are
- show the single result above alongside related items
With a single front-end search result you have more space to fill, so you could augment it with related info or just forego that step altogether. This next step could be a detail page, a video, a profile, or whatever the next step in your flow may be. Always remember to take a step back and analyze your page holistically. Question your assumptions and make decisions that add value to your users. For example, should you keep the sort and filter options on the page for a single result? Weigh the consistency of keeping the controls present at all times versus removing a control that doesn’t serve much purpose for the user.
If you don’t have anything to add to a single front-end search result listing, then you may have an opportunity to skip a step. This could be a good move as long as it doesn’t confuse your users. Typically, the ultimate goal of a search is to find a single, specific result so this one could lean in your favor.
10 — a handful of results
“10” results is most likely the case you code for by default. It represents the presence of a few items that may or may not fit in a single view. A decision has to be made here on how you want to display things — whether a list, grid, table, or a combination of these using a toggle feature.
100 — more results than can fit on the screen at once
“100” results ushers in a new list of considerations to manage. Now that you’re tasked with presenting dozens (if not thousands) of front-end search results to your user, you have some important decisions to make.
- Should I use pagination?
- Should the pagination be server-side or client-side?
- I read a cool article the other day about infinite scroll…should I try that?
- Do I need to make my search results more meaningful and avoid massive result sets in the first place? I mean, when was the last time I went to page three of a Google search?
…the list goes on. It’s fine if your front-end search result set exceeds a few hundred items, but at some point you have to honestly ask yourself how useful your search results really are. Filters come in handy to help narrow your search, so be sure to give your users something useful in that regard.
Obviously there are many other factors to consider when creating front-end search result screens including sorting, filtering, call-to-action buttons, and more, but the 0, 1, 10, 100 rule provides four buckets to get you on your way to covering all your bases.
- keep all the various form factors in mind — think mobile, tablet, and desktop — as the decisions you make for desktop may not be the same you want for other device types
- gather as much data as you can on how users truly use your app and do what’s best for them while following the 0, 1, 10, 100 rule