Discuss: Enhance Usability by Highlighting Search Terms
by Brian Suda, Matt Riggott
- Editorial Comments
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
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.
Subscribe to this article's comments: RSS (what’s this?)



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