Brian Cray ··· Home > Blog > Javascript > Better user feedback on clicked links with linkNotify 2.0

Better user feedback on clicked links with linkNotify 2.0

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

Download linkNotify 2.0

You can also see the plugin page hosted on jQuery at http://plugins.jquery.com/project/linknotify