Fixing the UX of hyperlinks
User Interfaces should be predictable. Not like suspense thrillers where you don’t know what’s coming next. Users should be aware of the consequence of the actions they take, no hidden surprises. How did we miss such a simple UX rule when implementing the anchor tags?
Problem
When I am on a web page and come across a link, there are times when I would like not to leave the current page and open the link in a new tab or in a new window, and there are times when I am okay with the link opening in the same page.
For instance let’s say I would like to take a quick look at my Medium profile while I am writing this article in the Medium editor
I would not like the profile page to replace the editor in this case but rather would like it to open in a separate tab. If this had been a desktop or a mobile app, I would have been sure of the profile page replacing the current one. This should give you the idea of the problem I am talking about here.
As a result I find myself doing this a lot whenever I come across a link, right click -> open in new tab/window or use the shortcut ( command + click ) . It makes me feel in control of the interface.
Though subtle or may be very subtle for most, I find this theft of control rather outrageous. I took a stab at trying to solve this as described below.
Solution
We need an indicator icon, that shows up when hovering over a link to tell whether the intended page will open in (a) new tab, (b) new window or (c) in the current page, the second being very rare nowadays, but let us still consider it as an option.
If you can’t make out, the first icon indicates the link will open in a new tab, the second, in a new window and the third tells clicking on the link will open the page in the current page, replacing the existing content.
Allow me to explain the third icon, it’s not all that complicated. Picture an arrow with a conical head coming towards you, what do you see? Exactly.
Here are a couple more revisions of the icons.
I settled with these basic shapes.
The question that comes up next is where do you position these icons? We can put them on the left of the hovered link, but there are things like bullet lists and that might conflict with this choice of position. Moreover placing these icons beside link texts can result in hiding the text written on sides of inline links.
Another option is to transform the cursor itself into the required indicator icon, let’s try not to discuss this.
Top seems fine or bottom when the window runs out of room.
So here is how the flow goes, find a link you’d like to visit and hover over it. The Indicator icon pops up showing where the linked page will open in.
Not only that, now move your cursor over the icon to be presented with other options to open the same link in different locations.
The gif below shows an use case of this solution.
What do you think, is this a problem worth solving ? I would love to hear your thoughts, go ahead, tweet them @NashVail or leave them as a response below.
Thanks for reading, have a good one!
