11 ms·
Links are not buttons (2013)
- deleted 5y ago[deleted]
- superkuh 5y agoEverything is a button now that javascript applications have replaced HTML documents. And there are no such things as anchors or links anymore. They are not URLs but instead triggers for more javascript execution. We're, unfortunately, well past this minor problem and onto much more serious ones that eclipse it.
- chociej 5y agoTBH I don't care too much what someone does with a button or link, but if hold Ctrl and it doesn't open in a new tab, I'm gonna be grumpy.
- Kelamir 5y agoHold control to open links in new tabs?! Woah! That's so much better than using middle mouse button, which is just suffering. Thanks chociej :)
- kaibee 5y agoI have one of those fancy gamer mice (Logitech G700S) and I bound the most prominent thumb button to middle-click. Haven't looked backed, making scroll-wheels clickable was a mistake.
- hypertele-Xii 5y agoScroll wheels themselves are a bad implementation of a good idea. I bought a cheap USB volume control knob and used AutoHotKey to rebind volume up/down events into wheel scrolls. Productivity increased like crazy! Scrolling is no longer a chore, it's a pleasure. I even went the extra mile and coated it with rubber for a good grip.
- Ashanmaril 5y agoWhy is a 2-handed input better than a 1-finger input?
- marcosdumay 5y agoIt certainly depends on your hardware. The GP is just rooted in a completely different experience than yours.
- wussboy 5y agoI have always used Gesturefy to make right-click and drag down to open in a new tab. I don't know where I originally picked up this gesture...maybe Opera in 2003? But I've always loved it and use it a hundred times a day.
- jibbit 5y agoTwitter seems to have recently (partially) given up on <a> tags, meaning i can no longer right-click to open in a new tab - it is infuriating
- anthk 5y agohttps://nitter.net https://nitter.net
- dredmorbius 5y agoChronically rate-limited, use an alternative. (I could mention one that works, but that will eventually of course just compound the problem. So my secret fishing spot remains secret ;-)
- blewboarwastake 5y agoYou can use this extension: https://github.com/SimonBrazell/privacy-redirect https://github.com/SimonBrazell/privacy-redirect and use the "use a random instance" option
- dredmorbius 5y agoThanks, useful.
- thitcanh 5y agoSo you do care since only links follow your browsers’ behavior. Nothing else can be right-clicked to show “Copy link address” in the dropdown for example. The golden rule is that if a button opens a link to a page that has its own URL, it should be a plain anchor tag. You can apply whatever JavaScript on top of it to “ajaxify” it, as long as you ignore altered clicks (ctrl, cmd, shift, etc)
- anhanhanh 5y agoThat's just not true. Well known and widely used libs such react-router are an evidence of that.
- ehnto 5y agoIt's tricky to balance user expectations with semantic HTML now that the web has evolved so far. The easiest example I have from my industry is a product card in a grid of products. There really is no correct spot to link it in some designs, but the user expects to click any part of the box and be taken to the product page. So you wrap the whole box in an anchor tag, which has its own host of problems. As you said though, that is a bygone problem, this ship has sailed in the land of SPAs. Even a simple blog is an SPAs these days.
- ravenstine 5y agoUser expectations, or executive expectations? In my experience, the effective expectations of users are remarkably low. If you were to survey users, you'd get the impression that users are very particular. In reality, users tolerate all sorts of things that most of us on HN would consider primitive or nearly broken. If most web applications actually relied mostly on constructs provided by the browser/DOM rather than JavaScript, the average user wouldn't notice or care. But there are product owners who power trip on the possibility that they too could be just like The Google, so they want everything to be unnecessarily animated and dynamic. On top of that, many of them want Silicon Valley programming at San Fernando Valley prices, so not only do they request that their web applications be unnecessarily complicated, but the junior devs they hire are given no direction and the code gets bloated, wrecking performance (which matters more than "delightful" UIs).
- ehnto 5y agoI am entirely inclined to agree with you. It is definitely perpetuated by project stakeholders, even developers wanting to try new tech. But now that we have spent years training eCommerce user behaviours you do find that people will be busy clicking everything but the product title, arguably the most semantic place to put the anchor, so it may take a user a few goes to get where they're going. The user might not care but many of the project stakeholders do. While I am an evangelist of a utilitarian, semantic web, I feel it's an idealism that hasn't survived it's encounter with the real world in commercial software. We went from being worried about javascript image sliders being too heavy, to making the client compute and render the entire application, in about 8 years. I think the trajectory is clear, and I doubt we'll have a watershed moment where the whole tree of stakeholders suddenly wants less.
- lunfard00 5y agoIn 2013 most people were happy with every new shiny app, and now that web is looking more and more like an app, is that an issue?
- anchpop 5y agoThe FUD about SPAs and Javascript on HN is insane. Here's my personal site: https://chadnauseam.com/ https://chadnauseam.com/. It's a SPA. It loads fast. There are such things as anchors and link (inspect element if you like). They have URLs and you can ctrl-click to open in a new tab. (The biggest proble with it is that I've been playing around with some js to animate a fade-in effect on page load, and it seems a little laggy and makes the site not work with javascript disabled. If I can't fix those issues I'll probably remove that in a few days.)
- bobthepanda 5y agoCouldn’t you just do fade in with CSS?
- Ashanmaril 5y agoThe Discord/Twitter "buttons" on your site actually highlight one of the issues here. You can't open them in a new tab, or hover to see where they're taking you. They also don't make the mouse react properly to being on something clickable (though that could be fixed with a `cursor: pointer` style)
- tshaddox 5y agoWhich is actually a clear illustration of the point: that you have to go out of your way to make "link-like" things that aren't actual links. Clearly whatever framework or rendering library the site is using supports client-side navigation via real working anchor tags. But for some reason, they decided to not use those for the social media widgets.
- deleted 5y ago[deleted]
- frosted-flakes 5y agoHistorically, only links got the pointer (hand) cursor, not all clickable things. Buttons and everything else kept the regular arrow cursor. Desktop software on all operating systems has always worked like this. However, this convention has been muddied a lot on the Web in the past few years, but I still like to follow it.
- robertoandred 5y agoYou're not understanding the semantic and UX reasoning behind this article. JavaScript has no relevance to it at all.
- lfowles 5y agoOne pet peeve of mine with the button-ish links is that sometimes they only work if I click on the text itself.
- dheera 5y agoThis is usually caused by lazy devs who use <div class="mybutton"><a href="javascript:dosomefoo();">foo</a></div> instead of <div class="mybutton" onclick="dosomefoo();" style="cursor:pointer;">foo</div> It's also possible they were trying to support old versions of MSIE in the former.
- bobthepanda 5y agoThe latter is not WCAG compliant. Really the <a> tag should wrap the div, not the other way around.
- simonlc 5y agoI think wrapping a div with an <a> element is now valid, you probably want to only wrap inline elements like a <span> with an <a> when possible. Imo it's a better practice. It also avoids having large "white space" areas that are clickable, when only the text should be clickable. (Like when you wrap an <h1> with an <a> for example.)
- bobthepanda 5y agoThe original comment describes this issue with buttons, where presumably clicking the non-text portion of a button is a feature, not a bug.
- bobthepanda 5y agoTo add on, clickable whitespace is more of a feature than a bug generally now, because at least in mobile-web world the worst possible thing you could do is make your touch target extremely small by making it only the icon rather than a standard touch target size centered on said icon.
- mr-wendel 5y agoThe problem is that links provide a very reliable way to perform a controlled HTTP request to get a dynamic response from the backend.... without using JavaScript. I love JavaScript, but if device reusability is a serious concern then JavaScript is the elephant in the room, not this topic. Is it available? What version is supported? What quirks does the engine have? To be fair... it was posted in 2013 :D. The only working alternative (editing if I stand corrected!) using buttons is to make them form buttons. Now otherwise intuitive behaviors (e.g. forward/back, refresh) are laden with "you're about to resend data!" warnings that completely break the flow. To me, it makes perfect sense why this trend evolved. Most people agree with the underlying premise about user expectation on button vs link. Dressing links up as button is a direct response to that. I understand the technical arguments, but users care what it looks like and how it behaves, not how you implemented it. Edits: - Yes, you can use <form method="get"...> without scary browser warnings. It just gets a but ugly if you have lots of buttons, as each needs its own form wrapper. - 303 redirects to POST request are a handy pattern to be aware of no matter what :)
- nathcd 5y ago> The only working alternative (editing if I stand corrected!) using buttons is to make them form buttons. Now otherwise intuitive behaviors (e.g. forward/back, refresh) are laden with "you're about to resend data!" warnings that completely break the flow. If anyone is looking for a solution to this, you can respond to a POST with a 303 (See Other) redirect. There's even a Wikipedia page for this pattern: https://en.wikipedia.org/wiki/Post/Redirect/Get https://en.wikipedia.org/wiki/Post/Redirect/Get
- Groxx 5y ago<form action="whatever" method="get"> or has that not been around for long? I haven't found anything stating when it first arrived.
- tesseract 5y agoSince HTML 2.0 at least. Before that I think the method was specified as part of the action attribute.
- dheera 5y agoBig pet peeve: Web apps where some buttons look like buttons and some buttons look like links. Everything that initiates an action of some sort should look the same, damnit.
- runarberg 5y agoI see your point, and used to share it. But recently I’ve worked with professional designers that use this pattern quite a lot and my mind is now changed. For example I see nothing wrong with a link to e.g. a creation form looks like a button, nor is nothing wrong with a destructive action to have the lower visual weight of a link (e.g. delete this repo; flag this comment; etc.).
- josephwegner 5y ago_Looks awkwardly at the HN "flag" button_
- dredmorbius 5y agoThat ship has flown on some very long legs.
- dmitriid 5y agoI give you one of the biggest abusers: Google's Material Design, https://material.io https://material.io Each design iteration of that page keeps using buttons for links, links for buttons, links that look like plain text etc.
- thitcanh 5y agoKinda, but there’s no way a “Contact us” call-to-action in the middle of a hero is going to look acceptable as a plain underlined blue text. Some links need to be boxed and that makes them look like buttons. Not a lot of wiggle room there.
- blackbrokkoli 5y agoI agree with the author...partly. Sure, <divs> and <spans> are not buttons and should not ever be used as those. Knowing and adhering to standards, especially when they are there for accessibility, is an excellent thing. But in some cases, making links links instead of buttons (and similar scenarios) just means exposing internal works to the user. Say I have a SaaS with the classic "GET STARTED NOW" button on the landing page. Now I change my tech stack from something classic like Rails or Lavarel, where "get started" probably means a link to the signup page to some fancy JavaScript which triggers the action of overlaying a signup form. Would you really agree that the HTML for my "GET STARTED NOW" button should change depending on what kind of method my app uses?
- mwcampbell 5y ago> some fancy JavaScript which triggers the action of overlaying a signup form Don't do that. Having the signup form be its own page is simpler and less cluttered, thus better for the user.
- minitech 5y ago> Would you really agree that the HTML for my "GET STARTED NOW" button should change depending on what kind of method my app uses? Indeed not! “Get started now” should always be a link. If you want to give it fancy behaviour, you can attach an event listener to it that cancels the default one (mind the modifier keys).
- eximius 5y agoButtons do something. Links go somewhere. Don't cross the streams.
- commandlinefan 5y ago> Buttons do something > Links go somewhere Well... all the way back to HTML 1.0, form submission buttons also "went somewhere". It was quite a while before the concept of any interaction not reloading the entire page came along. There's nothing wrong with buttons that go somewhere, and a lot of the web is designed around this.
- giantrobot 5y agoNo, form submit buttons did something i.e. submitted the form. While this had the effect of going somewhere the expectation was straight forward and obvious. Using forms as links was roundly advised against.
- Ronson 5y agoThis is really the best advice in a nutshell.
- marcosdumay 5y agoThere are many applications where "doing something" technically means going into another URL, and interacting with it. Those should be links anyway (the technical meaning beats the UX one), but I see no problem on styling them as a button. Just don't style buttons as links.
- thex10 5y ago> Just don't style buttons as links. My designers keep doing this, sadly. I mean, they don't _realize_ they're doing this. But they will have an element on the page where a user clicks on it to do some action (not navigate to another page), and they will style it to match the site's links. It unfortunately seems to be a very popular pattern.
- deleted 5y ago
- tootie 5y agoHis main points are about accessibility but there's a lot of overlap between accessibility and SEO. Google needs semantic tags to understand your site. It will treat any <a> as navigation and won't do the same for <button> or any other approach. The basic premise that <button> is for CTAs and <a> is for navigation is the golden rule. You can style either anyway that you want.
- ironmagma 5y agoHonestly, if you spend energy worrying about this issue, it's like using a bucket to bail water out of a sinking cruise ship.
- thitcanh 5y agoLet your ship sink, mine will have one fewer hole.
- ironmagma 5y agoFixing your own website is fine, I’m just saying that unless a standard to fix this in a systematic way comes along, 99% of the web is still going to be unusable. For example a reasonable solution would be <button href=‘...’>
- paxys 5y agoI think 90% of the misuse arises from devs not realizing that they can use a <button> or <a> (or whatever else is correct in that context) and still style it however they want.
- thitcanh 5y agoThe other 10% is from people giving up unstyling buttons. If I remember correctly they need more than 10 lines of CSS to undo all kinds of weird specific CSS that <button> has. Maybe nowadays it can be done with `all: initial` Not an excuse, but it can be frustrating.
- hnarn 5y ago> The other 10% is from people giving up unstyling buttons. Maybe that's an indication that unstyling a button is a really, really bad idea?
- thitcanh 5y agoWhy would it be a bad idea? Is styling your site a bad idea?
- hnarn 5y agoI just think that a form button is something that looks a specific way for a reason, and that styling shouldn't break fundamental expectations. But that's obviously a subjective opinion, people can style their pages however they like, I just don't personally like design that lies to me.
- _greim_ 5y agoI think the converse—buttons are not links—doesn't get enough attention. The litmus test is that if clicking it is supposed to navigate, you should also be able to shift+click or middle-click to open it in a new tab, or drag it up to your toolbar to make a bookmark.
- thitcanh 5y ago<button> is not commonly mis-used as a link. I do agree that <div onclick="goTo('/contacts')"> and its equivalents are too damn common and just show complete lack of knowledge of the platform. <a> is the core element of the World Wide Web, without which there wouldn’t be a web.
- pottertheotter 5y agoI don't know what it is that people do that breaks being able to open a link in a new tab, but there's little I hate more than that. Especially on an ecommerce site where I'm likely to open several products in a separate tab. Some break middle clicking but I can still right click and select "open in new tab" from the menu. But there's others that don't even allow that. It's awful.
- jspash 5y agoI was recently required to add some JS to our product links from the search results pages. It’s a click-jacking script that sends tracking data to Google Analytics. There is a callback that fires when GA is happy that it got the goods. When that signal arrives, we then forward the user to where they wanted to go. The entire thing makes me feel dirty. The data collected is never even looked at. And yes, it breaks middle-click and right-click behaviour. Anyone hiring Rails devs anymore? ;)
- sfvisser 5y agoMany single-page-apps, and unfortunately also many regular looking pages, fetch new content using Ajax and splice it in the page dynamically. This has some obvious advantages for some use cases: preserving local state, fast refresh, less duplicate data fetching from the server, etc Downside is those are not links and opening in a new tab doesn’t work by default. It’s fixable in most cases, but additional work. Luckily modern frameworks like Next.js make it easy to build apps and pages that have best of both worlds.
- lights0123 5y agoAnd never use href="#" or href="javascript:void(0)": middle-clicking on it will lead to unexpected results. I'm looking at you, Hacker News
- frosted-flakes 5y agoYeah, the voting and collapse buttons should really be actual buttons, not links. It's fairly trivial to make buttons look like links if that's the desired effect.
- adsfasdfdsfg 5y agoHistorically, styling buttons wasn't supported. The result of styling an input element of type submit and a button element were different too. It eroded adherence to proper semantics. I think people are still used to the workaround which is use an anchor element.