We're trying to avoid adding another page in the hierarchy. (basically a results page with a Back button). A few things....

  1. displaying the results on the same page as the search input field isn't an option. The page is already full of content.

  2. Search results could/would be paginated.

search page:

search page

auto-suggest behavior:

auto-suggest behavior

after user clicks "see more results" from auto-suggest dropdown:

after user clicks "see more results" from auto-suggest dropdown

  • You mention that the page is already full of content. Could we see a screenshot or wireframe at all? It would help to understand the context of the question.
    – Matt Obee
    Jan 16, 2013 at 16:40
  • We need more information here. But typically, you'd put the search field on the same page as the results. Copy Google. They've figured this out already.
    – DA01
    Jan 16, 2013 at 17:28
  • What happens with the search results? Do you click on links in the results to move elsewhere? Do you copy an ID number or something to paste into some field on the screen?
    – jlarson
    Jan 16, 2013 at 18:09
  • sorry, i should have been more clear, this is a friend search. adding screengrabs to the question.
    – meepsh
    Jan 16, 2013 at 20:46
  • What you're suggesting is something similar to Facebook. It seems sensible enough.
    – icc97
    Jan 16, 2013 at 21:03

2 Answers 2


It's not a good idea to display data in a "modal" window. The behavior of a "modal" window isn't well defined on the web. In some cases a window that looks modal can disappear when you click anywhere outside it. It can invoke anxiety in the user - "I must be careful no to close this window or I'll lose the data". The data can appear to be precarious.

The other problem is a modal window hides what's behind it so a user can't switch back and forth between the modal window and page behind the modal window, like they can if there's simply another web page.


Can the modal window still disappear if the user clicks elsewhere? Or do they need to click somewhere inside in order to continue? If that's the case: don't.

I think I have an understanding what you are trying to do here. Basically you want the user to see search results, but you don't want them to navigate to a separate page, right? Do you want them to be able to view all the search results, or just the most relevant set?

Either way, I think an overlay can be the answer here. As the user puts in keywords in the search bar, fire of a search and let a overlay appear. In the overlay, you'll get some results. You can either choose to just display the most relevant ones, or go more extreme and offer all search results (you'll be needing pagination for this though.).

If you want an example, visit the dutch website Tweakers. You can see a search bar just below the navigation in the top. Type in some keywords (iPad review for example) and have a look :)

  • no, the user wouldn't be able to close the modal by clicking-off of it...they would have to click a close button to do so. they would access the search results page by clicking the "view more results" link in the auto-suggest flyout. (i added screengrabs to the question) btw, i looked at your example and it would behave the same way. im wondering if the "more results" could display in a modal and therefore remove the need for the Back button and new page/view. this may be a moot point and another responder says it would be good form to have the Search field on the results page as well ;)
    – meepsh
    Jan 16, 2013 at 20:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.