How to display misspelled words on search results?

Question

Since 1996 Jakob Nielsen annually publishes a list of "Top 10 Mistakes in Web Design". The top mistake in the latest list is Bad Search. It has not always been that way. In 2005 Bad Search was listed as number 5, and in 2003 it was not listed at all.

Overly literal search engines reduce usability in that they're unable to handle typos, plurals, hyphens, and other variants of the query terms. Such search engines are particularly difficult for elderly users, but they hurt everybody. - Jakob Nielsen

From experience I know it is often much better to search using an external search engine with keywords and the extension site:theWebSite.com, e.g. on Google, Bing, Yahoo and others. Problem is that it's probably not known and used as much as it could be. It leaves those users with either navigating the structure on the site or using the web sites internal search engine. If it is bad, the user will probably not find what she wants and move away from the site.

Now, Jakob Nielsen is not the only one expressing the problem with search. Peter Morville, author of Information Architecture for the World Wide Web, says that search is the "worst usability problem on the Web". Still "search" is one of the most used techniques to find content on the web. I often see misspelled words that don't render a search result, nor a suggested word list.

This is an example from BBC:

Using Google and the extension site:bbc.com, gives a result where the misspelled word have been corrected to azerbaijan and then showing search results from BBC web site. Also the user is informed that there were no results for the misspelled word on BBC. That's great, as long as Google does a good job in anticipating what I want to search for and the user knows how to use the extension site:bbc.com.

Problem is that internal search engines often don't display a suggested spelling. It is possible to add suggested spelling and even different spellings based on different context. This can be displayed in different ways, thus the question: How to display misspelled words on search results?

Related question: How to display search results for different versions of an item?

---

^{Note to reviewer: This is a user refined question from the original too wide question asked march 28 2012.}

Answer 1

I think there are two parts to resolving this.

1. The first is trying to ensure that people don't make spelling mistakes or at least helping them prevent making spelling mistakes. Though you can't get someone to have perfect spelling all the time, you can reduce the chances of the mistake by using Autocomplete, which can easily help fill out what the user might be searching for

   

2. The second aspect is recognizing that the user has made a spelling mistake despite the search engines help and there is no close matching word. Google does this rather poorly by giving you an error message like this:

   

   However Bing offers an alternate solution:

   

   So going by Bings approach, the layout I would potentially come up would be:

^{download bmml source – Wireframes created with Balsamiq Mockups}

The only difference here is that we are showing the different spellings matches (now how the matching is done will depend on the ranking algorithm used by the search engine to match against the keyword entered and the word found in the site and of course we will have to take into consideration as to how much of a match is considered as a good match and how many variations to show and all) and the user can click on the other matches to filter down into the search results.

Answer 2

The first thing that came to my mind is the typical MS Word spelling correction hint:

– Underlining the misspelled word in red, "curvy" or dashed.

Now I wonder if we can safely assume that users are used to "right clicking misspelled words will bring up spelling correction/alternatives"?

In any case, I'd say that the visual hint is a strong and established one and could well be used in the given context.

---

Edit: Visualization of how I'd employ the hint (Mockup blatantly stolen from MFrank2012)