A LIST Apart: For People Who Make Websites

No. 186

Discuss: Enhance Usability by Highlighting Search Terms

Pages

 1 2 3 >

1 Nice Implementation

I wrote something similar (based on the same principles) back in May, posted at http://www.ilovejackdaniels.com/php/google-style-keyword-highlighting/ – I have to say though, this version is very nicely done. The textarea and script bug was something I hadn’t considered, and the accent replacement is a nice touch. Good work!

posted at 07:49 am on August 10, 2004 by ILoveJackDaniels

2 Is this a good thing?

Before we go implementing this everywhere, we should ask if this is really a good thing? Usability is mentioned in the article, and it says that search term highlighting is good, but where’s the proof? What’s the reality?

A quick informal survey this morning (of web developers and web users both) shows that people I know don’t seem to like search term highlighting. In fact, it distracts attention from the content you’re looking for. Each person I talked to said, at best, they ignore the highlighting because they’re in a different mode of scanning the page once they reach it.

How do people then know the difference between explicitly highlighted items on the page and the ones that are done by the search term highlighter? Also, if they’re really looking for the terms (that they already know are on the page), why not use the “Find” feature in the browser? That’s what it’s for. This way it’s left to the user.

If nothing else, maybe it would be better to put a little toggle near the top of the page to turn highlighting on and off — so they could use that rather than the “Find” command when they’re actually interested in finding the terms.

In any case, I just want to make sure that people consider whether it’s really useful to their users before they implement this. I’d rather not have every site I visit highlighting random words throughout the pages.

posted at 08:11 am on August 10, 2004 by Justin Greer

3 Why highlight?

Better yet, why not just make the text a different colour rather than highlighting it? It would single out the text still, but would do so much more subtly.

posted at 08:23 am on August 10, 2004 by Kim Siever

4 Client-side

How about doing this with JavaScript. No extra meaningless markup and we could even have a link to disable the highlighting with out the extra trip to the server.

posted at 09:00 am on August 10, 2004 by Andri Siguršsson

5 Highlighting client-side with searchhi

Without wishing to blow my own trumpet too severely, my searchhi routine (http://www.kryogenix.org/code/browser/searchhi/) highlights search terms client-side, and is unobtrusive DHTML (meaning that it only requires a script src tag at the top of the page, and a definition for span.searchword in your stylesheets. It’s simple to implement; obviously it won’t work in non-JS browsers.

posted at 09:11 am on August 10, 2004 by Stuart Langridge

6 Parsing HTML Simple Patterns == Bad Idea

The problem with your naive expression is that it is easily broken by perfectly valid HTML. A few examples:

What about an image with ALT=”> Comment”? What about a comment with a > in it? What about pages with scripting that does numeric > comparisons ?

I highly recommend looking at a full-on HTML parser if you want to avoid potential problems.
http://php-html.sourceforge.net/ is one such.

You can see the general method (albeit implemented in perl) in the second code listing at this link:

http://perlmonks.org/index.pl?node_id=370246

posted at 09:14 am on August 10, 2004 by Michael Kellen

7 Great Article!

Thanks for the great article. I will definately consider using this for my site. Thanks a ton.

posted at 10:06 am on August 10, 2004 by Urban Clothing - FOS

8 Firefox highlighting

I agree with Justin Greer. Check out Firefox’s “find” feature. It makes it easy for those who WANT search term highlighting to access it.

posted at 11:27 am on August 10, 2004 by Trevor

9 Pretty Good

I have just coded an advanced search in my website http://www.rolex-replica.net,
This hightlight thingy seems to be a option… Will be adding it..
Thanks,
Amit

posted at 07:55 pm on August 10, 2004 by Amit

10 custom/advanced searches

One additional problem is a search utilizing inclusionary or exclusionary syntax (’+’ or ‘-’). I pretty much always search using advanced filtering techniques. While this works well for basic searches, it fails to take into account common advanced search strategies.

posted at 08:29 pm on August 10, 2004 by andrew

Pages

 1 2 3 >

Discussion Closed

New comments are not being accepted, but you are welcome to explore what people said before we closed the door.

Got something to say?

Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.

Create a new account or sign in below if you’d like to leave a comment.

Remember me

Forgot your password?

Subscribe to this article's comments: RSS (what’s this?)