3

A long time ago links and actions on web pages only served to navigate you to another webpage or process something on the server. Nowadays, many links and buttons are used to interact with the current page: expanding content, launching modal dialogs, showing popups, or toggling display settings.

This introduces a new complication for modern web browsing in situations where users don't want to navigate away from the page. For example, in the middle of filling out a form, let's say you don't understand one of the terms, but there's a link next to it for more information. That's great, but you don't know if clicking that link will take you to a new page and clear all your progress. With any luck, the link will either display inline help or will open in a new tab (target="_blank"), but neither of these are transparent to the end user. Users can try to force a new tab to open with a middle click or by right clicking, but this usually isn't handled well when the click was only being used to trigger a page event.

One solution is to explicitly indicate external links with an icon like this: External Link Icon

But this leaves a lot to be desired. First, in the absence of this icon, it's still not entirely clear to the user if this design is being uniformly applied on the current page. Second, this is typically only used to indicate sites on a different domain. If the link navigates you to another page on the same site, the icon is unclear.

One way to handle affordance is to use a chevron to indicate collapsable controls

Chevron Example

But that isn't applicable in a lot of situations that will result in popovers or modals.

When building modern web applications, how can you indicate that an action will only affect the current page?

2
  • 2
    I'd say: be explicit about these things, when clicking a link either warn the user that he will loose his work (bad), simply autosave the data (better) as he leaves, put it in the link (e.g. "will navigate to different site") (beats the just-a-logo) or as you said, provide some inline indication that doesn't look anything like a "I'm going away link" e.g. an information icon with a tooltip, a modal window, an accordion/dropdown... whatever you do, be consistent!
    – Xabre
    Sep 10, 2015 at 17:41
  • @kyleMit great question, however there are so many variables, i am thinking of a way to formulate my answer correctly haha.
    – Stanley VM
    Sep 10, 2015 at 19:51

2 Answers 2

2

How about a dashed underline for the hyperlink?

local link   
- - - - -

link to another page
____________________

This is how Help files did it in the 90's. This also has the advantage of keeping the most common use for a hyperlink (linking to another page) the same, and changing the affordance for the "new" type of link. Links that popup/expand within a page are much newer than the classic hyperlink to another page

1

The icon does make sense, of opening in a new window. But it can only be used for a website that operates say 90% on the same page.

If you happen to have every possible link open on a new page, then the icon becomes useless.

However, I believe the best way to tackle a new window is to open it in a new tab. So, you basically set an anchor point for the user to navigate to the previous tab if he wants to and still viewing the newly opened tab.

For example, if you have 10 links on a webpage out of which 9 show up on the same page, you could have an icon to indicate that the 10th link will open up a new tab.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.