01 January 0001

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?

Some Examples of Empty Searches

  1. Reload / Redirect to Homepage. For example: Web Designer Wall and Team Treehouse Blog
  2. Do nothing! The search box simply does nothing and/or closes itself. For example: Codrops and Sitepoint.
  3. Nothing Searched For / Nothing Found. 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. For example: CSS-Tricks Css Tricks Empty
  4. Nothing Search For / Everything Found. For example: WebDesignerDepot and Code Tuts+Wdd Results
  5. Completely Blank. A completely blank list of search results appears. For example: Smashing Magazine and  Designmodo.
  6. Borked. The page just looks (or says) it's broken. For example: TheNextWeb and 1stWebdesigner.

Una opción para solucionar este problema es obligar que el campo de búsqueda sea obligatorio, de manera que el usuario no pueda realizar una búsqueda vacia. Sin embargo esto solo funcionará con los navegadores mas recientes.

Css Tricks Required

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.

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).

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.

 

Texto original de: http://css-tricks.com

Clients

Alexandro Pelaez
Client Logo
Client Logo
Client Logo
Client Logo
Client Logo
Client Logo
Client Logo
Client Logo
Client Logo
Client Logo
Client Logo
Client Logo
Client Logo
Client Logo
Client Logo
Client Logo