Although AJAX is the all the buzz right now, and for good reason, you can increase your Web site’s usability in quick, simple ways that don’t require you to learn an AJAX library. To that end, I would like to point to some examples of smart Javascript and CSS tricks that some very bright and generous people have developed and made available to mere mortals like you and I.
Now, I can already hear a few discontented murmurs out there. Javascript has had a bad reputation in the past: it was unevenly supported among browsers, and many users were instructed by their technical support to turn off Javascript in their browsers altogether. But Javascript has matured, and its browser support has become much more standardized. And as Google has proven to the world, a significant amount of your interface’s functionality can be built effectively with Javascript. The scripts I will be discussing here are not crucial to the functioning of your site; they are intended only to aid usability in subtle yet cumulatively powerful ways. If Javascript is turned off, these scripts will fail gracefully, falling back to how your site worked before you added them. So what have you got to lose?
Of course, you may find the functionality added by these scripts is important enough that you want to ensure that everyone sees them, including those without Javascript support, and so, you may want to add the functionality, where appropriate, using your server side language of choice instead of Javascript. But if, like me, you program in multiple environments, these small Javascript tools can be easily applied to any site regardless of the server side environment. Furthermore, I would argue that because what we are doing is tweaking the interface in small ways, say to decorate links so they are presented to the user in a slightly different way, Javascript on the client is the more appropriate choice to implement these features than in your server side code. In short, I believe that for the effects discussed in this post, Javascript is both the more elegant and the more appropriate solution, and in several instances, the only solution.
I have used almost all of the code I will be pointing to for several sites I have created, and I will try to be clear about the ones I haven’t. Except for a minor bug fix that I submitted to the “opening popup windows” script and the small tweaks I will mention to integrate these scripts, these are all scripts produced by others, and I will provide both links to the original sites from which I got the scripts, and I will indicate the restrictions under which they are distributed. (What little code of mine you find can be assumed to be under the GPL).
improving the search experience
A while back, I noticed how nicely the search interface in Mambo and Joomla was implemented. The “Search…” label was inside the search box, not beside or above it, so there’s little chance of confusing the purpose of that box, and its easier to spot on the page. The label disappears when you click to type your search, so its not in the way. Moreover, there is no button to press; I’m already typing my search terms, why should I think about removing my hand to mouse over and click on a button when I can just hit the Enter key? These are small considerations, but I think this attention to detail pays off.
I have used the small amount of Javascript code for that search box on a number of my sites, including this blog. I also ensure that on the search result screen, the search terms the user entered are displayed in the search box. So, for this WordPress blog, this is how I implemented the search box in my sidebar:
<?php $searchValue = ‘search…’; $searchClass = ‘search’; if (array_key_exists(‘s’, $_GET)) { $searchValue = $_GET[‘s’]; $searchClass = ‘current_page’; } ?> <ul> <li class=”<?php echo $searchClass; ?>”> <form id=”searchform” method=”get” action=”<?php echo $_SERVER[‘PHP_SELF’]; ?>”> <div> <input type=”text” name=”s” id=”s” size=”15″ value=”<?php echo $searchValue; ?>” onblur=”if(this.value==”) this.value=’search…’;” onfocus=”if(this.value==’search…’) this.value=”;” /> <br /> </div> </form> </li> </ul>
The onblur and onfocus code is the Javascript I lifted from Mambo/Joomla. Otherwise, I check for the name of input field for the search box in $_GET and display any value I find, so that on the search result screen, the user can see their search terms in the most logical place. I also use this condition to style the search box differently to give the user more context (more on this below).
Now, when someone uses your site’s search feature, and clicks on a search result, a nice thing to do is highlight their search terms on the subsequent page. Stuart Langridge came up with a clever and elegant way to do this by using Javascript to look for known search fields in document.referrer, extract the corresponding search terms, scan the body of the page, and wrap those words within a “searchword” CSS class that you can then style however you want.
By default, Stuart coded the script to look for Google and Yahoo search terms, but you can easily modify his script to include the search input field name for your own site’s search, and any other search engine that you believe people will be using on a regular basis to find your site. Simply modify the following line in the googleSearchHighlight function accordingly, as I have here to include my WordPress search input field name:
if (qsip[0] == ‘q’ || qsip[0] == ‘p’ || qsip[0] == ‘s’) { // q= for Google, p= for Yahoo, s= for WordPress
maintaining a sense of place with links
It doesn’t make sense to have links on your page that point to the current page you’re viewing, and it can in fact be mildly confusing to some users. Jonathan Snook created a small script to elegantly clear links to the current page. Moreover, we sometimes want those former links to be styled differently to indicate where we are in a collection of navigation links, for example. So, I made a minor addition to Jonathan’s script to add a CSS class to links to the current page, after they have been de-linkified, that I can then style appropriately. I have reproduced Jonathan’s script with my addition here:
/* CLCP v2.1 Clear Links to Current Page Jonathan Snook This code is offered unto the public domain http://www.snook.ca/jonathan/ */ function clearCurrentLink(){ var a = document.getElementsByTagName(“a”); for(var i=0;i<a.length;i++) { if(a[i].href == window.location.href.split(“#”)[0]) { removeNode(a[i]); } } } function removeNode(n){ if(n.hasChildNodes()) { for(var i=0;i<n.childNodes.length;i++) { n.parentNode.insertBefore(n.childNodes[i].cloneNode(true),n); // my addition n.parentNode.setAttribute(‘class’, ‘current_page’); } } n.parentNode.removeChild(n); }
In the past, several clients have requested that by default, links to pages on external sites be treated differently from links to pages within the site, by opening external pages in a new window for example. The value of this is debatable, but even if you disagree with the practice, you may find yourself implementing it if your client/boss/etc. disagrees with your reasoning. To accomplish this task with Javascript, I have found this script by TJK Design to very effective. The version of the script that I have used in the past follows:
function TJKpop(){ // v1.0 | www.TJKDesign.com // http://www.tjkdesign.com/articles/popups.asp var e = document.getElementById(‘page’); if (e){ var a=e.getElementsByTagName(‘a’); for (var i=0;i<a.length;i++){ a[i].getAttribute(‘href’).toLowerCase().indexOf(document.domain.toLowerCase()) == -1 && a[i].getAttribute(‘target’) == null && (a[i].getAttribute(‘onclick’) == null || a[i].getAttribute(‘onclick’).indexof(‘window.open’) == -1)){ if (a[i].getAttribute(‘href’) != null && a[i].getAttribute(‘href’).indexOf(“://”) >= 0 && a[i].getAttribute(‘href’).toLowerCase().indexOf(document.domain.toLowerCase()) == -1) { a[i].className+=a[i].className?’ outlink’:’outlink’; a[i].title+=’ (opens in new window)’; a[i].target = null; a[i].onclick=function(){newWin=window.open(this.href,’External Page’);if(window.focus){newWin.focus()} return false;} } } } }
If you also use TinyMCE on your site, be warned, that at least in the version of TinyMCE I am currently using, target=”_self” is automatically added to every link by default, and I don’t know of a way to change that behavior, so my version of the TJK Design script takes this into account. Also note that in the call to window.open, I changed the script to name the window “External Page” instead of “TJKWin” as it appears in the original script, but you may want to further customize this. The advantage of opening a named window, of course, is that the user will not be overwhelmed by multiple new windows if they follow several external links from your site.
Before using this particular script, I encourage you to carefully read the original TJK Design post, which not only describes this approach in great detail, but also discusses the pros and cons of adding this behavior, with good links to even more detailed discussions.
using link icons to inform user expectations
The original post for the TJK Design script for opening external pages in a new window also shows you how to add an icon to those links to further indicate to users that by clicking on the link, a new window will be opened, greatly helping them understand where they are in their browsing experience. If you are already using this script, I recommend pursuing that functionality.
You can take this further by using icons to visually label other types of links that are not just simple links to pages within your own site. This can be a good idea, as long as you implement it sanely for your site. If you have many links to different file types, email addresses and external sites on every page, using these icons indiscriminately may cause more confusion than it alleviates. But if you are so inclined, here are two interesting ways to go about this: a Javascript approach and what is in my opinion the more elegant and appropriate way to do this using CSS by Stuart Langridge, who created the search term highlighter discussed above.
I am not often inclined to use link icons. I believe that opening new windows is the most likely action to cause a user to be confused about where they are, and so, that use case is the one in which I would most likely use a link icon. For different files types, I am just as likely to output some parenthetical comment like “(PDF)” after a link to a PDF file for example, which is easy enough to do in your server side language of choice. But the Web is a visual medium and if for example, you are presenting links to the same document in multiple formats, then the use of familiar link icons can help users quickly scan for and click on the version most convenient for them.
allowing users to edit text, sanely
Users like to control the look of their content, and I don’t just mean in the obvious cases of authoring a blog post or some other Web publishing context, but even in very simple cases, like when adding captions to photos in a gallery, or adding comments to a page. Allowing users to do this with raw markup, whether HTML or something like BBCode or a Wiki markup is pretty unfriendly and fraught with usability issues for naive users.
There are a number of robust, open source WYSIWYG editors out there that use Javascript to turn HTML textareas into small word processors, but I would like to invite angry comments by saying that the one I have used most consistently and the one that I believe is arguably the most mature and easy to implement, is TinyMCE. TinyMCE has actually been integrated into WordPress and a number of content management systems, but even if all you want to do is allow people to use bold and italics when adding a title to an image, you can easily add TinyMCE with a few lines of Javascript.
TinyMCE can also be customized easily to make more complex options available, although I tend to use its simple interface. In most cases, people really only want and expect to do a few things like bolding and italicizing text, for example. In a more complex content management environment, user expectations may be different however, and even if your users never do things like create complex tables in practice, they may like seeing those options available. I do think, however, that certain options, like the ability to change font size and color, are unnecessary and can be safely removed without the user noticing. This is a rare instance in which I think functionality should be curtailed to protect the average user from themselves.
From a more practical standpoint, one of the nicest features of TinyMCE is its “Paste from Word” feature which attempts to clean up the garbage spewed out of Microsoft Word. In my experience, users love to actually type significant amounts of text into Microsoft Word, admittedly a better tool for this, and then paste their finely crafted words into TinyMCE. But Word’s junky formatting can make your storage back-end throw a fit. In the versions of TinyMCE I’ve been using, this feature isn’t perfect, but it helps.
improving image usability
This following recommendation may seem like its just adding pizazz more than real usability, but I think there are real usability gains to be had by presenting thumbnails of images and then displaying larger versions of the image when the thumbnail is moused over. Obviously in image galleries, this can aid searching and browsing, allowing users to better judge whether its worth clicking on a thumbnail to see the full size image. But I think in any site, these scripts can allow you to better place images on the page with less disruption to surrounding text. And yes, the effect is cool.
A script I have used on a few sites is the Simple Image Trail script at JavaScriptKit.com that came to my attention because of its stunning use at iStockphoto.com. You can configure this script to not only show a larger version of the image when it is moused over, but also a more detailed caption or other description in the pop up that appears. Again, if the user does not have Javascript enabled, they will just see the image as they did before.
Recently, a similar but even more striking script was brought to my attention called Highslide JS. I haven’t used this myself, but it appears to work very well and be very customizable.
final thoughts
Several of these scripts use the window.onload global event handler to launch their functionality once the page has finished loading, so if you use several of these together, you will need to factor these out and combine them into a separate method that gets called. So, for example, the following launches the scripts that highlight search terms, clear current links and open remote links in a new window:
window.onload = postProcessPage; function postProcessPage() { clearCurrentLink(); googleSearchHighlight(); if(document.getElementById) { TJKpop(); } }
Finally, many of my thoughts on usability have been shaped by the work of Jacob Nielsen whose site useit.com has a lot of practical, common-sense guidelines for usability that are based on quantitative research of how people actually use the Web. Sounds downright agile, doesn’t it? He might not agree with the things I have proposed here, but he inspired them nonetheless, and if you want to painlessly increase the usability of the sites you help create, then time looking at useit.com will be well spent.
What Javascript or CSS tricks have you found useful in the past? Leave a comment and tell me about it.
resources
- Mambo and Joomla (GPL)
- searchhi: Automatic search word highlighting after web searches (The only known condition of use appears to be keeping the attribution in the code.)
- Clear Links to Current Page with Unobtrusive JavaScript Version Two (Public domain)
- Opening Popup Windows with no extra markup. (The only known condition of use appears to be keeping the attribution in the code.)
- Link Warning (Contact the author to verify terms of use.)
- External link icons the CSS way (Contact the author to verify terms of use.)
- Simple Image Trail script (From the javascriptkit.com site: “You may freely use any script found on JavaScript Kit on BOTH personal & commercial webpages. You may NOT, however, redistribute our scripts, by putting them on another script archive or CD ROM, for example.” Also, the attribution in the source code must remain intact.)
- TinyMCE (LGPL)
- Highslide JS (Creative Commons Attribution-NonCommercial 2.5 License)