Empty states in search results

[dbemke]

Updated Dec 20

Solution

We want to display a relevant message for the search results and make it visually different from the empty states.

Figma link

Copy:

"No results
Try another search"

UI:

• White background
• Search icon in a circle

---

ODK Collect version

after merging #5768 (and other empty states PRs)

Android version

10, 13

Device used

Redmi 9T, Galaxy A23

Problem description

The text in empty states is shown not only when there are no forms on the list but also when a user looks for (via search) a form that is not on list.
In previous versions of empty states in some parts of the app the text was "Nothing to display” and also with some more text in other parts (examples in screenshots below).
Example: User looks for a form that is not on the list in "Start new form" and gets information: No blank forms. Download form to get started.

Steps to reproduce the problem

Examples:

1. Go to "Start new form”.
2. Tap search and type some name that isn’t on the list.
   Or
3. Go to "Delete form”.
4. Tap search and type some name that isn’t on the list.

Expected result

Maybe it would be possible to introduce a separate text for empty search results?

[seadowg]

@alyblenkin this would be a good one to look at!

[alyblenkin]

@dbemke this is a good point! We don't want them to see the empty state when they are using the search.

ideas:

1. Search results feedback
The leanest option would be to simply change the message, so it's more relevant. We would make this visually different from the empty state, as it's a result of an action (e.g. search icon with colour on a white background).

• "No matches for X"
• "No matching results: try another search"
• "None of your drafts matched your search: try another search"
• "No results for 'X': try another search"
• "Nothing matched your search: Try checking for spelling errors"

3. Showing similar/best results to avoid dead-end
This might be more difficult to implement, but it is helpful if you search for something and the tool displays options with similar titles. If there isn't anything similar, we show text in the first option.

• "No results for "X": here are best matches to your search"

4. Proactive search
When the user taps the search bar, we immediately display a list of recent searches or recently viewed forms. We could show them in a list of recent or group them by most recent based on timeframes (today, yesterday, past week). This list would disappear once the user starts entering text.

5. Option to also filter results
This is the fancy option of the bunch, which would be helpful if you have a long list of results. For example, we could allow them to sort by best matches, last edited, title, etc. Notion does this well and has different experiences for mobile and web. Notion also has an interesting case for when you try searching for something that might have been deleted.

@seadowg let me know what you think!

[seadowg]

All good ideas! I think I'd definitely want to go with the smallest change here for the moment - adding a specific message for "no results".

[alyblenkin]

@seadowg I'll mock something up to discuss next week.

[alyblenkin]

@seadowg I played around with a few ideas - trying to keep it simple but visually different from the empty state. I think option 3 works best. We could also drop the icon for this first iteration.

[seadowg]

I think "search 3" is a winner as well! Could you update the issue description with that?