Written by Brian Cray on December 15th, 2009
linkNotify 2.0 is a jQuery plugin that provides better user feedback on clicked links than the browser by displaying a color-changeable progress bar behind the link.
See linkNotify 2.0 in action
Why do I need linkNotify?
Have you ever seen someone click a link over and over waiting for the next page to load? It's a bad habit that's actually counter-productive because it causes the next page's loading to start over. This user behavior phenomenon occurs because browsers do a bad job giving feedback to the user that their click was successful and the next page is loading.
So what's the problem? Feedback proximity.
Users aren't looking for feedback where browsers have a progress bar. Users are staring at the page where they clicked and wondering why a new page hasn't loaded. The loading feedback needs to be closer to the action (the click). That's why I've developed linkNotify—to enhance the feedback of link clicks to improve the user's experience of control.
Changes in version 2
| Old version (1.x) | New version (2.0) | Benefit of change | |
|---|---|---|---|
| Feedback | Clicked link text changes to "Loading… | A progress bar behind the clicked link | No more layout issues; Progress bar animation more accurately visualizes progression of time |
| Plugin parameter | Loading link text (Loading… is default) | Progress bar color (#eeeeee is default) | Change the progress bar color to match your theme |
| Open in new tab/window | Always activates | Doesn't activate if opening in a new window or tab | The old version changed the layout of a page that remained open |
| Image links | Always activates | Doesn't activate on image links | Looked unnatural when a big image would change to "Loading…" |
| Results | Needs improvement | Awesome |
How to use
Using selectors to choose which links to improve with linkNotify 2.0
$('a').linkNotify(); // work on all links with the default color of #eeeeee (light grey)
$('#content').linkNotify(); // work on all links in the content area only
$(':not(#menu) a').linkNotify(); // work on all links that aren't in the menu
Changing the default progress bar color from #eeeeee
$('a').linkNotify('#ff0000'); // red as hex color
$('a').linkNotify('blue'); // also takes color names
You can also see the plugin page hosted on jQuery at http://plugins.jquery.com/project/linknotify