2

Over the years with applications going more 'SPA' like I have noticed many sites using JavaScript click handlers for websites links which are visually a normal hyperlink (the login link on figma.com for example).

enter image description here

All of the links in the navigation here are <a href=""> except the Log in and Sign Up options, both which open a popup.

Personally, if I'm both trying to login but perhaps also read the Blog link I might right click one or both and use browser functionality to "Open in new tab" leaving me with two tabs open.

By putting no <a> element on links (I can more forgive the button) it prevents me from using browser functions I might expect which I find frustrating.

Has this been discussed before? is it an anti-pattern? Is there a technical way to give the normal <a> behaviour as well as the JavaScript popup behaviour if I'm not right clicking?

Improve this question
4
  • 2
    Why would you use anything else than an <a> for a link? That's the original problem. Ist it a link? Yes: use <a>. The popup could be inserted somehow else, but you still should use a <a>. It is a very bad idea to not use a anchor. It breaks user behaviour for no reason but purely design and is exactly why the general DAU exist, because "cool designs" ruin functional patterns.
    – marvinpoo
    Jul 22, 2019 at 8:34
  • 2
    Personally I really feel that way. I usually use the middle mouse button to open stuff in new tabs and this trend has made me do annoying workarounds of clicking the button and then clicking the browser back button with the middle mouse, to open the old site in a new tab. Though in some cases it's debatable, e.g. when it just opens a dialog and not a new page, as on Figma.
    – Big_Chair
    Jul 22, 2019 at 8:49
  • 1
    @Big_Chair as I am a keyboard nerd, I prefer using CTRL + Left-click, this sadly doesn't work either with these toxic patterns
    – marvinpoo
    Jul 22, 2019 at 9:07
  • 1
    @marvinpoo I probably should have been more specific, the Log in link is an <a> element but it has no href attribute and the click behaviour is added with JavaScript
    – dougajmcdonald
    Jul 22, 2019 at 11:49

2 Answers 2

Reset to default
2

For elements that already take the user to a clearly separate screen, navigation functionality of a link is definitely preferred.

For some other elements the click and the Open in New Tab gesture perform different things. The Review Queues icon in the top-right corner of this website opens a pop-up menu if I click on it, but takes me to a much bigger, separate screen of Queues if I open it in a new tab.

I think the Login button in the question falls in this category, as the behavior is pretty clear and desired. But since it brings extra implementation cost (building two separate views or preserving the state of the modal), the team chose not to expend that effort.

Review queues icon

Yet other elements don’t make sense to navigate at all. As I’m typing this answer, I see formatting buttons above. What would happen if we could open them in a new tab? Possibly the best implementation would open a copy of the page with my message in bold and even that is poor, because I would have two copies of the unfinished answer.

Formatting toolbar example

None of this excuses using <a> with an invalid href attribute, however. If the decision has been made to not support Open in New Tab functionality, the element used must be a <button> to make sure the browsers do not show the Open in New Tab functionality.

<a href="#"> or <a href="javascript:void(0)"> and the like are strictly engineering mistakes, as they advertise a functionality that does not work and leaves the user perplexed as to what happened.

Improve this answer
1

Use the correct tool for the correct work

I think problem here is the definition of the action. Let's take the "log in". What do you want? Let the user log in the same page? Or do you want to send them to a new page in order to log in and basic interactions (forgot password? , for example)?.

If you can define it, you can decide if you want to put an <a> element or a <button>. Why? Because UX (specifically a11y) can improve (or worsened) if you don't use the correct element for a semantic HTML.

If you want to let users log in the same page, you can put a button and open a modal/popup in order to give the actions.

If you want to send users to another page, you can put a link and do the flux there.

Another ways could pose a risk in a11y with screen readers and similar even with aria labels as well as an antipattern. So the best practice here is using the correct element in a well defined flux.

Improve this answer

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.