Will This Link Open a New Tab/Window?
Wednesday, June 10, 2009 at 1:07PM UPDATE:
Syphon kindly pointed out that I'd completely missed the forest for the trees — of course my design is based on an arrow, whereas browsers usually use a hand icon when mousing over links! 
So, all the same applies, except imagine a hand instead of an arrow (until I have a chance to replace the graphics!) Also, this means the user is completely used to seeing their cursor change under their fingertips as they mouse around. We now return to your regular programming…
Ever clicked on a link and had a new window (or tab) unexpectedly open? Me too. It's a minor frustration that I think adds up over time. And sure — there are plugins and settings which can help manage this process. But the out-of-the box experience seems to be missing something to indicate whether a link will open a new window/tab, rather than simply take you to a new page.
A simple solution might be a custom mouseOver cursor indicating links that will result in new tabs/windows. I sketched up some ideas of what this cursor might look like and twittered the result:
The sketches were based on common graphic designs, with a few 'creative' ideas thrown in. Some commenters (thanks!) on my image's Skitch page added some useful feedback which I iterated on.
Then I ran the idea past my good friend and talented designer Cris Pearson, who had a few suggestions. I tried a few more designs…
Then Cris came up with the simple idea to simply add a more realistic image of a new tab below the cursor, rather than trying to be symbolic. Which I mocked up below. Seems to me to be an excellent solution.
Obviously h1 is for links that will open to a new tab. If a user hasn't set up their browser this way, then a different icon would be required to show a new page will be the result
Further points:
- A schizophrenic cursor, flickering as you mouse around a page, could be very annoying…
- Adding a delay the transition to solve the above problem could be very problematic, as I expect expert users will want to see the change in milliseconds
- Of course, there are other solution rather than changing the cursor. These might involve some kind of highlighting on the page on mouseover, or some kind of floating bezel that appears near the cursor
- I brought the 'newlink' cursor idea up with Aza Raskin, and he suggested even more depth to this interaction (and that there'd been discussion on this topic before). For example: what if the browser knew a link might be 'unsafe'? This is where the idea for the design d2 came from, which I'm quite fond of
Reader Comments (10)
why not just color code links depending on if they open in a new tab vs a new window?
Isn't the problem that some sites still decide to do this? It's a behaviour designed before browsing had tabs. It's also really annoying, a fair sign in my mind that the site is crummy.
If it makes sense for a particular situation, like launching a mini web app or something along those lines, then the site should say next to the link that it will open a new window, as I've seen done before. Or I think the little floating box approach could be quite elegant, something like Panic's bubble that appears over Coda's download link. (http://www.panic.com/coda/)
I hate to point it out, but you missed one crucial thing in your cursor designs! Most browser have a pointing hand for links, so it'd make sense to use that as the basis for a new design.
@ Joshua
Keeping it simple is usually a good idea, but in this case it would be altering the site's coloring scheme etc. And color is a) hard to remember b) unreliable (against different background colors etc)
@ Syphon
You're absolutely right. doh! The designs should be based on the 'finger pointing hand'.
And although I agree it's often an indication of a poorly designed site, it doesn't seem fair to still let the user suffer to let the site-owner learn through user-attrition. This *seems* like a fairly simple solution to a common problem.
You may have highlighted another factor though: in the same way I ignored the hand icon when focussed on my target, the link, a user may also ignore/not see whatever icon we come up with.
I agree Panic's stuff is very nice — and maybe something is possible in that manner, without being too obtrusive.
A fried (thank Jeremy!) pointed out how the Konqueror browser does it:
Uploaded with http://skitch.com' rel="nofollow">Skitch!
I think the user should know what a link will do before he decides to move his mouse over it. This solution would allow users to interrupt and change their action while it is already in progress. A better solution would be to indicate what links do even before users decide what they want to do with a link; i.e. the link itself should indicate whether it opens a new window, perhaps with a small icon next to the link.
And yes, the best solution is to never open new windows at all, but leave the choice of where new links go (in a new tab, a new window, or the same window) up to the user.
@ Keith
I should have made my color idea clearer. when a user puts the pointer over the link the color would change to indicate if it was a new window vs tab. this should be a browser based behavior rather than a site based behavior.
while the icon approach is nice the first time a user moves over a link, I think the logo approach is more intrusive than you may think, not to mention the aforementioned response time issue.
Nice designs Keith and great to see the evolution of the idea as well as the community collaboration approach.
I have to say I agree with LKM though - that the best solution is to not open them in new windows at all and the second best solution is to inform the user before they hover their mouse over it.
I'm a fan of the cursor-changing behaviour - if I've found a link that I'd like to follow, I'm going to move the pointer to it anyway (ie, my decision to click on the link doesn't depend on whether or not it opens a new window).
Once I've reached the link, the change of pointer style tells me what I need to do next - either left-click (if it's a normal link), or right click to select 'Open in this window' (if it's a target=_blank link, indicated by the icon that Keith has posted above).
But generally, +1 for "don't do that". If we didn't have target=_blank, then the user has total control over link behaviour. Left click for this tab, middle click for new tab, end of story.
Of course, my sample size is only one, so take with a grain of salt :)
Just a thought, maybe there's a way to preview how the window would open. So if clicking a link:
..replaces the contents of the current window -- a stroked outline could be drawn around the contents of the current window.
..opens a new tab -- a ghost tab could be drawn in the tab bar, in the position the new tab would go.
..opens a new window -- an outline of the new window's position is drawn where the new window will appear.
Flickering outlines of a windows seem like they would be a lot more distracting then a cursor change. And ironically I think the tab effect could be missed, since attention would be on the link/pointer, not the tab bar. But I like the idea of directly indicating what's going to happen, where it's going to happen, instead of hinting it w/ a tiny proxy icon.
**
I think Safari already textually indicates how a link is going to open, along with it's URL, in the "Status Bar" when the cursor is hovered over it. If people aren't noticing this, should the status bar be merged into the cursor some how?
**
This gets more complicated, but maybe there is a demand for some kind of "put this window in the {tab bar, new window}" shortcut. So if you click a link and it doesn't open the way you wanted, you can just tap a key and it will be put in the desired configuration. I look at this as letting the window be it's own preview.
**
While I like the icons (although I'm not sure if h1 woudl stay legible at traditional cursor sizes) -- the whole idea makes me a little nervous, because in a way it's further codifying a behavior that gives people problems, instead of looking at alternatives. But at the same time, there's no reason cursors couldn't be the best alternative :-).
Thanks for all the great points, Vincent. I would add that having 'ghost tabs' appear would make for a clearer interaction, I'm guessing it would be distracting as it appears out of the corner of your eye. All this stuff needs testing though — I'll get working on my Flash skills!