Indiciating within-page links (fragment identifiers)

Question

There are three types of targets for for a link:

1. Different page in a different application
2. Different page within the same application
3. Resource within the current document
   ^{typically provided by a fragment URI (i.e. #Section2)}

Existing research: The following questions help to provide insight on ways to distinguish between Type 1 & Type 2 (but none offer any comment on differentiating between Type 2 & Type 3):

• External links: Whether & how to distinguishing them from internal links, and to open them
• Is there a convention for distinguishing internal and external links in a website?
• How to best show links that are internal

Question: Can this type of clarity be helpful for an end user, and how best to accomplish it?

The use case I have in my in when a page has dirty state and the user doesn't know if links, internal or external, will cause the new page to reload. In some instances, even if the link is to read something else lower on the page, the user may have reticence in clicking and risk losing any current state of the application.

Here's an idea for each of the three types:

Answer 1

The use case I have in my in when a page has dirty state and the user doesn't know if links, internal or external, will cause the new page to reload. In some instances, even if the link is to read something else lower on the page, the user may have reticence in clicking and risk losing any current state of the application.

Thanks for clarifying this use case.

To make your design more forgiving, you should make sure that all the clicks that the user can follow are "safe," meaning that the user should never be surprised to lose a draft or other dirty state as a result of clicking on something that you offered them.

You can try tricks such as the iconography you mentioned but they are a bit unkind as there isn't a broadly recognized icon for what you're asking, and it pushes the work of learning that icon and the difference between type 2 and type 3 links onto the user. (There is a somewhat broadly recognized icon for a helper tooltip, the question mark in a circle, but that's different from a place to scroll to.)

This doesn't directly answer your question but there are two classical ways of dealing with dirty states:

• Warn the user, before leaving a dirty page, that they're about to lose their unsaved draft, unsubmitted form, etc. and give them an opportunity to cancel navigation. This can be done at the browser level with onBeforeUpload warnings, and then it'll work with both external and internal links; or it can be done in your application code in which case it'll work with internal links only but you can style it a bit better.

• Silently and continuously save the current draft somewhere so that even if the user navigates away they will be able to resume where they were. Typically this is what mobile native apps are forced to do because they are liable to be evicted by a phone call at any point in time. It can be done in conjunction with the previous method for the cases where you haven't saved yet. This isn't always easy to figure out storage here but it's a better design.

Answer 2

Ideally the user will only be concerned about clicking a click when the user has made some changes on that page. In such scenarios,the link is supposed to open in a new tab regardless of the type of link.

For all other scenarios, where the user is supposed to just browse the content,it is better that instead of symbols, show a message on hover for external links stating that "clicking on this will open a new page" and leave the internal links as is.