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:

BBC display search result of a misspelled word

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.

Google search result of a displayed word

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.

  • I am a little confused here,are you trying to show the search results for the misspelled words or different variations of the word?
    – Mervin
    Commented Mar 29, 2012 at 8:20
  • @MFrank2012 Sorry about that. I'm trying to correct the misspelled word and give the user different suggestions on what the misspelled word could be corrected to. In short - correction variations. Commented Mar 29, 2012 at 8:30
  • 5
    It's not about displaying them but rather about teaching your internal search engine to recognize them.
    – dnbrv
    Commented Mar 29, 2012 at 15:07
  • 1
    Interesting question. My initial thought was 'italic' but looking at the Google example that might need a 2nd thought. Looking forward to the answers here. Commented Mar 29, 2012 at 17:29

2 Answers 2


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

    enter image description here

  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:

    enter image description here

    However Bing offers an alternate solution:

    enter image description here

    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.

  • 2
    Minor clarification: Google does return results for misspelled words - see the OP - it's just that their algorithm didn't pick up "acabacadra" as a misspelling of "abacadabra" and Bing's did. I believe the unfriendly message you saw occurs when there are no results despite their attempts to error-correct for you. Commented Mar 29, 2012 at 22:14
  • Point noted :),maybe I shouldnt be answering questions at 1 am in the night
    – Mervin
    Commented Mar 29, 2012 at 22:31

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

Red, "curvy" or dashed underlined text

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

enter image description here

  • But most browsers also do spell check for you nowadays,so how do you plan to override that?
    – Mervin
    Commented Mar 29, 2012 at 21:31
  • @MFrank2012 – see your mockup with my amendment ;)
    – vzwick
    Commented Mar 29, 2012 at 21:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.