When users leave the search box empty…

CSS-Tricks

When users leave the search box empty…

The following is a guest post by Brin Wilson of WinningWP. Brin wrote to me wanting to do a little advertising for his site. I of course would happily accept that, but even better, since Brin is a tech writer anyway, why not write a guest post. That's always a win-win, and since he had a good idea anyway... take it away Brin!

If you're reading this, my guess is you're someone who cares about user experience. Like me, I'll bet you've probably spent countless hours trying to perfect every last detail of your site: from ensuring everything looks as it should on numerous different devices to creating either an entertaining and/or a helpful 404 page! But have you ever considered what happens when people search your site using the search functionality you've provided (i.e. usually a simple search box located somewhere near top of the page) but inadvertently hit enter without having actually typed anything?

Looking around the web, there appears to be no real consensus on what should happen in this particular edge-case scenario. Indeed, even the vast majority of industry-leading web design blogs seem to give no real consensus on what should or shouldn't happen!

Some Examples of Empty Searches

Reload / Redirect to Homepage

Familiar examples include: Web Designer Wall and the Team Treehouse Blog.

In these cases it's likely a WordPress theme that is 1) using default WordPress search and 2) missing a search.php template file (or the template is essentially the same as the homepage). So, the default homepage will be loaded with no search filter, meaning no filter is applied and you'll see whatever is normally on that page. It's not very clear what is going on.

Do Nothing

Familiar examples include: Codrops and Sitepoint.

The search box simply does nothing and/or closes itself.

Nothing Searched For / Nothing Found

Familiar examples include this very site, i.e. CSS-Tricks and, in fact, currently my own site WinningWP.

A default result appears quoting whatever the user has searched for (in this case nothing), and no results are shown. Kind of the opposite of the first examples where because there is no search filter, everything is found. But you're also on a clear search page so some action has happened.

Nothing Search For / Everything Found

Familiar examples include WebDesignerDepot and Code Tuts+.

A list of the most recent posts appears.

Completely Blank

Familiar examples include Smashing Magazine and Designmodo.

A completely blank list of search results appears.

Borked

Familiar examples include TheNextWeb and 1stWebdesigner.

The page just looks (or says) it's broken.

A better result

So what should be made to happen? Well, using the attribute 'required' would arguably go along way towards improving the user-experience in browsers that support this part of HTML5.

<input required type="search" name="q" id="q">

Thereby simply stopping the users with more-modern browsers from even being able to perform a blank search in the first place (as exemplified by the empty-search-box-behavior over on Speckboy Design Magazine). Here's a complete form example:

<form id="search-form" action="/search-results/">
  <div>
    <label for="q" id="search-label">
      Search
    </label>
    <input required aria-labelledby="search-label" id="q" type="search" name="q" class="search-field" value="">
    <input type="submit" value="Search" class="screen-reader">
  </div>
</form>

Editors note: I updated the search form here to use required because it seems like an easy/obvious improvement.

But what about non-supporting browsers? Is this good enough? And more to the point: can we do better?

Personally, I'm of the opinion that these types of empty search-box searches could perhaps best serve the user by being made to return a result that tells the user they've conducted a search but somehow or other managed to leave the search box empty. Perhaps in a kind of humorous-404-page style. Although, that said, I realize this might be going overboard – and would probably be a bit inappropriate for some websites.

Perhaps one of the nicest user-experiences (suggested by Chris after seeing the first draft of this post) could be provided by taking the user to a really well-designed full-page search experience: perhaps with the addition of some suggested popular search terms.

Or maybe the blank search is just too much of an edge case to worry about – especially on sites with relatively low traffic.

Any other suggestions for what best to return when a user leaves the search box empty? Is there some chance the user just clicked search on accident or had another assumption about what it would do? Thoughts?

---

When users leave the search box empty… is a post from CSS-Tricks

more info...