Should search results open in a modal dialog?

Question

I've been trying to figure out a user-friendly way to display search results to users and I think W3Schools' way of doing it makes a lot of sense. You type in your query, hit enter and a nice modal pops up with the search results. No page reloads. You can then click the links and they will open in a new tab. Is this user-friendly? If not, how would you display search results?

I'll be adding search-as-you-type to the search box for trivial search cases, but an "advanced" search results list of sorts is definitely required in my situation.

Answer 1

A modal communicates a temporary detour from the core flow of the user. While it has benefits, it also has limitations:

Benefits: 1. User flow is maintained 2. Context is retained better than going to a new page

Limitations

1. Space limitation, you cannot use the entire page space
2. Scrolling moves to within the modal
3. While you can a lot of interaction - like filtering, it is likely to conflict with the light weight nature of a modal. I think this point is more debatable, but my inclination is to keep modals very light so they are more of an in-out design and not a destination where user spends a lot of time.
4. Expected behavior - for example escape should close a modal, so you cna loose it more easily.
5. You can spawn new modal windows from it. So, if you wanted the user to be able to click on a search result and get another modal - for example: if you are searching for people and you wanted a person's profile to open when you click the results, it's not going to be good. So scalability is limited

Overall I think if your search is simple in and out, then modal works, but if it is a part of a larger workflow then modal would become restrictive.

Answer 2

I don't think there is a good and universal answer for this question. It totally depends on some factors. Are there many search results or just 5-10? Is it crucial for the user to stay in the current page or not? If it's a kind of a dashboard, it might be important (let's say the search results only load new content into a view, or you just need to find some data to complete a form - say, find some postal codes within area you have already defined by entering other address data).

So, I would split it into two cases:

• If the search results are many and there is no straight connection between what is in the current view and what is to be displayed next - I would say separate page with search rsults (and with pagination or filtering) is a direction

• otherwise, displaying search results in a modal could be fine (just: "could" because there may be some other factors shifting the decision in one or other direction).

Answer 3

Looking at it from behavioral/contextual point of view, your example of W3Schools works well keeping the context in that it's fetching results from an external site. That is very transitory and well suited in case of W3Schools sites. The behavioral attribute very well defines that it's temporary and the user acknowledges the by-pass.

If you juxtapose this case with a site with Search integrated to bring results from the own site (locally), then the transitory Model looks like you are temporarily detached from the Site. IMHO this solution provides a feeling of a "lost-focus" approach or "losing-your compass/bearing".

Assuming it's a non-simple Search – if your search is either scoped or faceted – then it adds more complexity to have a modal dialog to handle these functionalities.

Looking at the context of outbound Search (in the case that it's external), I advise you to use a Modal dialog, but otherwise it may not be a good choice. A flyout panel or a dynamic segment under the Search may alternatively be similar or closer choices alternative to a "mundane" SERP loaded in a new page if the time taken to load is high (though I feel this will not be a constraint in your case).