According to hundreds of usability studies, putting placeholder text in form fields is a horrible idea and you should never ever try it. But what about the search bar? Is it immune to the horrible effects placeholder text has on usability? Is it special? Lots of sites seem to think the search box is immune to the downsides of placeholder text. Are they right?

Yes, they’re right, but it’s heavily dependent on the context. While placeholder text on form fields in other parts of your site would go a long way in ruining the user experience, the search bar is the only place where it can actually improve the user experience. With a single caveat: it has to be done right. Do it wrong and it would cause the same problems present in other areas if not worse. No placeholder text is preferable to poorly executed placeholder text.

Always remember Jakob’s Law

Users spend most of their time on other sites. For a good user experience, your site needs to work the same as other sites.

That’s Jakob’s Law in its entirety. Your user interface should be as easy to use and intuitive as possible. No fancy stuff or attempts at being unique. You can do that with the content but not the user interface itself. Users should never need to watch a tutorial before using your site.

In the context of placeholder text in the search bar, this means starting with the design of the search bar itself. No amount of placeholder text will make up for a poorly designed search bar.

Search bar design best practices

  1. Make the search bar persistent on every page
  2. Make the search bar large and prominent. Don’t hide it behind an icon or on a corner of the page. The search bar should occupy a prominent place right in the center of the header. You should give it an entire row to itself.
  3. Include a search button right next to the search bar. A search button emphasizes the search bar and makes it easy for the user to click on it in order to submit a query.
  4. Allow users to submit a query by pressing “Enter” on their keyboards.
  5. Make the search bar and search button stand out by properly contrasting them with both the background and surrounding page elements.
  6. Keep the search bar white. Every other page on the internet has a white search bar. That’s what users know and have come to expect. Don’t confuse them with other colors. Remember Jakob’s Law.

Best practices for implementing placeholder text in the search bar

  1. Make sure the placeholder text disappears as soon as a user starts typing. You don’t want a search query like; “What are you looking for? red cotton v-neck.”
  2. The placeholder text should ideally include the word “Search” to reinforce the purpose of the search box. “Search” on its own doesn’t do much. You can use Google Analytics to find the most searched items in your store and use them. Let’s say you run a meat store and your most searched items are T-bone steak, ribs, and chicken drumsticks. In your search box, you could have the following placeholder text: “Search t-bone steaks, ribs, and drumsticks.” You can also use a brand-specific nudge. Shutterstock’s search bar, for example, tells users to “Search for royalty-free stock photos.” If you sell pet food, for example, you can have a placeholder text like: “Find the best treats for your dog.”
  3. Placeholder text should be gray. Jakob’s law strikes again here. Other sites use gray for placeholder text, so you should too. Users see gray and they immediately know it’s placeholder text. If they see red or blue, they will be very confused.

Final note

You don’t have to use placeholder text in your search bar. But if you decide to use it anyway, do it right.