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
Click to read more ...