Search = type-in field + button

If your web site has a search feature, it’s important that visitors recognize it as such. And know how to use it.  

All in all, that’s not a very hard thing to do. But since I know some web builders like to get creative with search, here’s a few tips for a simple search interface.  

Who are these tips for?

99% of all web sites. Only when search is at the core of your business, like it is for jobs sites, property sites and classified ads sites, do you need a more complex search feature.

Search interface = type-in field + button

The basic rule is simple: the search interface consists of a type-in field followed by a button.

A search feature without a button looks cool to web builders and web professionals but not all ‘normal’ surfers know they can press ‘Enter’ to activate the search feature. 

Type-in field: empty and big enough

Basic rules for the type-in field:

  • The type in field should be at least 25 characters long. A two-word search should be visible.
  • Obviously you need to be able to use more than 25 characters in the type-in field. The number of characters you can type should be unlimited.
  • Make sure the type-in field is empty. Don’t put in instructions like ‘Type your keyword here’ or ‘Search’. If your search feature looks like one, people will know what to do with it.
  • Make sure people recognize it as a type-in field. Use a white or at least pale background colour and put a border around the type-in field.
  • If you really want to get frivolous, use rounded edges. That’s about as creative as you can get. At least if you want a clear search interface.

Button: the clearer, the better

  • The button should look like a standard button.
  • Pale background colour. Grey does the trick nicely.
  • Fairly square. If you really want to, you can go for rounded edges. (The excitement!)
  • Put a border around the button.
  • For those who think I’m too strict: do you really think sites like Google or eBay wouldn’t ‘design’ their buttons a bit more if that worked better than a standard search button?
  • Put the word ‘Search’ in the button. Meaningless things like ‘Go’, an arrow or a magnifying glass are a no-go.

No need for announcements

If you stick to the rules, everybody will recognize your search feature. You won’t need to ‘announce’ the search feature by putting the word ‘Search’ in front of the type-in field. Because it already says ‘Search’ on the button.

‘Enter’ activates the search

Because your web site is there for all kinds of surfers, also the more experienced ones, ‘Enter’ should start the search. 

Bye-bye, advanced search

What about advanced search? Again, unless you’re a property site, jobs site or you have thousands of products for sale, a simple type-in field and button labelled ‘Search’ will do just fine.

For the average person, using an advanced search feature is as easy as climbing Mount Everest barefoot. And blindfolded. With a 50-pound pack strapped to your back. Anyway, you get the picture.


Read more articles about , Usability.

Want to stay informed about new articles?
Subscribe to our RSS feed or our newsletter.