Product Search User Interface Demo

Demo Screenshot

Working with limited space and needing both a basic and advanced search I came up with this design. The search happens automatically much like Google instant search as you type. What I like about the design:

  • large input and “[Product Search Results]” in results area lets user know that it is a search and that it searches products
  • The “basic” and “advanced” buttons are placed in a way that associates them with the search input letting the user know that clicking them will change the type of search being done
  • Visual separation of search input and search output
  • No unneeded search button or title to tell the user what it is since it’s parts and design say what it is.

What I am worried about:

  • Some users might not like the lack of a search button (Google still has their search button even with google instant enabled)
  • Making assumptions where I shouldn’t have

This is just a simple demonstration of what I have come up with and would love your feedback. What do you like about it? What do you hate? How would you do it differently? Let me know in the comments or on Twitter @MikeGrace

Check out the demo now if you haven’t! -> http://mikegrace.s3.amazonaws.com/geek-blog/sandbox/search-example.html