Visual differentiation of scripted links

I’m talking about “ajax” links, or “javascript” links. Anything that results in an action while still letting the user remain on the current page. Let’s call them “scripted” links here.

Scripted links and non-scripted links lead to drastically different user experiences. We should make them look different too.

Clicking a non-scripted link causes the browser to fetch, parse and render an entire new page. The url changes. The screen flickers. The scroll bar shoots back up to the top. It’s kind of a big deal.

A scripted link, most of the time, has less severe consequences for the user. Maybe a tab gets swapped in, or a floating div pops up to display some information. Whatever it is, it’s a very different experience than a non-scripted link. The page doesn’t reload. The scroll bar stays right where it is. You won’t lose any text you may have entered into a text box.

We should let our users know what sort of experience they’re getting themselves into before they click. We should help them make the decision of whether or not a link is click-worthy.

Many great sites use both regular and scripted links together but do not consistently differentiate between the two types. Sites like Facebook, Flickr, Google Video, Yahoo’s Homepage, Digg, Youtube, and many more. Nearly every site out there gets this wrong.

Here are a few screenshots from popular sites with this issue.

On Google Video, the “Comments” or “Collapse Frame” links are safe for me to click on while watching a video. The “Help” link is not. As a user, I don’t have a great way of making the distinction. One wrong click on that help link and I’ll forever be afraid to click on any links until my video has finished playing for fear that I’ll lose my place.

This is from the featured content module on the Yahoo! Homepage. The top two links send me to a totally different page. The bottom link just loads different content dynamically in the module. The links look identical.

Youtube has different styles applied to their links, but unfortunately it’s not consistent. It would be great if all of the scripted links had the dotted underline for example. Then I’d know for sure that clicking on a page number is safe, but clicking a person’s name will interrupt my video and I should be careful.

— ———

As web developers, we probably don’t have as much trouble with this as most people. We have a good feel for which types of functionality tend to get implemented dynamically and which ones don’t. We know what cues to look for. But, for less savvy users, a consistent style differentiation could go a long way to making them more comfortable to click on scripted links. And users that feel comfortable clicking will explore and in turn find your site easier to use.

There are a few ways to go about implementing this (and we’ll have to do it without any built in help from the browser this time). The approach I’ve taken on my newest project is to simply slap a class=”scripted” on all of my scripted links as I’m building my pages and I’ve made links of that class look slightly different. If you’ve already got a large site and doing that manually would be too painful, then you may be able to apply the style to these links at run time via javascript as long as you’ve been consistent in the manner in which you’ve executed your scripted links. You could look for links that have a defined onClick event, or an empty href, something like that.

Comments are closed.