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?