How to differentiate actions that navigate away from a webpage vs interact with the page

Question

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:

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

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?

Answer 1

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

Answer 2

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.