Visualizing Inline Links

An increasingly prevalent problem in this age of smart webpages (dubbed “Web 2.0” by the marketing department) is the visualization of inline links. That is, links that when clicked immediately change part of the page you’re looking at, as opposed to slowly loading a whole different page.

inlinelinks_before

This picture of Gmail shows how it works right now. “Compose Mail” is an inline link. The cursor is a traditional hyperlink “handcursor”. What’s there to tell us, except experience, that this link doesn’t open a popup window or reloads the entire page?

inlinelinks_new

Maybe the solution is as simple as not changing the cursor. Since the effect of clicking the link is immediate, is there any reason to distinguish the link from a pushbutton or a scrollbar, whose effects are also (usually) immediate? It’s only the introduction of the slow hyperlink that required a cursor change. The Hand is now synonymous with “click once and wait a while”.

It would certainly be easy to implement, as the CSS is plain (cursor: default;). Is this the octopus in the corner, or just plain dumb?

7 thoughts on “Visualizing Inline Links”

  1. mark says:

    I disagree – if something CAN be clicked (and thus, have something happen, either to the page you’re on, or a popup opening), the cursor should ALWAYS be a hand. I regularly see websites, made by clueless dolts, that have links in the navigation bar, but moving the mouse over them doesn’t turn the cursor into a hand (and how hard can it be to add ONE LINE to the CSS file?). Truly baffling heights of stupidity.

    If you must have a graphical indicator to appear on links that do AJAX-Y things, why not do it similar to how it’s done on Wikipedia: A link that takes you away from the current page has that little box-with-arrow image next to it. In your case, where it’s not sure what would happen if you click the blue, underlined text, you could have an icon like the reload icon from the web browsers? shrug

  2. Joen says:

    the cursor should ALWAYS be a hand. I regularly see websites, made by clueless dolts, that have links in the navigation bar, but moving the mouse over them doesn?t turn the cursor into a hand (and how hard can it be to add ONE LINE to the CSS file?). Truly baffling heights of stupidity.

    We are in joyous agreement here, all normal hyperlinks (as in not JS links) whether they be part of the navigation or otherwise should have a hand cursor.

    What I’m saying is that well designed AJAX links (as in this example: blue and underlined), could indicate inlinyness with the lack of a hand cursor.

    If you must have a graphical indicator to appear on links that do AJAX-Y things, why not do it similar to how it?s done on Wikipedia: A link that takes you away from the current page has that little box-with-arrow image next to it.

    That’s an idea, sure. How would you want that icon to look?

  3. adam says:

    i’m with mark, even ajax links need affordance. if the cursor doesn’t change, then the anchor needs some sort of visual change.

    i think the compose mail link is a bad example because it changes so much of the page layout. i do know there are other less obtrusive ajax links, though. i think where possible, AJAX that changes a small portion of the page should be a button or something similar.

  4. Jeff says:

    Since the effect of clicking the link is immediate, is there any reason to distinguish the link from a pushbutton …

    I’d like to note that the “Post” button right below this comment area hovers with a hand cursor. Obviously a css change, but telling.

    I’m also with the “uhm, no I don’t think so” camp. Not that it would be bad to use the cursor, however, no visual change is unacceptable. If you want to change the hand, as most leave it, that’s fine. However, if you insist on removing the hand, then I need to see some kind of roll over action that let’s that UI element shout “I’M INTERACTIVE CLICKMEPLZ,KTHNX” or else that element not only gets lost in the page background (when looking for the right UI element) but also now makes finding the clickable area (see: fitts‘_law) a major PITA.

  5. Joen says:

    I am prepared to concede my point for some of the obvious shortcomings pointed out here.

    Obviously it wasn’t the octopus in the corner, it’s not “just enough” to keep a plain cursor for inline links — I agree there should be visual indication on the link as well. Because it’s not enough, I guess the idea is moot.

    However, I still think it’s a problem worth solving.

    Also, I think the cursor thing could be used, maybe in a modified version. In fact, I think it makes sense for browser vendors to solve this problem, browser-side.

    Perhaps showing a small icon next the cursor, for inline links?

    I?d like to note that the ?Post? button right below this comment area hovers with a hand cursor. Obviously a css change, but telling.

    Totally, that was a conscious decision. Not sure it was the right one, but in this case, the result of the post button is definitely not “inline”. I suppose it is a bad idea to mess with UI widgets though…

  6. I don’t think the idea is moot, it’s actually what I’ve been doing all along and I’m glad to know somebody thought of the same solution.

    As it’s still a link, I still have :hover actions defined so yes, the uses does know that the link is interactive. Usually you will only find one or two AJAX/JS links on a page and those can always be styled according to what they do. If you embed something on a page and want to give the user the option to refresh this embedded content, I usually use an icon with a :hover effect and a cursor: default; stylesheet rule.

    Now the user has the :hover indication to see it’s interactive and a normal cursor that lets him know he’s not about to leave the page. In my experience this has always worked pretty well.

Comments are closed.