Javascript and CSS Tricks to Improve Site Usability Without AJAX

February 2, 2007

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

16 Comments

2007-02-03 17:23:49

[...] stone mind » Javascript and CSS Tricks to Improve Site Usability Without AJAX (tags: Usability css javascript tips webdesign) Bookmark to: [...]

 
Comment by Brian Swartzfager
2007-02-08 05:03:50

Asbru Web Content Editor is another good JavaScript WYSIWYG editor. It’s not free ($45-$55), but it’s pretty powerful, and at the time when we bought it (about a year ago now) it was the only editor that performed well in Safari.

Comment by asmith
2007-02-08 05:12:20

Thanks for letting me know about Asbru. I think that TinyMCE has been making Safari support a priority more recently. For anyone interested, TinyMCE a compatibility page here.

 
 
2007-04-19 11:50:22

[...] Ecco il link all’articolo: Javascript and CSS Tricks to Improve Site Usability Without AJAX [...]

 
Comment by Sue
2007-10-31 08:05:49

I tried your way of improving the search experience and it works wonderfully except for one part. I have to hit enter twice in the search bar before the search term is highlighted. I think it’s the same way on your site’s search bar. I know you probably aren’t the one who wrote the script since you redirected to the searchhi web site.

Comment by admin
2007-10-31 08:11:22

If I understand what you are describing correctly, I think it is working as intended. It doesn’t highlight the search terms in the search results, but instead in the content of whichever result you then link to from the search page. So, whether someone uses Google to connect to a page on your site, or uses your own site’s search box, they will see highlighted terms on the page they land on.

Comment by Sue
2007-10-31 11:26:57

Oh I gotcha. That makes sense. I didn’t realize it worked that way. Thanks!

 
 
 
2009-01-06 06:27:26

[...] one of my earliest blog posts, I described an approach to customizing a search form that I employ on many of my sites. Instead of [...]

 
Comment by Marissa
2012-11-06 11:33:32

Exсellеnt article. I am goіng thгough a
fеw οf theѕe iѕѕues aѕ
ωell..

 
Comment by general
2012-11-27 14:24:47

Howdy would you mind stating which blog platform you’re using? I’m planning to start my own blog soon
but I’m having a difficult time making a decision between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your design and style seems different then most blogs and I’m
looking for something completely unique.
P.S Apologies for being off-topic but I had to ask!

general

 
Comment by admin
2012-11-28 03:41:02

Its WordPress using a custom theme built on top of Blueprint. My goal was extreme minimalism that gets rid of anything that isn’t absolutely essential, leaving the remaining focus on the content, although I softened this approach a little over time. Originally, I didn’t have the title of the site anywhere on the page, for example. I created this design in 2005, and I think its actually stood the test of time fairly well…I don’t think it looks as outdated as some sites from that era.

I am considering restarting this blog, in Drupal.

 
2012-12-27 14:59:37

Outstanding things from you, man. Ive examine your issues before and youre just too awesome. I love what youve received here, enjoy what youre stating and the way you say it. You make it entertaining and you nonetheless manage to hold it intelligent. I cant wait to read much more from you. This truly is actually a wonderful blog.

 
Comment by Josefa Karnish
2013-01-18 22:28:38

Wonderful goods from you, man. I have understand your stuff previous to and you are just extremely magnificent. I really like what you have acquired here, really like what you’re saying and the way in which you say it. You make it entertaining and you still take care of to keep it smart. I can not wait to read far more from you. This is really a tremendous web site.

 
2013-01-21 08:41:20

Hello there, I discovered your web site by the use of Google even as seeking for a similar topic, your internet web site came up, it seems great. I’ve bookmarked it in my google bookmarks.

 
2013-01-22 18:55:04

My spouse and I stumbled over here from a different page and thought I should check things out. I like what I see so now i’m following you. Look forward to looking at your web page repeatedly.

 
Comment by Kaylee Dravland
2013-01-23 13:14:39

I like this blog very much so much fantastic info .

 

Sorry, the comment form is closed at this time.